/* DDial Theme — black & white monochrome (rDial / Retro-Dial inspired) Applied when ============================================================ */ @import url("https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css"); body.theme-ddial { --dd-bg: #000000; --dd-bg-deep: #000000; --dd-panel: #0a0a0a; --dd-panel-2: #111111; --dd-text: #c8c8c8; --dd-text-rgb: 200, 200, 200; --dd-accent: #ffffff; --dd-accent-rgb: 255, 255, 255; --dd-bright: #ffffff; --dd-msg: #e8e8e8; --dd-border: #333333; --dd-muted: #777777; --dd-link: #dddddd; --dd-error: #ffffff; --dd-sys: #b0b0b0; --dd-pm: #f0f0f0; --dd-pm-bg: rgba(40, 40, 40, 0.65); --dd-mention: #ffffff; /* Respect /font · /font-size · /font-height */ font-family: var(--user-font-family); font-size: var(--user-font-size); line-height: var(--user-line-height); letter-spacing: 0.01em; background: var(--dd-bg-deep); color: var(--dd-text); /* Flat mono — no phosphor glow (unlike CRT green) */ text-shadow: none; } /* Subtle vignette only — no green bloom */ body.theme-ddial::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient( 1200px 700px at 50% 45%, rgba(20, 20, 20, 0.1) 0%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.55) 100% ); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.65); } /* Soft scanlines — light B&W terminal feel */ body.theme-ddial::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(255, 255, 255, 0.02) 3px, rgba(0, 0, 0, 0.12) 3px ); opacity: 0.4; mix-blend-mode: multiply; } body.theme-ddial #app { position: relative; z-index: 1; filter: none; } body.theme-ddial a { color: var(--dd-link); text-decoration: underline; text-underline-offset: 2px; } body.theme-ddial a:hover { color: var(--dd-bright); } /* Header */ body.theme-ddial #panel_header { background: var(--dd-bg); border-bottom: 1px solid var(--dd-border); box-shadow: none; } body.theme-ddial .brand-a { color: var(--dd-bright); text-shadow: none; } body.theme-ddial .brand-b { color: var(--dd-text); text-shadow: none; opacity: 0.85; } body.theme-ddial #clock, body.theme-ddial .muted { color: var(--dd-muted) !important; text-shadow: none; } /* Columns */ body.theme-ddial #col_left, body.theme-ddial #col_right { background: var(--dd-panel); border-color: var(--dd-border); } body.theme-ddial #col_left { border-right: 1px solid var(--dd-border); box-shadow: none; } body.theme-ddial #col_right { border-left: 1px solid var(--dd-border); box-shadow: none; } body.theme-ddial #col_main { background: var(--dd-bg); } /* Panels */ body.theme-ddial .panel { border-bottom-color: var(--dd-border); } body.theme-ddial .panel-title { background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); border-bottom: 1px solid var(--dd-border); color: var(--dd-muted); letter-spacing: 0.12em; text-transform: uppercase; } body.theme-ddial .panel-title .name { color: var(--dd-bright); text-shadow: none; } body.theme-ddial .panel-toggle { color: var(--dd-muted); } body.theme-ddial .panel-toggle:hover { background: rgba(255, 255, 255, 0.15); color: var(--dd-bright); box-shadow: none; } body.theme-ddial .panel-body { color: var(--dd-text); } /* Input */ body.theme-ddial .chat-input-bar { background: var(--dd-bg); border-top: 1px solid var(--dd-border); box-shadow: none; } body.theme-ddial .icon-btn { color: var(--dd-muted); } body.theme-ddial .icon-btn:hover, body.theme-ddial .icon-btn.active { background: rgba(255, 255, 255, 0.12); color: var(--dd-bright); box-shadow: none; } body.theme-ddial #chat_msg { background: #050505; border: 1px solid #444; color: var(--dd-bright); font-family: inherit; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.03); text-shadow: none; caret-color: var(--dd-bright); } body.theme-ddial #chat_msg:focus { border-color: #888; box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.05); } body.theme-ddial #chat_msg::placeholder { color: #555; } /* Messages — pure monochrome (strip Magviz rainbow) */ body.theme-ddial .msg { color: var(--dd-msg); } body.theme-ddial .msg.public { color: var(--dd-msg); } body.theme-ddial .msg.system { color: var(--dd-sys); text-shadow: none; } body.theme-ddial .msg.system.error { color: var(--dd-bright); text-shadow: none; font-weight: 600; } /* Presence Login/Logout — monochrome emphasis (no green/red on DDial) */ body.theme-ddial .presence-login { color: #ffffff; font-weight: 700; } body.theme-ddial .presence-logout { color: #b0b0b0; font-weight: 700; } body.theme-ddial .presence-killed { color: #ffffff; font-weight: 800; text-decoration: underline; } body.theme-ddial .presence-arrow, body.theme-ddial .presence-mbr { color: #888; } body.theme-ddial .msg.action { color: #b8b8b8; font-style: italic; } body.theme-ddial .msg.private, body.theme-ddial .msg.private-out, body.theme-ddial .msg.private.link { background: var(--dd-pm-bg); border: 1px solid #555; color: var(--dd-pm); } body.theme-ddial .msg.mention { background: rgba(255, 255, 255, 0.06); border-left: 2px solid #aaa; padding-left: 6px; } /* Force Magviz #RRGGBB spans to grayscale white */ body.theme-ddial .chat-color, body.theme-ddial .handle-name, body.theme-ddial .handle-name .chat-color { color: var(--dd-bright) !important; text-shadow: none !important; } /* P badges stay high-contrast but monochrome */ body.theme-ddial .p-badge { color: #ffffff !important; text-shadow: none; background: #222; padding: 0 3px; border: 1px solid #666; border-radius: 2px; } body.theme-ddial .p-badge.out { color: #ccc !important; border-color: #555; text-shadow: none; } /* DDial mono: keep PG/PS/PV visible (inverse chip) — still distinct from red P */ body.theme-ddial .msg.private-pg .pg-badge, body.theme-ddial span.pg-badge, body.theme-ddial .msg.private-ps .ps-badge, body.theme-ddial span.ps-badge, body.theme-ddial .msg.private-pv .pv-badge, body.theme-ddial span.pv-badge { color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 700 !important; margin-right: 3px; letter-spacing: 0.04em; background: #444; padding: 0 3px; border: 1px solid #aaa; border-radius: 2px; } body.theme-ddial .sys-icon { color: var(--dd-bright); } body.theme-ddial .cmd { color: var(--dd-bright); text-shadow: none; } body.theme-ddial .color_highlight { color: var(--dd-bright); } body.theme-ddial .handle-tag .handle-name { text-shadow: none; } body.theme-ddial .handle-chrome, body.theme-ddial .handle-chrome b { color: #888; text-shadow: none; } /* Brand greens/purples and other console accents → mono */ body.theme-ddial .brand-a, body.theme-ddial .brand-b { /* already set above */ } body.theme-ddial .access-sysop { color: #ffffff; text-shadow: none; font-weight: 700; } /* Rows */ body.theme-ddial .user-row:hover, body.theme-ddial .channel-row:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 2px 0 0 #fff; } body.theme-ddial .channel-row .ch-id { color: var(--dd-bright); } body.theme-ddial .channel-row .ch-count, body.theme-ddial .user-row .idle, body.theme-ddial .user-row .connected, body.theme-ddial .user-row .connected::before, body.theme-ddial .recent-row { color: var(--dd-muted); } body.theme-ddial .mbr-badge { color: #000; background: #ddd; border-color: #fff; text-shadow: none; box-shadow: none; } /* Help */ body.theme-ddial .help-title { color: var(--dd-bright); text-shadow: none; } body.theme-ddial .cmd-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Scrollbars */ body.theme-ddial .panel-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #888, #555); box-shadow: none; } body.theme-ddial .panel-body::-webkit-scrollbar-track { background: #0a0a0a; border-left: 1px solid #222; } /* Connect splash — SVG banner under DDial mono chrome */ body.theme-ddial img.connect-banner { opacity: 0.95; filter: grayscale(0.15); } /* Banner on connect */ body.theme-ddial .banner { color: var(--dd-bright); text-shadow: none; letter-spacing: 0.06em; } /* Links in chat */ body.theme-ddial .chat-link { color: var(--dd-link); } /* Panel column buttons */ body.theme-ddial .panel-col-btn { color: var(--dd-muted); } body.theme-ddial .panel-col-btn:hover { color: var(--dd-bright); background: rgba(255, 255, 255, 0.08); } /* Theme indicator chip */ body.theme-ddial #theme_indicator { display: inline-block; margin-left: 8px; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--dd-bright); border: 1px solid #666; padding: 1px 6px; border-radius: 3px; text-shadow: none; box-shadow: none; background: #111; } /* Hover react/reply — monochrome */ body.theme-ddial .msg.msg-reactable:hover, body.theme-ddial .msg.msg-reactable.is-menu-open { background: #1a1a1a; } body.theme-ddial .msg-react-bar { background: #0d0d0d; border-color: #444; } body.theme-ddial .msg-react-btn.reply:hover { color: #fff; } body.theme-ddial .reply-bar-inner { border-left-color: #ccc; background: #0d0d0d; border-color: #333; } body.theme-ddial .reply-bar-label { color: #ddd; } /* Hover react/reply — monochrome */ body.theme-ddial .msg.msg-reactable:hover, body.theme-ddial .msg.msg-reactable.is-menu-open { background: #1a1a1a; } body.theme-ddial .msg-react-bar { background: #0d0d0d; border-color: #444; } body.theme-ddial .msg-react-btn.reply:hover { color: #fff; } body.theme-ddial .reply-bar-inner { border-left-color: #ccc; background: #0d0d0d; border-color: #333; } body.theme-ddial .reply-bar-label { color: #ddd; } /* Color bucket / swatches — desaturate chrome so UI stays B&W */ body.theme-ddial .color-bucket, body.theme-ddial .my-swatches { filter: grayscale(1); opacity: 0.85; } @media (prefers-reduced-motion: reduce) { body.theme-ddial::after { animation: none !important; } } /* /code blocks — monochrome */ body.theme-ddial .msg.msg-code .chat-code { background: #0a0a0a; border-color: #444; border-left-color: #aaa; color: #e8e8e8; }