feat: alive UI wave, galaxy presence, spread and fleet enhancements
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
Dashboard ambient layer, comrade presence, Mission Deck and War Room, Emberwake supply chain, spread/docs publishing, fleet policy and modules API, CI docker mining, and refreshed USB pack.
This commit is contained in:
AetherForge
414
server/web/src/styles/operatorDeck.css
Normal file
414
server/web/src/styles/operatorDeck.css
Normal file
@@ -0,0 +1,414 @@
|
||||
/* ═══ 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: #6b8cff;
|
||||
--deck-accent-secondary: var(--neon-cyan, #00e8f5);
|
||||
--deck-accent-dim: rgba(107, 140, 255, 0.38);
|
||||
--deck-accent-glow: rgba(107, 140, 255, 0.45);
|
||||
--deck-accent-bg: rgba(70, 110, 220, 0.08);
|
||||
--deck-card-accent-bar: #6b8cff;
|
||||
--deck-accent-rail: #6b8cff;
|
||||
--deck-accent-rail-glow: rgba(107, 140, 255, 0.48);
|
||||
--deck-ambient-ui-opacity: 0.4;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user