/* * The Patch Panel (wpForo) in the 2027 language. Forum pages only; loaded after redesign-2027.css * (functions.php, handle keh-tech-forum-2027). From the design review of 28 September 2026 (docs/TODO.md): * one 4px radius, 1px lines, IBM Plex, no colour-coded usernames, a text chip instead of the red pin, * initials instead of silhouettes, one readable line length, and none of wpForo's own furniture that * repeats the site (icon legend, share bar, "Powered by", its second hamburger). * wpForo's selectors are long (#wpforo #wpforo-wrap ...) and its colours sit in wpforo-colors.css, so * this file matches that depth and uses !important only where wpForo sets inline styles. */ #wpforo #wpforo-wrap { --f-line: var(--k-line-l); --f-line-2: var(--k-line-l2); --f-muted: var(--k-muted-l); --f-text: light-dark(#1A2438, #E8EEF8); --f-panel: light-dark(#EDF1F7, #101D35); } /* ---------- One radius, lines not shadows ---------- */ #wpforo #wpforo-wrap :is(.wpforo-post, .wpf-please-login, .wpf-circle, .wpf-sbtn, .wpf-field, .wpf-button, .wpforo-post-content, .wpf-thread-statuses span, .wpforo-comment, .wpf-member-profile-wrap, input, textarea, select, button, .mce-tinymce, .wpf-search-box, .wpforo-profile, .wpf-table) { border-radius: var(--k-radius) !important; box-shadow: none !important; } #wpforo #wpforo-wrap .wpf-thread-posts span, #wpforo #wpforo-wrap .wpf-thread-views span { border-radius: 0; } /* Board icons: wpForo draws a 44px grey ring with an inline style. A 36px square in the line colour. */ #wpforo #wpforo-wrap .wpf-thread-forum > span { width: 36px !important; height: 36px !important; font-size: 1rem !important; opacity: 1 !important; border: 1px solid var(--f-line) !important; border-radius: var(--k-radius) !important; } #wpforo #wpforo-wrap .wpf-thread-forum > span i, #wpforo #wpforo-wrap .wpf-thread-forum-mobile i { color: var(--f-muted) !important; } /* ---------- Names: one colour for everyone ---------- wpForo paints each name in its usergroup colour with an inline style (admins #FF3333). Red reads as an error, and the rank badge already says who is staff. */ #wpforo #wpforo-wrap a[href*="/participant/"], #wpforo #wpforo-wrap .wpf-pa-name { color: var(--keh-bright) !important; } /* ---------- Initials (keh-tech-forum.php replaces the silhouette) ---------- */ #wpforo .keh-initials, .keh-initials { display: inline-grid; place-items: center; flex: none; width: var(--keh-av, 40px); height: var(--keh-av, 40px); max-width: 100%; aspect-ratio: 1; border: 1px solid var(--f-line-2, var(--k-line-l2)); border-radius: var(--k-radius); background: var(--f-panel, var(--keh-surface-2)); color: var(--f-text, inherit); font-family: var(--k-mono); font-weight: 600; font-size: calc(var(--keh-av, 40px) * .36); line-height: 1; letter-spacing: .02em; user-select: none; } /* wpForo styles .avatar as an inline, borderless image; the tile needs its own box back. */ #wpforo #wpforo-wrap span.keh-initials { display: inline-grid !important; border: 1px solid var(--f-line-2) !important; border-radius: var(--k-radius) !important; background: var(--f-panel) !important; color: var(--f-text) !important; padding: 0 !important; vertical-align: middle; } #wpforo #wpforo-wrap .wpforo-post-avatar .keh-initials { width: 64px; height: 64px; font-size: 1.3rem; } #wpforo #wpforo-wrap .wpf-thread-last-avatar .keh-initials { width: 28px; height: 28px; font-size: .75rem; } /* 12px initials */ #wpforo #wpforo-wrap .wpf-thread-users-avatars .keh-initials { width: 36px; height: 36px; font-size: .78rem; } /* Photos: square like the tiles, not wpForo's circle. */ #wpforo #wpforo-wrap img.avatar { border-radius: var(--k-radius) !important; border: 1px solid var(--f-line) !important; padding: 0 !important; } /* ---------- Pinned: a text chip, not a red pushpin ---------- */ #wpforo #wpforo-wrap .wpf-tt-sticky .wpf-thread-statuses [wpf-tooltip="Sticky"] { display: none; } #wpforo #wpforo-wrap .wpf-tt-sticky .wpf-thread-status-mobile { display: inline-flex !important; align-items: center; margin-right: .5rem; vertical-align: .1em; } #wpforo #wpforo-wrap .wpf-tt-sticky .wpf-thread-status-mobile i { display: none; } #wpforo #wpforo-wrap .wpf-tt-sticky .wpf-thread-status-mobile::before { content: "Pinned"; font-family: var(--k-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: .28rem .45rem; border: 1px solid var(--f-line-2); border-radius: 3px; color: var(--f-muted); } /* The status column holds only the pin on a pinned row; without it, the empty box stays as the row's status marker, drawn in the line colour. */ #wpforo #wpforo-wrap .wpf-thread-statuses .wpf-circle { border: 1px solid var(--f-line) !important; background: none !important; } #wpforo #wpforo-wrap .wpf-thread-statuses .fa-check-circle, #wpforo #wpforo-wrap .wpf-thread-statuses .fa-circle-check { color: #1F9D63; } /* ---------- Latest activity, not zero counts ---------- With a young forum the Replies and Views columns mostly read 0, which says "nobody is here". The last-reply column already carries who and when; it is relabelled "Latest activity" in theme.js. */ #wpforo #wpforo-wrap :is(.wpf-thead-posts, .wpf-thead-views, .wpf-thread-posts, .wpf-thread-views) { display: none !important; } /* ---------- Type: one h1, a real h2 step, a readable line ---------- */ #wpforo #wpforo-wrap :is(h1, h2)#wpforo-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--f-text); } #wpforo #wpforo-wrap .wpf-status-title { font-family: var(--k-mono); font-size: .7em; font-weight: 600; color: light-dark(#8A5A00, #FFB547); vertical-align: .12em; } #wpforo #wpforo-wrap .wpforo-post-content h2 { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin: 1.6em 0 .5em; } #wpforo #wpforo-wrap .wpforo-post-content h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.35; margin: 1.4em 0 .4em; } #wpforo #wpforo-wrap .wpforo-post-content { line-height: 1.65; } #wpforo #wpforo-wrap .wpforo-post-content > * { max-width: 70ch; } #wpforo #wpforo-wrap .wpforo-post-content :is(pre, table, .wpforo-attached-file) { max-width: 100%; } /* ---------- Furniture the site already provides ---------- The icon legend (the list explains itself), the share bar (the site has its own share button and no social tracking), "Powered by", and wpForo's own mobile menu toggle, a second hamburger under the site's. */ #wpforo #wpforo-wrap :is(.wpf-forum-icons, .wpf-topic-icons, .wpf-sbtn, .wpf-by) { display: none !important; } #wpforo #wpforo-wrap #wpforo-menu .wpf-res-menu { display: none !important; } @media (max-width: 800px) { /* With its toggle gone, wpForo's menu stays a plain row that scrolls sideways if it must. */ #wpforo #wpforo-wrap #wpforo-menu .wpf-menu { display: flex !important; flex-wrap: nowrap; overflow-x: auto; position: static !important; width: auto !important; box-shadow: none !important; } #wpforo #wpforo-wrap #wpforo-menu .wpf-menu > li { flex: none; } } /* ---------- Sign-in card under the answer ---------- */ #wpforo #wpforo-wrap .wpf-please-login { border: 1px solid var(--f-line) !important; background: var(--f-panel) !important; } #wpforo #wpforo-wrap .keh-please-login-text { font-weight: 600; color: var(--f-text); } /* ---------- Sign-in with Google (Account page, keh-tech-forum.php) ---------- */ #wpforo .keh-google-section { margin-top: 1.5rem; } #wpforo .keh-google-section .nsl-container { margin-top: .75rem; } #wpforo .keh-google-section a[data-action="unlink"] { display: inline-flex !important; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; /* !important: Nextend sets display inline */ border: 1px solid var(--f-line-2); border-radius: var(--k-radius); background: var(--f-panel); color: var(--f-text) !important; font-weight: 600; text-decoration: none; } #wpforo .keh-google-section a[data-action="unlink"] * { background: none !important; box-shadow: none !important; color: inherit !important; font: inherit !important; } @media (hover: hover) and (pointer: fine) { #wpforo .keh-google-section a[data-action="unlink"]:hover { border-color: var(--k-muted-l); } } /* ---------- Critique of 29 September 2026 ---------- */ /* The title band carries the page's h1 (keh-tech-forum.php, keh_forum_band): hide wpForo's own title bar on the index, board and topic pages. Its action links (subscribe, RSS) stay. */ #wpforo #wpforo-wrap.wpft-forum #wpforo-title, #wpforo #wpforo-wrap.wpft-topic #wpforo-title, #wpforo #wpforo-wrap.wpft-post #wpforo-title { display: none; } #wpforo #wpforo-wrap.wpft-topic #wpforo-description { display: none; } #wpforo #wpforo-wrap .wpf-head-bar:has(#wpforo-title) { min-height: 0; padding-top: .25rem; padding-bottom: .25rem; } /* The index breadcrumb was a home icon pointing at nothing. */ #wpforo #wpforo-wrap.wpft-forum .wpf-breadcrumb { display: none; } .keh-solved-chip { display: inline-block; margin-left: .5rem; padding: .2em .5em; vertical-align: .35em; font-family: var(--k-mono); font-size: .32em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; border: 1px solid #2E7D57; border-radius: 3px; color: #B6F0CF; } /* Guests: no controls that only bounce to the sign-in page (voting, comment, answer, add topic). The prompt at the top (keh-forum-guest) and the card under each topic say how to join in. */ #wpforo #wpforo-wrap.wpf-guest :is(.wpf-positive, .wpf-negative, .wpf-add-comment-button, .wpf-answer-button), #wpforo #wpforo-wrap.wpf-guest .wpforo-action-buttons-wrap:has(.not_reg_user), #wpforo #wpforo-wrap.wpf-guest .wpf-head-bar-right a.wpf-button[href*="wp-login.php"], #wpforo #wpforo-wrap.wpf-guest a.wpf-button[href*="wp-login.php"]:has(.fa-feather-alt) { display: none !important; } #wpforo #wpforo-wrap .keh-forum-guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--k-line-l); border-radius: var(--k-radius); background: var(--keh-surface-2); } #wpforo #wpforo-wrap .keh-forum-guest p { margin: 0; } #wpforo #wpforo-wrap .keh-forum-guest-actions { display: flex; gap: .6rem; flex-wrap: wrap; } #wpforo #wpforo-wrap .keh-forum-guest .wpf-button, #wpforo #wpforo-wrap .keh-forum-guest-join { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: var(--k-radius); font-weight: 600; text-decoration: none; } #wpforo #wpforo-wrap .keh-forum-guest-join { border: 1px solid var(--k-line-l2) !important; color: var(--keh-bright) !important; background: var(--keh-surface); } /* Stripes: wpForo's 2-3px accent bars become the site's 1px line. */ #wpforo #wpforo-wrap :is(.wpf-post-head-top) { border-left: 1px solid var(--f-line) !important; } #wpforo #wpforo-wrap :is(.wpf-head-bar, .wpf-footer-title, .wpforo-post-content-top, .wpf-cat-panel, .wpforo-cat-panel, .wpforo-category, .wpforo-topic-head, .wpf-threads-head) { border-bottom: 1px solid var(--f-line) !important; } #wpforo #wpforo-wrap .wpf-navi-wrap { border-top: 1px solid var(--f-line) !important; } #wpforo #wpforo-wrap #wpforo-menu li { border-bottom-width: 0 !important; } /* Badges: no pills. */ #wpforo #wpforo-wrap .wpf-post-starter, .keh-lab-badge { border-radius: 3px !important; } /* Icons: one quiet colour. The solved tick keeps its green; icons inside buttons keep the button's ink. */ #wpforo #wpforo-wrap i:is(.fas, .far, .fa-solid, .fa-regular):not(.fa-check):not(.fa-check-circle):not(.fa-circle-check) { color: var(--f-muted) !important; } #wpforo #wpforo-wrap :is(.wpf-button, .add_wpftopic, #wpforo-menu) i { color: inherit !important; } /* Phone: the forum tabs wrap instead of cutting off at "Rece...". */ @media (max-width: 800px) { #wpforo #wpforo-wrap #wpforo-menu .wpf-menu { flex-direction: row !important; flex-wrap: wrap !important; overflow-x: visible; } #wpforo #wpforo-wrap #wpforo-menu { flex-wrap: wrap !important; } #wpforo #wpforo-wrap #wpforo-menu .wpf-left { flex: 1 1 100% !important; width: 100% !important; } #wpforo #wpforo-wrap #wpforo-menu .wpf-menu > li { width: auto !important; } #wpforo #wpforo-wrap #wpforo-menu .wpf-menu > li > a { padding: .55rem .8rem !important; } } /* Forum lists were 13px beside 17-22px body text (critique persona: slow to scan). */ #wpforo #wpforo-wrap .wpf-thread-title > a { font-size: 1rem; } /* Guests still see which reply is the accepted answer, as a label rather than a button. */ #wpforo #wpforo-wrap.wpf-guest .wpforo-action-buttons-wrap:has(.wpf-toggle-answer) { display: block !important; } #wpforo #wpforo-wrap.wpf-guest .wpf-toggle-answer { pointer-events: none; cursor: default; display: flex; flex-direction: column; align-items: center; gap: .3rem; } #wpforo #wpforo-wrap.wpf-guest .wpf-toggle-answer::after { content: "Accepted answer"; font-family: var(--k-mono); font-size: .68rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--keh-ok-text, #14532D); } /* The vote total means nothing to a guest who cannot vote. */ #wpforo #wpforo-wrap.wpf-guest .wpf-vote-number { display: none !important; } /* With the title moved to the band, wpForo's title bar is an empty strip: no fill, no height. */ #wpforo #wpforo-wrap:is(.wpft-post, .wpft-topic, .wpft-forum) .wpf-head-bar:has(#wpforo-title) { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Ink on cyan, as every cyan button (white was 1.7:1). */ #wpforo #wpforo-wrap .keh-forum-guest a.wpf-button, #wpforo #wpforo-wrap .keh-forum-guest a.wpf-button:visited { background: #3CD0FF !important; color: #04121F !important; } #wpforo #wpforo-wrap .keh-forum-guest a.wpf-button:hover { background: #7ADFFF !important; } /* ---------- Critique of 3 October 2026 (P2 #3) ---------- Topic pages still wore wpForo's grey chrome in light mode; the index showed boards as bare icons. Everything below reads the same tokens in both schemes (--f-* above), so light and dark need no second rule set. */ /* Quotes: the site's callout surface (panel fill, 1px line, 4px radius), not wpForo's grey dotted box. */ #wpforo #wpforo-wrap .wpforo-post-content :is(blockquote, .wpforo-post-quote) { display: block; width: auto; max-width: 70ch; margin: 1rem 0; padding: .85rem 1.1rem; background: var(--f-panel); color: var(--f-text); font-size: inherit; line-height: 1.6; border: 1px solid var(--f-line); border-left: 3px solid var(--f-line-2); border-radius: var(--k-radius) !important; } #wpforo #wpforo-wrap .wpforo-post-content blockquote > :first-child { margin-top: 0; } #wpforo #wpforo-wrap .wpforo-post-content blockquote > :last-child { margin-bottom: 0; } /* Breadcrumb: full names (keh-tech-forum.php lifts wpForo's 19-character cut), wrapping, 24px+ targets, ink that clears 4.5:1 on the page in both schemes. */ #wpforo #wpforo-wrap .wpf-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 0; padding: .35rem 0; font-size: .875rem; line-height: 1.4; } #wpforo #wpforo-wrap .wpf-breadcrumb .wpf-item-element { display: inline-flex !important; align-items: center; min-height: 28px; } #wpforo #wpforo-wrap .wpf-breadcrumb :is(a, span, .active) { font-size: .875rem; color: light-dark(#34425B, #B3BED1); } #wpforo #wpforo-wrap .wpf-breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; min-width: 28px; justify-content: center; } #wpforo #wpforo-wrap .wpf-breadcrumb .wpf-item-element:not(.wpf-root) a { justify-content: flex-start; } #wpforo #wpforo-wrap .wpf-breadcrumb :is(.active, .active span, .wpf-item-element:last-of-type > span) { color: var(--f-text); font-weight: 600; } #wpforo #wpforo-wrap .wpf-breadcrumb i { color: light-dark(#34425B, #B3BED1) !important; } /* Topic header: one flat panel; the stats strip (zero counts, chevron, dots) is gone, as on the lists. */ #wpforo #wpforo-wrap .wpf-post-head-top { background: var(--f-panel); border: 1px solid var(--f-line); border-radius: var(--k-radius); box-shadow: none; padding: .6rem .9rem; } #wpforo #wpforo-wrap .wpf-post-head-top .wpf-post-stat { display: none !important; } #wpforo #wpforo-wrap .wpf-post-head-top .wpf-post-info { font-size: .875rem; } /* RSS, Forum Jump, viewers, Forum Information: flat, on the page surface, same line and radius. */ #wpforo #wpforo-wrap .wpf-button-outlined { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .7rem; background: none; border: 1px solid var(--f-line-2); border-radius: var(--k-radius); color: var(--f-text); font-size: .8125rem; } #wpforo #wpforo-wrap .wpf-button-outlined i { color: inherit !important; } #wpforo #wpforo-wrap :is(.wpforo-topic-footer, .wpf-tools, .wpf-footer-box, .wpf-forum-jump, .wpf-topic-visitors) { background: none !important; } #wpforo #wpforo-wrap .wpforo-topic-footer { border-top: 1px solid var(--f-line); } #wpforo #wpforo-wrap .wpf-footer-box { border: 0; border-top: 1px solid var(--f-line); border-radius: 0; } #wpforo #wpforo-wrap .wpf-breadcrumb :is(.active, .wpf-item-element) { background: none !important; } #wpforo #wpforo-wrap .wpf-forum-jump select { min-height: 32px; padding: 0 .5rem; background: var(--f-panel); color: var(--f-text); border: 1px solid var(--f-line-2); border-radius: var(--k-radius); } #wpforo #wpforo-wrap :is(.wpf-forum-jump-title, .wpf-viewing-users, .wpf-stat-label, .wpf-footer-title span) { color: var(--f-muted); } #wpforo #wpforo-wrap .wpf-topic-id { color: var(--f-muted); white-space: nowrap; } /* Index: the board as text beside its icon (the name lived only in a tooltip). The icon's own tooltip pseudo-elements are replaced by the label. */ #wpforo #wpforo-wrap .wpf-thread-forum { min-width: 9rem; display: flex; justify-content: flex-start; } #wpforo #wpforo-wrap .wpf-thread-forum > span { display: inline-flex !important; align-items: center; gap: .5rem; width: auto !important; height: auto !important; border: 0 !important; font-size: .875rem !important; line-height: 1.3; text-align: left; color: var(--f-muted); } #wpforo #wpforo-wrap .wpf-thread-forum > span i { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 1rem; border: 1px solid var(--f-line); border-radius: var(--k-radius); } #wpforo #wpforo-wrap .wpf-thread-forum > span::before { display: none !important; } #wpforo #wpforo-wrap .wpf-thread-forum > span::after { all: initial; content: attr(wpf-tooltip); display: block; font: inherit; font-size: .8125rem; line-height: 1.3; color: var(--f-text); } /* "By KEH-TECH Status": wrap instead of cutting at "Statu…". */ #wpforo #wpforo-wrap .wpf-thread-last-user a:not([wpf-tooltip]) { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; overflow-wrap: anywhere; } /* Small print: 12px minimum. */ #wpforo #wpforo-wrap :is(.wpf-member-title, .wpf-author-joined, .wpf-author-joined *) { font-size: .75rem !important; } /* Targets: at least 24px tall wherever the look allows (flex centring keeps text where it was). Inline links inside post text are exempt under WCAG 2.5.8 and stay inline. */ #wpforo #wpforo-wrap :is(.wpf-thread-last-user, .wpf-thread-author, .wpf-thread-info, .wpf-post-info, .wpf-post-author-info, .wpforo-post-left, .wpforo-post-head, .wpforo-post-content-top, .wpf-footer-title, .wpf-footer-buttons, .wpf-footer-box, .wpf-topic-navi, .wpf-tag-list, .wpf-topic-rel, .wpforo-topic-meta, .wpf-stat-recent-posts, .wpf-stat-unread-posts, .wpf-stat-tags, .wpf-all-read, .wpf-newest-member, .wpf-latest-post, .wpf-thread-title, .wpf-author-name, .wpf-post-btns, .wpf-content-head) :is(a, .wpf-action) { display: inline-flex !important; align-items: center; min-height: 24px; line-height: 1.4; } #wpforo #wpforo-wrap .wpf-thread-title :is(.wpf-thread-head, .wpf-thread-author-name) > a { display: inline-block !important; min-height: 24px; line-height: 1.5; } /* Phone: one frame, not three. The wrapper's own border and padding go (the page already has its gutter), the tabs and the search icon share one row. */ @media (max-width: 800px) { #wpforo #wpforo-wrap { border: 0 !important; padding: 0 !important; background: none !important; } #wpforo #wpforo-wrap #wpforo-menu { flex-wrap: nowrap !important; align-items: flex-start; } #wpforo #wpforo-wrap #wpforo-menu .wpf-left { flex: 1 1 0 !important; width: auto !important; min-width: 0; } #wpforo #wpforo-wrap #wpforo-menu .wpf-bar-right { flex: 0 0 44px !important; width: 44px !important; min-width: 0 !important; max-width: 44px; overflow: hidden; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; min-height: 44px; } #wpforo #wpforo-wrap #wpforo-menu .wpf-bar-right .wpf-search-form { width: auto; min-width: 0; } }