/* ============================================================ Theme: Phosphor CRT Inspired by an old green-phosphor terminal display: dark green background, silver bezel, heavy inset vignette, and a soft scanline sweeping down the screen. This overrides the variables from css/main.css and adds a few extra rules — it does not touch the default theme. To enable: add class="theme-phosphor" to in index.html To go back: remove that class. Nothing else changes. ============================================================ */ body.theme-phosphor { --background: #0a170a; --foreground: #90ff90; --accent: #80ff80; --accent-dim: #4fbf4f; --cursor: #80ff80; --prompt-user: #80ff80; --prompt-host: #80ff80; --prompt-path: #baffba; --prompt-symbol: #90ff90; --color-error: #ff8080; --color-warning: #d9ff80; --color-info: #80ffe0; --color-success: #a0ff80; --color-dim: #3a6b3a; --selection-bg: rgba(128, 255, 128, 0.2); --titlebar-bg: #0f1f0f; --titlebar-fg: #6bcf6b; --scrollbar-track: #0f1f0f; --scrollbar-thumb: #2a4a2a; --border-radius: 16px; } /* Silver CRT bezel + darkened inner vignette */ body.theme-phosphor #terminal-container { border: solid 3px #bbbbbb; background-image: radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #0a170a 80%); box-shadow: 0 0 0 1px rgba(128, 255, 128, 0.08), inset 0 0 10em 1em rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.9); } body.theme-phosphor #terminal-titlebar { border-bottom: 1px solid #1c301c; } /* Soft phosphor glow on the text itself */ body.theme-phosphor #terminal-output, body.theme-phosphor #terminal-input-line { text-shadow: 0 0 3px rgba(128, 255, 128, 0.35); } /* Sweeping scanline band drifting down the screen — softer and slower than the static fine scanlines from the .crt overlay, the two can be combined. */ body.theme-phosphor #terminal-container::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient( to bottom, rgba(128, 255, 128, 0) 0%, rgba(128, 255, 128, 0.07) 50%, rgba(128, 255, 128, 0) 100% ); background-size: 100% 60px; background-repeat: no-repeat; animation: phosphorScan 8s linear infinite; pointer-events: none; z-index: 100; border-radius: var(--border-radius); } @keyframes phosphorScan { 0% { background-position: 0 -60px; } 100% { background-position: 0 calc(100% + 60px); } }