/* Gruvbox — three modes selected via [data-theme] on . Default (no attribute) maps to gruvbox-dark; "dark-hard" and "light" override. Everything below the palette uses CSS vars and adapts automatically. */ :root, :root[data-theme="dark"] { --bg: #282828; --bg-elev: #32302f; --bg-elev-2: #3c3836; --bg-hover: #504945; --border: #3c3836; --border-soft: #32302f; --text: #ebdbb2; --text-mute: #a89984; --text-dim: #665c54; --accent: #fe8019; /* gruvbox orange */ --accent-bri: #fabd2f; /* gruvbox yellow */ --accent-soft: rgba(254,128,25,0.16); --on-accent: #1d2021; --success: #b8bb26; --warn: #fabd2f; --danger: #fb4934; --green-quote: #b8bb26; --link: #83a598; --link-bri: #8ec07c; --flash: rgba(254,128,25,0.18); --row-hidden: rgba(251,73,52,0.08); --hl-soft: rgba(254,128,25,0.10); --font: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif; --mono: "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", ui-monospace, monospace; } :root[data-theme="dark-hard"] { --bg: #1d2021; --bg-elev: #282828; --bg-elev-2: #32302f; --bg-hover: #3c3836; --border: #3c3836; --border-soft: #282828; --text: #ebdbb2; --text-mute: #a89984; --text-dim: #665c54; --accent: #fe8019; --accent-bri: #fabd2f; --accent-soft: rgba(254,128,25,0.16); --on-accent: #1d2021; --success: #b8bb26; --warn: #fabd2f; --danger: #fb4934; --green-quote: #b8bb26; --link: #83a598; --link-bri: #8ec07c; --flash: rgba(254,128,25,0.18); --row-hidden: rgba(251,73,52,0.08); --hl-soft: rgba(254,128,25,0.10); } :root[data-theme="light"] { --bg: #fbf1c7; --bg-elev: #f2e5bc; --bg-elev-2: #ebdbb2; --bg-hover: #d5c4a1; --border: #d5c4a1; --border-soft: #ebdbb2; --text: #3c3836; --text-mute: #7c6f64; --text-dim: #bdae93; --accent: #af3a03; /* darker orange for light surface */ --accent-bri: #d65d0e; --accent-soft: rgba(175,58,3,0.12); --on-accent: #fbf1c7; --success: #79740e; --warn: #b57614; --danger: #9d0006; --green-quote: #79740e; --link: #076678; --link-bri: #427b58; --flash: rgba(175,58,3,0.16); --row-hidden: rgba(157,0,6,0.06); --hl-soft: rgba(175,58,3,0.08); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-bri); } code, .mono { font-family: var(--mono); } code { color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 3px; font-size: 0.92em; } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; } .muted { color: var(--text-mute); } .bold { color: var(--text); font-weight: 600; } /* ---- top bar ---- */ .topbar { display: flex; align-items: center; gap: 24px; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { color: var(--accent); font-family: var(--mono); font-weight: 700; letter-spacing: 0.5px; font-size: 14px; } .brand:hover { color: var(--accent-bri); } .brand .caret { animation: blink 1.1s steps(2, end) infinite; color: var(--accent); } @keyframes blink { 50% { opacity: 0; } } .boards { display: flex; gap: 4px; flex-wrap: wrap; } .board-link { padding: 4px 10px; border-radius: 4px; color: var(--text-mute); border: 1px solid transparent; } .board-link:hover { color: var(--text); background: var(--bg-elev); } .board-link.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } .board-link.admin-link { color: var(--danger); } .board-link.admin-link.active { color: var(--danger); background: var(--row-hidden); border-color: var(--row-hidden); } .topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; } .user { display: flex; align-items: center; gap: 12px; } .user .email { color: var(--text-mute); font-size: 12px; } .user form { margin: 0; } button.link { background: none; border: none; color: var(--text-mute); padding: 0; font-size: 12px; cursor: pointer; } button.link:hover { color: var(--accent); } button.link.danger:hover { color: var(--danger); } /* ---- theme switcher ---- */ .theme-switch { display: inline-flex; gap: 1px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 1px; } .theme-switch button { background: none; border: none; color: var(--text-mute); font-size: 11.5px; padding: 3px 8px; border-radius: 3px; cursor: pointer; line-height: 1.2; } .theme-switch button:hover { color: var(--text); background: var(--bg-hover); } .theme-switch button.active { color: var(--accent); background: var(--bg-hover); } /* ---- generic page ---- */ .page { flex: 1; max-width: 900px; width: 100%; margin: 0 auto; padding: 28px 22px 80px; } .prompt { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 14px; } .prompt-sm { font-size: 13px; color: var(--text-mute); margin: 24px 0 10px; font-weight: 500; } .prompt .muted, .prompt-sm .muted { color: var(--text-dim); font-weight: 400; } .flash { border: 1px solid var(--accent-soft); background: var(--flash); color: var(--accent-bri); padding: 8px 14px; margin: 16px auto 0; max-width: 900px; border-radius: 4px; font-size: 13px; } /* ---- login ---- */ .login { max-width: 480px; margin: 60px auto 0; } .login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .login-form label { font-size: 12px; } .login-form input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; font-size: 14px; outline: none; } .login-form input:focus { border-color: var(--accent); } .login-form button { align-self: flex-start; background: var(--accent); color: var(--on-accent); border: none; padding: 8px 16px; border-radius: 4px; font-weight: 600; } .login-form button:hover { background: var(--accent-bri); } .oauth-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 14px; transition: border-color .12s, background .12s; } .oauth-btn:hover { border-color: var(--accent); background: var(--bg-elev-2); color: var(--text); } .oauth-btn .g-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #4285f4 0%, #ea4335 100%); color: #fff; font-weight: 700; font-size: 13px; } .small { font-size: 11.5px; } .divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .warn-tag { color: var(--warn); border: 1px solid var(--warn); padding: 0 5px; border-radius: 3px; font-size: 10px; margin-left: 6px; background: transparent; } /* ---- home / boards grid ---- */ .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 32px; } .board-card { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 5px; padding: 14px 16px; color: var(--text); transition: border-color .12s, background .12s, transform .08s; } .board-card:hover { border-color: var(--accent); background: var(--bg-elev-2); color: var(--text); transform: translateY(-1px); } .board-name { color: var(--accent); font-size: 16px; font-weight: 600; } .board-title { color: var(--text-mute); font-size: 12px; margin-top: 4px; } /* ---- board / thread headers ---- */ .board-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .board-title-tag { color: var(--text-mute); font-size: 13px; font-weight: 400; margin-left: 8px; } .live-dot { display: flex; align-items: center; gap: 6px; font-size: 12px; } .live-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.4; } } /* ---- composer ---- */ .composer { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: 6px; padding: 12px; margin-bottom: 20px; } .composer-row { display: flex; gap: 8px; } .name-input { background: var(--bg); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; font-size: 13px; width: 220px; max-width: 100%; outline: none; } .name-input::placeholder { color: var(--text-dim); } .name-input:focus { border-color: var(--accent); } .composer textarea { background: var(--bg); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; font-size: 14px; padding: 10px 12px; resize: vertical; outline: none; } .composer textarea::placeholder { color: var(--text-dim); } .composer textarea:focus { border-color: var(--accent); } .composer cap-widget { align-self: flex-end; --cap-background: var(--bg); --cap-border-color: var(--border-soft); --cap-border-radius: 4px; --cap-color: var(--text); --cap-widget-width: 230px; --cap-widget-height: 34px; --cap-widget-padding: 8px; --cap-gap: 10px; --cap-font: var(--font); } .composer button { align-self: flex-end; background: var(--accent); color: var(--on-accent); border: none; padding: 6px 14px; border-radius: 4px; font-weight: 600; } .composer button:hover { background: var(--accent-bri); } /* ---- thread / posts ---- */ .thread-list, .post-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .crumbs { margin-bottom: 14px; font-size: 12px; } .crumbs a { color: var(--text-mute); } .crumbs a:hover { color: var(--accent); } .thread { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 5px; transition: border-color .12s, background .12s; } .thread:hover { border-color: var(--accent-soft); background: var(--bg-elev-2); } .thread .thread-link { display: block; padding: 12px 14px; color: var(--text); } .post { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 5px; padding: 12px 14px; scroll-margin-top: 70px; } .post.op { border-color: var(--accent-soft); } .post.hidden { opacity: 0.45; } .post.hidden::after { content: "[ hidden by mod ]"; display: block; color: var(--warn); font-size: 11px; margin-top: 6px; } .post.flash-hl { animation: flash 1.2s ease-out; } @keyframes flash { 0% { background: var(--flash); } 100% { background: var(--bg-elev); } } .post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; } .username { color: var(--accent); font-weight: 600; } .anon { color: var(--text); font-weight: 500; } .trip { color: var(--text-mute); font-family: var(--mono); font-size: 11.5px; background: var(--bg-elev-2); padding: 0 5px; border-radius: 3px; } .op-pill { color: var(--success); border: 1px solid var(--success); padding: 0 6px; border-radius: 3px; font-size: 10px; letter-spacing: 0.6px; background: transparent; } .board-pill { color: var(--accent); background: var(--accent-soft); padding: 0 6px; border-radius: 3px; font-size: 11px; } .replies { color: var(--text-mute); } .postno { font-family: var(--mono); font-size: 11px; } .postno:hover { color: var(--accent); } .quote-btn { background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 13px; line-height: 1; padding: 1px 5px; border-radius: 3px; } .quote-btn:hover { color: var(--accent); border-color: var(--accent-soft); background: var(--bg-elev-2); } .mod-inline { margin-left: auto; } .post-body { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; } .post-body .greentext { color: var(--green-quote); } .post-body .ext-link { color: var(--link); text-decoration: underline dotted; } .post-body .img-link { color: var(--accent); border: 1px dashed var(--accent-soft); padding: 1px 6px; border-radius: 3px; font-size: 12px; } .post-body .img-link:hover { background: var(--accent-soft); } .post-body .postref, .backlinks .postref { color: var(--accent); font-family: var(--mono); text-decoration: underline dotted; } .post-body .postref:hover, .backlinks .postref:hover { color: var(--accent-bri); } .backlinks { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--text-mute); } .backref { font-weight: 500; } .compact .post { padding: 8px 12px; } .compact .post-body { font-size: 12.5px; color: var(--text-mute); } /* ---- postref hover preview ---- */ .ref-preview { position: absolute; z-index: 50; max-width: min(640px, 80vw); background: var(--bg-elev-2); border: 1px solid var(--accent-soft); border-radius: 5px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); pointer-events: none; font-size: 12.5px; } .ref-preview .post-meta { margin-bottom: 6px; } /* ---- admin ---- */ .admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .admin-table th { color: var(--text-mute); font-weight: 500; } .admin-table td.preview { max-width: 360px; overflow: hidden; text-overflow: ellipsis; } .admin-table .col-email { font-size: 11.5px; white-space: nowrap; } .admin-table .email-tag { color: var(--warn); background: var(--hl-soft); border: 1px solid var(--accent-soft); padding: 1px 6px; border-radius: 3px; } .admin-table tr.row-hidden { background: var(--row-hidden); } .admin-table tr.row-hidden td { color: var(--text-mute); } /* ---- image popup ---- */ .img-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .img-modal[hidden] { display: none; } .img-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(2px); } .img-modal-frame { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 14px; } .img-modal-img { max-width: 86vw; max-height: 78vh; border-radius: 4px; background: #000; } .img-modal-close { position: absolute; top: 6px; right: 10px; background: none; border: none; color: var(--text-mute); font-size: 22px; line-height: 1; cursor: pointer; } .img-modal-close:hover { color: var(--accent); } .img-modal-src { color: var(--text-mute); font-size: 11px; } /* ---- footer ---- */ .footer { padding: 14px 22px; border-top: 1px solid var(--border); text-align: center; font-size: 11px; color: var(--text-dim); } /* ---- small screens ---- */ @media (max-width: 720px) { .topbar { flex-wrap: wrap; gap: 12px; padding: 10px 14px; } .boards { order: 3; flex-basis: 100%; } .topbar-end { margin-left: auto; } .page { padding: 18px 14px 60px; } }