/* VOODOO skin for gamja — themeable. Default is the green terminal (per CLAUDE.md), but users can switch to amber, high-contrast, or a light "paper" mode for accessibility. The whole palette is driven by --vd-* variables; gamja's own variables map onto them, and hardcoded colors were replaced with the vars so one attribute (data-vd-theme on ) reskins everything. */ /* ---- palettes ------------------------------------------------------------ */ :root, :root[data-theme], :root[data-vd-theme="green"] { /* GREEN (default) */ --vd-bg:#0A0A0A; --vd-fg:#33FF66; --vd-dim:#1f9e42; --vd-panel:#0d160d; --vd-panel-hi:#1c3a1c; --vd-faint:#17612d; --vd-hi:#5aff85; --vd-red:#ff5f5b; } :root[data-vd-theme="amber"] { /* AMBER terminal */ --vd-bg:#0A0A0A; --vd-fg:#FFB454; --vd-dim:#a06b24; --vd-panel:#180f04; --vd-panel-hi:#2a1a08; --vd-faint:#6e4a14; --vd-hi:#ffcf8a; --vd-red:#ff6b66; } :root[data-vd-theme="contrast"] { /* WHITE on black */ --vd-bg:#000000; --vd-fg:#FFFFFF; --vd-dim:#c8c8c8; --vd-panel:#141414; --vd-panel-hi:#2a2a2a; --vd-faint:#9a9a9a; --vd-hi:#ffffff; --vd-red:#ff8f8a; } :root[data-vd-theme="light"] { /* LIGHT "paper" */ --vd-bg:#F4F1E8; --vd-fg:#1B1B1B; --vd-dim:#5f5c50; --vd-panel:#E7E2D3; --vd-panel-hi:#d8d2be; --vd-faint:#8a8578; --vd-hi:#000000; --vd-red:#b3261e; } /* ---- map gamja's variables onto the palette ------------------------------ */ :root, :root[data-theme], :root[data-vd-theme] { --main-background: var(--vd-bg); --main-color: var(--vd-fg); --sidebar-background: var(--vd-panel); --expander-background: var(--vd-panel); --expander-background-hover: var(--vd-panel-hi); --expander-border: var(--vd-dim); --button-color: var(--vd-bg); --button-background: var(--vd-fg); --button-background-hover: var(--vd-hi); --button-border: var(--vd-fg); --green: var(--vd-fg); --gray: var(--vd-dim); --red: var(--vd-red); } @media (prefers-color-scheme: dark) { /* override gamja's own dark values too */ :root { --main-background: var(--vd-bg); --main-color: var(--vd-fg); --sidebar-background: var(--vd-panel); --button-background: var(--vd-fg); --button-background-hover: var(--vd-hi); --button-border: var(--vd-fg); --green: var(--vd-fg); --gray: var(--vd-dim); --red: var(--vd-red); } } /* no images, no rainbow — flatten the 16-color nick palette to the accent */ #buffer .nick-1, #buffer .nick-2, #buffer .nick-3, #buffer .nick-4, #buffer .nick-5, #buffer .nick-6, #buffer .nick-7, #buffer .nick-8, #buffer .nick-9, #buffer .nick-10, #buffer .nick-11, #buffer .nick-12, #buffer .nick-13, #buffer .nick-14, #buffer .nick-15, #buffer .nick-16, a.nick { color: var(--vd-fg); } a.timestamp, #buffer .date-separator { color: var(--vd-faint); } #buffer .motd { color: var(--vd-fg); } #buffer .highlight .nick { color: var(--vd-bg); background-color: var(--vd-fg); } body { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; } ::selection { background: var(--vd-fg); color: var(--vd-bg); } /* email is off by design — hide the misleading optional e-mail field */ input[type="email"], label:has(input[type="email"]) { display: none !important; } /* clean, un-scary login: just nick + password. Hide gamja's "Advanced options" (username / real name / server password — nobody should touch these) and the auto-join toggle (auto-join is always on via config.json, and un-checking it just stranded people on the server buffer). */ #connect details, #connect label:has(input[name="autojoin"]) { display: none !important; } /* inputs don't inherit color — force the accent so the composer isn't invisible */ #composer input, input, textarea { color: var(--vd-fg) !important; caret-color: var(--vd-fg); } ::placeholder { color: var(--vd-dim); opacity: 1; } .vd-cmdbar { display: none; } /* command bar is mobile-only (shown at ≤640px) */ .vd-privacy { display: block; text-align: center; margin: 1rem auto 0; color: var(--vd-dim); font-size: .8rem; text-decoration: none; } .vd-privacy:hover { color: var(--vd-fg); } html, body { background: var(--vd-bg); overscroll-behavior: none; } #buffer .logline-list { padding: 12px; } #buffer .logline { line-height: 1.5; } /* ---- theme picker (swatches) --------------------------------------------- */ .vd-theme { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: .4rem .5rem; } #composer .vd-theme { justify-content: flex-end; border-bottom: 1px solid var(--vd-panel-hi); } #connect .vd-theme { justify-content: center; margin-top: 1rem; } .vd-theme-lbl { color: var(--vd-dim); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .vd-swatch { width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--vd-dim); -webkit-tap-highlight-color: transparent; } .vd-swatch:focus-visible { outline: 2px solid var(--vd-fg); outline-offset: 2px; } .vd-swatch[aria-pressed="true"] { border-color: var(--vd-fg); box-shadow: 0 0 0 2px var(--vd-bg), 0 0 0 3px var(--vd-fg); } .vd-swatch[data-theme="green"] { background: #33FF66; } .vd-swatch[data-theme="amber"] { background: #FFB454; } .vd-swatch[data-theme="contrast"] { background: #FFFFFF; } .vd-swatch[data-theme="light"] { background: #F4F1E8; } /* detention overlay + line-hide — defined here (not inline) so gamja's strict Content-Security-Policy (default-src 'self', no unsafe-inline) allows them */ #vd-detention { position: fixed; inset: 0; z-index: 99999; background: var(--vd-bg); } #vd-detention iframe { width: 100%; height: 100%; border: 0; display: block; } .vd-hidden { display: none !important; } @media (max-width: 640px) { #buffer .logline { margin-bottom: .5rem; } #buffer .logline-list { padding: 12px 12px 20px; } #buffer, #buffer-header, #composer, #buffer .logline-list { min-width: 0; } #buffer { touch-action: manipulation; } #buffer .logline, #buffer .talk, #buffer .me-tell, #buffer .motd { overflow: visible; overflow-wrap: anywhere; word-break: break-word; } a.timestamp { display: none; } #composer input { height: 46px; font-size: 16px; } #buffer-header .title { padding: 8px 12px; } #composer { display: flex; flex-direction: column; } .vd-cmdbar { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .45rem .5rem; border-bottom: 1px solid var(--vd-panel-hi); scrollbar-width: none; } .vd-cmdbar::-webkit-scrollbar { display: none; } .vd-cmdbar button { flex: 0 0 auto; background: var(--vd-panel); color: var(--vd-fg); border: 1px solid var(--vd-dim); border-radius: 3px; font: inherit; font-size: .82rem; padding: .42rem .7rem; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vd-cmdbar button:active { background: var(--vd-fg); color: var(--vd-bg); } #buffer-list .expander, #member-list .expander { width: 34px !important; background: var(--vd-panel) !important; display: flex !important; align-items: center; justify-content: center; } #buffer-list .expander { border-right: 1px solid var(--vd-dim); } #member-list .expander { border-left: 1px solid var(--vd-dim); } .expander span { display: none !important; } #buffer-list .expander::before { content: "\2630"; color: var(--vd-fg); font-size: 1.3rem; } #member-list .expander::before { content: "\22EE"; color: var(--vd-fg); font-size: 1.3rem; } html.vd-hide-nav #buffer-list .expander, html.vd-hide-nav #member-list .expander { display: none !important; } }