in the postbit template; styled here to match .post-content__topline's quiet meta-text treatment so it reads as an intentional, secondary annotation. :empty keeps it from taking up space for anyone without permission to see it. */ .post-iplogged { margin-top: 6px; color: #697382; font-size: 11px; text-align: right; } .post-iplogged:empty { display: none; margin: 0; } .post-iplogged a { color: inherit; text-decoration: underline; } .post-card:not(:first-child) .post-author { padding-block: 8px; } .post-card:not(:first-child) .post-author__details { gap: 2px; margin-top: 7px; } .post-card:not(:first-child) .post-content { padding-block: 8px; } .post-card:not(:first-child) .post-content__body p { margin-bottom: 7px; } .post-card:not(:first-child) .post-content__footer { margin-top: 6px; padding-top: 5px; } /* Forum thread list view */ .forum-heading { min-height: 62px; } .forum-heading h1 { font-size: 31px; } .forum-heading__description { margin: 7px 0 0; color: #394352; font-size: 13px; } .forum-toolbar { margin-top: 16px; } .thread-list { overflow: hidden; margin-top: 13px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); } .thread-columns, .thread-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 180px; } .thread-columns { align-items: center; min-height: 31px; padding: 0 18px; color: #3f4959; background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: 13px; } .thread-row { min-height: 52px; padding: 6px 18px; border-bottom: 1px solid var(--border); } .thread-row:last-child { border-bottom: 0; } .thread-info, .thread-latest { display: flex; align-items: center; min-width: 0; } .thread-info { gap: 14px; } .thread-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: #5b697a; } .thread-icon .icon { width: 27px; height: 27px; stroke-width: 1.5; } .thread-row.is-pinned .thread-icon { color: #aa1741; } .thread-info__copy { min-width: 0; } .thread-title { display: inline; color: #073f72; font-size: 15px; font-weight: 700; line-height: 1.15; text-decoration: none; } .thread-title:hover { text-decoration: underline; } .thread-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: #596679; font-size: 12px; line-height: 1.1; } .thread-pages { display: inline-flex; gap: 4px; } .thread-pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; color: #566575; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 2px; font-size: 10px; text-decoration: none; } .thread-stat { align-self: center; color: #253247; font-size: 13px; } .thread-latest { gap: 10px; } .thread-latest .avatar { width: 34px; height: 34px; font-size: 10px; } .thread-latest__copy { min-width: 0; } .thread-latest__name { display: block; color: #07588c; font-size: 13px; font-weight: 700; line-height: 1.1; } .thread-latest__time { display: block; margin-top: 3px; color: #596679; font-size: 12px; } .thread-bottom { margin-top: 18px; } @media (max-width: 1100px) { .inner-page .page-shell { min-height: 0; } .thread-columns, .thread-row { grid-template-columns: minmax(0, 1fr) 60px 60px 155px; } .thread-latest { gap: 7px; } .thread-latest__copy { max-width: 105px; } } @media (max-width: 900px) { .inner-page .sidebar { padding-top: 18px; } } @media (max-width: 700px) { .inner-page .page-shell { min-height: 0; } .inner-page .breadcrumb { flex-wrap: wrap; align-items: center; height: auto; min-height: 25px; row-gap: 3px; } .inner-page .breadcrumb > :last-child { min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; } .inner-heading { display: block; } .inner-heading h1 { font-size: 25px; } .inner-heading__meta { margin-top: 7px; } .inner-actions { margin-top: 12px; } .inner-toolbar { margin-top: 15px; } .pagination a, .pagination span { min-width: 25px; height: 28px; padding-inline: 6px; } .page-sort { margin-left: auto; } .sort-select { min-width: 110px; } .forum-toolbar, .thread-bottom { flex-direction: column; align-items: stretch; } .forum-toolbar .page-sort, .thread-bottom .page-sort { align-self: flex-end; margin-left: 0; } .forum-toolbar .pagination, .thread-bottom .pagination { flex-wrap: wrap; } .post-card { display: block; } .post-author { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); } .post-author .avatar { grid-row: 1 / span 2; width: 42px; height: 42px; margin: 0; font-size: 14px; } .post-author__name { align-self: end; } .post-author__role { align-self: start; } .post-author__details { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 9px; } .post-author__details div { display: block; } .post-author__details dt, .post-author__details dd { display: inline; } .post-author__details dt::after { content: ": "; } .post-content { padding: 10px 12px 9px; } .post-content__body { padding-top: 8px; font-size: 13px; } .post-code { font-size: 11px; } .post-content__footer { margin-top: 8px; } .thread-columns { display: none; } .thread-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 8px; min-height: 0; padding: 10px 11px; } .thread-info { grid-column: 1 / -1; align-items: flex-start; gap: 9px; } .thread-icon { width: 27px; height: 27px; } .thread-title { font-size: 15px; } .thread-meta { flex-wrap: wrap; gap: 5px; font-size: 12px; } .thread-stat { align-self: start; color: #526073; font-size: 12px; } .thread-row .thread-stat:nth-child(2) { grid-column: 1; grid-row: 2; } .thread-row .thread-stat:nth-child(3) { grid-column: 2; grid-row: 2; } .thread-latest { grid-column: 1 / -1; grid-row: 3; gap: 8px; margin-top: 1px; padding-top: 7px; border-top: 1px solid var(--border); } .thread-latest .avatar { width: 30px; height: 30px; } .thread-latest__copy { max-width: none; } .thread-latest__name { font-size: 13px; } .thread-latest__time { margin-top: 2px; font-size: 12px; } .thread-bottom { margin-top: 14px; } } /* --- MyBB integration compatibility --- */ /* MyBB's global.css (loaded above, via {$stylesheets}) is ~1800 lines of the stock skin: colors, fonts, table classes, buttons, form controls. For plain classes/elements this file already wins on source order alone (it loads after global.css) — no fighting needed there. #container is the one exception: it's an ID selector, which beats every class/element rule on specificity regardless of order, and it hard-codes this old skin's color/type/width onto every page (color, font-family, font-size, line-height, plus 990px/970px legacy minimum widths that alone force horizontal scrolling at any phone width). Reset all of it here, matching body's own values, so nothing nested inside it — including elements this file hasn't touched yet — can end up back in the old skin's look. */ #container, .wrapper { max-width: none; min-width: 0; width: auto; padding: 0; margin: 0; background: transparent; } #container { color: var(--ink) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; line-height: 1.3 !important; } /* Native MyBB controls this theme hasn't given a bespoke template to yet (Forum Jump, Search this Forum, quick reply, polls, moderation tools, thread rating, private messages, ACP-adjacent screens) still render through global.css's stock classes below. These are plain class/element selectors, so — same as above — this file wins them by load order alone; restyling them here means any such area picks up the theme automatically instead of showing the old grey/Tahoma skin until someone notices and gives it a real template. */ table, .tborder { color: var(--ink); font-size: 13px; } .tborder { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; } .thead, .tcat { background: var(--maroon); color: #fff; border: 0; font-size: 13px; } .thead a:link, .thead a:visited, .tcat a:link, .tcat a:visited { color: #fff; } .trow1, .trow2 { background: var(--surface); border-color: var(--border); } .tfoot { background: var(--surface-alt); color: var(--ink); border: 0; } input.textbox, textarea, select { color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } button, input.button { color: #25344a; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 14px; min-height: 35px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; } button:hover, input.button:hover { background: var(--surface-hover); border-color: var(--border-strong); } /* windies_shoutbox_widget renders each shout into a #windies-shoutbox-messages list; give it its own scroll region so a long shout history doesn't grow the sidebar card indefinitely. */ .shout-list { display: block; max-height: 420px; overflow-y: auto; } /* windies_shoutbox_forumbit_avatar / forumdisplay_thread mark new-post state via a `--on`/`--off` modifier (rather than omitting the badge outright) so the base .new-badge rule above can stay untouched — hide the off state. */ .new-badge--off { display: none; } /* a:link/a:visited (0,1,1) above beats a single class like .maroon-button (0,1,0) on specificity — same trap as the #container fights, just against this file's own rules instead of MyBB's. Only bites when the element is a real, unvisited (which is most of these), and only shows as a visible bug where the intended color actually differs from whatever it inherited (.maroon-button's white on maroon was the obvious one — "maroon buttons need white font"). Re-declaring the same colors at a.classname ties that specificity and wins on source order, without touching every call site. */ a.maroon-button { color: #fff; } a.small-outline-button, a.more-button { color: #25344a; } a.outline-button { color: #273345; } a.thread-title { color: #073f72; } a.forum-title { color: var(--ink); } a.footer-brand { color: var(--ivory); } a.top-nav__link { color: var(--ivory); } a.text-action { color: var(--ink); } /* ---------- Dark mode ---------- */ /* Effective theme is decided once, in JS (system preference, or a saved override), and written as data-theme on before first paint — see the inline script in header.tpl. Every dark rule below keys off that attribute alone, rather than duplicating each one inside both a prefers-color-scheme media query and a manual-override selector. */ :root[data-theme="dark"] { --paper: #14161c; --ink: #e9ecf1; --muted: #9aa3b0; --soft-muted: #7d8592; --border: #2c303a; --border-strong: #3a3f4b; --blue-link: #6fb3e8; --surface: #1c1f27; --surface-alt: #23262f; --surface-hover: #2a2e38; } /* The tokens above cover most of the page automatically — anything already written as var(--ink)/var(--surface)/etc. just follows along. What's left is a long tail of one-off hex grays this file never routed through a token (mostly meta text: byline, stat labels, table headers). Rather than rewrite ~30 existing declarations to reference a new token (and risk a mistake in each one), these re-declare `color` for the same selectors, dark-mode only — purely additive, the light-mode rules above are untouched. Two tiers: general secondary text, and the more emphasized navy "name/link" text (thread titles, post authors, latest- poster names) which reads better as a lighter blue than a flat gray. */ [data-theme="dark"] .breadcrumb, [data-theme="dark"] .outline-button, [data-theme="dark"] a.outline-button, [data-theme="dark"] .forum-columns, [data-theme="dark"] .board-icon, [data-theme="dark"] .forum-name p, [data-theme="dark"] .latest-post > div > span, [data-theme="dark"] .forum-heading__description, [data-theme="dark"] .stat, [data-theme="dark"] .thread-stat, [data-theme="dark"] .shout-message time, [data-theme="dark"] .shout-composer input::placeholder, [data-theme="dark"] .composer-button, [data-theme="dark"] .online-count, [data-theme="dark"] .member-names, [data-theme="dark"] .inner-page .breadcrumb, [data-theme="dark"] .inner-heading__meta, [data-theme="dark"] .small-outline-button, [data-theme="dark"] .more-button, [data-theme="dark"] a.small-outline-button, [data-theme="dark"] a.more-button, [data-theme="dark"] .page-sort, [data-theme="dark"] button, [data-theme="dark"] input.button, [data-theme="dark"] .pagination .ellipsis, [data-theme="dark"] .post-author, [data-theme="dark"] .post-author__details dd, [data-theme="dark"] .post-author__details dt, [data-theme="dark"] .post-content__topline, [data-theme="dark"] .post-iplogged, [data-theme="dark"] .post-code, [data-theme="dark"] .reaction-count, [data-theme="dark"] .thread-columns, [data-theme="dark"] .thread-icon, [data-theme="dark"] .thread-meta, [data-theme="dark"] .thread-latest__time, [data-theme="dark"] .thread-pages a { color: #a9b2be; } [data-theme="dark"] .shout-message strong, [data-theme="dark"] .post-author__name, [data-theme="dark"] .post-content__footer, [data-theme="dark"] .post-actions a, [data-theme="dark"] .thread-title, [data-theme="dark"] a.thread-title, [data-theme="dark"] .thread-latest__name, [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { color: #8ec2f2; } /* A handful of surfaces/borders that were never routed through --border or --border-strong either, plus one light-gray badge that would otherwise stay light-on-dark. */ [data-theme="dark"] .outline-button { border-color: var(--border-strong); } [data-theme="dark"] .avatar--more { color: var(--ink); background: var(--surface-hover); } [data-theme="dark"] .cw-masthead__grain { opacity: .12; } [data-theme="dark"] .top-nav, [data-theme="dark"] .inner-page .top-nav, [data-theme="dark"] .site-footer, [data-theme="dark"] .inner-page .site-footer { background: var(--maroon-dark); } /* Theme toggle button in the nav bar. */ .theme-toggle { position: relative; } .theme-toggle .icon--moon { display: none; } [data-theme="dark"] .theme-toggle .icon--sun { display: none; } [data-theme="dark"] .theme-toggle .icon--moon { display: block; } /* Auth pages (login / registration) — carries the same card/input/button language the rest of the site already uses, rather than a new design. Single narrow column instead of the usual page-shell + sidebar: these are focused, one-task pages, and the shoutbox has nothing to add here. */ /* display:block — .page-shell (reused here for consistent page padding/ min-height) is display:grid with 2 columns; without this override every direct child here (breadcrumb, card, footer link) lands in alternating grid cells instead of stacking normally. */ .auth-shell { display: block; width: min(560px, calc(100% - 40px)); margin: 0 auto; padding: 11px 0 32px; } .auth-shell.auth-shell--wide { width: min(920px, calc(100% - 40px)); } /* Forum/thread pages get their title-to-content gap from .forum-heading's/ .thread-heading's own min-height; the bare .inner-heading used here has none, so the card butts right up against the h1 without this. */ .auth-shell .inner-heading { margin-bottom: 24px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 1px 2px rgba(21, 32, 51, .04); padding: 26px 28px; } .auth-card + .auth-card { margin-top: 16px; } .auth-card h2 { margin: 0 0 18px; font-size: 16px; letter-spacing: .2px; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 12px; } .auth-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .auth-field { margin-bottom: 16px; } .auth-field:last-child { margin-bottom: 0; } .auth-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ink); } .auth-field .auth-hint { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: var(--muted); } .auth-field input[type="text"], .auth-field input[type="password"], .auth-field input[type="email"], .auth-field select { width: 100%; height: 42px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; outline: 0; } .auth-field input:focus-visible, .auth-field select:focus-visible { outline: 3px solid #2b7aa4; outline-offset: 1px; } .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .auth-check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; font-size: 13px; color: var(--ink); } .auth-check:last-child { margin-bottom: 0; } .auth-check input { margin-top: 3px; flex: none; } .auth-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } .auth-actions .maroon-button { min-height: 42px; padding-inline: 22px; } .auth-footer-link { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); } .auth-agreement { font-size: 14px; line-height: 1.6; color: var(--ink); } .auth-agreement p { margin: 0 0 14px; } .auth-agreement p:last-child { margin-bottom: 0; } .auth-errors, .auth-shell .error { margin-bottom: 16px; padding: 14px 16px; color: #7a2020; background: #fbeaea; border: 1px solid #eec6c6; border-radius: 4px; font-size: 13px; } .auth-errors ul, .auth-shell .error ul { margin: 6px 0 0; padding-left: 18px; } .auth-shell .error p { margin: 0; font-weight: 700; } [data-theme="dark"] .auth-errors, [data-theme="dark"] .auth-shell .error { color: #ffb3b3; background: #3a1e1e; border-color: #5a2a2a; } @media (max-width: 700px) { .auth-columns, .auth-row { grid-template-columns: 1fr; } } /* Member profile page. Provisional layout per the design handoff — a useful identity/details/activity baseline, not a final product decision on profile history or activity feed shape. */ .page-kicker { margin: 0 0 5px; color: var(--maroon-mid); font-size: 12px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; } .profile-heading { min-height: 66px; } .profile-heading h1 { font-size: 31px; } .profile-heading__meta { margin-top: 6px; color: var(--muted); font-size: 13px; } .profile-card { overflow: hidden; margin-top: 14px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); } .profile-hero { display: grid; grid-template-columns: 174px minmax(0, 1fr); gap: 24px; padding: 22px 24px; background: var(--surface-alt); border-bottom: 1px solid var(--border); } .profile-identity { display: flex; flex-direction: column; align-items: center; padding-right: 24px; border-right: 1px solid var(--border); text-align: center; } .profile-identity .avatar { width: 94px; height: 94px; margin-bottom: 11px; font-size: 30px; } .profile-identity__name { color: var(--blue-link); font-size: 18px; font-weight: 700; } .profile-identity__role { margin-top: 3px; color: var(--muted); font-size: 12px; } .profile-online { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; color: #27735e; font-size: 12px; } .profile-online .online-dot { width: 8px; height: 8px; } [data-theme="dark"] .profile-online { color: #7cd9b8; } .profile-intro { min-width: 0; } .profile-intro h2 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.1; } .profile-intro__copy { max-width: 560px; margin: 8px 0 17px; color: var(--muted); font-size: 14px; line-height: 1.4; } .profile-actions { display: flex; gap: 8px; } .profile-actions .small-outline-button { min-height: 34px; } .profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); } .profile-stat { padding: 15px 16px 14px; border-right: 1px solid var(--border); } .profile-stat:last-child { border-right: 0; } .profile-stat strong { display: block; color: var(--ink); font-size: 20px; line-height: 1; } .profile-stat span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .35px; } .profile-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(245px, .8fr); gap: 24px; padding: 20px 24px 22px; } .profile-panel + .profile-panel { margin-top: 18px; } .profile-panel h2 { margin: 0 0 11px; color: var(--ink); font-size: 17px; line-height: 1.1; } .profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; } .profile-detail { min-width: 0; padding: 11px 12px; background: var(--surface); } .profile-detail:nth-child(4n + 1), .profile-detail:nth-child(4n + 2) { background: var(--surface-alt); } .profile-detail dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .35px; } .profile-detail dd { margin: 4px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; } .profile-about { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .profile-activity { overflow: hidden; border: 1px solid var(--border); border-radius: 4px; } .profile-activity__tabs { display: flex; gap: 20px; padding: 0 14px; border-bottom: 1px solid var(--border); } .profile-activity__tabs a { position: relative; display: inline-flex; align-items: center; min-height: 39px; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; } .profile-activity__tabs a.is-active { color: var(--maroon); } .profile-activity__tabs a.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gold); content: ""; } .profile-activity__item { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--border); } .profile-activity__item:last-child { border-bottom: 0; } .profile-activity__item .avatar { width: 30px; height: 30px; font-size: 10px; } .profile-activity__item strong { display: block; color: var(--blue-link); font-size: 13px; line-height: 1.2; } .profile-activity__item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.3; } .profile-activity__item time { color: var(--soft-muted); font-size: 11px; white-space: nowrap; } .profile-activity__empty { margin: 0; padding: 20px 14px; color: var(--muted); font-size: 13px; } @media (max-width: 1100px) { .profile-hero { grid-template-columns: 152px minmax(0, 1fr); gap: 17px; padding-inline: 18px; } .profile-identity { padding-right: 17px; } .profile-body { padding-inline: 18px; } } @media (max-width: 700px) { .profile-heading { min-height: 0; } .profile-heading h1 { font-size: 25px; } .profile-heading__meta { margin-top: 5px; } .profile-card { margin-top: 13px; } .profile-hero { grid-template-columns: 1fr; gap: 15px; padding: 16px 14px; } .profile-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0 11px; align-items: center; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--border); text-align: left; } .profile-identity .avatar { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; font-size: 21px; } .profile-identity__name { font-size: 16px; } .profile-online { margin-top: 5px; } .profile-intro h2 { font-size: 19px; } .profile-intro__copy { margin: 6px 0 13px; font-size: 13px; } .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-stat:nth-child(2) { border-right: 0; } .profile-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--border); } .profile-stat { padding: 12px 13px; } .profile-stat strong { font-size: 18px; } .profile-body { display: block; padding: 15px 14px 17px; } .profile-panel + .profile-panel { margin-top: 16px; } .profile-details { grid-template-columns: 1fr 1fr; } .profile-detail { padding: 9px 10px; } .profile-activity__tabs { gap: 14px; padding-inline: 11px; } .profile-activity__item { grid-template-columns: 30px minmax(0, 1fr); padding-inline: 11px; } .profile-activity__item time { grid-column: 2; margin-top: -2px; } } @media (max-width: 370px) { .profile-details { grid-template-columns: 1fr; } .profile-detail:nth-child(4n + 1), .profile-detail:nth-child(4n + 2) { background: var(--surface); } .profile-detail:nth-child(odd) { background: var(--surface-alt); } } /* Search page. The mock's Posts/Threads result tabs aren't wired up here — MyBB locks a set of results to whichever mode (posts or threads) you searched with, there's no live re-toggle without re-searching, so a decorative tab pair would just be misleading. */ .search-heading { min-height: 66px; } .search-heading h1 { font-size: 31px; } .search-heading__meta { margin-top: 6px; color: var(--muted); font-size: 13px; } .search-form { margin-top: 14px; padding: 17px 18px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); } .search-form__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 14px 18px; } .search-field { min-width: 0; } .search-field--wide { grid-column: 1 / -1; } .search-field label, .search-field legend { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 700; } .search-field input, .search-field select { width: 100%; height: 36px; padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; } .search-field input::placeholder { color: var(--muted); } .search-field fieldset { display: flex; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; } .search-radio { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 400; } .search-radio input { width: auto; height: auto; accent-color: var(--maroon); } .search-radio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 7px; } .search-field select[multiple] { height: auto; padding: 6px; } .search-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .search-form__hint { margin: 0; color: var(--muted); font-size: 11px; } .search-form__footer .maroon-button { min-height: 35px; } .search-form__footer .maroon-button .icon { width: 17px; height: 17px; } .search-results { margin-top: 18px; } .search-results__bar h2 { margin: 0; color: var(--ink); font-size: 18px; } .search-results__bar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .result-list { overflow: hidden; margin-top: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); } .result-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 145px; gap: 12px; align-items: start; padding: 13px 14px; border-bottom: 1px solid var(--border); } .result-row:last-child { border-bottom: 0; } /* Inline-mod checkbox (moderators only) is a bare
| {$lang->nomessages} |