/* Theme "default" (ADR-026, ADR-027): "Dense information. Calm interface." Plain CSS, no framework. Every color, size and radius comes from the tokens below; dark mode only redefines tokens. */ /* ---------- Fonts (self-hosted, SIL OFL: static/fonts/*OFL.txt) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/noto-sans-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Noto Sans Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/noto-sans-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; } /* ---------- Design tokens ---------- */ :root { /* Color: neutrals */ --color-bg: #f5f7fa; --color-surface: #ffffff; --color-surface-subtle: #f9fafb; --color-surface-hover: #f2f5f9; --color-text: #101828; --color-text-secondary: #475467; --color-text-muted: #667085; --color-border: #e4e7ec; --color-border-strong: #d0d5dd; /* Color: brand and states */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-soft: #eff4ff; --color-primary-deep: #173b66; --color-on-primary: #ffffff; --color-unread: #2563eb; --color-success: #16a34a; --color-success-soft: #ecfdf3; --color-warning: #d97706; --color-warning-soft: #fffaeb; --color-danger: #dc2626; --color-danger-soft: #fef3f2; /* Header (dark bar) */ --color-header-bg: #0f1f35; --color-header-text: #e6ecf5; --color-header-muted: #9fb0c8; --color-header-hover: rgba(255, 255, 255, .08); --color-header-input: rgba(255, 255, 255, .08); --color-header-border: rgba(255, 255, 255, .12); /* Typography */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-base: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 24px; --leading: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Shape and depth */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-full: 999px; --border-width: 1px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04); --shadow-menu: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 4px rgba(16, 24, 40, .06); /* Focus */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, .35); --focus-outline: 2px solid var(--color-primary); /* Layout */ --container-max: 1320px; --container-pad: var(--space-6); --header-height: 56px; --control-height: 40px; --control-height-sm: 32px; --postbit-width: 188px; } /* Dark mode: set data-theme="dark" on . Only tokens change. */ :root[data-theme="dark"] { --color-bg: #0e1522; --color-surface: #151e2e; --color-surface-subtle: #121a28; --color-surface-hover: #1b2638; --color-text: #e7ecf4; --color-text-secondary: #b3bfd1; --color-text-muted: #8c9ab0; --color-border: #243149; --color-border-strong: #31405b; --color-primary: #5b8def; --color-primary-hover: #7aa3f3; --color-primary-soft: #1a2a47; --color-primary-deep: #9ab8f5; --color-unread: #6c9cf2; --color-success-soft: #10291c; --color-warning-soft: #2c230f; --color-danger-soft: #2f1618; --color-header-bg: #0a111d; --shadow-menu: 0 8px 24px rgba(0, 0, 0, .45); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: var(--weight-semibold); } p { margin: 0; } img { max-width: 100%; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: .92em; } hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin: var(--space-4) 0; } [hidden] { display: none !important; } .icon { flex: none; width: 18px; height: 18px; vertical-align: middle; } .muted { color: var(--color-text-muted); font-size: var(--text-sm); } .small { font-size: var(--text-xs); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; left: var(--space-4); top: -48px; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); box-shadow: var(--shadow-menu); } .skip-link:focus { top: var(--space-2); } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .page { padding-top: var(--space-5); padding-bottom: var(--space-10); min-height: 60vh; } /* ---------- Buttons ---------- */ .btn, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-4); font: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1; color: var(--color-on-primary); background: var(--color-primary); border: var(--border-width) solid var(--color-primary); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; justify-self: start; transition: background-color .12s, border-color .12s, color .12s; } .btn:hover, button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); text-decoration: none; } .btn:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-sm); } .btn-secondary, button.secondary, .button.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover, button.secondary:hover, .button.secondary:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); } .btn-ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); border-color: transparent; } .btn-danger, button.danger { background: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover, button.danger:hover { background: #b91c1c; border-color: #b91c1c; } .btn-quiet-dark { background: transparent; color: var(--color-header-text); border-color: var(--color-header-border); } .btn-quiet-dark:hover { background: var(--color-header-hover); color: #fff; border-color: var(--color-header-border); } .button { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-md); font-weight: var(--weight-semibold); border: var(--border-width) solid var(--color-primary); } .button:hover { background: var(--color-primary-hover); color: var(--color-on-primary); text-decoration: none; } button.link-button, .link-button { display: inline; height: auto; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; font-weight: inherit; color: var(--color-primary); cursor: pointer; } button.link-button:hover, .link-button:hover { background: none; color: var(--color-primary-hover); text-decoration: underline; } .danger-link, button.link-button.danger-link { color: var(--color-danger); } form.inline { display: inline; margin: 0; } /* ---------- Forms ---------- */ .form { display: grid; gap: var(--space-4); } .form label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .form label.check, label.check { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-regular); } :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea) { width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); transition: border-color .12s, box-shadow .12s; } textarea { min-height: 96px; line-height: var(--leading); resize: vertical; } :where(input, select, textarea):focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--color-primary); } ::placeholder { color: var(--color-text-muted); } .form-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); } .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; } .check-inline { font-size: var(--text-sm); margin-right: var(--space-1); } /* ---------- Alerts, badges ---------- */ .alert, .notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-md); } .alert-info, .site-notice { background: var(--color-primary-soft); border-color: #c7d7fe; } .alert-warning, .notice { background: var(--color-warning-soft); border-color: #fedf89; } .alert-danger, .deleted-notice { background: var(--color-danger-soft); border-color: #fecdca; } .form-error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-danger-soft); border: var(--border-width) solid #fecdca; color: #912018; font-size: var(--text-md); } .form-ok { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--color-success-soft); border: var(--border-width) solid #abefc6; color: #085d3a; font-size: var(--text-md); } .badge, .tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .01em; line-height: 1; background: var(--color-surface-subtle); color: var(--color-text-secondary); border: var(--border-width) solid var(--color-border); vertical-align: middle; } .badge-new { background: var(--color-primary-soft); color: var(--color-primary); border-color: #c7d7fe; } .tag.locked { background: var(--color-danger-soft); color: #b42318; border-color: #fecdca; } .new-link { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-right: var(--space-1); border-radius: var(--radius-sm); background: var(--color-unread); color: #fff; font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .03em; } .new-link:hover { color: #fff; text-decoration: none; background: var(--color-primary-hover); } /* ---------- Header ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--color-header-bg); color: var(--color-header-text); border-bottom: var(--border-width) solid rgba(0, 0, 0, .2); } .topbar-row { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -.01em; flex: none; } .brand:hover { color: #fff; text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-size: 15px; font-weight: var(--weight-bold); } .primary-nav { display: flex; align-items: center; gap: 2px; } .primary-nav a, .drawer-panel a { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-header-muted); font-size: var(--text-md); font-weight: var(--weight-medium); } .primary-nav a .icon { width: 16px; height: 16px; opacity: .8; } .primary-nav a:hover { background: var(--color-header-hover); color: #fff; text-decoration: none; } .header-search { position: relative; flex: 1; max-width: 340px; margin-left: auto; } .header-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-header-muted); pointer-events: none; } .header-search input:not([type=checkbox]) { min-height: 36px; height: 36px; padding: 0 var(--space-3) 0 34px; font-size: var(--text-md); background: var(--color-header-input); border-color: var(--color-header-border); color: #fff; } .header-search input::placeholder { color: var(--color-header-muted); } .header-search input:focus { background: rgba(255, 255, 255, .12); border-color: #5b8def; } .header-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; } .header-actions .btn { height: 34px; font-size: var(--text-sm); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); color: var(--color-header-text); cursor: pointer; list-style: none; } .icon-btn:hover { background: var(--color-header-hover); color: #fff; text-decoration: none; } .icon-btn::-webkit-details-marker { display: none; } .count-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: 10.5px; font-weight: var(--weight-bold); line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--color-header-bg); } .search-link, .nav-drawer { display: none; } /* Dropdown menus (
) */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; padding: var(--space-1); background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); } .menu-panel a, .menu-panel .menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-regular); background: none; border: 0; justify-content: flex-start; } .menu-panel a .icon, .menu-panel .menu-item .icon { width: 16px; height: 16px; color: var(--color-text-muted); } .menu-panel a:hover, .menu-panel .menu-item:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .menu-head { padding: var(--space-2) var(--space-3) var(--space-2); font-size: var(--text-md); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-1); } .menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); } .menu-label { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; } .user-trigger { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-2) 0 4px; border-radius: var(--radius-md); color: var(--color-header-text); font-size: var(--text-md); font-weight: var(--weight-medium); } .user-trigger:hover { background: var(--color-header-hover); } .user-trigger .icon { width: 16px; height: 16px; color: var(--color-header-muted); } .user-initial { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-full); background: #2f4a70; color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); } .drawer-panel { left: 0; right: auto; } .drawer-panel a { display: flex; color: var(--color-text); } .drawer-panel a .icon { color: var(--color-text-muted); } /* ---------- Breadcrumbs, page headings ---------- */ .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-1); } .breadcrumbs .icon { width: 14px; height: 14px; color: var(--color-border-strong); } .breadcrumbs a { color: var(--color-text-secondary); } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs [aria-current] { color: var(--color-text); font-weight: var(--weight-medium); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .page-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.015em; margin-bottom: var(--space-4); } .page-head .page-title { margin-bottom: 0; } .page-sub { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--text-md); } .page-actions { display: flex; gap: var(--space-2); } /* ---------- Forum index (categories and forum rows) ---------- */ .category { margin-bottom: var(--space-6); } .category-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); padding: 0 2px; } .category-head h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } .category-head h2 a { color: var(--color-text); } .category-head h2 a:hover { color: var(--color-primary); } .category-head p { color: var(--color-text-muted); font-size: var(--text-sm); } .forum-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; table-layout: fixed; } .forum-table thead th { padding: var(--space-2) var(--space-4); text-align: left; background: var(--color-surface-subtle); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } .forum-table .c-icon { width: 68px; } .forum-table .c-num { width: 104px; } .forum-table .c-last { width: 300px; } .forum-table .col-num { text-align: right; } .forum-table td { padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); vertical-align: middle; } .forum-table tbody tr:first-child td { border-top: 0; } .forum-row { transition: background-color .1s; } .forum-row:hover { background: var(--color-surface-hover); } .fr-icon { padding-right: 0 !important; } .forum-glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border); color: var(--color-text-muted); } .forum-glyph .icon { width: 20px; height: 20px; } .is-unread .forum-glyph { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .unread-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--color-unread); box-shadow: 0 0 0 2px var(--color-surface); } .is-unread .unread-dot { background: #60a5fa; } .fr-main { min-width: 0; } .fr-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); } .is-unread .fr-title { font-weight: var(--weight-bold); } .fr-title:hover { color: var(--color-primary); } .fr-main .badge-new { margin-left: var(--space-2); height: 18px; font-size: 11px; } .fr-desc { margin-top: 2px; color: var(--color-text-secondary); font-size: var(--text-sm); } .fr-subs { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: var(--space-1); font-size: var(--text-sm); } .fr-subs a { color: var(--color-text-secondary); font-weight: var(--weight-medium); } .fr-subs a:hover { color: var(--color-primary); } .fr-mobile-stats { display: none; } .forum-table .num { font-variant-numeric: tabular-nums; font-size: var(--text-md); color: var(--color-text-secondary); } .col-last { min-width: 0; } .fr-last-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); } .fr-last-title:hover { color: var(--color-primary); } .fr-last-meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 1px; font-size: var(--text-sm); color: var(--color-text-muted); } .fr-last-meta a { color: var(--color-text-secondary); } .fr-last-meta a:hover { color: var(--color-primary); } .empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; background: var(--color-surface); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-secondary); } .empty-state > .icon { width: 32px; height: 32px; color: var(--color-text-muted); } .empty-state h2 { font-size: var(--text-xl); color: var(--color-text); } /* Community (who's online + statistics) */ .community { margin-top: var(--space-8); } .community-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .community-block { margin: 0; padding: var(--space-4) var(--space-5); } .community-block + .community-block { border-left: var(--border-width) solid var(--color-border); } .community-block h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); margin-bottom: 2px; } .community-block > * + * { margin-top: var(--space-1); } .live-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); } .online-names { font-size: var(--text-md); line-height: 1.7; } :where(.online-names a) { color: var(--color-text); font-weight: var(--weight-medium); } .online-names a:hover { color: var(--color-primary); } .online-names .sep { color: var(--color-text-muted); } .community-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: var(--space-3); } .community-stats div { margin: 0; } .community-stats dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } .community-stats dd { margin: 2px 0 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; } .newest-name { font-weight: var(--weight-semibold); font-size: var(--text-lg); } /* ---------- Footer ---------- */ .site-footer { margin-top: var(--space-8); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm); } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); padding-bottom: var(--space-4); } .footer-brand p { margin-top: var(--space-2); max-width: 420px; color: var(--color-text-muted); } .brand-small { color: var(--color-text); font-size: var(--text-base); } .brand-small:hover { color: var(--color-text); } .brand-small .brand-mark { width: 24px; height: 24px; font-size: 12px; border-radius: var(--radius-sm); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); } .footer-links a { color: var(--color-text-secondary); } .footer-links a:hover { color: var(--color-primary); } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-6); border-top: var(--border-width) solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); } /* ========================================================================= Existing pages (thread, forum, profile, account, messaging, search, ModCP) keep their markup and use the tokens; their full redesign comes later. ========================================================================= */ .panel { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-5); box-shadow: var(--shadow-xs); overflow: hidden; } .panel-title { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); background: var(--color-surface-subtle); border-bottom: var(--border-width) solid var(--color-border); } .panel-title a { color: var(--color-text); } .panel-title .count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface); border: var(--border-width) solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-secondary); } .panel-sub { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); } .panel-body { padding: var(--space-4); } .panel.narrow { max-width: 540px; margin-left: auto; margin-right: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: var(--text-md); } table.grid th { padding: var(--space-2) var(--space-4); text-align: left; background: var(--color-surface-subtle); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } table.grid td { padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); vertical-align: middle; } table.grid tbody tr:first-child td { border-top: 0; } table.grid tbody tr:hover td { background: var(--color-surface-hover); } table.grid .num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } table.grid .last { width: 280px; font-size: var(--text-sm); } table.grid td.empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); } table.grid .icon { width: 48px; padding-right: 0; } tr.sticky td { background: var(--color-surface-subtle); } .forum-icon, .thread-icon { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border-strong); } .forum-icon.unread, .thread-icon.unread { background: var(--color-unread); box-shadow: 0 0 0 3px var(--color-primary-soft); } .thread-icon.locked { background: #f04438; } .status-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--color-border-strong); vertical-align: middle; } .status-dot.unread { background: var(--color-unread); } .forum-title, .thread-title { font-weight: var(--weight-semibold); color: var(--color-text); } .thread-title:not(.unread) { font-weight: var(--weight-medium); } .forum-title.unread, .thread-title.unread { font-weight: var(--weight-bold); } .last-title { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: var(--weight-medium); color: var(--color-text); } .subforums { margin-top: 2px; font-size: var(--text-sm); } .mini-pages { font-size: var(--text-xs); } .mini-pages a { margin: 0 2px; } .depth-1 { padding-left: 40px !important; } .depth-2 { padding-left: 64px !important; } .depth-3 { padding-left: 88px !important; } .depth-4 { padding-left: 112px !important; } .depth-5 { padding-left: 136px !important; } .depth-6 { padding-left: 160px !important; } .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .forum-tools, .thread-tools { justify-content: flex-start; gap: var(--space-4); font-size: var(--text-sm); } .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-md); } .facts dt { color: var(--color-text-muted); } .facts dd { margin: 0; } /* Pagination */ .pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-left: auto; font-size: var(--text-sm); } .pager a, .pager strong, .pager .gap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .pager a:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .pager strong { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .pager .gap { border-color: transparent; background: none; } .pager .pager-label { margin-right: var(--space-2); color: var(--color-text-muted); } blockquote.quote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-4); border-left: 3px solid var(--color-border-strong); background: var(--color-surface-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-secondary); } .quote-author { margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } pre.code { overflow-x: auto; padding: var(--space-3); background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); } .mod-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .deleted-note { margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-danger-soft); color: #b42318; font-size: var(--text-sm); } .pending-note { background: var(--color-warning-soft); color: #93370d; } .attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--border-width) dashed var(--color-border); font-size: var(--text-sm); } .attachments > .muted { width: 100%; } .attachment-thumb img { display: block; max-width: 160px; max-height: 160px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); } .search-form { max-width: 620px; } /* Profiles and members */ .avatar { display: block; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-subtle); } .avatar-edit { display: grid; gap: var(--space-3); justify-items: start; } .avatar-edit .avatar { width: 96px; height: 96px; } .notif-unread { background: var(--color-primary-soft); } tr.inactive td { color: var(--color-text-muted); } .friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--space-2); } .friend-tile { display: grid; justify-items: center; gap: 4px; overflow: hidden; font-size: var(--text-xs); text-align: center; color: var(--color-text-secondary); } .friend-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friend-tile .avatar { width: 48px; height: 48px; border-radius: var(--radius-full); } .friend-tag { background: var(--color-success-soft); color: #067647; border-color: #abefc6; } .vm-form { background: var(--color-surface-subtle); border-bottom: var(--border-width) solid var(--color-border); } .vm-list { display: grid; } .vm { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); } .vm-list .vm:first-child { border-top: 0; } .vm-avatar .avatar { width: 40px; height: 40px; border-radius: var(--radius-full); } .vm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: 2px; } .vm-author { font-weight: var(--weight-semibold); color: var(--color-text); } .vm-delete { margin-left: auto; font-size: var(--text-xs); } .row-actions { white-space: nowrap; text-align: right; } .row-actions form { display: inline-flex; gap: var(--space-2); align-items: center; } .row-actions > * + *, .row-actions > * + form.inline { margin-left: var(--space-3); } /* ModCP / shared admin bits used on public pages */ .admin-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); } .admin-nav a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); } .perm-set { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .perm-set legend { padding: 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .perm-cells { display: grid; gap: 2px; } .perm-cells .check, .perm-set .check { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-regular); font-size: var(--text-sm); } .never { color: var(--color-danger); } td.details { max-width: 360px; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-xs); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); } .stat { padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-muted); } .stat span { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text); } .recovery { font-size: var(--text-lg); line-height: 1.8; } .setup-uri code { overflow-wrap: anywhere; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .primary-nav a .icon { display: none; } .header-search { max-width: 240px; } .forum-table .c-last { width: 240px; } .forum-table .c-num { width: 84px; } } @media (max-width: 900px) { :root { --container-pad: var(--space-4); } .primary-nav, .header-search { display: none; } .nav-drawer, .search-link { display: inline-flex; } .header-actions { margin-left: auto; } .user-trigger-name { display: none; } .community-grid { grid-template-columns: 1fr 1fr; } .community-online { grid-column: 1 / -1; } .community-block + .community-block { border-left: 0; border-top: var(--border-width) solid var(--color-border); } .community-newest { border-left: var(--border-width) solid var(--color-border) !important; } } @media (max-width: 680px) { body { font-size: var(--text-base); } .page { padding-top: var(--space-4); } .page-title { font-size: 22px; } .header-actions .btn-quiet-dark { display: none; } /* Forum rows become stacked blocks */ .forum-table, .forum-table tbody, .forum-table tr, .forum-table td { display: block; width: 100%; } .forum-table { table-layout: auto; } .forum-table thead { display: none; } .forum-row { position: relative; padding: var(--space-3) var(--space-4) var(--space-3) 64px; border-top: var(--border-width) solid var(--color-border); } .forum-table tbody tr:first-child { border-top: 0; } .forum-table td { padding: 0; border: 0; } .fr-icon { position: absolute; left: var(--space-4); top: var(--space-3); width: auto; } .forum-glyph { width: 36px; height: 36px; } .forum-table .col-num { display: none; } .fr-mobile-stats { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .forum-table .col-last { width: auto; margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) dashed var(--color-border); } .community-grid { grid-template-columns: 1fr; } .community-newest { border-left: 0 !important; } .community-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-legal { flex-direction: column; } /* Existing pages */ table.grid .last, table.grid th.last { display: none; } table.grid .num { width: 60px; } } /* Footer theme chooser (ADR-029) */ .theme-chooser { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; } .theme-chooser label { color: var(--color-text-muted); font-size: var(--text-xs); } .theme-chooser select { width: auto; min-height: 30px; height: 30px; padding: 0 var(--space-6) 0 var(--space-2); font-size: var(--text-xs); } .footer-legal { align-items: center; } .user-avatar { width: 30px; height: 30px; border-radius: var(--radius-full); object-fit: cover; background: var(--color-surface-subtle); } /* Profile message actions and replies (ADR-032) */ .vm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); } .vm-like, .vm-reply-box > summary, .vm-action-link, button.vm-action-link { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: none; border: 0; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; list-style: none; } .vm-like:hover, .vm-reply-box > summary:hover, .vm-action-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .vm-like.is-liked { color: var(--color-primary); } .vm-count { font-variant-numeric: tabular-nums; } .vm-like-static { color: var(--color-text-muted); } .vm-reply-box > summary::-webkit-details-marker { display: none; } .vm-reply-box[open] { flex-basis: 100%; order: 10; } .vm-reply-form { margin-top: var(--space-2); gap: var(--space-2); } .vm-reply-form textarea { min-height: 64px; } .vm-replies { margin-top: var(--space-3); border-left: 2px solid var(--color-border); padding-left: var(--space-3); display: grid; gap: var(--space-1); } .vm-reply { padding: var(--space-2) 0; border-top: 0; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); } .vm-reply .vm-avatar .avatar { width: 32px; height: 32px; } /* Post moderation menu next to the post number */ .post-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text-muted); } .post-menu-trigger:hover, .post-menu[open] .post-menu-trigger { background: var(--color-surface-hover); color: var(--color-text); } .post-menu .menu-panel { min-width: 260px; } .menu-panel a.menu-danger, .menu-panel .menu-item.menu-danger { color: var(--color-danger); } .menu-form { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .menu-form-row { display: flex; gap: var(--space-2); } .menu-form-row :where(input, select) { min-height: 32px; height: 32px; padding: 0 var(--space-2); font-size: var(--text-sm); } .menu-form-row .btn-sm, .menu-form-row button { height: 32px; } /* ---------- Thread page (ADR-037) ---------- */ .thread-head { align-items: flex-start; } .thread-head-main { min-width: 0; flex: 1 1 480px; } .thread-head .page-title { overflow-wrap: anywhere; } .thread-head .page-title .badge { margin-right: var(--space-2); position: relative; top: -3px; } .badge .icon { width: 12px; height: 12px; } .badge-sticky { background: var(--color-primary-soft); color: var(--color-primary); border-color: #c7d7fe; } .badge-locked { background: var(--color-danger-soft); color: #b42318; border-color: #fecdca; } .badge-op { background: var(--color-primary-soft); color: var(--color-primary); border-color: #c7d7fe; } .thread-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); } .thread-meta > span { display: inline-flex; align-items: center; gap: 6px; } .thread-meta .icon { width: 15px; height: 15px; } .thread-meta a { color: var(--color-text-secondary); font-weight: var(--weight-medium); } .page-actions { flex-wrap: wrap; align-items: center; } .subscribe-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; } .subscribe-form .check-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); } .subscribe-form.is-on .btn .icon { color: var(--color-primary); } .post-list { display: grid; gap: var(--space-4); } .post { display: grid; grid-template-columns: var(--postbit-width) minmax(0, 1fr); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .post:target { border-color: var(--color-primary); box-shadow: var(--focus-ring); } .post-deleted { border-style: dashed; background: var(--color-surface-subtle); } .post-deleted .post-content { opacity: .75; } .post-pending { border-color: #fedf89; } /* Author column */ .postbit { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--text-sm); border-right: var(--border-width) solid var(--color-border); background: var(--color-surface-subtle); border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .pb-avatar { position: relative; } .pb-avatar .avatar { width: 88px; height: 88px; border-radius: var(--radius-lg); } .online-dot { display: block; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border-strong); } .pb-avatar .online-dot { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--color-surface-subtle); } .online-dot.on { background: var(--color-success); } .pb-ident { display: grid; justify-items: center; gap: 2px; min-width: 0; max-width: 100%; } .pb-name { max-width: 100%; overflow-wrap: anywhere; } .post-author { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .post-author:hover { color: var(--color-primary); } .post-author.guest { color: var(--color-text-muted); } .user-title { color: var(--color-text-muted); font-size: var(--text-sm); } .pips { display: flex; justify-content: center; gap: 3px; margin-top: 4px; min-height: 6px; } .pips i { display: block; width: 12px; height: 6px; border-radius: 2px; background: var(--color-primary); } .postbit-facts { display: grid; gap: 2px; width: 100%; margin: var(--space-2) 0 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-xs); } .postbit-facts div { display: flex; justify-content: space-between; gap: var(--space-2); } .postbit-facts dt { color: var(--color-text-muted); } .postbit-facts dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .pb-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); } .pb-links a { padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-text-secondary); border: var(--border-width) solid var(--color-border); background: var(--color-surface); } .pb-links a:hover { color: var(--color-primary); text-decoration: none; border-color: var(--color-border-strong); } /* Message column */ .post-body { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--space-6) var(--space-3); } .post-head { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; margin-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); } .post-head-right { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; } .post-number { padding: 2px 6px; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .post-number:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .post-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text-muted); } .post-menu-trigger:hover, .post-menu[open] .post-menu-trigger { background: var(--color-surface-hover); color: var(--color-text); } .post-content { flex: 1; min-height: 48px; overflow-wrap: anywhere; font-size: var(--text-base); line-height: 1.7; } .post-content img { height: auto; border-radius: var(--radius-sm); } .post-content > :first-child { margin-top: 0; } .edited { display: flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); } .edited .icon { width: 13px; height: 13px; } .signature { max-height: 120px; overflow: hidden; margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) dashed var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); } .post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); } .chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-regular); } button.chip:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); } button.chip.mine { background: var(--color-primary-soft); border-color: #c7d7fe; } .chip-count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .chip.mine .chip-count { color: var(--color-primary); } .who-reacted { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); } .post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; font-size: var(--text-sm); } .post-actions:empty { display: none; } .post-actions > a, .post-actions .link-button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); } .post-actions .icon { width: 15px; height: 15px; } .post-actions > a:hover, .post-actions .link-button:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .post-actions .link-button.is-on { color: var(--color-primary); } .post-actions .post-report:hover { color: var(--color-danger); } .deleted-note { margin-bottom: var(--space-3); } /* Quick reply */ .quick-reply { margin-top: var(--space-6); padding: var(--space-4) var(--space-5) var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .quick-reply-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-base); } .quick-reply-title .icon { color: var(--color-text-muted); } .quick-reply .form { gap: var(--space-3); } .quick-reply .form-buttons { align-items: center; } .quick-reply-more { margin-left: auto; font-size: var(--text-sm); } .thread-closed-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); padding: var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-secondary); font-size: var(--text-md); } @media (max-width: 680px) { .post { grid-template-columns: minmax(0, 1fr); } .postbit { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; border-right: 0; border-bottom: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .pb-avatar .avatar { width: 44px; height: 44px; border-radius: var(--radius-md); } .pb-avatar .online-dot { width: 11px; height: 11px; right: -2px; bottom: -2px; } .pb-ident { justify-items: start; } .postbit .pips { justify-content: flex-start; } .postbit-facts, .pb-links { display: none; } .post-body { padding: 0 var(--space-4) var(--space-3); } .post-head { min-height: 40px; margin-bottom: var(--space-2); } .post-actions > a, .post-actions .link-button { padding: 0 6px; } .thread-head .page-actions { width: 100%; } .quick-reply { padding: var(--space-3) var(--space-4) var(--space-4); } } /* Thread lists (forum page, new posts, today, subscriptions) */ .thread-table .c-icon { width: 60px; } .thread-table .c-num { width: 124px; } .forum-table thead th.col-num { padding-left: var(--space-2); } .thread-table .c-last { width: 200px; } .thread-table .forum-glyph { width: 36px; height: 36px; } .thread-table .forum-glyph .icon { width: 18px; height: 18px; } .thread-row.is-sticky { background: var(--color-surface-subtle); } .thread-row.is-sticky:hover { background: var(--color-surface-hover); } .thread-row.is-locked:not(.is-unread) .forum-glyph { color: var(--color-text-muted); } .thread-row.is-deleted .fr-title { color: var(--color-text-muted); text-decoration: line-through; } .thread-sep td { padding: 0 !important; height: 6px; background: var(--color-bg); border-top: var(--border-width) solid var(--color-border) !important; } .tr-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; } .tr-title-line .fr-title { min-width: 0; overflow-wrap: anywhere; } .tr-title-line .badge { height: 18px; font-size: 11px; } a.badge-new:hover { text-decoration: none; background: var(--color-primary); color: #fff; } .mini-pages { display: inline-flex; gap: 2px; } .mini-pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; margin: 0; border: var(--border-width) solid var(--color-border); border-radius: 4px; font-size: 11px; color: var(--color-text-secondary); background: var(--color-surface); } .mini-pages a:hover { border-color: var(--color-border-strong); color: var(--color-primary); text-decoration: none; } .tr-meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); } .tr-meta a { color: var(--color-text-secondary); } .tr-meta a:hover { color: var(--color-primary); } .tr-forum { font-weight: var(--weight-medium); } .tr-last { display: grid; gap: 1px; min-width: 0; } .tr-last-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); } .tr-last .fr-last-meta { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-muted); } .tr-last .fr-last-meta .icon { width: 14px; height: 14px; } .tr-last .fr-last-meta:hover { color: var(--color-primary); text-decoration: none; } .empty-state p { color: var(--color-text-secondary); } /* Tabs */ .tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); overflow-x: auto; } .tabs a { flex: none; padding: var(--space-2) var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .tabs a:hover { color: var(--color-text); text-decoration: none; border-bottom-color: var(--color-border-strong); } .tabs a[aria-current] { color: var(--color-primary); border-bottom-color: var(--color-primary); } @media (max-width: 1100px) { .thread-table .c-last { width: 170px; } .thread-table .c-num { width: 100px; } } @media (max-width: 680px) { .thread-table .forum-row { padding-left: 60px; } .thread-table .col-last { display: none; } .thread-sep { display: none !important; } .page-head .page-actions { width: 100%; } } .post-foot:not(:has(a, button, .chip)) { display: none; } .forum-table thead th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Profiles and member list (ADR-037) ---------- */ .profile-hero { margin-bottom: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .profile-hero-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-5) var(--space-6); } .profile-avatar { position: relative; flex: none; } .profile-avatar .avatar { width: 104px; height: 104px; border-radius: var(--radius-lg); } .profile-avatar .online-dot { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--color-surface); } .profile-ident { flex: 1 1 260px; min-width: 0; } .profile-name { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.015em; overflow-wrap: anywhere; } .profile-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: 2px; } .profile-sub .pips { margin: 0; } .profile-seen { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); } .profile-ident .form-error { margin-top: var(--space-2); } .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .profile-actions form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .profile-actions form button { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-sm); } .profile-actions form button.link-button { height: auto; padding: 0; } .profile-actions .danger-link:hover { color: var(--color-danger); } .profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--border-width) solid var(--color-border); } .profile-stats div { padding: var(--space-3) var(--space-6); } .profile-stats div + div { border-left: var(--border-width) solid var(--color-border); } .profile-stats dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } .profile-stats dd { margin: 2px 0 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; } .profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main side"; gap: var(--space-5); align-items: start; } .profile-main { grid-area: main; min-width: 0; } .profile-side { grid-area: side; min-width: 0; } .profile-side .facts { grid-template-columns: max-content minmax(0, 1fr); font-size: var(--text-sm); } .profile-side .facts dd { overflow-wrap: anywhere; } .snippet-list { margin: 0; padding: 0; list-style: none; } .snippet { padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); } .snippet:first-child { border-top: 0; } .snippet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); } .snippet-title { font-weight: var(--weight-medium); color: var(--color-text); } .snippet-title:hover { color: var(--color-primary); } .snippet-head time { font-size: var(--text-xs); color: var(--color-text-muted); } .snippet-excerpt { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .filter-bar label { margin: 0; } .filter-bar input { width: 260px; } .filter-bar select { width: auto; } .member-cell { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); color: var(--color-text); } .member-cell:hover { color: var(--color-primary); text-decoration: none; } .member-cell .avatar { width: 32px; height: 32px; border-radius: var(--radius-full); } @media (max-width: 900px) { .profile-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; } .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-stats div:nth-child(3) { border-left: 0; } .profile-stats div:nth-child(n+3) { border-top: var(--border-width) solid var(--color-border); } } @media (max-width: 680px) { .profile-hero-main { padding: var(--space-4); } .profile-avatar .avatar { width: 72px; height: 72px; } .profile-name { font-size: var(--text-xl); } .profile-stats div { padding: var(--space-3) var(--space-4); } .filter-bar input { width: 100%; } .filter-bar label:first-child { flex: 1 1 100%; } .member-table th:nth-child(2), .member-table td:nth-child(2), .member-table th:nth-child(5), .member-table td:nth-child(5) { display: none; } } /* ---------- Messages, notifications, search (ADR-037) ---------- */ .post-compact { grid-template-columns: 140px minmax(0, 1fr); } .post-compact .pb-avatar .avatar { width: 56px; height: 56px; border-radius: var(--radius-md); } .post-compact .postbit { padding: var(--space-4) var(--space-3); } .inbox-table .c-last { width: 160px; } .inbox-table .tr-meta .icon { width: 14px; height: 14px; } .form-panel { max-width: 760px; } .section-title { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); } .notif-list { margin: 0; padding: 0; list-style: none; } .notif { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); } .notif:first-child { border-top: 0; } .notif-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border); color: var(--color-text-muted); } .notif-icon .icon { width: 16px; height: 16px; } .notif-body { min-width: 0; font-size: var(--text-md); } .notif-body a { font-weight: var(--weight-medium); } .notif-body time { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); } .notif.notif-unread { background: var(--color-primary-soft); } .notif-unread .notif-icon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .block-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); } .search-panel { max-width: 860px; } .search-panel .form { gap: var(--space-3); } .search-main { display: flex; gap: var(--space-2); } .search-q { flex: 1; } .search-main input { height: 44px; font-size: var(--text-lg); } .search-main button { height: 44px; } .search-options { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); } .search-options > label:not(.check) { flex: 1 1 200px; } .search-options .check { height: var(--control-height); } @media (max-width: 680px) { .post-compact { grid-template-columns: minmax(0, 1fr); } .post-compact .pb-avatar .avatar { width: 40px; height: 40px; } .inbox-table .forum-row { padding-left: 60px; } .inbox-table .col-last { display: none; } } /* ---------- ModCP and shared data tables (ADR-038) ---------- */ .page-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } .page-eyebrow .icon { width: 14px; height: 14px; } .cell-title { font-weight: var(--weight-medium); color: var(--color-text); } .cell-title:hover { color: var(--color-primary); } .cell-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; } table.grid td { overflow-wrap: break-word; } table.grid td:last-child:has(form) { width: 1%; white-space: nowrap; } .row-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: 0; } .row-form input { width: 200px; min-height: 32px; height: 32px; padding: 0 var(--space-2); font-size: var(--text-sm); } .panel > table.grid:first-child thead th { border-top: 0; } @media (max-width: 680px) { .panel:has(> table.grid) { overflow-x: auto; } table.grid td:last-child:has(form) { white-space: normal; } .row-form input { width: 100%; } } /* ---------- Account settings (ADR-038) ---------- */ .account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; } .account-nav { position: sticky; top: var(--space-4); display: grid; gap: 2px; padding: var(--space-2); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .account-nav a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .account-nav a .icon { width: 16px; height: 16px; color: var(--color-text-muted); } .account-nav a:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; } .account-nav a[aria-current] { background: var(--color-primary-soft); color: var(--color-primary); } .account-nav a[aria-current] .icon { color: var(--color-primary); } .account-nav-sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-border); } .account-main { min-width: 0; } .account-main .panel { max-width: 760px; } .account-main .panel:has(> table.grid) { max-width: none; } .session-table td:first-child { max-width: 360px; font-size: var(--text-sm); color: var(--color-text-secondary); } @media (max-width: 900px) { .account-layout { grid-template-columns: minmax(0, 1fr); } .account-nav { position: static; display: flex; overflow-x: auto; padding: var(--space-1); } .account-nav a { flex: none; } .account-nav-sep { width: 1px; height: auto; margin: var(--space-1) 0; } } /* ---------- Thread prefixes and polls (ADR-041) ---------- */ .prefix { --prefix: #475467; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); border: var(--border-width) solid color-mix(in srgb, var(--prefix) 30%, transparent); background: color-mix(in srgb, var(--prefix) 10%, transparent); color: var(--prefix); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; vertical-align: middle; } .prefix-blue { --prefix: #1d4ed8; } .prefix-green { --prefix: #067647; } .prefix-red { --prefix: #b42318; } .prefix-orange { --prefix: #b54708; } .prefix-purple { --prefix: #6d28d9; } :root[data-theme="dark"] .prefix { --prefix: #b3bfd1; } :root[data-theme="dark"] .prefix-blue { --prefix: #84adff; } :root[data-theme="dark"] .prefix-green { --prefix: #47cd89; } :root[data-theme="dark"] .prefix-red { --prefix: #f97066; } :root[data-theme="dark"] .prefix-orange { --prefix: #fdb022; } :root[data-theme="dark"] .prefix-purple { --prefix: #b692f6; } .tr-title-line .prefix { height: 18px; font-size: 11px; } .thread-head .page-title .prefix { height: 24px; font-size: var(--text-sm); margin-right: var(--space-2); position: relative; top: -3px; } .prefix-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); } .prefix-filter a { text-decoration: none; } .prefix-filter .prefix { height: 26px; padding: 0 10px; font-size: var(--text-sm); } .prefix-filter .prefix.is-current { background: var(--prefix); color: var(--color-surface); } .prefix-filter-all { font-size: var(--text-sm); color: var(--color-text-secondary); padding: 0 var(--space-1); } .prefix-filter-all.is-current { font-weight: var(--weight-semibold); color: var(--color-text); } .prefix-styles { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .title-with-prefix { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--space-3); } @media (max-width: 600px) { .title-with-prefix { grid-template-columns: 1fr; } } .poll-form { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); } .poll-form > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: var(--weight-semibold); } .poll-form > summary .icon { width: 16px; height: 16px; color: var(--color-primary); } .poll-form-body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); } .poll { scroll-margin-top: calc(var(--header-height) + var(--space-4)); margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm, none); } .poll-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .poll-head .icon { width: 18px; height: 18px; color: var(--color-primary); flex: none; } .poll-question { margin: 0; font-size: var(--text-lg, 17px); font-weight: var(--weight-semibold); overflow-wrap: anywhere; } .poll-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .poll-result-line { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-1); } .poll-option { overflow-wrap: anywhere; } .poll-option .badge { margin-left: var(--space-2); height: 18px; font-size: 11px; } .poll-count { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } .poll-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-surface-hover); appearance: none; -webkit-appearance: none; } .poll-bar::-webkit-progress-bar { background: var(--color-surface-hover); border-radius: 999px; } .poll-bar::-webkit-progress-value { background: var(--color-primary); border-radius: 999px; } .poll-bar::-moz-progress-bar { background: var(--color-primary); border-radius: 999px; } .poll-results .is-mine .poll-option { font-weight: var(--weight-semibold); } .poll-voters { margin: var(--space-1) 0 0; font-size: var(--text-sm); } .poll-ballot { display: grid; gap: var(--space-2); } .poll-ballot .form-buttons { margin-top: var(--space-2); } .poll-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); } /* Uploaded site logo or theme logo (ADR-042). */ .brand-logo { display: block; height: 32px; width: auto; max-width: min(240px, 50vw); object-fit: contain; } .brand-small .brand-logo { height: 24px; } .register-legal { margin: 0; } .brand-icon { display: block; width: 24px; height: 24px; border-radius: var(--radius-sm); } /* ---------- Edit history (ADR-045) ---------- */ .edit-reason { margin-left: var(--space-2); font-style: italic; } .edit-history-link { margin-left: var(--space-2); } .diff { margin: 0 0 var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); font-family: var(--font-mono, monospace); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; } .diff span { display: block; } .diff-add { background: var(--color-success-soft); color: var(--color-success); } .diff-del { background: var(--color-danger-soft); color: var(--color-danger); text-decoration: line-through; } .diff-same { color: var(--color-text-secondary); } /* ---------- Editor (ADR-045) ---------- */ .editor { position: relative; display: grid; gap: 0; } .editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border: var(--border-width) solid var(--color-border-strong); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-surface-subtle); position: relative; } .editor textarea { border-top-left-radius: 0; border-top-right-radius: 0; resize: vertical; } .editor-btn { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-md); line-height: 1; cursor: pointer; box-shadow: none; } .editor-btn:hover, .editor-btn[aria-pressed="true"] { background: var(--color-surface-hover); color: var(--color-text); } .eb-b { font-weight: 700; } .eb-i { font-style: italic; } .eb-u { text-decoration: underline; } .eb-s { text-decoration: line-through; } .eb-code, .eb-tag { font-family: var(--font-mono, monospace); font-size: var(--text-sm); } .editor-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--color-border); } .editor-emoji { position: absolute; top: 100%; right: 4px; z-index: 20; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); } .editor-emoji[hidden] { display: none; } .editor-emoji button { width: 34px; height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 20px; cursor: pointer; padding: 0; box-shadow: none; } .editor-emoji button:hover { background: var(--color-surface-hover); } .editor-preview { min-height: 160px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-surface); } .editor-note, .editor-files { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); } .editor.is-drop textarea { outline: 2px dashed var(--color-primary); outline-offset: -4px; } .editor-help { font-size: var(--text-sm); } .editor-help > summary { cursor: pointer; color: var(--color-text-secondary); } .editor-help-table { margin-top: var(--space-2); } .editor-help-table td { padding: 4px 8px; } .emoji-list { font-size: 20px; line-height: 1.6; word-spacing: 4px; margin: var(--space-2) 0 0; user-select: all; }