/* skins. each overrides CSS vars + body background via from Settings. no attribute = Instrument. */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=VT323&family=Press+Start+2P&family=Audiowide&family=Michroma&display=swap'); /* FRUTIGER AERO: glossy Y2K glass, sky-blue to lime. */ html[data-theme="aero"] { --bg: #0b3b6f; --panel: rgba(255,255,255,.14); --panel-2: rgba(255,255,255,.20); --raised: rgba(255,255,255,.28); --line: rgba(255,255,255,.35); --line-bright: rgba(255,255,255,.6); --ink: #ffffff; --ink-dim: #d6ecff; --ink-faint: #a9cdef; --amber: #aaff00; /* lime accent */ --amber-soft: #7fd400; --red: #ff5a7a; --green: #5dffb0; --cyan: #36d1ff; --shadow: 0 14px 40px -10px rgba(0,40,90,.55), inset 0 1px 0 rgba(255,255,255,.6); --display: 'Segoe UI', 'Frutiger', 'Helvetica Neue', sans-serif; --mono: 'Consolas', ui-monospace, monospace; /* logo */ --logo-bg: rgba(11, 59, 111, 0.6); --logo-border: rgba(255, 255, 255, 0.8); --logo-quad-1: #ffffff; --logo-quad-2: #aaff00; --logo-inner-border: rgba(255, 255, 255, 0.4); } /* scrollbar: translucent-white glass thumb */ html[data-theme="aero"] { --sb-size: 12px; --sb-radius: 999px; --sb-track: rgba(255,255,255,.08); --sb-thumb: rgba(255,255,255,.45); --sb-thumb-hover: rgba(255,255,255,.7); --sb-thumb-border: 2px solid rgba(255,255,255,.35); /* gauge: lime fill on frosted track */ --gauge-track: rgba(255,255,255,.25); --gauge-fill: linear-gradient(180deg, #c6ff66, #8fe000); } html[data-theme="aero"] .gauge-track { border-radius: 999px !important; border: 1px solid rgba(255,255,255,.6) !important; } html[data-theme="aero"] .gauge-fill { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="aero"] .gauge-val { color: #fff !important; } /* window is transparent:true, desktop shows through where CSS isnt fully opaque. keep a blue/lime tint so panels stay readable. */ html[data-theme="aero"], html[data-theme="aero"] body { background: transparent !important; } /* glass opacity from --aero-opacity (0..1), set live by Settings slider */ html[data-theme="aero"] { --aero-opacity: 0.82; } html[data-theme="aero"] body { background: radial-gradient(1100px 700px at 75% -15%, rgba(127,227,255, calc(var(--aero-opacity) * 0.90)) 0%, transparent 55%), radial-gradient(900px 700px at -10% 120%, rgba(182,255,122, calc(var(--aero-opacity) * 0.80)) 0%, transparent 50%), linear-gradient(160deg, rgba(26,143,227, var(--aero-opacity)) 0%, rgba(11,95,176, calc(var(--aero-opacity) * 0.97)) 45%, rgba(7,61,130, calc(var(--aero-opacity) * 1.02)) 100%) !important; } /* splash matches the aero glass gradient instead of the dark radial */ html[data-theme="aero"] .splash { background: radial-gradient(1100px 700px at 75% -15%, rgba(127,227,255,.92) 0%, transparent 55%), radial-gradient(900px 700px at -10% 120%, rgba(182,255,122,.82) 0%, transparent 50%), linear-gradient(160deg, rgba(26,143,227,.97) 0%, rgba(11,95,176,.96) 45%, rgba(7,61,130,1) 100%); } html[data-theme="aero"] .splash-name { color: #fff; text-shadow: 0 2px 6px rgba(0,30,70,.5); } html[data-theme="aero"] .splash-tag { color: rgba(255,255,255,.82); } html[data-theme="aero"] .splash-bar { background: rgba(255,255,255,.28); } html[data-theme="aero"] .splash-status { color: rgba(255,255,255,.7); } html[data-theme="aero"] .splash-logo { filter: drop-shadow(0 14px 30px rgba(0,30,70,.45)); } /* glossy glass panels with top highlight */ html[data-theme="aero"] .section, html[data-theme="aero"] .chassis-card, html[data-theme="aero"] .group-tile, html[data-theme="aero"] .menu-section, html[data-theme="aero"] .fault, html[data-theme="aero"] .live-panel, html[data-theme="aero"] .modal, html[data-theme="aero"] .result-card, html[data-theme="aero"] .split-nav-item, html[data-theme="aero"] .act-card, html[data-theme="aero"] .setting-row, html[data-theme="aero"] .theme-card { backdrop-filter: blur(14px) saturate(1.4); background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -8px rgba(0,30,70,.5); } html[data-theme="aero"] .btn, html[data-theme="aero"] .fkey, html[data-theme="aero"] .icon-btn { border-radius: 999px !important; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px -4px rgba(0,30,70,.5); } html[data-theme="aero"] .btn.primary { background: linear-gradient(180deg, #c6ff66, #8fe000) !important; color: #16320a !important; } html[data-theme="aero"] .title, html[data-theme="aero"] .brand-name { text-shadow: 0 1px 2px rgba(0,30,70,.4); } html[data-theme="aero"] .topbar, html[data-theme="aero"] .fkeybar { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); backdrop-filter: blur(12px); } /* BRUSHED METAL: early-2000s Mac OS X aluminum, cool greys. */ html[data-theme="metal"] { --bg: #b9bcc1; --panel: #cdd0d4; --panel-2: #c2c5ca; --raised: #d8dadd; --line: #9a9da3; --line-bright: #7e8187; --ink: #1e2227; --ink-dim: #4a4f56; --ink-faint: #74797f; --amber: #2f6fd6; /* aqua-blue accent */ --amber-soft: #2257ac; --red: #c0392b; --green: #2e8b57; --cyan: #2f6fd6; --shadow: 0 6px 16px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); --display: 'Lucida Grande', 'Helvetica Neue', sans-serif; --mono: 'Monaco', ui-monospace, monospace; /* logo */ --logo-bg: #74797f; --logo-border: #e2e4e7; --logo-quad-1: #dcdcdc; --logo-quad-2: #2f6fd6; --logo-inner-border: #4a4f56; } html[data-theme="metal"] body { background: repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 2px), linear-gradient(180deg, #d2d5d9, #b3b6bb); } /* scrollbar: aluminum pill thumb on etched track */ html[data-theme="metal"] { --sb-size: 14px; --sb-radius: 999px; --sb-track: linear-gradient(180deg, #c0c3c7, #aeb1b6); --sb-thumb: linear-gradient(180deg, #f0f1f2, #c4c7cb); --sb-thumb-hover: linear-gradient(180deg, #fbfbfc, #cfd2d6); --sb-thumb-border: 1px solid #9a9da3; } html[data-theme="metal"] .view::-webkit-scrollbar-thumb, html[data-theme="metal"] .modal::-webkit-scrollbar-thumb, html[data-theme="metal"] .live-panel::-webkit-scrollbar-thumb, html[data-theme="metal"] .split-list::-webkit-scrollbar-thumb { box-shadow: inset 0 1px 0 #fff; } /* gauge: aqua-blue fill on aluminum track */ html[data-theme="metal"] { --gauge-track: #aeb1b6; --gauge-fill: linear-gradient(180deg, #5aa0ec, #2f6fd6); } html[data-theme="metal"] .gauge-track { border-color: #9a9da3 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } html[data-theme="metal"] .gauge-val { color: #1e2227 !important; } html[data-theme="metal"] .topbar, html[data-theme="metal"] .fkeybar, html[data-theme="metal"] .section-head, html[data-theme="metal"] .live-head { background: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 2px), linear-gradient(180deg, #e2e4e7, #c3c6ca); border-color: #9a9da3; } html[data-theme="metal"] .btn, html[data-theme="metal"] .fkey, html[data-theme="metal"] .icon-btn, html[data-theme="metal"] .seg-btn { background: linear-gradient(180deg, #f4f5f6, #cfd2d6) !important; border-color: #92959b !important; color: #1e2227 !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.25); } html[data-theme="metal"] .btn.primary, html[data-theme="metal"] .seg-btn.active { background: linear-gradient(180deg, #5aa0ec, #2f6fd6) !important; color: #fff !important; } html[data-theme="metal"] .title { text-shadow: 0 1px 0 #fff; } html[data-theme="metal"] .grain { display: none; } /* INPA: white page, black text, Win9x chrome, grey beveled F-keys. mirrors INPA Loader. */ html[data-theme="inpa"] { --bg: #ffffff; /* white work area */ --panel: #ffffff; --panel-2: #f4f4f4; --raised: #ececec; --line: #b9b9b9; --line-bright: #808080; --ink: #000000; --ink-dim: #1a1a1a; --ink-faint: #555555; --amber: #000080; /* navy accents/headings */ --amber-soft: #000060; --red: #c00000; --green: #00a000; --cyan: #000080; --shadow: none; --display: 'Arial', 'Helvetica Neue', sans-serif; --mono: 'Consolas', 'Courier New', monospace; /* logo */ --logo-bg: #000000; --logo-border: #dcdcdc; --logo-quad-1: #ffffff; --logo-quad-2: #0066b2; --logo-inner-border: #000000; } html[data-theme="inpa"] body { background: #ffffff; } /* scrollbar: flat Win9x grey, square thumb */ html[data-theme="inpa"] { --sb-size: 16px; --sb-radius: 0; --sb-track: #f0f0f0; --sb-thumb: #c8c4bc; --sb-thumb-hover: #b3afa6; --sb-thumb-border: 1px solid #fff; /* gauge: authentic INPA bar, black fill on bright-green track */ --gauge-track: #00d000; --gauge-fill: #000000; } html[data-theme="inpa"] .gauge-track { border-radius: 0 !important; border: 1px solid #000 !important; } html[data-theme="inpa"] .gauge-val { color: #000 !important; } html[data-theme="inpa"] .view::-webkit-scrollbar-thumb, html[data-theme="inpa"] .modal::-webkit-scrollbar-thumb, html[data-theme="inpa"] .live-panel::-webkit-scrollbar-thumb, html[data-theme="inpa"] .split-list::-webkit-scrollbar-thumb { border-right: 1px solid #808080; border-bottom: 1px solid #808080; box-shadow: inset 1px 1px 0 #fff; } html[data-theme="inpa"] .view::-webkit-scrollbar-track, html[data-theme="inpa"] .modal::-webkit-scrollbar-track, html[data-theme="inpa"] .live-panel::-webkit-scrollbar-track, html[data-theme="inpa"] .split-list::-webkit-scrollbar-track { background: repeating-conic-gradient(#e9e9e9 0 25%, #f4f4f4 0 50%) 0 0/2px 2px; } /* plain white canvas: kill gloss/blur/rounding */ html[data-theme="inpa"] .section, html[data-theme="inpa"] .chassis-card, html[data-theme="inpa"] .group-tile, html[data-theme="inpa"] .menu-section, /* :not(.bare) — a bare readout draws straight on the window, like INPA */ html[data-theme="inpa"] .live-panel:not(.bare), html[data-theme="inpa"] .modal, html[data-theme="inpa"] .result-card, html[data-theme="inpa"] .split-nav-item, html[data-theme="inpa"] .act-card, html[data-theme="inpa"] .fault, html[data-theme="inpa"] .setting-row, html[data-theme="inpa"] .theme-card { border-radius: 0 !important; background: #ffffff !important; color: #000 !important; border: 1px solid #c9c9c9 !important; box-shadow: none !important; backdrop-filter: none !important; } /* flat navy headings */ html[data-theme="inpa"] .title, html[data-theme="inpa"] .brand-name { color: #000 !important; font-weight: 400 !important; text-shadow: none !important; letter-spacing: 0 !important; } html[data-theme="inpa"] .eyebrow { color: #000080 !important; } /* selected sidebar module: navy bar (overrides flat-white panel rule above) */ html[data-theme="inpa"] .split-nav-item.active { background: #000080 !important; border-color: #000060 !important; } html[data-theme="inpa"] .split-nav-item.active .nav-name { color: #ffffff !important; } html[data-theme="inpa"] .split-nav-item:hover:not(.active) { background: #eef2ff !important; } /* top chrome: flat light-grey Windows toolbar */ html[data-theme="inpa"] .topbar { background: linear-gradient(180deg, #fbfbfb, #ececec) !important; border-bottom: 1px solid #a9a9a9 !important; color: #000 !important; } /* bottom F-key bar: grey strip with beveled buttons, F-numbers above */ html[data-theme="inpa"] .fkeybar { background: #d4d0c8 !important; border-top: 1px solid #ffffff !important; color: #000 !important; } html[data-theme="inpa"] .fkey { border-radius: 0 !important; background: #e9e6e1 !important; color: #000 !important; border: 1px solid #fff !important; border-right-color: #808080 !important; border-bottom-color: #808080 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a9a5a0 !important; } html[data-theme="inpa"] .fkey:hover { background: #f2efeb !important; } html[data-theme="inpa"] .fkey.primary { background: #d8e8ff !important; color: #000 !important; } /* buttons: Win outset bevel */ html[data-theme="inpa"] .btn, html[data-theme="inpa"] .icon-btn, html[data-theme="inpa"] .seg-btn { border-radius: 0 !important; background: #ececec !important; color: #000 !important; border: 1px solid #fff !important; border-right-color: #808080 !important; border-bottom-color: #808080 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a0a0a0 !important; } html[data-theme="inpa"] .btn.primary, html[data-theme="inpa"] .seg-btn.active { background: #000080 !important; color: #fff !important; border-color: #000060 !important; } /* green RUNNING status block */ html[data-theme="inpa"] .live-v, html[data-theme="inpa"] .job-name { color: #000080 !important; } html[data-theme="inpa"] .grain { display: none; } /* THEME PICKER (Settings): card grid with a swatch preview per skin. */ .theme-row { flex-direction: column; align-items: stretch; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; width: 100%; } .theme-card { display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); transition: border-color .12s, transform .12s; } .theme-card:hover { border-color: var(--line-bright); transform: translateY(-1px); } .theme-card.active { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); } .theme-swatch { width: 44px; height: 44px; border-radius: 6px; flex: none; border: 1px solid rgba(255,255,255,.25); overflow: hidden; position: relative; } .theme-meta { display: flex; align-items: center; min-width: 0; } .theme-name { font-weight: 700; font-size: 13.5px; } /* mini previews */ .sw-instrument { background: linear-gradient(135deg, #11161c 50%, #ff9e2c 50%); } .sw-inpa { background: #ffffff; } .sw-inpa::after { content: ''; position:absolute; left:0; right:0; bottom:0; height:38%; background: #d4d0c8; border-top: 1px solid #808080; } .sw-inpa::before { content: ''; position:absolute; left:4px; top:5px; width:60%; height:6px; background: #00a000; } .sw-aero { background: linear-gradient(135deg, #1a8fe3, #b6ff7a); box-shadow: inset 0 6px 8px rgba(255,255,255,.5); } .sw-metal { background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px), linear-gradient(180deg, #e2e4e7, #b3b6bb); } /* PER-THEME KEY BADGES: the number chips on the f-key bar + sidebar. */ /* Aero: glossy aqua glass keys, navy digit on white glass, lime when active. */ html[data-theme="aero"] .fkey-num, html[data-theme="aero"] .nav-key, html[data-theme="aero"] .fkey.back .fkey-num { background: linear-gradient(180deg, #ffffff 0%, rgba(214,236,255,.9) 48%, rgba(127,200,255,.85) 100%) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 8px !important; color: #0a3a6b !important; font-weight: 800 !important; text-shadow: 0 1px 0 rgba(255,255,255,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(40,120,200,.25), 0 2px 5px rgba(0,40,90,.3) !important; } /* specular sweep across top half of key */ html[data-theme="aero"] .fkey-num { position: relative; overflow: hidden; } html[data-theme="aero"] .fkey-num::after { content: ''; position: absolute; left: 1px; right: 1px; top: 1px; height: 44%; border-radius: 7px 7px 60% 60%; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); pointer-events: none; } html[data-theme="aero"] .split-nav-item.active .nav-key { background: linear-gradient(180deg, #e6ffb3 0%, #c6ff66 45%, #8fe000 100%) !important; color: #16320a !important; border-color: rgba(255,255,255,.9) !important; } /* metal: aluminum key, aqua digit. include .fkey.back .fkey-num (Esc) so it doesnt fall back to base dark-slot/cyan look. */ html[data-theme="metal"] .fkey-num, html[data-theme="metal"] .nav-key, html[data-theme="metal"] .fkey.back .fkey-num { background: linear-gradient(180deg, #f4f5f6, #cfd2d6) !important; border: 1px solid #92959b !important; color: #2257ac !important; border-radius: 4px !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.2) !important; text-shadow: none !important; } html[data-theme="metal"] .split-nav-item.active .nav-key { background: linear-gradient(180deg, #5aa0ec, #2f6fd6) !important; color: #fff !important; border-color: #2257ac !important; } /* INPA: navy digit on a flat grey beveled key */ html[data-theme="inpa"] .fkey-num, html[data-theme="inpa"] .nav-key { background: #e9e6e1 !important; color: #000080 !important; border: 1px solid #fff !important; border-right-color: #808080 !important; border-bottom-color: #808080 !important; border-radius: 0 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a9a5a0; } /* active item is navy, keep a light beveled chip: navy badge would vanish on the navy selection bar. */ html[data-theme="inpa"] .split-nav-item.active .nav-key { background: #e9e6e1 !important; color: #000080 !important; border: 1px solid #fff !important; border-right-color: #808080 !important; border-bottom-color: #808080 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a9a5a0; } /* The INPA-layout settings list is a ruled list in every skin: the per-theme card treatment of .setting-row (borders above) must not box its rows. */ html .inpa-settings .setting-row { background: none !important; border: none !important; border-bottom: 1px dotted var(--line) !important; border-radius: 0 !important; box-shadow: none !important; } html[data-theme="inpa"] .inpa-settings .setting-row { border-bottom-color: #c9c9c9 !important; }