7831e70dd4
Cover mining diagnostics JSON blockers, AV-Safe preset fields, defender_off error paths, and Calibrate exclusion .ps1 generation with Go + Vitest; honest AV limits already documented in settingHelp.
415 lines
14 KiB
CSS
415 lines
14 KiB
CSS
/* ═══ Unified Operator Deck — shared instrument chrome ═══ */
|
|
|
|
:root {
|
|
/* Card chrome */
|
|
--deck-card-bg: linear-gradient(145deg, rgba(14, 12, 20, 0.94) 0%, rgba(6, 6, 12, 0.98) 100%);
|
|
--deck-card-border: rgba(140, 120, 60, 0.28);
|
|
--deck-card-radius: 6px;
|
|
--deck-card-padding: 1.25rem;
|
|
--deck-card-shadow: 0 10px 36px rgba(0, 0, 0, 0.72), 0 0 1px rgba(80, 60, 140, 0.25);
|
|
--deck-card-glow: rgba(0, 232, 245, 0.12);
|
|
--deck-card-accent-bar: var(--neon-cyan, #00e8f5);
|
|
|
|
/* Section accent (default command deck) */
|
|
--deck-accent: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-secondary: var(--brass-light, #c4ad5a);
|
|
--deck-accent-dim: rgba(0, 232, 245, 0.35);
|
|
--deck-accent-glow: rgba(0, 232, 245, 0.45);
|
|
--deck-accent-bg: rgba(0, 232, 245, 0.06);
|
|
|
|
/* Persistent 4px left accent rail */
|
|
--deck-accent-rail: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-rail-glow: rgba(0, 232, 245, 0.48);
|
|
|
|
/* Interactive bounding box */
|
|
--deck-interactive-outline: var(--deck-accent-dim);
|
|
--deck-interactive-glow: var(--deck-accent-glow);
|
|
--deck-interactive-radius: var(--deck-card-radius);
|
|
--deck-interactive-dash: 8px;
|
|
--deck-interactive-lift: -1px;
|
|
--deck-interactive-btn-scale: 1.018;
|
|
|
|
/* Ambient music UI (Layout sets data-operator-deck) */
|
|
--deck-ambient-ui-opacity: 0.72;
|
|
}
|
|
|
|
/* ── Per-section accent tokens ── */
|
|
[data-operator-deck='dashboard'] {
|
|
--deck-accent: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-secondary: var(--brass-light, #c4ad5a);
|
|
--deck-accent-dim: rgba(0, 232, 245, 0.38);
|
|
--deck-accent-glow: rgba(0, 232, 245, 0.5);
|
|
--deck-accent-bg: rgba(0, 232, 245, 0.07);
|
|
--deck-card-accent-bar: var(--neon-cyan);
|
|
--deck-accent-rail: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
|
|
--deck-ambient-ui-opacity: 0.68;
|
|
}
|
|
|
|
[data-operator-deck='fleet'] {
|
|
--deck-accent: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-secondary: var(--neon-green, #2ee810);
|
|
--deck-accent-dim: rgba(0, 232, 245, 0.34);
|
|
--deck-accent-glow: rgba(0, 232, 245, 0.42);
|
|
--deck-accent-bg: rgba(0, 232, 245, 0.05);
|
|
--deck-card-accent-bar: var(--neon-cyan);
|
|
--deck-accent-rail: var(--neon-green, #2ee810);
|
|
--deck-accent-rail-glow: rgba(46, 232, 16, 0.46);
|
|
--deck-ambient-ui-opacity: 0.7;
|
|
}
|
|
|
|
[data-operator-deck='crucible'] {
|
|
--deck-accent: #c9a227;
|
|
--deck-accent-secondary: #e85d4a;
|
|
--deck-accent-dim: rgba(201, 162, 39, 0.42);
|
|
--deck-accent-glow: rgba(232, 93, 74, 0.48);
|
|
--deck-accent-bg: rgba(180, 50, 30, 0.08);
|
|
--deck-card-accent-bar: #c9a227;
|
|
--deck-accent-rail: #c9a227;
|
|
--deck-accent-rail-glow: rgba(201, 162, 39, 0.52);
|
|
--deck-ambient-ui-opacity: 0.75;
|
|
}
|
|
|
|
[data-operator-deck='forge'] {
|
|
--deck-accent: var(--neon-amber, #e89830);
|
|
--deck-accent-secondary: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-dim: rgba(232, 152, 48, 0.42);
|
|
--deck-accent-glow: rgba(255, 180, 60, 0.55);
|
|
--deck-accent-bg: rgba(232, 152, 48, 0.08);
|
|
--deck-card-accent-bar: var(--neon-amber);
|
|
--deck-accent-rail: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
|
|
--deck-ambient-ui-opacity: 1;
|
|
}
|
|
|
|
[data-operator-deck='mission-deck'] {
|
|
--deck-accent: #ff8c3a;
|
|
--deck-accent-secondary: #ffd700;
|
|
--deck-accent-dim: rgba(255, 140, 58, 0.42);
|
|
--deck-accent-glow: rgba(255, 140, 58, 0.55);
|
|
--deck-accent-bg: rgba(255, 140, 58, 0.08);
|
|
--deck-card-accent-bar: #ff8c3a;
|
|
--deck-accent-rail: #a78bfa;
|
|
--deck-accent-rail-glow: rgba(167, 139, 250, 0.52);
|
|
--deck-ambient-ui-opacity: 0.95;
|
|
}
|
|
|
|
[data-operator-deck='builds'] {
|
|
--deck-accent: var(--brass-light, #c4ad5a);
|
|
--deck-accent-secondary: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-dim: rgba(201, 162, 39, 0.38);
|
|
--deck-accent-glow: rgba(201, 162, 39, 0.45);
|
|
--deck-accent-bg: rgba(201, 162, 39, 0.07);
|
|
--deck-card-accent-bar: var(--brass-light);
|
|
--deck-accent-rail: var(--brass-light, #c4ad5a);
|
|
--deck-accent-rail-glow: rgba(196, 173, 90, 0.48);
|
|
--deck-ambient-ui-opacity: 0.55;
|
|
}
|
|
|
|
[data-operator-deck='emberwake'] {
|
|
--deck-accent: #f43f5e;
|
|
--deck-accent-secondary: #ff6b2c;
|
|
--deck-accent-dim: rgba(244, 63, 94, 0.4);
|
|
--deck-accent-glow: rgba(255, 107, 44, 0.5);
|
|
--deck-accent-bg: rgba(244, 63, 94, 0.07);
|
|
--deck-card-accent-bar: #ff6b2c;
|
|
--deck-accent-rail: #f43f5e;
|
|
--deck-accent-rail-glow: rgba(244, 63, 94, 0.5);
|
|
--deck-ambient-ui-opacity: 0.8;
|
|
}
|
|
|
|
[data-operator-deck='settings'] {
|
|
--deck-accent: var(--neon-purple, #a83ef0);
|
|
--deck-accent-secondary: var(--text-muted, #5e5868);
|
|
--deck-accent-dim: rgba(168, 62, 240, 0.28);
|
|
--deck-accent-glow: rgba(168, 62, 240, 0.32);
|
|
--deck-accent-bg: rgba(168, 62, 240, 0.05);
|
|
--deck-card-accent-bar: var(--neon-purple);
|
|
--deck-accent-rail: var(--neon-purple, #a83ef0);
|
|
--deck-accent-rail-glow: rgba(168, 62, 240, 0.42);
|
|
--deck-ambient-ui-opacity: 0.38;
|
|
}
|
|
|
|
[data-operator-deck='pathtracer'] {
|
|
--deck-accent: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-secondary: var(--brass-light, #c4ad5a);
|
|
--deck-accent-dim: rgba(0, 232, 245, 0.38);
|
|
--deck-accent-glow: rgba(0, 232, 245, 0.45);
|
|
--deck-accent-bg: rgba(0, 232, 245, 0.07);
|
|
--deck-card-accent-bar: var(--neon-cyan);
|
|
--deck-accent-rail: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-rail-glow: rgba(0, 232, 245, 0.48);
|
|
--deck-ambient-ui-opacity: 0.55;
|
|
}
|
|
|
|
/* Forge seasonal skins override deck accent when present on page root */
|
|
[class*='forge-skin--'] {
|
|
--deck-accent: var(--forge-accent, var(--neon-amber));
|
|
--deck-accent-secondary: var(--forge-accent-secondary, var(--neon-cyan));
|
|
--deck-accent-dim: var(--forge-accent-dim, rgba(232, 152, 48, 0.42));
|
|
--deck-accent-glow: var(--forge-glow, rgba(255, 180, 60, 0.55));
|
|
--deck-accent-bg: var(--forge-accent-bg, rgba(232, 152, 48, 0.08));
|
|
--deck-card-accent-bar: var(--forge-accent, var(--neon-amber));
|
|
--deck-accent-rail: var(--neon-cyan, #00e8f5);
|
|
--deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
|
|
}
|
|
|
|
/* ── Section accent rail (4px persistent left edge) ── */
|
|
[data-operator-deck] .main-content {
|
|
position: relative;
|
|
}
|
|
|
|
[data-operator-deck] .main-content:not(:has(.operator-deck-page))::before,
|
|
.operator-deck-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: var(--deck-accent-rail, var(--deck-accent));
|
|
box-shadow: 0 0 18px var(--deck-accent-rail-glow, var(--deck-accent-glow));
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.operator-deck-page {
|
|
position: relative;
|
|
}
|
|
|
|
/* ── Page shell ── */
|
|
.operator-deck-page .deck-hero::after {
|
|
background: linear-gradient(90deg, var(--deck-accent), transparent);
|
|
box-shadow: 0 0 12px var(--deck-accent-glow);
|
|
}
|
|
|
|
.operator-deck-page .deck-eyebrow {
|
|
color: var(--deck-accent-secondary, var(--deck-accent));
|
|
}
|
|
|
|
/* ── Card chrome (layers on .card / .neon-card — does not replace page styles) ── */
|
|
.operator-deck-card {
|
|
position: relative;
|
|
border-radius: var(--deck-card-radius);
|
|
box-shadow:
|
|
var(--deck-card-shadow),
|
|
0 0 28px -14px var(--deck-card-glow);
|
|
transition:
|
|
border-color 0.22s ease,
|
|
box-shadow 0.28s ease;
|
|
}
|
|
|
|
.card.operator-deck-card,
|
|
.neon-card.operator-deck-card {
|
|
border-color: color-mix(in srgb, var(--deck-card-border) 75%, var(--deck-accent-dim));
|
|
}
|
|
|
|
.operator-deck-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
border-radius: var(--deck-card-radius) var(--deck-card-radius) 0 0;
|
|
background: linear-gradient(90deg, var(--deck-card-accent-bar), transparent 72%);
|
|
opacity: 0.65;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.operator-deck-card:hover {
|
|
border-color: color-mix(in srgb, var(--deck-card-border) 55%, var(--deck-accent));
|
|
box-shadow:
|
|
var(--deck-card-shadow),
|
|
0 0 32px -10px var(--deck-accent-glow);
|
|
}
|
|
|
|
/* Emberwake spread sections — deck chrome without losing section accents */
|
|
.emberwake-page .spread-section.operator-deck-card {
|
|
padding: var(--deck-card-padding);
|
|
border-radius: var(--deck-card-radius);
|
|
box-shadow:
|
|
var(--deck-card-shadow),
|
|
0 0 24px -12px var(--deck-accent-glow);
|
|
}
|
|
|
|
.emberwake-page .spread-section--ember.operator-deck-card { --deck-card-accent-bar: #ff6b2c; }
|
|
.emberwake-page .spread-section--cyan.operator-deck-card { --deck-card-accent-bar: #3dd6c6; }
|
|
.emberwake-page .spread-section--gold.operator-deck-card { --deck-card-accent-bar: #c9a227; }
|
|
.emberwake-page .spread-section--violet.operator-deck-card { --deck-card-accent-bar: #a78bfa; }
|
|
.emberwake-page .spread-section--war-room.operator-deck-card { --deck-card-accent-bar: #f43f5e; }
|
|
|
|
/* Builder form sections */
|
|
.builder-form .form-section.operator-deck-card {
|
|
padding: var(--deck-card-padding);
|
|
border-radius: var(--deck-card-radius);
|
|
}
|
|
|
|
/* ── Interactive bounding boxes (focus / hover outlines) ── */
|
|
@keyframes operator-interactive-dash-march {
|
|
to {
|
|
background-position:
|
|
var(--deck-interactive-dash) 0,
|
|
calc(-1 * var(--deck-interactive-dash)) 100%,
|
|
0 var(--deck-interactive-dash),
|
|
100% calc(-1 * var(--deck-interactive-dash));
|
|
}
|
|
}
|
|
|
|
.operator-interactive {
|
|
position: relative;
|
|
transition:
|
|
transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
|
|
box-shadow 0.22s ease,
|
|
outline-color 0.22s ease;
|
|
outline: 1px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animated dashed ring — enhancement layer via ::before (does not replace outline) */
|
|
.operator-interactive::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: calc(var(--deck-interactive-radius) + 2px);
|
|
pointer-events: none;
|
|
z-index: 4;
|
|
opacity: 0;
|
|
background:
|
|
linear-gradient(90deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 0 / var(--deck-interactive-dash) 1px repeat-x,
|
|
linear-gradient(90deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 100% / var(--deck-interactive-dash) 1px repeat-x,
|
|
linear-gradient(0deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 0 / 1px var(--deck-interactive-dash) repeat-y,
|
|
linear-gradient(0deg, var(--deck-interactive-outline) 50%, transparent 50%) 100% 0 / 1px var(--deck-interactive-dash) repeat-y;
|
|
transition: opacity 0.22s ease;
|
|
}
|
|
|
|
.operator-interactive:hover,
|
|
.operator-interactive:focus-within {
|
|
outline-color: var(--deck-interactive-outline);
|
|
box-shadow:
|
|
0 0 0 1px var(--deck-interactive-outline),
|
|
0 0 20px -6px var(--deck-interactive-glow);
|
|
}
|
|
|
|
.operator-interactive:hover::before,
|
|
.operator-interactive:focus-within::before {
|
|
opacity: 1;
|
|
animation: operator-interactive-dash-march 0.75s linear infinite;
|
|
}
|
|
|
|
.operator-interactive:focus-within {
|
|
outline-color: var(--deck-accent);
|
|
box-shadow:
|
|
0 0 0 1px var(--deck-accent-dim),
|
|
0 0 22px -4px var(--deck-interactive-glow);
|
|
}
|
|
|
|
.operator-interactive:focus-visible {
|
|
outline: 2px solid var(--deck-accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Micro-lift — flat panels only; 3D neon cards keep their own tilt transform */
|
|
.operator-interactive:not(.neon-card-3d):hover,
|
|
.operator-interactive:not(.neon-card-3d):focus-within {
|
|
transform: translateY(var(--deck-interactive-lift));
|
|
}
|
|
|
|
.neon-card-3d.operator-interactive:hover,
|
|
.neon-card-3d.operator-interactive:focus-within {
|
|
transform: perspective(var(--perspective, 900px)) rotateX(2deg) translateY(calc(var(--deck-interactive-lift) - 3px));
|
|
}
|
|
|
|
/* Crucible node cards — lighter outline + compact lift */
|
|
.crucible-node-card.operator-interactive:hover:not(.selected),
|
|
.crucible-node-card.operator-interactive:focus-within:not(.selected) {
|
|
outline-color: var(--deck-interactive-outline);
|
|
transform: translateY(var(--deck-interactive-lift)) scale(1.008);
|
|
}
|
|
|
|
/* Tactile button scale within operator decks */
|
|
.operator-interactive-btn,
|
|
.operator-deck-page .btn:not(:disabled),
|
|
.operator-deck-page button:not(:disabled):not([role='switch']) {
|
|
transition:
|
|
transform 0.16s cubic-bezier(0.23, 1, 0.32, 1),
|
|
box-shadow 0.16s ease,
|
|
border-color 0.16s ease,
|
|
background 0.16s ease,
|
|
color 0.16s ease,
|
|
opacity 0.16s ease;
|
|
}
|
|
|
|
.operator-interactive-btn:hover:not(:disabled),
|
|
.operator-interactive-btn:focus-visible:not(:disabled),
|
|
.operator-deck-page .btn:not(:disabled):hover,
|
|
.operator-deck-page .btn:not(:disabled):focus-visible,
|
|
.operator-deck-page button:not(:disabled):not([role='switch']):hover,
|
|
.operator-deck-page button:not(:disabled):not([role='switch']):focus-visible {
|
|
transform: scale(var(--deck-interactive-btn-scale));
|
|
}
|
|
|
|
.operator-interactive-btn:active:not(:disabled),
|
|
.operator-deck-page .btn:not(:disabled):active,
|
|
.operator-deck-page button:not(:disabled):not([role='switch']):active {
|
|
transform: scale(0.985);
|
|
}
|
|
|
|
/* Nested step panels inside fleet / forge wizards */
|
|
.fleet-policy-step-panel.operator-interactive,
|
|
.forge-mission-wizard .forge-mission-step-panel.operator-interactive {
|
|
border-radius: var(--deck-interactive-radius);
|
|
padding: 0.85rem 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Global music player — section-aware ambient UI intensity */
|
|
.global-music-player {
|
|
opacity: var(--deck-ambient-ui-opacity);
|
|
border-color: color-mix(in srgb, var(--deck-card-border) 60%, var(--deck-accent-dim));
|
|
}
|
|
|
|
.global-music-player:hover,
|
|
.global-music-player:focus-within {
|
|
opacity: 1;
|
|
border-color: color-mix(in srgb, var(--deck-accent-dim) 80%, var(--deck-accent));
|
|
box-shadow:
|
|
0 6px 22px rgba(0, 0, 0, 0.6),
|
|
0 0 16px var(--deck-accent-glow);
|
|
}
|
|
|
|
.global-music-player--ambient-dim {
|
|
opacity: calc(var(--deck-ambient-ui-opacity) * 0.85);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.operator-deck-card,
|
|
.operator-interactive,
|
|
.operator-interactive-btn,
|
|
.global-music-player {
|
|
transition: none;
|
|
}
|
|
|
|
.operator-interactive::before {
|
|
animation: none !important;
|
|
}
|
|
|
|
.operator-interactive:not(.neon-card-3d):hover,
|
|
.operator-interactive:not(.neon-card-3d):focus-within,
|
|
.crucible-node-card.operator-interactive:hover:not(.selected),
|
|
.neon-card-3d.operator-interactive:hover,
|
|
.neon-card-3d.operator-interactive:focus-within {
|
|
transform: none;
|
|
}
|
|
|
|
.operator-interactive-btn:hover:not(:disabled),
|
|
.operator-interactive-btn:active:not(:disabled),
|
|
.operator-deck-page .btn:not(:disabled):hover,
|
|
.operator-deck-page .btn:not(:disabled):active,
|
|
.operator-deck-page button:not(:disabled):hover,
|
|
.operator-deck-page button:not(:disabled):active {
|
|
transform: none;
|
|
}
|
|
}
|