/* CRT Theme — green-on-black CRT aesthetic Applied when ============================================================ */ @import url("https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css"); body.theme-crt { --ph-bg: #02120b; --ph-bg-deep: #010805; --ph-panel: #04160e; --ph-panel-2: #061a11; --ph-text: #72f578; --ph-text-rgb: 114, 245, 120; --ph-accent: #3cff7f; --ph-accent-rgb: 60, 255, 127; --ph-bright: #a3ffdf; --ph-msg: #d1fbe1; --ph-border: #0f2e1c; --ph-muted: #1a5c36; --ph-link: #4fffc6; --ph-error: #ff2a2a; --ph-sys: #52f25a; --ph-pm: #fff2a6; --ph-pm-bg: rgba(43, 28, 0, 0.55); --ph-mention: #a3ffdf; /* Respect /font · /font-size · /font-height (fall back to mono stack) */ font-family: var(--user-font-family); font-size: var(--user-font-size); line-height: var(--user-line-height); letter-spacing: 0.02em; background: var(--ph-bg-deep); color: var(--ph-text); text-shadow: 0 0 2px rgba(var(--ph-text-rgb), 0.55), 0 0 10px rgba(var(--ph-accent-rgb), 0.18); } /* CRT vignette + CRT bloom over the whole app */ body.theme-crt::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient( 1200px 700px at 50% 45%, rgba(8, 30, 16, 0.15) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.72) 100% ); box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(var(--ph-accent-rgb), 0.08); } /* Scanlines */ body.theme-crt::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(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 3px ); opacity: 0.55; mix-blend-mode: multiply; animation: ph-scan 9s linear infinite; } @keyframes ph-scan { 0% { background-position: 0 0; } 100% { background-position: 0 3px; } } /* Subtle tube wobble on the shell */ body.theme-crt #app { position: relative; z-index: 1; filter: saturate(1.25) brightness(1.05); animation: ph-wobble 8s ease-in-out infinite; } @keyframes ph-wobble { 0%, 100% { transform: perspective(900px) scale(1) rotateX(0deg); } 50% { transform: perspective(900px) scale(1.004) rotateX(0.35deg); } } body.theme-crt a { color: var(--ph-link); text-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.35); } body.theme-crt a:hover { color: var(--ph-bright); } /* Header */ body.theme-crt #panel_header { background: var(--ph-bg); border-bottom: 1px solid var(--ph-border); box-shadow: 0 0 18px rgba(var(--ph-accent-rgb), 0.08); } body.theme-crt .brand-a { color: var(--ph-accent); text-shadow: 0 0 6px rgba(var(--ph-accent-rgb), 0.7), 0 0 18px rgba(var(--ph-accent-rgb), 0.35); } body.theme-crt .brand-b { color: var(--ph-bright); text-shadow: 0 0 6px rgba(163, 255, 223, 0.6), 0 0 16px rgba(var(--ph-accent-rgb), 0.3); } body.theme-crt #clock, body.theme-crt .muted { color: var(--ph-muted) !important; text-shadow: none; } /* Columns */ body.theme-crt #col_left, body.theme-crt #col_right { background: var(--ph-panel); border-color: var(--ph-border); } body.theme-crt #col_left { border-right: 1px solid var(--ph-border); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); } body.theme-crt #col_right { border-left: 1px solid var(--ph-border); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35); } body.theme-crt #col_main { background: radial-gradient( ellipse at 50% 30%, #052014 0%, var(--ph-bg) 55%, #010805 100% ); } /* Panels */ body.theme-crt .panel { border-bottom-color: var(--ph-border); } body.theme-crt .panel-title { background: linear-gradient(180deg, #0a2416 0%, #061a11 100%); border-bottom: 1px solid var(--ph-border); color: var(--ph-muted); letter-spacing: 0.12em; text-transform: uppercase; } body.theme-crt .panel-title .name { color: var(--ph-accent); text-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.45); } body.theme-crt .panel-toggle { color: var(--ph-muted); } body.theme-crt .panel-toggle:hover { background: rgba(var(--ph-accent-rgb), 0.25); color: var(--ph-bg-deep); box-shadow: 0 0 10px rgba(var(--ph-accent-rgb), 0.4); } body.theme-crt .panel-body { color: var(--ph-text); } /* Input */ body.theme-crt .chat-input-bar { background: var(--ph-bg); border-top: 1px solid var(--ph-border); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4); } body.theme-crt .icon-btn { color: var(--ph-muted); } body.theme-crt .icon-btn:hover, body.theme-crt .icon-btn.active { background: rgba(var(--ph-accent-rgb), 0.2); color: var(--ph-accent); box-shadow: 0 0 12px rgba(var(--ph-accent-rgb), 0.35); } body.theme-crt #chat_msg { background: #020c07; border: 1px solid rgba(var(--ph-accent-rgb), 0.35); color: var(--ph-bright); font-family: inherit; box-shadow: inset 0 0 18px rgba(var(--ph-accent-rgb), 0.08), 0 0 12px rgba(var(--ph-accent-rgb), 0.1); text-shadow: 0 0 6px rgba(var(--ph-accent-rgb), 0.35); caret-color: var(--ph-accent); } body.theme-crt #chat_msg:focus { border-color: var(--ph-accent); box-shadow: inset 0 0 22px rgba(var(--ph-accent-rgb), 0.12), 0 0 18px rgba(var(--ph-accent-rgb), 0.25); } body.theme-crt #chat_msg::placeholder { color: rgba(var(--ph-accent-rgb), 0.35); } /* Messages */ body.theme-crt .msg { color: var(--ph-msg); } body.theme-crt .msg.public { color: var(--ph-msg); } body.theme-crt .msg.system { color: var(--ph-sys); text-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.35); } body.theme-crt .msg.system.error { color: var(--ph-error); text-shadow: 0 0 8px rgba(255, 42, 42, 0.45); } body.theme-crt .msg.action { color: #9affc0; font-style: italic; } body.theme-crt .msg.private, body.theme-crt .msg.private-out, body.theme-crt .msg.private.link { background: var(--ph-pm-bg); border: 1px solid rgba(255, 80, 80, 0.25); color: var(--ph-pm); } body.theme-crt .msg.mention { background: rgba(var(--ph-accent-rgb), 0.08); border-left: 2px solid var(--ph-accent); padding-left: 6px; } /* Keep inbound P red (Magviz); softer coral for outbound P→ */ body.theme-crt .p-badge { color: #ff2a2a !important; text-shadow: 0 0 8px rgba(255, 42, 42, 0.45); } body.theme-crt .p-badge.out { color: #ff8a80 !important; text-shadow: 0 0 6px rgba(255, 138, 128, 0.35); } body.theme-crt .msg.private-pg .pg-badge, body.theme-crt span.pg-badge { color: #d4a5ff !important; -webkit-text-fill-color: #d4a5ff; text-shadow: 0 0 8px rgba(180, 100, 255, 0.55); font-weight: 700 !important; } body.theme-crt .msg.private-pg { background: rgba(140, 60, 200, 0.12); } body.theme-crt .msg.private-ps .ps-badge, body.theme-crt span.ps-badge { color: #ffe066 !important; -webkit-text-fill-color: #ffe066; text-shadow: 0 0 8px rgba(255, 220, 80, 0.5); font-weight: 700 !important; } body.theme-crt .msg.private-ps { background: rgba(220, 180, 40, 0.12); } body.theme-crt .msg.private-pv .pv-badge, body.theme-crt span.pv-badge { color: #5eb0ff !important; -webkit-text-fill-color: #5eb0ff; text-shadow: 0 0 8px rgba(80, 160, 255, 0.5); font-weight: 700 !important; } body.theme-crt .msg.private-pv { background: rgba(50, 120, 220, 0.12); } body.theme-crt .sys-icon { color: var(--ph-accent); } body.theme-crt .presence-login { color: #33ff66; text-shadow: 0 0 8px rgba(51, 255, 102, 0.45); } body.theme-crt .presence-logout { color: #ff4466; text-shadow: 0 0 8px rgba(255, 68, 102, 0.4); } body.theme-crt .presence-killed { color: #ff2244; text-shadow: 0 0 10px rgba(255, 34, 68, 0.55); } body.theme-crt .presence-arrow { color: #4a6b4a; } body.theme-crt .cmd { color: var(--ph-bright); text-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.4); } body.theme-crt .color_highlight { color: var(--ph-accent); } body.theme-crt .handle-tag .handle-name { text-shadow: 0 0 6px currentColor; } body.theme-crt .handle-chrome, body.theme-crt .handle-chrome b { color: #4a6b4a; text-shadow: none; } body.theme-crt .handle-name { /* handle keeps its own color / Magviz codes */ } /* Rows */ body.theme-crt .user-row:hover, body.theme-crt .channel-row:hover { background: rgba(var(--ph-accent-rgb), 0.08); box-shadow: inset 2px 0 0 var(--ph-accent); } body.theme-crt .channel-row .ch-id { color: var(--ph-accent); } body.theme-crt .channel-row .ch-count, body.theme-crt .user-row .idle, body.theme-crt .user-row .connected, body.theme-crt .user-row .connected::before, body.theme-crt .recent-row { color: var(--ph-muted); } body.theme-crt .mbr-badge { color: var(--ph-bg-deep); background: rgba(var(--ph-accent-rgb), 0.85); border-color: var(--ph-accent); text-shadow: none; box-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.45); } body.theme-crt .access-sysop { color: #ffe7a8; text-shadow: 0 0 8px rgba(255, 231, 168, 0.6); } /* Help */ body.theme-crt .help-title { color: var(--ph-accent); text-shadow: 0 0 10px rgba(var(--ph-accent-rgb), 0.5); } body.theme-crt .cmd-table td { border-bottom: 1px solid rgba(var(--ph-accent-rgb), 0.08); } /* Scrollbars */ body.theme-crt .panel-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ph-bright), var(--ph-text)); box-shadow: 0 0 6px rgba(var(--ph-text-rgb), 0.45); } body.theme-crt .panel-body::-webkit-scrollbar-track { background: var(--ph-bg); border-left: 1px solid var(--ph-border); } /* Connect splash — SVG banner; soft phosphor glow on the image */ body.theme-crt img.connect-banner { filter: drop-shadow(0 0 2px rgba(51, 255, 102, 0.25)); } /* Banner on connect */ body.theme-crt .banner { text-shadow: 0 0 8px rgba(var(--ph-accent-rgb), 0.6), 0 0 24px rgba(var(--ph-accent-rgb), 0.3); } /* Links in chat */ body.theme-crt .chat-link { color: var(--ph-link); } /* Theme indicator chip in header when active */ body.theme-crt #theme_indicator { display: inline-block; margin-left: 8px; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ph-accent); border: 1px solid rgba(var(--ph-accent-rgb), 0.4); padding: 1px 6px; border-radius: 3px; text-shadow: 0 0 6px rgba(var(--ph-accent-rgb), 0.5); box-shadow: 0 0 10px rgba(var(--ph-accent-rgb), 0.15); } /* Hover react/reply — phosphor-friendly highlight */ body.theme-crt .msg.msg-reactable:hover, body.theme-crt .msg.msg-reactable.is-menu-open { background: rgba(var(--ph-accent-rgb), 0.08); } body.theme-crt .msg-react-bar { background: var(--ph-panel); border-color: var(--ph-border); box-shadow: 0 0 12px rgba(var(--ph-accent-rgb), 0.2); } body.theme-crt .msg-react-btn.reply:hover { color: var(--ph-accent); } body.theme-crt .reply-bar-inner { border-left-color: var(--ph-accent); background: var(--ph-panel); border-color: var(--ph-border); } body.theme-crt .reply-bar-label { color: var(--ph-accent); } /* Reduce motion if preferred */ @media (prefers-reduced-motion: reduce) { body.theme-crt #app, body.theme-crt::after { animation: none !important; } } /* /code blocks — phosphor panel look */ body.theme-crt .msg.msg-code .chat-code { background: rgba(0, 20, 0, 0.85); border-color: rgba(var(--ph-accent-rgb), 0.35); border-left-color: var(--ph-accent); color: var(--ph-fg, #b4f0b4); box-shadow: 0 0 10px rgba(var(--ph-accent-rgb), 0.12); }