/* ========================================================================== HobbyManager — "Terminal" theme family Four palettes (Green / Dim Green / Amber / Blue) mimicking an old phosphor CRT terminal (xterm / VT100 / IBM 3270 mainframe console): black background, monospace type, sharp corners, no drop shadows, and a green/amber/cyan "status light" palette instead of soft pastel fills. Unlike theme.css/theme-dark.css (light is the unscoped :root default, dark is a [data-bs-theme="dark"] override layered on top), every rule in this file is scoped under an attribute selector on - nothing here fires unless data-bs-theme starts with "terminal_" (see layout.html's th:attr="data-bs-theme=${theme}" and ThemePreference, whose enum constant names - lowercased by ThemeControllerAdvice#getTheme - ARE these attribute values verbatim, e.g. TERMINAL_GREEN_DIM -> "terminal_green_dim"). Load this AFTER theme.css/theme-dark.css/main.css so its equal-or-higher specificity, equal-or-later-source-order rules win when a terminal theme is active. Structure (section 1-2 below) is written once, shared by all four palettes via the "[data-bs-theme^='terminal_']" prefix selector - only the raw --term-* color tokens differ per palette (section 3), each scoped to its own exact "[data-bs-theme='terminal_x']" value. ========================================================================== */ /* -------------------------------------------------------------------------- 0. TYPEFACE Share Tech Mono reads authentically "terminal" but stays legible at UI sizes (VT323 was considered and rejected - too decorative below 16px). Loaded via in layout.html, same as the Open Sans font above it; real monospace fallbacks first in the stack so this still looks right with zero network access. -------------------------------------------------------------------------- */ [data-bs-theme^="terminal_"] { --term-font: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* -------------------------------------------------------------------------- 1. ROOT TOKENS — Bootstrap variables retinted from the --term-* palette. A palette block (section 3) only ever needs to redefine --term-*; it never has to touch a --bs-* variable directly. -------------------------------------------------------------------------- */ [data-bs-theme^="terminal_"] { --bs-body-font-family: var(--term-font); --bs-font-monospace: var(--term-font); --bs-primary: var(--term-fg); --bs-primary-rgb: var(--term-fg-rgb); --bs-secondary: var(--term-gray); --bs-secondary-rgb: var(--term-gray-rgb); --bs-secondary-text-emphasis: var(--term-gray); --bs-secondary-bg-subtle: var(--term-bg-raised); --bs-secondary-border-subtle: var(--term-gray); --bs-info: var(--term-info); --bs-info-rgb: var(--term-info-rgb); --bs-info-text-emphasis: var(--term-info); --bs-info-bg-subtle: var(--term-bg-raised); --bs-info-border-subtle: var(--term-info); --bs-success: var(--term-fg); --bs-success-rgb: var(--term-fg-rgb); --bs-success-text-emphasis: var(--term-fg-bright); --bs-success-bg-subtle: var(--term-bg-raised); --bs-success-border-subtle: var(--term-fg); --bs-danger: var(--term-danger); --bs-danger-rgb: var(--term-danger-rgb); --bs-danger-text-emphasis: var(--term-danger); --bs-danger-bg-subtle: var(--term-bg-raised); --bs-danger-border-subtle: var(--term-danger); --bs-warning: var(--term-warning); --bs-warning-rgb: var(--term-warning-rgb); --bs-warning-text-emphasis: var(--term-warning); --bs-warning-bg-subtle: var(--term-bg-raised); --bs-warning-border-subtle: var(--term-warning); /* --bs-*-rgb below matter even though every hex --bs-* above is already retinted: Bootstrap's own .bg-*/.text-* utility classes (.bg-white, .bg-light, .bg-body-tertiary, .text-dark, etc.) are generated as rgba(var(--bs-X-rgb), var(--bs-*-opacity)) - the hex var alone is never read by them. Missing one here is exactly what left (.bg-body-tertiary) and the sidenav (.bg-white) stuck rendering Bootstrap's stock near-white default instead of this palette's near-black, even though --bs-tertiary-bg/--bs-body-bg were already correctly set above (confirmed against a real render, not just reasoned about - see the hardcoded-surface patches below for the other half of this same fix). */ --bs-body-bg-rgb: var(--term-bg-rgb); --bs-body-color-rgb: var(--term-fg-bright-rgb); --bs-secondary-bg-rgb: var(--term-bg-raised-rgb); --bs-tertiary-bg-rgb: var(--term-bg-raised-rgb); --bs-body-bg: var(--term-bg); --bs-body-color: var(--term-fg-bright); --bs-secondary-bg: var(--term-bg-raised); --bs-tertiary-bg: var(--term-bg-raised); --bs-secondary-color: var(--term-fg-dim); --bs-emphasis-color: var(--term-fg-bright); --bs-border-color: var(--term-fg-dim); --bs-border-color-translucent: rgba(var(--term-fg-rgb), .2); /* Sharp corners everywhere — a terminal window has no rounded anything */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-pill: 0; /* No drop shadows — depth comes from borders + glow, not elevation */ --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; --bs-link-color: var(--term-fg); --bs-link-hover-color: var(--term-fg-bright); --bs-focus-ring-color: rgba(var(--term-fg-rgb), .35); } [data-bs-theme^="terminal_"] body { background-color: var(--bs-body-bg); font-family: var(--term-font); letter-spacing: .01em; } /* -------------------------------------------------------------------------- 1a. CRT ATMOSPHERE Intensity is itself a palette token (--term-scanline-opacity / --term-glow-blur / --term-flicker-amount) so the dimmer palette can turn this down without any structural rule changing. -------------------------------------------------------------------------- */ [data-bs-theme^="terminal_"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, var(--term-scanline-opacity)) 3px, rgba(0, 0, 0, 0) 4px ); mix-blend-mode: multiply; } @keyframes term-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: calc(1 - var(--term-flicker-amount)); } 98% { opacity: calc(1 - var(--term-flicker-amount) * .4); } } [data-bs-theme^="terminal_"] body { animation: term-flicker 6s infinite; } /* Phosphor glow on the stuff meant to draw the eye first */ [data-bs-theme^="terminal_"] h1, [data-bs-theme^="terminal_"] h2, [data-bs-theme^="terminal_"] h3, [data-bs-theme^="terminal_"] h4, [data-bs-theme^="terminal_"] .fw-bold, [data-bs-theme^="terminal_"] .btn, [data-bs-theme^="terminal_"] .navbar-brand { text-shadow: 0 0 var(--term-glow-blur) currentColor; } /* -------------------------------------------------------------------------- 2. COMPONENT OVERRIDES -------------------------------------------------------------------------- */ [data-bs-theme^="terminal_"] * { border-radius: 0 !important; } /* -------------------------------------------------------------------------- 2a. HARDCODED-SURFACE PATCHES Same category of fix as the --bs-*-rgb additions above, for surfaces that are hardcoded to a Bootstrap utility class rather than reading a --bs-* variable at all - mirrors theme-dark.css's own equivalent section (that list was itself built from real bugs found there, e.g. .bg-white sidenav staying white, browser autofill ignoring background-color). Every one of these ships its own !important in Bootstrap, so ours must too. -------------------------------------------------------------------------- */ [data-bs-theme^="terminal_"] .bg-white, [data-bs-theme^="terminal_"] .card, [data-bs-theme^="terminal_"] .offcanvas, [data-bs-theme^="terminal_"] .modal-content, [data-bs-theme^="terminal_"] .dropdown-menu { background-color: var(--term-bg) !important; border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; } /* bg-light ships its own !important - used directly on several form controls/badges throughout the app (e.g. status dropdowns styled "form-select ... bg-light"), so it silently wins over a plain .form-select/.form-control background rule unless matched here too. */ [data-bs-theme^="terminal_"] .bg-light { background-color: var(--term-bg) !important; } /* .text-dark is used directly on the sidenav links (nav-link ... text-dark) - reads --bs-dark-rgb, which this theme never touches, so without this it would render near-black text on the now-near-black .bg-white sidenav above: invisible. */ [data-bs-theme^="terminal_"] .text-dark, [data-bs-theme^="terminal_"] .text-dark-emphasis { color: var(--term-fg-bright) !important; } /* Browser autofill (login/profile password fields) paints its own white background + black text that ignores ordinary background-color rules, including !important ones above. */ [data-bs-theme^="terminal_"] input:-webkit-autofill, [data-bs-theme^="terminal_"] input:-webkit-autofill:hover, [data-bs-theme^="terminal_"] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--term-fg-bright); -webkit-box-shadow: 0 0 0 1000px var(--term-bg) inset; box-shadow: 0 0 0 1000px var(--term-bg) inset; caret-color: var(--term-fg); transition: background-color 9999s ease-in-out 0s; } [data-bs-theme^="terminal_"] .card-header { background-color: var(--term-bg) !important; border-bottom: 1px solid var(--bs-border-color) !important; } /* "> " command-prompt marker ahead of every card/section heading */ [data-bs-theme^="terminal_"] .card-header h6::before, [data-bs-theme^="terminal_"] .card-header h5::before { content: "> "; opacity: .8; } /* Buttons: sharp, uppercase, bracket-quoted like a mainframe menu action, with the classic reverse-video (invert to filled) hover/active state instead of a lighten/darken tint. */ [data-bs-theme^="terminal_"] .btn { font-family: var(--term-font); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; border-radius: 0 !important; box-shadow: none !important; } [data-bs-theme^="terminal_"] .btn::before { content: "[ "; } [data-bs-theme^="terminal_"] .btn::after { content: " ]"; } [data-bs-theme^="terminal_"] .btn-primary { --bs-btn-color: var(--term-bg); --bs-btn-bg: var(--term-fg); --bs-btn-border-color: var(--term-fg); --bs-btn-hover-color: var(--term-bg); --bs-btn-hover-bg: var(--term-fg-bright); --bs-btn-hover-border-color: var(--term-fg-bright); --bs-btn-active-bg: var(--term-fg-bright); --bs-btn-active-border-color: var(--term-fg-bright); } [data-bs-theme^="terminal_"] .btn-outline-primary, [data-bs-theme^="terminal_"] .btn-outline-secondary, [data-bs-theme^="terminal_"] .btn-outline-danger, [data-bs-theme^="terminal_"] .btn-outline-info { --bs-btn-bg: transparent; } [data-bs-theme^="terminal_"] .btn-outline-primary { --bs-btn-color: var(--term-fg); --bs-btn-border-color: var(--term-fg); --bs-btn-hover-color: var(--term-bg); --bs-btn-hover-bg: var(--term-fg); --bs-btn-hover-border-color: var(--term-fg); } [data-bs-theme^="terminal_"] .btn-outline-danger { --bs-btn-color: var(--term-danger); --bs-btn-border-color: var(--term-danger); --bs-btn-hover-color: var(--term-bg); --bs-btn-hover-bg: var(--term-danger); --bs-btn-hover-border-color: var(--term-danger); } [data-bs-theme^="terminal_"] .btn-light { --bs-btn-color: var(--term-fg-bright); --bs-btn-bg: var(--term-bg-raised); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--term-bg-raised); --bs-btn-hover-border-color: var(--term-fg); } /* Icon-only actions (e.g. the supply table's bare-trash-icon delete) skip the bracket/glow treatment - only real .btn elements get [ bracketed ]. */ [data-bs-theme^="terminal_"] .bi { text-shadow: none; } /* Form controls: black fields, palette-colored caret, reverse-video focus ring instead of a soft box-shadow bloom. */ [data-bs-theme^="terminal_"] .form-select, [data-bs-theme^="terminal_"] .form-control { background-color: var(--term-bg); border: 1px solid var(--bs-border-color); color: var(--term-fg-bright); font-family: var(--term-font); caret-color: var(--term-fg); box-shadow: none !important; } [data-bs-theme^="terminal_"] .form-select:focus, [data-bs-theme^="terminal_"] .form-control:focus { background-color: var(--term-bg); border-color: var(--term-fg); color: var(--term-fg-bright); box-shadow: 0 0 0 1px var(--term-fg) inset, 0 0 10px rgba(var(--term-fg-rgb), .5) !important; } [data-bs-theme^="terminal_"] .form-control::placeholder { color: var(--term-fg-dim); opacity: 1; } [data-bs-theme^="terminal_"] .form-label { text-transform: uppercase; letter-spacing: .08em; color: var(--term-fg-dim); } /* Tables: monospace grid, uppercase header, reverse-video row hover — the terminal equivalent of a highlighted/selected list line. */ [data-bs-theme^="terminal_"] .table { --bs-table-bg: transparent; --bs-table-color: var(--term-fg-bright); --bs-table-border-color: var(--bs-border-color); font-family: var(--term-font); border: 1px solid var(--bs-border-color); } [data-bs-theme^="terminal_"] .table thead { background-color: var(--term-bg) !important; } [data-bs-theme^="terminal_"] .table thead th { text-transform: uppercase; letter-spacing: .06em; color: var(--term-fg); border-bottom: 2px solid var(--bs-border-color) !important; font-weight: 400; } [data-bs-theme^="terminal_"] .table-hover > tbody > tr:hover > * { background-color: var(--term-fg) !important; color: var(--term-bg) !important; text-shadow: none; } [data-bs-theme^="terminal_"] .table-hover > tbody > tr:hover .form-control, [data-bs-theme^="terminal_"] .table-hover > tbody > tr:hover .form-select { background-color: var(--term-bg) !important; color: var(--term-fg-bright) !important; } /* Badges/status pills: bracket-quoted outline chips, not filled pastel — the same "[ TEXT ]" motif as buttons, at a smaller scale. */ [data-bs-theme^="terminal_"] .badge { font-family: var(--term-font); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; background-color: transparent !important; border: 1px solid currentColor; border-radius: 0 !important; } [data-bs-theme^="terminal_"] .badge::before { content: "["; margin-right: .25em; } [data-bs-theme^="terminal_"] .badge::after { content: "]"; margin-left: .25em; } /* Progress bars: blocky fill, border, no gradient/stripe animation */ [data-bs-theme^="terminal_"] .progress { background-color: var(--term-bg); border: 1px solid var(--bs-border-color); border-radius: 0 !important; } [data-bs-theme^="terminal_"] .progress-bar { background-color: var(--term-fg) !important; } /* Scrollbars (WebKit) — keep the CRT feeling all the way to the chrome */ [data-bs-theme^="terminal_"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-bs-theme^="terminal_"] ::-webkit-scrollbar-track { background: var(--term-bg); } [data-bs-theme^="terminal_"] ::-webkit-scrollbar-thumb { background: var(--term-fg-dim); border: 1px solid var(--term-bg); } [data-bs-theme^="terminal_"] ::-webkit-scrollbar-thumb:hover { background: var(--term-fg); } [data-bs-theme^="terminal_"] ::selection { background: var(--term-fg); color: var(--term-bg); } /* Blinking block cursor next to the current nav item / page title, purely decorative - a nod to the "ready" prompt on a real terminal. Opt-in via .term-caret, not applied automatically anywhere in the app templates yet. */ @keyframes term-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } [data-bs-theme^="terminal_"] .term-caret::after { content: "\2588"; display: inline-block; margin-left: .15em; animation: term-caret-blink 1s step-end infinite; } /* Hobby accent dot/edge: same mechanism as theme.css (--h hue set inline per hobby) but rendered at terminal-safe saturation/lightness rather than a soft pastel hsl() so it still reads as "phosphor", not a random color. */ [data-bs-theme^="terminal_"] .hobby-edge, [data-bs-theme^="terminal_"] .hobby-dot { --hobby-accent: hsl(var(--h, 120), 90%, 55%); } [data-bs-theme^="terminal_"] .hobby-edge { border-left: 3px solid var(--hobby-accent) !important; } [data-bs-theme^="terminal_"] .hobby-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--hobby-accent); flex-shrink: 0; box-shadow: 0 0 4px var(--hobby-accent); } /* -------------------------------------------------------------------------- 3. PALETTES Each block below is the ONLY place that differs between the four terminal themes - just the raw --term-* tokens sections 1-2 above are built from. -------------------------------------------------------------------------- */ /* Palette: GREEN — vivid, saturated phosphor green (xterm/hacker-movie green). */ [data-bs-theme="terminal_green"] { --term-bg: #060907; --term-bg-rgb: 6, 9, 7; --term-bg-raised: #0B120D; --term-bg-raised-rgb: 11, 18, 13; --term-fg: #33FF33; --term-fg-rgb: 51, 255, 51; --term-fg-bright: #4DFF4D; --term-fg-bright-rgb: 77, 255, 77; --term-fg-dim: #1C8F2E; --term-gray: #6B8F76; --term-gray-rgb: 107, 143, 118; --term-info: #33D9FF; --term-info-rgb: 51, 217, 255; --term-danger: #FF4433; --term-danger-rgb: 255, 68, 51; --term-warning: #FFB000; --term-warning-rgb: 255, 176, 0; --term-glow-blur: 6px; --term-scanline-opacity: .12; --term-flicker-amount: .04; } /* Palette: DIM GREEN — desaturated, lower-intensity phosphor green: an old, worn CRT rather than a fresh neon one. Same hue family as GREEN, pulled way down in saturation/value, with the glow and scanline effects also toned down so the whole thing reads as "calmer," not just "less green." */ [data-bs-theme="terminal_green_dim"] { --term-bg: #07090A; --term-bg-rgb: 7, 9, 10; --term-bg-raised: #0C110E; --term-bg-raised-rgb: 12, 17, 14; --term-fg: #4FA65C; --term-fg-rgb: 79, 166, 92; --term-fg-bright: #6FBF7A; --term-fg-bright-rgb: 111, 191, 122; --term-fg-dim: #2E5A34; --term-gray: #708577; --term-gray-rgb: 112, 133, 119; --term-info: #4FA0AC; --term-info-rgb: 79, 160, 172; --term-danger: #B8574A; --term-danger-rgb: 184, 87, 74; --term-warning: #B98A3E; --term-warning-rgb: 185, 138, 62; --term-glow-blur: 2px; --term-scanline-opacity: .07; --term-flicker-amount: .015; } /* Palette: AMBER — classic amber CRT (DEC VT220-style). Mostly monochrome amber across the board; danger stays true red, mirroring how real monochrome-amber terminals (e.g. IBM 3278/3279) still used a dedicated red for protected/error fields. */ [data-bs-theme="terminal_amber"] { --term-bg: #0C0700; --term-bg-rgb: 12, 7, 0; --term-bg-raised: #140D00; --term-bg-raised-rgb: 20, 13, 0; --term-fg: #FFB000; --term-fg-rgb: 255, 176, 0; --term-fg-bright: #FFCB4D; --term-fg-bright-rgb: 255, 203, 77; --term-fg-dim: #8C5E00; --term-gray: #8F8168; --term-gray-rgb: 143, 129, 104; --term-info: #E8940A; --term-info-rgb: 232, 148, 10; --term-danger: #FF3B30; --term-danger-rgb: 255, 59, 48; --term-warning: #FFD24D; --term-warning-rgb: 255, 210, 77; --term-glow-blur: 6px; --term-scanline-opacity: .12; --term-flicker-amount: .04; } /* Palette: BLUE — cool monochrome blue/cyan CRT (early IBM PC / "matrix" hacker-terminal look, rather than warm green/amber). Danger and warning pull warm on purpose for contrast against an otherwise all-cool palette. */ [data-bs-theme="terminal_blue"] { --term-bg: #050710; --term-bg-rgb: 5, 7, 16; --term-bg-raised: #0A0E1C; --term-bg-raised-rgb: 10, 14, 28; --term-fg: #4FC3F7; --term-fg-rgb: 79, 195, 247; --term-fg-bright: #8FE3FF; --term-fg-bright-rgb: 143, 227, 255; --term-fg-dim: #1F5A78; --term-gray: #6E8A99; --term-gray-rgb: 110, 138, 153; --term-info: #4FC3F7; --term-info-rgb: 79, 195, 247; --term-danger: #FF5C4D; --term-danger-rgb: 255, 92, 77; --term-warning: #FFC24D; --term-warning-rgb: 255, 194, 77; --term-glow-blur: 6px; --term-scanline-opacity: .12; --term-flicker-amount: .04; }