/* =========================================================================== Mingo design system (mingo-7aou) — a skin over the existing SPA structure. Tokens live in :root; a prefers-color-scheme block re-points them for dark. Every id/class app.js wires by is preserved; this file only restyles. ========================================================================= */ :root { /* palette — warm off-white canvas, iris/indigo identity, warm-orange vote, teal confirm. Richer than the old single blue, still recognizably mingo. */ --bg: #f5f4f1; --panel: #ffffff; --panel-2: #faf9f7; /* hover / nested surface */ --line: #e7e3dc; --line-2: #d9d4cb; /* stronger hairline */ --ink: #1d1b26; --ink-2: #3c3a48; --muted: #6d6a78; --faint: #94909f; --accent: #5546e6; /* iris */ --accent-ink: #ffffff; --accent-weak: #ecebfd; /* accent tint for hovers/badges */ --accent-line: #d6d2fb; --up: #ef6c2b; --up-weak: #fdece1; --ok: #0d9488; --err: #d13d3d; --warn: #b7791f; --toast-bg: #24222e; --toast-ink: #ececf2; /* rhythm */ --r-xs: 7px; --r-sm: 10px; --r: 13px; --r-lg: 18px; --pill: 999px; --sh-1: 0 1px 2px rgba(24,22,34,.05), 0 1px 3px rgba(24,22,34,.04); --sh-2: 0 4px 14px rgba(24,22,34,.08), 0 1px 3px rgba(24,22,34,.06); --sh-3: 0 18px 50px rgba(20,18,30,.24), 0 6px 16px rgba(20,18,30,.14); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); } /* Dark palette. Applied two ways so a MANUAL choice can win over the OS: (1) the media query is the no-JS / first-paint default when the OS is dark; (2) :root[data-theme="dark"] is what the in-app toggle sets — an attribute selector (higher specificity than the bare :root in the media query), so a forced light theme (:root[data-theme="light"], below) always overrides an OS-dark media match. app.js sets data-theme on for every session. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #131218; --panel: #1c1b23; --panel-2: #232230; --line: #2d2b39; --line-2: #3a3849; --ink: #eceaf3; --ink-2: #cfccdb; --muted: #9a97a9; --faint: #6f6c7e; --accent: #8f86ff; --accent-ink: #14121c; --accent-weak: #262340; --accent-line: #3a356a; --up: #ff7f4d; --up-weak: #3a2417; --ok: #2dd4bf; --err: #ff6b6b; --warn: #e0a94a; --toast-bg: #2c2a38; --toast-ink: #ececf2; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.42); --sh-3: 0 20px 56px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #131218; --panel: #1c1b23; --panel-2: #232230; --line: #2d2b39; --line-2: #3a3849; --ink: #eceaf3; --ink-2: #cfccdb; --muted: #9a97a9; --faint: #6f6c7e; --accent: #8f86ff; --accent-ink: #14121c; --accent-weak: #262340; --accent-line: #3a356a; --up: #ff7f4d; --up-weak: #3a2417; --ok: #2dd4bf; --err: #ff6b6b; --warn: #e0a94a; --toast-bg: #2c2a38; --toast-ink: #ececf2; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.42); --sh-3: 0 20px 56px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } /* Forced light — re-point the tokens to the base (light) palette so it wins even when the OS is dark (attribute selector beats the media-query :root). */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f4f1; --panel: #ffffff; --panel-2: #faf9f7; --line: #e7e3dc; --line-2: #d9d4cb; --ink: #1d1b26; --ink-2: #3c3a48; --muted: #6d6a78; --faint: #94909f; --accent: #5546e6; --accent-ink: #ffffff; --accent-weak: #ecebfd; --accent-line: #d6d2fb; --up: #ef6c2b; --up-weak: #fdece1; --ok: #0d9488; --err: #d13d3d; --warn: #b7791f; --toast-bg: #24222e; --toast-ink: #ececf2; --sh-1: 0 1px 2px rgba(24,22,34,.05), 0 1px 3px rgba(24,22,34,.04); --sh-2: 0 4px 14px rgba(24,22,34,.08), 0 1px 3px rgba(24,22,34,.06); --sh-3: 0 18px 50px rgba(20,18,30,.24), 0 6px 16px rgba(20,18,30,.14); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } .muted { color: var(--muted); } .tiny { font-size: 12px; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } /* ---------------- topbar ---------------- */ .topbar { display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 800; font-size: 21px; letter-spacing: -.02em; cursor: pointer; background: linear-gradient(96deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--up))); -webkit-background-clip: text; background-clip: text; color: transparent; } .spacer { flex: 1; } .nav-toggle { display: none; font-size: 22px; line-height: 1; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 2px 6px; margin-left: -4px; border-radius: var(--r-sm); } .nav-backdrop { display: none; } .auth-slot { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .auth-slot > .muted { color: var(--ink-2); font-weight: 600; } /* theme toggle — a small icon button in the topbar, visible signed in or out. The glyph is swapped by app.js (☀ / ☾) to reflect the ACTIVE theme. */ .theme-toggle { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); width: 34px; height: 34px; padding: 0; border-radius: var(--pill); font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .theme-toggle:hover { background: var(--panel-2); border-color: var(--muted); } /* user menu (topbar dropdown) */ .user-menu { position: relative; } .user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px 4px 5px; border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--pill); font-weight: 600; color: var(--ink-2); max-width: 190px; } .user-btn:hover { background: var(--panel-2); border-color: var(--muted); } .user-btn .u-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .user-btn .u-caret { color: var(--faint); font-size: 10px; } /* generic popup menu — used by the user menu AND the post-card kebab */ .menu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 176px; z-index: 120; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 5px; animation: pop .14s cubic-bezier(.2,.8,.3,1); } .menu-pop[hidden] { display: none; } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: var(--r-xs); color: var(--ink-2); font-weight: 500; font-size: 13.5px; } .menu-item:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; } .menu-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--faint); } .menu-item.danger { color: var(--err); } .menu-item.danger:hover { background: color-mix(in srgb, var(--err) 10%, var(--panel-2)); color: var(--err); } .menu-sep { height: 1px; background: var(--line); margin: 4px 2px; } /* ---------------- layout ---------------- */ .layout { display: grid; grid-template-columns: 232px 1fr; gap: 26px; max-width: 1060px; margin: 22px auto; padding: 0 18px; } .sidebar { position: sticky; top: 72px; align-self: start; } .side-section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px; margin-bottom: 14px; box-shadow: var(--sh-1); } .side-h { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 8px; padding: 0 6px; } .community-list { list-style: none; margin: 0; padding: 0; } .community-list li { padding: 1px 0; } .community-list a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; transition: background .13s, color .13s; } .community-list a:hover { background: var(--panel-2); color: var(--ink); } .community-list a.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; } /* per-board color dot (hue set inline via --ch) */ .cdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: hsl(var(--ch) 58% 52%); box-shadow: 0 0 0 3px hsl(var(--ch) 58% 52% / .16); } /* ---------------- main + cards ---------------- */ .main { min-height: 62vh; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 13px; box-shadow: var(--sh-1); } /* feed rows: a tidy CSS grid so the vote rail, header and body always line up. Columns: [vote] [content] [kebab]. The vote rail spans both rows and stays top-aligned with the header; the body sits under the content column only. */ .feed-row { display: grid; gap: 2px 14px; padding: 13px 16px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "vote head menu" "vote body body"; align-items: start; transition: border-color .14s, box-shadow .14s, transform .14s; } .feed-row:hover { border-color: var(--line-2); box-shadow: var(--sh-2); } .feed-row .fr-vote { grid-area: vote; } .feed-row .post-meta { grid-area: head; } .feed-row .fr-menu { grid-area: menu; } .feed-row .post-title, .feed-row .post-body { grid-area: body; } .feed-row.thread-post .post-body { margin-top: 6px; } /* vote rail — a compact stacked control aligned to the header row's top */ .votes { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 30px; color: var(--muted); } .votes .up { color: var(--faint); font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: var(--r-sm); transition: color .12s, background .12s, transform .1s; } .votes .up:hover { color: var(--up); background: var(--up-weak); } .votes .up:active { transform: scale(.86); } .votes .n { font-weight: 700; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; } .post-meta { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; line-height: 1.4; min-width: 0; } .post-meta > * { display: inline-flex; align-items: center; } /* identicon LEFT of the name; a long email truncates instead of wrapping the row */ .byline { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 600; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .byline-link { max-width: 260px; } .post-meta .fr-time { color: var(--muted); } .post-title { font-weight: 600; font-size: 15.5px; margin: 5px 0 0; letter-spacing: -.01em; } /* post-card kebab (⋮) — top-right affordance folding receipt + edit + future items */ .fr-menu { position: relative; } .kebab { border: 1px solid transparent; background: none; color: var(--faint); width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .kebab:hover, .kebab[aria-expanded="true"] { background: var(--panel-2); border-color: var(--line); color: var(--ink-2); } .post-title a { color: var(--ink); transition: color .12s; } .feed-row:hover .post-title a { color: var(--accent); } .post-body { white-space: pre-wrap; color: var(--ink-2); } /* identicon avatar */ .idt { border-radius: 6px; flex: 0 0 auto; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .avatar-lg .idt { border-radius: 11px; } /* per-board tag pill (hue via --ch) */ .ctag { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; padding: 2px 9px; border-radius: var(--pill); background: hsl(var(--ch) 68% 93%); color: hsl(var(--ch) 46% 38%); transition: filter .12s; } .ctag:hover { filter: brightness(.96); } @media (prefers-color-scheme: dark) { .ctag { background: hsl(var(--ch) 34% 22%); color: hsl(var(--ch) 72% 78%); } .ctag:hover { filter: brightness(1.15); } } /* Manual-theme overrides for the board tag (attribute selectors win over the media query above, so a forced theme is honored regardless of OS setting). */ :root[data-theme="dark"] .ctag { background: hsl(var(--ch) 34% 22%); color: hsl(var(--ch) 72% 78%); } :root[data-theme="dark"] .ctag:hover { filter: brightness(1.15); } :root[data-theme="light"] .ctag { background: hsl(var(--ch) 68% 93%); color: hsl(var(--ch) 46% 38%); } :root[data-theme="light"] .ctag:hover { filter: brightness(.96); } .badge { display: inline-block; font-size: 11.5px; font-weight: 600; background: var(--accent-weak); color: var(--accent); border-radius: var(--pill); padding: 1px 9px; margin-left: 6px; } .confirmed { color: var(--ok); font-size: 12px; font-weight: 600; } /* ---------------- buttons + inputs ---------------- */ button { font: inherit; font-weight: 600; padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; transition: background .13s, border-color .13s, box-shadow .13s, transform .06s; } button:hover { background: var(--panel-2); border-color: var(--muted); } button:active { transform: translateY(1px); } button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent); } button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: transparent; } button.primary:disabled { opacity: .5; cursor: default; box-shadow: none; } button.link { border: none; background: none; color: var(--accent); padding: 0; font-weight: 600; transition: color .12s; } button.link:hover { background: none; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); text-decoration: underline; } /* Destructive affordances (owner-delete, mingo-3go6). */ button.link.danger { color: var(--err); } button.link.danger:hover { color: color-mix(in srgb, var(--err) 80%, var(--ink)); } button.primary.danger { background: var(--err); color: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--err) 45%, transparent); } button.primary.danger:hover { background: color-mix(in srgb, var(--err) 88%, #000); } a.primary { display: inline-block; padding: 8px 15px; border-radius: var(--r-sm); font-weight: 600; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; text-align: center; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent); } a.primary[aria-disabled="true"] { opacity: .5; pointer-events: none; } .status.err { color: var(--err); font-weight: 600; } .status.warn { color: var(--warn); font-weight: 600; } input[type=text], textarea, input[type=email] { width: 100%; font: inherit; padding: 10px 12px; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); transition: border-color .13s, box-shadow .13s, background .13s; } input[type=text]::placeholder, textarea::placeholder, input[type=email]::placeholder { color: var(--faint); } input[type=text]:focus, textarea:focus, input[type=email]:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: var(--ring); } textarea { min-height: 94px; resize: vertical; } /* ---------------- headings + misc ---------------- */ .h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 16px; } /* view header — a header block for the main column that aligns its top edge with the sidebar's first card, so the two columns read as intentional. Folds the title, subtitle/description and the primary action into one card. */ .view-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .view-header .vh-main { min-width: 0; } .view-header .h1 { margin: 0; } .view-header .vh-sub { margin-top: 4px; font-size: 13.5px; } .view-header .vh-action { flex: 0 0 auto; } .view-title { display: flex; align-items: center; gap: 9px; } .view-title .cdot { width: 11px; height: 11px; } /* "Moderate" link in a board header — shown only to that board's moderators */ .mod-link { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 2px 9px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-weak); white-space: nowrap; } .mod-link:hover { filter: brightness(.97); } /* the post/comment kind tag in the moderation list */ .mod-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r-sm); } .h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin: 18px 0 9px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .comment { border-left: 2px solid var(--line-2); padding: 3px 0 3px 14px; margin: 12px 0; } .comment .comment { margin-left: 8px; } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-ink); padding: 11px 18px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; z-index: 90; box-shadow: var(--sh-3); } .passport-row { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .passport-row:last-child { border-bottom: none; } /* passport header identity block */ .pp-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; } .pp-head .h1 { margin: 0; } /* passport sections */ .pp-sec { margin-bottom: 14px; } .pp-badges { display: flex; flex-wrap: wrap; gap: 10px; } .pp-badge { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--accent-weak); border: 1px solid var(--accent-line); } .pp-badge .b-name { font-weight: 700; color: var(--accent); font-size: 13.5px; letter-spacing: -.01em; } .pp-badge .b-by { font-size: 11.5px; color: var(--muted); } .pp-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .vouch-list { display: flex; flex-wrap: wrap; gap: 8px 16px; } .vouch-item { gap: 6px; font-size: 13px; } /* author byline → passport link (inherits colour; tints on hover) */ .byline-link { color: inherit; border-radius: var(--r-xs); display: inline-flex; align-items: center; } .byline-link:hover .byline, .byline-link:hover { color: var(--accent); } /* ---------------- modals ---------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(16,14,24,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px; animation: fade .16s ease; } @keyframes fade { from { opacity: 0; } } .modal { width: 380px; max-width: 100%; margin: 0; box-shadow: var(--sh-3); border-color: var(--line-2); animation: pop .18s cubic-bezier(.2,.8,.3,1); } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } } .error { color: var(--err); } /* ---------------- receipt drawer (mingo-o7pd) ---------------- */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; color: var(--ink-2); } button.link.receipt { color: var(--faint); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--panel-2); } button.link.receipt svg { width: 13px; height: 13px; } button.link.receipt:hover { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); text-decoration: none; background: color-mix(in srgb, var(--ok) 8%, var(--panel-2)); } .rlbl { font-weight: 600; } .modal.receipt-modal { width: 480px; max-height: 86vh; overflow-y: auto; } .receipt-modal .h2 { display: flex; align-items: center; gap: 7px; } .receipt-modal .h2 svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ok); } .receipt-section { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } .receipt-section:first-child { border-top: none; padding-top: 0; margin-top: 0; } .receipt-section .side-h { margin-bottom: 5px; padding: 0; } .receipt-section strong { color: var(--ink); } .copy { cursor: pointer; transition: color .12s; } .copy:hover { color: var(--accent); } .scope { display: inline-block; font-size: 11px; font-weight: 600; background: var(--accent-weak); color: var(--accent); border-radius: var(--pill); padding: 1px 9px; margin: 2px 4px 0 0; } .rlink { color: var(--accent); text-decoration: underline; } /* pending (optimistic) + voted state */ .feed-row.pending { opacity: .62; } .feed-row.pending .post-title { font-style: italic; } .votes .up.voted, button.up.voted { color: var(--up); font-weight: 700; } .votes .up.voted { background: var(--up-weak); } /* inline edit (mingo-e6kq) — reuses the compose textarea styling */ .edit-box textarea.edit-ta { min-height: 68px; } .post-meta .edited { font-style: italic; } /* ---------------- mobile: off-canvas drawer ---------------- */ @media (max-width: 720px) { .topbar { z-index: 70; padding: 10px 15px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .layout { grid-template-columns: 1fr; gap: 0; padding: 0 15px; margin-top: 16px; } .h1 { font-size: 22px; } .sidebar { position: fixed; top: 50px; left: 0; bottom: 0; width: 270px; max-width: 84vw; background: var(--bg); border-right: 1px solid var(--line); padding: 16px 12px 28px; overflow-y: auto; z-index: 60; box-shadow: var(--sh-3); transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1); } body.nav-open .sidebar { transform: none; } .nav-backdrop { display: block; position: fixed; inset: 50px 0 0 0; background: rgba(16,14,24,.45); opacity: 0; visibility: hidden; transition: opacity .24s; z-index: 55; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } .community-list a { padding: 10px 9px; } .feed-row { padding: 12px 13px; gap: 2px 10px; } .card { padding: 15px 15px; } .topbar { gap: 8px; } .user-btn { max-width: 128px; } .view-header { gap: 10px; } .view-header .vh-action button, .view-header .vh-action a.primary { padding: 7px 11px; } .menu-pop { min-width: 168px; } }