benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-05 19:04:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: format the UI shell and component styles

Browse Source
This commit is contained in:
Sameh Khamis committed 2026-09-13 04:26:11 -07:00
1 parent f5ef9091f0
commit 03ad8142e6
32 files changed
+4126 -1546
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/styles/cctv.css
+18 -5
View File
@@ -14,7 +14,11 @@
#cctv-panel .panel-glow {
position: absolute;
inset: -18px;
background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.16) 0%, transparent 65%);
background: radial-gradient(
ellipse at center,
rgba(0, 212, 255, 0.16) 0%,
transparent 65%
);
filter: blur(16px);
opacity: 0.25;
pointer-events: none;
@@ -51,7 +55,11 @@
}
.cctv-panel-inner::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(0, 212, 255, 0.6), rgba(0, 212, 255, 0.28));
background: linear-gradient(
180deg,
rgba(0, 212, 255, 0.6),
rgba(0, 212, 255, 0.28)
);
border: 1px solid rgba(0, 212, 255, 0.4);
border-radius: 999px;
}
@@ -99,7 +107,9 @@
border-radius: 7px;
padding: 4px 7px;
cursor: text;
transition: border-color 0.15s ease, background 0.15s ease;
transition:
border-color 0.15s ease,
background 0.15s ease;
}
.cctv-cal-value:hover:not(:disabled) {
@@ -212,7 +222,11 @@
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(circle at 20% 20%, rgba(0, 244, 255, 0.09), transparent 44%),
radial-gradient(
circle at 20% 20%,
rgba(0, 244, 255, 0.09),
transparent 44%
),
linear-gradient(180deg, rgba(8, 14, 19, 0.88), rgba(4, 7, 11, 0.96));
min-height: 150px;
/* .cctv-panel-inner is a scrolling column flex container, so the default
@@ -335,4 +349,3 @@
color: #a8f7ff;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.18);
}
src/ui/styles/cockpit.css
+589 -222
View File
File diff suppressed because it is too large. Load diff
src/ui/styles/command-dock-compact.css
+42 -13
View File
@@ -21,11 +21,15 @@
}
#command-dock:has(#location-bar:not(.collapsed)) {
transform: translateX(calc(-50% + (var(--dock-location-open) - var(--dock-side-compact)) / 2));
transform: translateX(
calc(-50% + (var(--dock-location-open) - var(--dock-side-compact)) / 2)
);
}
#command-dock:has(#control-panel:not(.collapsed)) {
transform: translateX(calc(-50% - (var(--dock-presets-open) - var(--dock-side-compact)) / 2));
transform: translateX(
calc(-50% - (var(--dock-presets-open) - var(--dock-side-compact)) / 2)
);
}
#command-dock > #location-bar,
@@ -300,13 +304,27 @@
transform-origin: bottom;
}
#command-dock .gev-voice-visualizer span:nth-child(3n) { height: 1.35rem; }
#command-dock .gev-voice-visualizer span:nth-child(4n) { height: 0.95rem; }
#command-dock .gev-voice-visualizer span:nth-child(5n) { height: 1.7rem; }
#command-dock .gev-voice-visualizer span:nth-child(7n) { height: 0.75rem; }
#command-dock .gev-voice-visualizer span:nth-child(3n) {
height: 1.35rem;
}
#command-dock .gev-voice-visualizer span:nth-child(4n) {
height: 0.95rem;
}
#command-dock .gev-voice-visualizer span:nth-child(5n) {
height: 1.7rem;
}
#command-dock .gev-voice-visualizer span:nth-child(7n) {
height: 0.75rem;
}
#command-dock #gev-voice-control[data-status='listening'] .gev-voice-visualizer span,
#command-dock #gev-voice-control[data-status='executing'] .gev-voice-visualizer span {
#command-dock
#gev-voice-control[data-status='listening']
.gev-voice-visualizer
span,
#command-dock
#gev-voice-control[data-status='executing']
.gev-voice-visualizer
span {
animation: gev-voice-bar 680ms ease-in-out infinite alternate;
animation-delay: calc(var(--bar) * -45ms);
}
@@ -336,13 +354,25 @@
}
@keyframes command-dock-reveal {
from { opacity: 0; transform: translateY(0.2rem); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(0.2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gev-voice-bar {
from { transform: scaleY(0.35); opacity: 0.5; }
to { transform: scaleY(1); opacity: 1; }
from {
transform: scaleY(0.35);
opacity: 0.5;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
/* Compact dock clearance keeps the reference-like low profile. */
@@ -401,4 +431,3 @@ body:not(.ui-clean-view):not(.recording-mode) #cesium-credits {
flex-basis: 8.5rem;
}
}
src/ui/styles/command-dock-sliding.css
+103 -36
View File
@@ -170,7 +170,13 @@
}
#command-dock #location-bar .dock-popover-content {
left: calc((var(--dock-side-compact) + var(--dock-side-compact) + var(--dock-voice-width) - var(--dock-popover-mobile-width)) / 2);
left: calc(
(
var(--dock-side-compact) + var(--dock-side-compact) +
var(--dock-voice-width) - var(--dock-popover-mobile-width)
) /
2
);
}
#command-dock #control-panel .dock-popover-content {
@@ -182,7 +188,13 @@
left edge — pinned by the 480 px bounds assert in
`scripts/qa-map-source-tray.mjs`. */
width: var(--dock-popover-mobile-width);
right: calc((var(--dock-side-compact) + var(--dock-side-compact) + var(--dock-voice-width) - var(--dock-popover-mobile-width)) / 2);
right: calc(
(
var(--dock-side-compact) + var(--dock-side-compact) +
var(--dock-voice-width) - var(--dock-popover-mobile-width)
) /
2
);
}
/* ── Required-attribution clearance ─────────────────────────────────
@@ -213,8 +225,12 @@
bottom: calc(100% + 3rem);
}
#command-dock.dock-has-pinned-tray #location-bar:not(.collapsed):not(.dock-pinned) .dock-popover-content,
#command-dock.dock-has-pinned-tray #control-panel:not(.collapsed):not(.dock-pinned) .dock-popover-content {
#command-dock.dock-has-pinned-tray
#location-bar:not(.collapsed):not(.dock-pinned)
.dock-popover-content,
#command-dock.dock-has-pinned-tray
#control-panel:not(.collapsed):not(.dock-pinned)
.dock-popover-content {
bottom: calc(100% + 3rem + var(--dock-pinned-stack-height));
}
@@ -224,8 +240,12 @@
top tray drops var(--dock-lower-pinned-height), landing on top of its
pinned sibling. Naming the panel makes it (2,5,0), ahead of both the
ordinary (2,1,0) and single-pinned (2,4,0) rules. */
#command-dock.dock-has-two-pinned-trays #location-bar.dock-pinned-top.dock-pinned:not(.collapsed) .dock-popover-content,
#command-dock.dock-has-two-pinned-trays #control-panel.dock-pinned-top.dock-pinned:not(.collapsed) .dock-popover-content {
#command-dock.dock-has-two-pinned-trays
#location-bar.dock-pinned-top.dock-pinned:not(.collapsed)
.dock-popover-content,
#command-dock.dock-has-two-pinned-trays
#control-panel.dock-pinned-top.dock-pinned:not(.collapsed)
.dock-popover-content {
bottom: calc(100% + 3rem + var(--dock-lower-pinned-height));
}
}
@@ -242,14 +262,22 @@
bottom: calc(100% + 2vh + 2.5rem);
}
#command-dock.dock-has-pinned-tray #location-bar:not(.collapsed):not(.dock-pinned) .dock-popover-content,
#command-dock.dock-has-pinned-tray #control-panel:not(.collapsed):not(.dock-pinned) .dock-popover-content {
#command-dock.dock-has-pinned-tray
#location-bar:not(.collapsed):not(.dock-pinned)
.dock-popover-content,
#command-dock.dock-has-pinned-tray
#control-panel:not(.collapsed):not(.dock-pinned)
.dock-popover-content {
bottom: calc(100% + 2vh + 2.5rem + var(--dock-pinned-stack-height));
}
/* Panel IDs for the same specificity reason as the max-width:900px block. */
#command-dock.dock-has-two-pinned-trays #location-bar.dock-pinned-top.dock-pinned:not(.collapsed) .dock-popover-content,
#command-dock.dock-has-two-pinned-trays #control-panel.dock-pinned-top.dock-pinned:not(.collapsed) .dock-popover-content {
#command-dock.dock-has-two-pinned-trays
#location-bar.dock-pinned-top.dock-pinned:not(.collapsed)
.dock-popover-content,
#command-dock.dock-has-two-pinned-trays
#control-panel.dock-pinned-top.dock-pinned:not(.collapsed)
.dock-popover-content {
bottom: calc(100% + 2vh + 2.5rem + var(--dock-lower-pinned-height));
}
}
@@ -327,24 +355,39 @@
height: var(--audio-level, 5px);
opacity: var(--audio-opacity, 0.56);
animation: none;
transition: height 70ms linear, opacity 90ms linear;
transition:
height 70ms linear,
opacity 90ms linear;
}
#command-dock #gev-voice-control[data-status='listening'] .gev-voice-visualizer span,
#command-dock #gev-voice-control[data-status='executing'] .gev-voice-visualizer span {
#command-dock
#gev-voice-control[data-status='listening']
.gev-voice-visualizer
span,
#command-dock
#gev-voice-control[data-status='executing']
.gev-voice-visualizer
span {
animation: none;
}
#command-dock #gev-voice-control[data-speaker='user'] :is(#gev-voice-status, #gev-voice-detail) {
#command-dock
#gev-voice-control[data-speaker='user']
:is(#gev-voice-status, #gev-voice-detail) {
color: #ffbf69;
}
#command-dock #gev-voice-control[data-speaker='user'] .gev-voice-visualizer span {
#command-dock
#gev-voice-control[data-speaker='user']
.gev-voice-visualizer
span {
background: linear-gradient(to top, #d98a35, #ffcf8a);
box-shadow: 0 0 0.35rem rgba(255, 191, 105, 0.32);
}
#command-dock #gev-voice-control[data-speaker='ai'] :is(#gev-voice-status, #gev-voice-detail) {
#command-dock
#gev-voice-control[data-speaker='ai']
:is(#gev-voice-status, #gev-voice-detail) {
color: var(--accent);
}
@@ -364,11 +407,15 @@
@media (max-width: 900px) {
#command-dock #location-bar .dock-popover-content {
left: calc((var(--dock-unified-width) - var(--dock-popover-mobile-width)) / 2);
left: calc(
(var(--dock-unified-width) - var(--dock-popover-mobile-width)) / 2
);
}
#command-dock #control-panel .dock-popover-content {
right: calc((var(--dock-unified-width) - var(--dock-popover-mobile-width)) / 2);
right: calc(
(var(--dock-unified-width) - var(--dock-popover-mobile-width)) / 2
);
}
}
@@ -417,32 +464,44 @@
box-shadow:
0 0 0 0.18rem rgba(232, 234, 237, 0.04),
0 0 0.75rem rgba(232, 234, 237, 0.08);
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
transition:
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
#command-dock .gev-mic-orbit img {
filter: grayscale(1) saturate(0) brightness(1.65);
opacity: 0.68;
transition: filter var(--transition-fast), opacity var(--transition-fast);
transition:
filter var(--transition-fast),
opacity var(--transition-fast);
}
#command-dock #gev-voice-button:hover .gev-mic-orbit,
#command-dock #gev-voice-control:is(
[data-status='connecting'],
[data-status='listening']:not([data-microphone='muted']),
[data-status='executing']
) .gev-mic-orbit {
#command-dock
#gev-voice-control:is(
[data-status='connecting'],
[data-status='listening']:not([data-microphone='muted']),
[data-status='executing']
)
.gev-mic-orbit {
background: rgba(0, 212, 255, 0.06);
border-color: rgba(0, 212, 255, 0.48);
box-shadow: 0 0 0 0.18rem rgba(0, 212, 255, 0.06), 0 0 0.9rem rgba(0, 212, 255, 0.12);
box-shadow:
0 0 0 0.18rem rgba(0, 212, 255, 0.06),
0 0 0.9rem rgba(0, 212, 255, 0.12);
}
#command-dock #gev-voice-button:hover .gev-mic-orbit img,
#command-dock #gev-voice-control:is(
[data-status='connecting'],
[data-status='listening']:not([data-microphone='muted']),
[data-status='executing']
) .gev-mic-orbit img {
#command-dock
#gev-voice-control:is(
[data-status='connecting'],
[data-status='listening']:not([data-microphone='muted']),
[data-status='executing']
)
.gev-mic-orbit
img {
filter: none;
opacity: 1;
}
@@ -470,7 +529,6 @@
background: var(--glass-bg);
border-color: var(--glass-border-hover);
color: var(--accent);
}
#command-dock > :is(#location-bar, #control-panel).dock-pinned {
@@ -590,7 +648,9 @@
}
#gev-voice-control:not([data-status='error']):hover .gev-voice-help-tray,
#gev-voice-control:not([data-status='error']) #gev-voice-button:focus-visible ~ .gev-voice-help-tray {
#gev-voice-control:not([data-status='error'])
#gev-voice-button:focus-visible
~ .gev-voice-help-tray {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0) scale(1);
@@ -622,10 +682,17 @@
}
#command-dock #location-bar .location-toolbar::after {
background: linear-gradient(90deg, rgba(232, 234, 237, 0.24), rgba(232, 234, 237, 0));
background: linear-gradient(
90deg,
rgba(232, 234, 237, 0.24),
rgba(232, 234, 237, 0)
);
}
#command-dock #control-panel .panel-header::after {
background: linear-gradient(90deg, rgba(232, 234, 237, 0), rgba(232, 234, 237, 0.24));
background: linear-gradient(
90deg,
rgba(232, 234, 237, 0),
rgba(232, 234, 237, 0.24)
);
}
src/ui/styles/command-dock-trays.css
+46 -18
View File
@@ -5,7 +5,9 @@
--dock-presets-pinned-height: 0px;
--dock-pinned-stack-height: 0px;
--dock-lower-pinned-height: 0px;
--dock-unified-width: calc(var(--dock-side-compact) * 2 + var(--dock-voice-width));
--dock-unified-width: calc(
var(--dock-side-compact) * 2 + var(--dock-voice-width)
);
--dock-location-open: max(34rem, calc(var(--dock-unified-width) + 0.75rem));
--dock-presets-open: max(34rem, calc(var(--dock-unified-width) + 0.75rem));
}
@@ -33,7 +35,9 @@
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
transition: background-color 160ms ease, filter 160ms ease;
transition:
background-color 160ms ease,
filter 160ms ease;
}
#command-dock .dock-label-icon-location {
@@ -53,12 +57,10 @@
}
#command-dock :is(#location-bar, #control-panel):hover .location-toolbar-label,
#command-dock :is(#location-bar, #control-panel):hover .panel-title{
#command-dock :is(#location-bar, #control-panel):hover .panel-title {
color: var(--accent);
}
#command-dock #control-panel .panel-header {
justify-content: center;
}
@@ -173,7 +175,9 @@
width: 0.9rem;
height: 0.9rem;
opacity: 0.58;
transition: opacity 160ms ease, transform 160ms ease;
transition:
opacity 160ms ease,
transform 160ms ease;
}
#command-dock #location-bar .dock-pin-btn {
@@ -188,12 +192,18 @@
transform: rotate(-12deg) scale(1.08);
}
#command-dock.dock-has-pinned-tray #location-bar:not(.collapsed):not(.dock-pinned) .dock-popover-content,
#command-dock.dock-has-pinned-tray #control-panel:not(.collapsed):not(.dock-pinned) .dock-popover-content {
#command-dock.dock-has-pinned-tray
#location-bar:not(.collapsed):not(.dock-pinned)
.dock-popover-content,
#command-dock.dock-has-pinned-tray
#control-panel:not(.collapsed):not(.dock-pinned)
.dock-popover-content {
bottom: calc(100% + 1.2rem + var(--dock-pinned-stack-height));
}
#command-dock.dock-has-two-pinned-trays .dock-pinned-top.dock-pinned:not(.collapsed) .dock-popover-content {
#command-dock.dock-has-two-pinned-trays
.dock-pinned-top.dock-pinned:not(.collapsed)
.dock-popover-content {
bottom: calc(100% + 1.2rem + var(--dock-lower-pinned-height));
}
@@ -264,7 +274,9 @@
background: rgba(0, 212, 255, 0.06);
border: 1px solid rgba(0, 212, 255, 0.48);
border-radius: 50%;
box-shadow: 0 0 0 0.18rem rgba(0, 212, 255, 0.06), 0 0 0.9rem rgba(0, 212, 255, 0.12);
box-shadow:
0 0 0 0.18rem rgba(0, 212, 255, 0.06),
0 0 0.9rem rgba(0, 212, 255, 0.12);
}
#command-dock .gev-mic-label {
@@ -288,9 +300,13 @@
transition: opacity 180ms ease;
}
#command-dock #gev-voice-control[data-status='connecting'] .gev-voice-visualizer,
#command-dock
#gev-voice-control[data-status='connecting']
.gev-voice-visualizer,
#command-dock #gev-voice-control[data-status='listening'] .gev-voice-visualizer,
#command-dock #gev-voice-control[data-status='executing'] .gev-voice-visualizer {
#command-dock
#gev-voice-control[data-status='executing']
.gev-voice-visualizer {
visibility: visible;
opacity: 1;
transform: none;
@@ -362,16 +378,23 @@
background: rgba(34, 10, 16, 0.96);
border: 1px solid rgba(255, 92, 110, 0.5);
border-radius: 0.42rem;
box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.62), 0 0 1.4rem rgba(255, 92, 110, 0.08);
box-shadow:
0 0.9rem 2.2rem rgba(0, 0, 0, 0.62),
0 0 1.4rem rgba(255, 92, 110, 0.08);
backdrop-filter: blur(28px) saturate(1.25);
-webkit-backdrop-filter: blur(28px) saturate(1.25);
pointer-events: none;
transform: translate(-50%, 0.55rem) scale(0.985);
transform-origin: bottom center;
transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition:
opacity 180ms ease,
visibility 180ms ease,
transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#command-dock #gev-voice-control[data-status='error']:not(.error-dismissed) .gev-voice-error-tray {
#command-dock
#gev-voice-control[data-status='error']:not(.error-dismissed)
.gev-voice-error-tray {
visibility: visible;
opacity: 1;
pointer-events: auto;
@@ -421,7 +444,10 @@
/* The compact dock leaves both lower corners free for required attribution and telemetry. */
body:not(.ui-clean-view):not(.recording-mode) #cesium-credits,
body:not(.ui-clean-view):not(.recording-mode):has(#intel-hud[data-variant='minimal'].active) #cesium-credits {
body:not(.ui-clean-view):not(.recording-mode):has(
#intel-hud[data-variant='minimal'].active
)
#cesium-credits {
right: auto;
bottom: 0.75rem;
left: 1.5rem;
@@ -452,7 +478,10 @@ body:not(.ui-clean-view):not(.recording-mode):has(#intel-hud[data-variant='minim
@media (max-width: 900px) {
body:not(.ui-clean-view):not(.recording-mode) #cesium-credits,
body:not(.ui-clean-view):not(.recording-mode):has(#intel-hud[data-variant='minimal'].active) #cesium-credits {
body:not(.ui-clean-view):not(.recording-mode):has(
#intel-hud[data-variant='minimal'].active
)
#cesium-credits {
bottom: calc(2vh + 5rem);
left: 0.75rem;
max-width: calc(100vw - 1.5rem);
@@ -480,4 +509,3 @@ body:not(.ui-clean-view):not(.recording-mode):has(#intel-hud[data-variant='minim
bottom: calc(50vh + 8px);
}
}
src/ui/styles/command-dock.css
+11 -3
View File
@@ -7,7 +7,10 @@
z-index: 145;
display: grid;
grid-template-areas: 'locations voice presets';
grid-template-columns: minmax(300px, 1fr) minmax(230px, 270px) minmax(390px, 1.15fr);
grid-template-columns: minmax(300px, 1fr) minmax(230px, 270px) minmax(
390px,
1.15fr
);
align-items: stretch;
width: min(94vw, 1240px);
padding: 6px;
@@ -22,7 +25,9 @@
backdrop-filter: blur(28px) saturate(1.35);
-webkit-backdrop-filter: blur(28px) saturate(1.35);
transform: translateX(-50%);
transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
transition:
opacity var(--transition-smooth),
visibility var(--transition-smooth);
}
#command-dock > #location-bar,
@@ -214,7 +219,10 @@ body:not(.ui-clean-view):not(.recording-mode) #cesium-credits {
bottom: calc(2vh + 7rem);
}
body:not(.ui-clean-view):not(.recording-mode):has(#intel-hud[data-variant='minimal'].active) #cesium-credits {
body:not(.ui-clean-view):not(.recording-mode):has(
#intel-hud[data-variant='minimal'].active
)
#cesium-credits {
right: 36px;
left: auto;
width: min(340px, calc(100vw - 72px)) !important;
src/ui/styles/controls.css
+76 -22
View File
@@ -12,7 +12,11 @@
#control-panel .panel-glow {
position: absolute;
inset: -30px;
background: radial-gradient(ellipse at center bottom, var(--accent-dim) 0%, transparent 60%);
background: radial-gradient(
ellipse at center bottom,
var(--accent-dim) 0%,
transparent 60%
);
filter: blur(30px);
opacity: 0.4;
pointer-events: none;
@@ -185,7 +189,11 @@
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.04) 0%,
transparent 100%
);
opacity: 0;
transition: opacity var(--transition-fast);
}
@@ -264,7 +272,9 @@
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s ease;
transition:
opacity 0.8s ease,
visibility 0.8s ease;
}
#loading-screen.hidden {
@@ -287,8 +297,15 @@
}
@keyframes logo-pulse {
0%, 100% { opacity: 0.72; transform: scale(0.98); }
50% { opacity: 1; transform: scale(1.02); }
0%,
100% {
opacity: 0.72;
transform: scale(0.98);
}
50% {
opacity: 1;
transform: scale(1.02);
}
}
.loader-content h2 {
@@ -309,8 +326,13 @@
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
/* ── Post-Processing Toggles ─────────────────── */
@@ -332,7 +354,9 @@
border: 1px solid var(--glass-border);
border-radius: var(--panel-radius);
background: var(--glass-bg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
}
@@ -389,7 +413,9 @@
border: 1px solid var(--glass-border);
border-radius: var(--panel-radius);
background: var(--glass-bg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
cursor: default;
@@ -461,7 +487,11 @@
font-size: 14px;
font-weight: 400;
font-style: normal;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 20;
}
.pp-label {
@@ -600,7 +630,7 @@
outline-offset: 2px;
}
.gev-quantitative-slider:disabled {
opacity: .42;
opacity: 0.42;
cursor: not-allowed;
}
.gev-slider-value {
@@ -608,7 +638,7 @@
color: var(--accent);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .5px;
letter-spacing: 0.5px;
text-align: right;
flex-shrink: 0;
}
@@ -793,7 +823,9 @@
}
/* Proximity / All segmented control under the 3D toggle */
#models3d-mode-row { min-width: 184px; }
#models3d-mode-row {
min-width: 184px;
}
.pp-mode-seg {
display: flex;
flex: 1;
@@ -812,11 +844,21 @@
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.pp-mode-btn + .pp-mode-btn {
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.pp-mode-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
.pp-mode-btn.active {
background: var(--accent);
color: #000;
}
.pp-mode-btn + .pp-mode-btn { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pp-mode-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.pp-mode-btn.active { background: var(--accent); color: #000; }
/* These controls also move into Cockpit Display; keep focus on the control
itself and inside clipped button groups, independent of selection color. */
@@ -913,8 +955,13 @@ body.ui-clean-view #scene-runtime.active {
}
@keyframes detection-pulse {
0%, 100% { box-shadow: 0 0 12px rgba(0, 255, 80, 0.15); }
50% { box-shadow: 0 0 22px rgba(0, 255, 80, 0.35); }
0%,
100% {
box-shadow: 0 0 12px rgba(0, 255, 80, 0.15);
}
50% {
box-shadow: 0 0 22px rgba(0, 255, 80, 0.35);
}
}
/* ── Parameter Slider Panel ──────────────────── */
@@ -942,7 +989,10 @@ body.ui-clean-view #scene-runtime.active {
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--transition-smooth), visibility var(--transition-smooth), transform var(--transition-smooth);
transition:
opacity var(--transition-smooth),
visibility var(--transition-smooth),
transform var(--transition-smooth);
}
#param-slider-panel::-webkit-scrollbar {
@@ -988,7 +1038,12 @@ body.ui-clean-view #scene-runtime.active {
}
#param-slider-panel:not(.collapsed) .param-panel-divider {
background: linear-gradient(90deg, rgb(0 212 255 / 28%), rgba(0, 212, 255, 0.18) 58%, transparent);
background: linear-gradient(
90deg,
rgb(0 212 255 / 28%),
rgba(0, 212, 255, 0.18) 58%,
transparent
);
}
.param-slider-row {
@@ -1058,4 +1113,3 @@ body.ui-clean-view #scene-runtime.active {
text-align: right;
flex-shrink: 0;
}
src/ui/styles/first-run.css
+96 -28
View File
@@ -31,7 +31,9 @@
-webkit-backdrop-filter: blur(28px) saturate(1.25);
opacity: 0;
transform: translate(-50%, calc(-50% + 0.8rem)) scale(0.985);
transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition:
opacity 220ms ease,
transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* Inert until revealed AND again while fading out, so a click during the
dismiss animation cannot launch a second mission behind the fade. */
pointer-events: none;
@@ -55,7 +57,12 @@
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(54, 220, 255, 0.8), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(54, 220, 255, 0.8),
transparent
);
box-shadow: 0 0 1rem rgba(54, 220, 255, 0.45);
pointer-events: none;
}
@@ -73,7 +80,9 @@
text-transform: uppercase;
}
.first-run-kicker { color: rgba(54, 220, 255, 0.86); }
.first-run-kicker {
color: rgba(54, 220, 255, 0.86);
}
#first-run-launcher h2 {
margin-top: 0.6rem;
@@ -107,7 +116,9 @@
scrollbar-gutter: stable;
}
.first-run-choices::-webkit-scrollbar { width: 6px; }
.first-run-choices::-webkit-scrollbar {
width: 6px;
}
.first-run-choices::-webkit-scrollbar-thumb {
background: rgba(54, 220, 255, 0.45);
border-radius: 3px;
@@ -127,7 +138,10 @@
border: 1px solid rgba(100, 200, 220, 0.18);
border-radius: 0.42rem;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
transition:
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.first-run-choices button:hover,
@@ -173,7 +187,9 @@
.first-run-arrow {
color: rgba(54, 220, 255, 0.4);
font-size: 1rem;
transition: transform var(--transition-fast), color var(--transition-fast);
transition:
transform var(--transition-fast),
color var(--transition-fast);
}
.first-run-choices button:hover .first-run-arrow,
@@ -212,7 +228,9 @@
cursor: pointer;
}
.first-run-suppress:hover { color: rgba(225, 244, 248, 0.92); }
.first-run-suppress:hover {
color: rgba(225, 244, 248, 0.92);
}
/* The live region carries mission progress and failures, so it owns a full row
and reserves its height — otherwise the card resizes as it speaks. */
@@ -249,15 +267,31 @@ body.scene-playback-mode #first-run-launcher {
transform: translate(-50%, 0.8rem) scale(0.985);
}
#first-run-launcher.visible { transform: translate(-50%, 0) scale(1); }
#first-run-launcher.visible {
transform: translate(-50%, 0) scale(1);
}
/* Five tiles have to clear the dock on a 375 x 812 phone, so the rows tighten
and the redundant "ESC to dismiss" hint (no ESC key on a phone) drops. */
#first-run-launcher h2 { margin-top: 0.45rem; }
#first-run-description { margin-top: 0.25rem; font-size: 0.72rem; }
.first-run-choices { margin-top: 0.75rem; }
.first-run-choices button { min-height: 3rem; padding: 0.45rem 0.6rem; }
.first-run-choices small { font-size: 0.62rem; }
.first-run-footer > span:last-child { display: none; }
#first-run-launcher h2 {
margin-top: 0.45rem;
}
#first-run-description {
margin-top: 0.25rem;
font-size: 0.72rem;
}
.first-run-choices {
margin-top: 0.75rem;
}
.first-run-choices button {
min-height: 3rem;
padding: 0.45rem 0.6rem;
}
.first-run-choices small {
font-size: 0.62rem;
}
.first-run-footer > span:last-child {
display: none;
}
}
/* Short viewports — landscape phones, small laptop windows. The chrome tightens
@@ -266,15 +300,38 @@ body.scene-playback-mode #first-run-launcher {
fits. (It was dropped here while there were five; the tile that went is
exactly why it can come back.) */
@media (max-height: 620px) {
#first-run-launcher { padding: 0.75rem 0.85rem; }
#first-run-launcher h2 { margin-top: 0.3rem; font-size: 1.1rem; }
#first-run-description { margin-top: 0.2rem; font-size: 0.7rem; line-height: 1.4; }
.first-run-choices { margin-top: 0.55rem; }
.first-run-choices button { min-height: 2.7rem; padding: 0.36rem 0.6rem; }
.first-run-choices strong { font-size: 0.68rem; }
.first-run-choices small { font-size: 0.6rem; }
.first-run-footer { margin-top: 0.5rem; }
.first-run-note { margin-top: 0.3rem; min-height: 0; }
#first-run-launcher {
padding: 0.75rem 0.85rem;
}
#first-run-launcher h2 {
margin-top: 0.3rem;
font-size: 1.1rem;
}
#first-run-description {
margin-top: 0.2rem;
font-size: 0.7rem;
line-height: 1.4;
}
.first-run-choices {
margin-top: 0.55rem;
}
.first-run-choices button {
min-height: 2.7rem;
padding: 0.36rem 0.6rem;
}
.first-run-choices strong {
font-size: 0.68rem;
}
.first-run-choices small {
font-size: 0.6rem;
}
.first-run-footer {
margin-top: 0.5rem;
}
.first-run-note {
margin-top: 0.3rem;
min-height: 0;
}
}
/* A soft edge on the list, so a tile cut by the fold reads as "more below"
@@ -283,8 +340,16 @@ body.scene-playback-mode #first-run-launcher {
promise content that is not there, which is the opposite of the affordance
it is meant to be. Decorative only: the list scrolls under it. */
.first-run-choices[data-scrollable='true'] {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent 100%);
-webkit-mask-image: linear-gradient(
to bottom,
#000 calc(100% - 1.4rem),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 calc(100% - 1.4rem),
transparent 100%
);
}
/* Scrolled to the end, there is nothing left to promise, so the fade lifts.
@@ -308,8 +373,11 @@ body.scene-playback-mode #first-run-launcher {
@media (prefers-reduced-motion: reduce) {
#first-run-launcher,
.first-run-choices button,
.first-run-arrow { transition: none; }
.first-run-arrow {
transition: none;
}
/* Scrolling a tile into view must not animate either. */
.first-run-choices { scroll-behavior: auto; }
.first-run-choices {
scroll-behavior: auto;
}
}
src/ui/styles/foundation.css
Vendored
+25 -12
View File
@@ -69,7 +69,8 @@
outline-offset: 2px;
}
html, body {
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
@@ -185,7 +186,9 @@ body.cockpit-mode #cockpit-cloud-effects.active {
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 300ms ease, visibility 300ms ease;
transition:
opacity 300ms ease,
visibility 300ms ease;
}
.celestial-ring-overlay.visible {
@@ -222,19 +225,27 @@ body.cockpit-mode #cockpit-cloud-effects.active {
font-weight: 400;
font-style: normal;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 20;
transition: opacity 120ms linear;
user-select: none;
}
.celestial-sun {
color: rgba(231, 194, 72, 0.92);
text-shadow: 0 0 7px rgba(231, 194, 72, 0.72), 0 0 18px rgba(231, 194, 72, 0.3);
text-shadow:
0 0 7px rgba(231, 194, 72, 0.72),
0 0 18px rgba(231, 194, 72, 0.3);
}
.celestial-moon {
color: rgba(55, 211, 239, 0.84);
text-shadow: 0 0 7px rgba(55, 211, 239, 0.65), 0 0 17px rgba(55, 211, 239, 0.25);
text-shadow:
0 0 7px rgba(55, 211, 239, 0.65),
0 0 17px rgba(55, 211, 239, 0.25);
}
#celestial-toggle:disabled {
@@ -499,7 +510,7 @@ body.cockpit-mode #cockpit-cloud-effects.active {
#title-bar .title-logo::before,
#title-bar .title-logo::after {
--radio-broadcast-opacity: .28;
--radio-broadcast-opacity: 0.28;
content: '';
position: absolute;
z-index: 1;
@@ -517,7 +528,7 @@ body.cockpit-mode #cockpit-cloud-effects.active {
}
#title-bar .title-logo::after {
--radio-broadcast-opacity: .17;
--radio-broadcast-opacity: 0.17;
top: -15px;
width: 27px;
height: 13px;
@@ -529,12 +540,15 @@ body.cockpit-mode #cockpit-cloud-effects.active {
animation: title-radio-broadcast 1.8s ease-in-out infinite;
}
#title-bar.radio-broadcasting .title-logo::after { animation-delay: .28s; }
#title-bar.radio-broadcasting .title-logo::after {
animation-delay: 0.28s;
}
@keyframes title-radio-broadcast {
0%, 100% {
opacity: calc(var(--radio-broadcast-opacity) * .55);
transform: translateX(-50%) scale(.94);
0%,
100% {
opacity: calc(var(--radio-broadcast-opacity) * 0.55);
transform: translateX(-50%) scale(0.94);
}
50% {
opacity: var(--radio-broadcast-opacity);
@@ -608,4 +622,3 @@ body.cockpit-mode #cockpit-cloud-effects.active {
text-shadow: 0 0 20px var(--accent-glow);
transition: var(--transition-smooth);
}
src/ui/styles/layers.css
+390 -182
View File
File diff suppressed because it is too large. Load diff
src/ui/styles/location.css
+15 -7
View File
@@ -12,7 +12,11 @@
#location-bar .panel-glow {
position: absolute;
inset: -20px;
background: radial-gradient(ellipse at center, var(--accent-dim) 0%, transparent 60%);
background: radial-gradient(
ellipse at center,
var(--accent-dim) 0%,
transparent 60%
);
filter: blur(20px);
opacity: 0.25;
pointer-events: none;
@@ -137,9 +141,10 @@
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms ease,
padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
transition:
max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms ease,
padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 4px;
}
@@ -155,7 +160,9 @@
border-top: 1px solid var(--glass-border);
margin: 0 4px;
opacity: 0;
transition: opacity 200ms ease, margin 250ms ease;
transition:
opacity 200ms ease,
margin 250ms ease;
}
.location-bar-divider.visible {
@@ -272,7 +279,9 @@
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.3px;
transition: width var(--transition-smooth), padding var(--transition-smooth);
transition:
width var(--transition-smooth),
padding var(--transition-smooth);
caret-color: var(--accent);
}
@@ -289,4 +298,3 @@
#location-search.searching {
opacity: 0.5;
}
src/ui/styles/overlays.css
+15 -6
View File
@@ -40,7 +40,8 @@
#safe-frame-box::before {
background:
linear-gradient(to right,
linear-gradient(
to right,
transparent 33.333%,
rgba(255, 255, 255, 0.2) 33.333%,
rgba(255, 255, 255, 0.2) 33.7%,
@@ -50,7 +51,8 @@
rgba(255, 255, 255, 0.2) 66.7%,
transparent 66.7%
),
linear-gradient(to bottom,
linear-gradient(
to bottom,
transparent 33.333%,
rgba(255, 255, 255, 0.2) 33.333%,
rgba(255, 255, 255, 0.2) 33.7%,
@@ -77,7 +79,9 @@
user-select: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
transition:
opacity var(--transition-smooth),
visibility var(--transition-smooth);
}
#orbit-indicator.active {
@@ -99,7 +103,9 @@
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
--hud-color: rgba(0, 255, 255, 0.6);
--hud-glow: rgba(0, 255, 255, 0.4);
--hud-border: rgba(0, 255, 255, 0.15);
@@ -322,7 +328,11 @@
#intel-hud[data-variant='operator'] .hud-bottom-bar {
border-color: rgba(255, 255, 255, 0.2);
background: linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(8, 22, 18, 0.52));
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.52),
rgba(8, 22, 18, 0.52)
);
}
#intel-hud[data-variant='operator'] .hud-corner {
@@ -361,4 +371,3 @@
#intel-hud[data-variant='minimal'] .hud-summary-wrap {
max-width: 280px;
}
src/ui/styles/provider-settings.css
+56 -16
View File
@@ -17,7 +17,11 @@
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.09rem;
background: linear-gradient(145deg, rgba(10, 27, 37, 0.92), rgba(7, 13, 22, 0.9));
background: linear-gradient(
145deg,
rgba(10, 27, 37, 0.92),
rgba(7, 13, 22, 0.9)
);
border: 1px solid rgba(54, 220, 255, 0.38);
border-radius: 0.42rem;
box-shadow:
@@ -26,12 +30,19 @@
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
transition:
border-color var(--transition-fast),
background var(--transition-fast),
transform var(--transition-fast);
}
#key-setup-chip:hover,
#key-setup-chip:focus-visible {
background: linear-gradient(145deg, rgba(14, 38, 51, 0.95), rgba(9, 18, 28, 0.93));
background: linear-gradient(
145deg,
rgba(14, 38, 51, 0.95),
rgba(9, 18, 28, 0.93)
);
border-color: rgba(54, 220, 255, 0.7);
outline: none;
transform: translateY(-1px);
@@ -42,7 +53,9 @@
font-size: 0.95rem;
}
#key-setup-chip[hidden] { display: none; }
#key-setup-chip[hidden] {
display: none;
}
#key-setup {
position: fixed;
@@ -70,12 +83,16 @@
-webkit-backdrop-filter: blur(28px) saturate(1.25);
opacity: 0;
transform: translate(-50%, calc(-50% + 0.8rem)) scale(0.985);
transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition:
opacity 220ms ease,
transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
/* Same cascade note as the launcher: an author display beats [hidden]. */
#key-setup[hidden] { display: none; }
#key-setup[hidden] {
display: none;
}
#key-setup.visible {
opacity: 1;
@@ -87,7 +104,12 @@
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(54, 220, 255, 0.8), transparent);
background: linear-gradient(
90deg,
transparent,
rgba(54, 220, 255, 0.8),
transparent
);
box-shadow: 0 0 1rem rgba(54, 220, 255, 0.45);
pointer-events: none;
}
@@ -105,7 +127,9 @@
text-transform: uppercase;
}
.key-setup-kicker { color: rgba(54, 220, 255, 0.86); }
.key-setup-kicker {
color: rgba(54, 220, 255, 0.86);
}
.key-setup-close {
display: grid;
@@ -116,7 +140,9 @@
border: 1px solid transparent;
border-radius: 0.3rem;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
transition:
color var(--transition-fast),
border-color var(--transition-fast);
}
.key-setup-close:hover,
@@ -126,7 +152,9 @@
outline: none;
}
.key-setup-close .material-symbols-outlined { font-size: 1rem; }
.key-setup-close .material-symbols-outlined {
font-size: 1rem;
}
#key-setup h2 {
margin-top: 0.6rem;
@@ -163,7 +191,9 @@
scrollbar-gutter: stable;
}
.key-setup-rows::-webkit-scrollbar { width: 6px; }
.key-setup-rows::-webkit-scrollbar {
width: 6px;
}
.key-setup-rows::-webkit-scrollbar-thumb {
background: rgba(54, 220, 255, 0.45);
border-radius: 3px;
@@ -209,7 +239,9 @@
box-shadow: 0 0 0.5rem rgba(84, 227, 156, 0.66);
}
.key-setup-tier { font-size: 0.55rem; }
.key-setup-tier {
font-size: 0.55rem;
}
.key-setup-exposed {
padding: 0.05rem 0.3rem;
@@ -264,9 +296,13 @@
outline: none;
}
.key-setup-fields input::placeholder { color: rgba(148, 178, 188, 0.42); }
.key-setup-fields input::placeholder {
color: rgba(148, 178, 188, 0.42);
}
.key-setup-footer { margin-top: 0.85rem; }
.key-setup-footer {
margin-top: 0.85rem;
}
.key-setup-apply {
padding: 0.5rem 0.95rem;
@@ -318,7 +354,9 @@ body.scene-playback-mode #key-setup {
@media (max-width: 620px) {
/* Clear the dock. Desktop-first app; this is a courtesy, not a layout. */
#key-setup-chip { bottom: 5.8rem; }
#key-setup-chip {
bottom: 5.8rem;
}
}
/* Provider Settings additions: externally-managed badge + per-row remove. */
@@ -344,7 +382,9 @@ body.scene-playback-mode #key-setup {
border: 1px solid rgba(255, 170, 150, 0.3);
border-radius: 0.32rem;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
transition:
color var(--transition-fast),
border-color var(--transition-fast);
}
.key-setup-remove:hover,
src/ui/styles/radio.css
+314 -88
View File
@@ -5,7 +5,7 @@
min-height: 0;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(65, 220, 231, .16);
border-top: 1px solid rgba(65, 220, 231, 0.16);
}
.radio-panel-inner {
position: relative;
@@ -14,20 +14,24 @@
flex-direction: column;
gap: 9px;
padding: 10px;
border: 1px solid rgba(65, 220, 231, .18);
border: 1px solid rgba(65, 220, 231, 0.18);
border-radius: 8px;
background: rgba(2, 15, 20, .42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
background: rgba(2, 15, 20, 0.42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
scrollbar-width: thin;
scrollbar-color: rgba(0, 212, 255, .46) rgba(255, 255, 255, .06);
scrollbar-color: rgba(0, 212, 255, 0.46) rgba(255, 255, 255, 0.06);
}
#radio-panel .panel-header {
margin-bottom: 0;
}
#radio-panel .panel-header { margin-bottom: 0; }
.radio-layer-state {
color: var(--text-dim);
font: 8px/1 var(--font-mono);
letter-spacing: .12em;
letter-spacing: 0.12em;
}
.radio-layer-state.active {
color: #65f7ff;
}
.radio-layer-state.active { color: #65f7ff; }
.radio-directory-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
@@ -38,37 +42,42 @@
grid-column: 2;
color: var(--text-dim);
font: 7px/1 var(--font-mono);
letter-spacing: .12em;
letter-spacing: 0.12em;
}
#radio-enable-btn {
grid-row: 1 / span 2;
min-height: 36px;
}
#radio-enable-btn { grid-row: 1 / span 2; min-height: 36px; }
#radio-filter {
min-width: 0;
padding: 7px 24px 7px 8px;
border: 1px solid rgba(65, 220, 231, .28);
border: 1px solid rgba(65, 220, 231, 0.28);
border-radius: 5px;
color: #c5faff;
background: rgba(5, 24, 31, .88);
background: rgba(5, 24, 31, 0.88);
font: 9px/1.2 var(--font-mono);
}
.radio-station-card {
display: grid;
gap: 4px;
padding: 10px;
border: 1px solid rgba(65, 220, 231, .18);
border: 1px solid rgba(65, 220, 231, 0.18);
border-radius: 7px;
background: rgba(2, 15, 20, .48);
background: rgba(2, 15, 20, 0.48);
overflow-wrap: anywhere;
}
.radio-station-card strong {
color: #e8feff;
font: 11px/1.25 var(--font-mono);
letter-spacing: .05em;
letter-spacing: 0.05em;
}
.radio-station-card span {
color: var(--text-dim);
font: 8px/1.35 var(--font-mono);
}
#radio-station-tags { color: #72dce6; }
#radio-station-tags {
color: #72dce6;
}
.radio-tuner {
display: grid;
width: 100%;
@@ -77,12 +86,18 @@
gap: 5px;
padding: 8px;
overflow: hidden;
border: 1px solid rgba(65, 220, 231, .22);
border: 1px solid rgba(65, 220, 231, 0.22);
border-radius: 7px;
background: linear-gradient(180deg, rgba(1, 9, 13, .92), rgba(4, 24, 30, .72));
box-shadow: inset 0 0 18px rgba(0, 212, 255, .045);
background: linear-gradient(
180deg,
rgba(1, 9, 13, 0.92),
rgba(4, 24, 30, 0.72)
);
box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.045);
}
.radio-tuner[hidden] {
display: none;
}
.radio-tuner[hidden] { display: none; }
.radio-tuner-header,
.radio-tuner-readout {
display: flex;
@@ -90,7 +105,7 @@
gap: 8px;
color: #6daeb5;
font: 7px/1.2 var(--font-mono);
letter-spacing: .1em;
letter-spacing: 0.1em;
}
#radio-tuner-value {
min-width: 0;
@@ -108,10 +123,22 @@
height: 51px;
overflow: hidden;
contain: paint;
border-block: 1px solid rgba(72, 225, 237, .3);
border-block: 1px solid rgba(72, 225, 237, 0.3);
background:
linear-gradient(180deg, transparent 23px, rgba(65, 220, 231, .8) 24px, transparent 25px, transparent 28px, rgba(65, 220, 231, .6) 29px, transparent 30px),
radial-gradient(ellipse at center, rgba(39, 177, 191, .12), transparent 70%);
linear-gradient(
180deg,
transparent 23px,
rgba(65, 220, 231, 0.8) 24px,
transparent 25px,
transparent 28px,
rgba(65, 220, 231, 0.6) 29px,
transparent 30px
),
radial-gradient(
ellipse at center,
rgba(39, 177, 191, 0.12),
transparent 70%
);
}
.radio-tuner-scale {
position: absolute;
@@ -119,7 +146,7 @@
overflow: hidden;
color: #58cbd6;
font: 9px/1 var(--font-mono);
text-shadow: 0 0 7px rgba(65, 220, 231, .5);
text-shadow: 0 0 7px rgba(65, 220, 231, 0.5);
pointer-events: none;
}
.radio-tuner-tick {
@@ -127,7 +154,7 @@
top: 6px;
bottom: 0;
min-width: 1px;
border-left: 1px solid rgba(85, 224, 235, .38);
border-left: 1px solid rgba(85, 224, 235, 0.38);
color: #58cbd6;
padding-left: 3px;
white-space: nowrap;
@@ -135,7 +162,7 @@
transition: left 80ms linear;
}
.radio-tuner-tick.is-current {
border-left-color: rgba(168, 247, 255, .9);
border-left-color: rgba(168, 247, 255, 0.9);
color: #a8f7ff;
}
.radio-tuner-needle {
@@ -147,13 +174,17 @@
width: 3px;
border-radius: 1px;
background: #ff6f4f;
box-shadow: 0 0 4px #ff6f4f, 0 0 10px rgba(255, 77, 50, .65);
box-shadow:
0 0 4px #ff6f4f,
0 0 10px rgba(255, 77, 50, 0.65);
pointer-events: none;
transform: translateX(-50%);
transition: left .18s ease-out;
transition: left 0.18s ease-out;
}
.radio-tuner.is-dragging .radio-tuner-needle,
.radio-tuner.is-dragging .radio-tuner-tick { transition: none; }
.radio-tuner.is-dragging .radio-tuner-tick {
transition: none;
}
#radio-tuner-slider {
position: absolute;
z-index: 2;
@@ -184,7 +215,10 @@
background: transparent;
box-shadow: none;
}
#radio-tuner-slider::-moz-range-track { height: 100%; background: transparent; }
#radio-tuner-slider::-moz-range-track {
height: 100%;
background: transparent;
}
#radio-tuner-slider::-moz-range-thumb {
width: 14px;
height: 47px;
@@ -194,9 +228,11 @@
box-shadow: none;
}
.radio-tuner.is-static .radio-tuner-dial {
box-shadow: inset 0 0 14px rgba(255, 111, 79, .1);
box-shadow: inset 0 0 14px rgba(255, 111, 79, 0.1);
}
.radio-tuner.is-static #radio-tuner-station {
color: #ff9b7e;
}
.radio-tuner.is-static #radio-tuner-station { color: #ff9b7e; }
.radio-tuner-readout span:first-child {
min-width: 0;
color: #7fe6ef;
@@ -216,12 +252,12 @@
.radio-transport button {
min-height: 30px;
padding: 6px 3px;
border: 1px solid rgba(65, 220, 231, .28);
border: 1px solid rgba(65, 220, 231, 0.28);
border-radius: 5px;
color: #8feaf2;
background: rgba(14, 69, 78, .14);
background: rgba(14, 69, 78, 0.14);
font: 8px/1 var(--font-mono);
letter-spacing: .06em;
letter-spacing: 0.06em;
cursor: pointer;
}
.radio-transport button:hover:not(:disabled),
@@ -231,12 +267,15 @@
outline: none;
}
.radio-transport button:disabled,
#radio-filter:disabled { opacity: .42; cursor: not-allowed; }
#radio-filter:disabled {
opacity: 0.42;
cursor: not-allowed;
}
#radio-play-btn.active {
color: #fff;
border-color: rgba(101, 247, 255, .8);
background: rgba(65, 220, 231, .18);
box-shadow: 0 0 12px rgba(65, 220, 231, .12);
border-color: rgba(101, 247, 255, 0.8);
background: rgba(65, 220, 231, 0.18);
box-shadow: 0 0 12px rgba(65, 220, 231, 0.12);
}
.radio-volume-row {
display: grid;
@@ -245,15 +284,19 @@
align-items: center;
color: var(--text-dim);
font: 7px/1 var(--font-mono);
letter-spacing: .1em;
letter-spacing: 0.1em;
}
.radio-volume-row input {
width: 100%;
}
.radio-volume-row input { width: 100%; }
.radio-playback-state {
min-height: 12px;
color: #79d7df;
font: 8px/1.35 var(--font-mono);
}
.radio-playback-state.error { color: #ff9d8f; }
.radio-playback-state.error {
color: #ff9d8f;
}
.radio-links {
display: flex;
flex-wrap: wrap;
@@ -263,13 +306,16 @@
.radio-links a {
color: #64cbd5;
font: 7px/1.3 var(--font-mono);
letter-spacing: .06em;
letter-spacing: 0.06em;
text-decoration: none;
}
.radio-links a:hover, .radio-links a:focus-visible { color: #fff; }
.radio-links a:hover,
.radio-links a:focus-visible {
color: #fff;
}
.radio-privacy {
margin: 0;
color: rgba(190, 230, 230, .48);
color: rgba(190, 230, 230, 0.48);
font: 7px/1.4 var(--font-mono);
}
#military-awareness-panel {
@@ -281,36 +327,129 @@
color: #dceeff;
background: transparent;
border: 0;
font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
font:
11px/1.35 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
}
#military-awareness-panel[hidden] { display: none; }
.military-awareness-subject { margin: 0 0 7px; color: #fff; }
.military-awareness-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin: 0 0 8px; }
.military-awareness-controls button { border: 1px solid rgba(98,181,255,0.34); border-radius: 4px; padding: 4px 3px; color: #a9d9ff; background: rgba(42,113,171,0.12); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.07em; cursor: pointer; }
.military-awareness-controls button:hover, .military-awareness-controls button:focus-visible { color: #fff; border-color: rgba(127,200,255,0.85); background: rgba(66,148,211,0.24); outline: none; }
.military-awareness-controls button:disabled { color: #627181; border-color: rgba(98,181,255,0.12); background: transparent; cursor: default; }
.military-awareness-row { border-top: 1px solid rgba(255,255,255,0.1); padding: 7px 0; }
.military-awareness-row > div { display: flex; justify-content: space-between; }
.military-awareness-row b { color: #7fc8ff; }
.military-awareness-row.unknown b { color: #8fcfff; }
.military-awareness-row small, .military-awareness-note { color: #a9b7c7; }
.military-awareness-row ul { margin: 4px 0 0; padding: 0; list-style: none; }
.military-awareness-row li { display: block; }
.military-awareness-target { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; padding: 1px 0; color: #dceeff; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.military-awareness-target.unavailable { color: var(--text-dim); cursor: default; }
.military-awareness-target:hover, .military-awareness-target:focus-visible { color: #fff; outline: none; text-shadow: 0 0 8px rgba(114, 202, 255, 0.85); }
.military-awareness-target:focus-visible { box-shadow: inset 0 -1px 0 #7fc8ff; }
.military-awareness-target span { color: #7fc8ff; white-space: nowrap; }
.military-awareness-note { margin: 8px 0 0; font-size: 10px; }
#military-awareness-panel[hidden] {
display: none;
}
.military-awareness-subject {
margin: 0 0 7px;
color: #fff;
}
.military-awareness-controls {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
margin: 0 0 8px;
}
.military-awareness-controls button {
border: 1px solid rgba(98, 181, 255, 0.34);
border-radius: 4px;
padding: 4px 3px;
color: #a9d9ff;
background: rgba(42, 113, 171, 0.12);
font:
9px/1.2 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
letter-spacing: 0.07em;
cursor: pointer;
}
.military-awareness-controls button:hover,
.military-awareness-controls button:focus-visible {
color: #fff;
border-color: rgba(127, 200, 255, 0.85);
background: rgba(66, 148, 211, 0.24);
outline: none;
}
.military-awareness-controls button:disabled {
color: #627181;
border-color: rgba(98, 181, 255, 0.12);
background: transparent;
cursor: default;
}
.military-awareness-row {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 7px 0;
}
.military-awareness-row > div {
display: flex;
justify-content: space-between;
}
.military-awareness-row b {
color: #7fc8ff;
}
.military-awareness-row.unknown b {
color: #8fcfff;
}
.military-awareness-row small,
.military-awareness-note {
color: #a9b7c7;
}
.military-awareness-row ul {
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.military-awareness-row li {
display: block;
}
.military-awareness-target {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
border: 0;
padding: 1px 0;
color: #dceeff;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.military-awareness-target.unavailable {
color: var(--text-dim);
cursor: default;
}
.military-awareness-target:hover,
.military-awareness-target:focus-visible {
color: #fff;
outline: none;
text-shadow: 0 0 8px rgba(114, 202, 255, 0.85);
}
.military-awareness-target:focus-visible {
box-shadow: inset 0 -1px 0 #7fc8ff;
}
.military-awareness-target span {
color: #7fc8ff;
white-space: nowrap;
}
.military-awareness-note {
margin: 8px 0 0;
font-size: 10px;
}
.military-awareness-standby {
display: grid;
gap: 7px;
padding: 12px 4px 4px;
border-top: 1px solid rgba(98, 181, 255, 0.16);
}
.military-awareness-standby strong { color: #79c2ff; font-size: 10px; letter-spacing: 0.1em; }
.military-awareness-standby span { color: #8192a6; font-size: 9px; letter-spacing: 0.05em; }
.military-awareness-standby strong {
color: #79c2ff;
font-size: 10px;
letter-spacing: 0.1em;
}
.military-awareness-standby span {
color: #8192a6;
font-size: 9px;
letter-spacing: 0.05em;
}
.military-awareness-standby button {
justify-self: start;
padding: 4px 12px;
@@ -318,27 +457,51 @@
border-radius: 4px;
color: #a9d9ff;
background: rgba(42, 113, 171, 0.12);
font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
font:
9px/1.2 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
letter-spacing: 0.08em;
cursor: pointer;
}
#military-awareness-direction-overlay { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
#military-awareness-direction-overlay[hidden] { display: none; }
#military-awareness-direction-overlay {
position: absolute;
inset: 0;
z-index: 4;
overflow: hidden;
pointer-events: none;
}
#military-awareness-direction-overlay[hidden] {
display: none;
}
.military-awareness-compass-ring {
--compass-rotation: 0deg;
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(111,196,255,0.2);
outline: 1px dashed rgba(111,196,255,0.28);
border: 1px solid rgba(111, 196, 255, 0.2);
outline: 1px dashed rgba(111, 196, 255, 0.28);
outline-offset: -5px;
border-radius: 50%;
box-shadow:
inset 0 0 0 5px rgba(34,128,196,0.018),
inset 0 0 24px rgba(34,128,196,0.035),
0 0 14px rgba(34,128,196,0.05);
inset 0 0 0 5px rgba(34, 128, 196, 0.018),
inset 0 0 24px rgba(34, 128, 196, 0.035),
0 0 14px rgba(34, 128, 196, 0.05);
}
.military-awareness-compass-ring::before {
content: '';
position: absolute;
left: 50%;
top: -7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid rgba(127, 200, 255, 0.88);
transform: translateX(-50%);
filter: drop-shadow(0 0 5px rgba(87, 184, 255, 0.7));
}
.military-awareness-compass-ring::before { content: ''; position: absolute; left: 50%; top: -7px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(127,200,255,0.88); transform: translateX(-50%); filter: drop-shadow(0 0 5px rgba(87,184,255,0.7)); }
.military-awareness-compass-ring::after {
content: '';
position: absolute;
@@ -349,22 +512,86 @@
rgba(125, 205, 255, 0.38) 0deg 0.7deg,
transparent 0.7deg 15deg
);
-webkit-mask: radial-gradient(circle, transparent calc(100% - 8px), #000 calc(100% - 8px) calc(100% - 4px), transparent calc(100% - 4px));
mask: radial-gradient(circle, transparent calc(100% - 8px), #000 calc(100% - 8px) calc(100% - 4px), transparent calc(100% - 4px));
-webkit-mask: radial-gradient(
circle,
transparent calc(100% - 8px),
#000 calc(100% - 8px) calc(100% - 4px),
transparent calc(100% - 4px)
);
mask: radial-gradient(
circle,
transparent calc(100% - 8px),
#000 calc(100% - 8px) calc(100% - 4px),
transparent calc(100% - 4px)
);
transform: rotate(var(--compass-rotation));
transition: transform 80ms linear;
}
.military-awareness-compass-label, .military-awareness-compass-heading { position: absolute; transform: translate(-50%, -50%); color: rgba(156,213,255,0.7); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-shadow: 0 0 7px rgba(53,161,235,0.55); }
.military-awareness-compass-label.cardinal-n { color: rgba(255,188,87,0.92); }
.military-awareness-compass-heading { color: rgba(190,225,249,0.76); font-size: 8px; }
.military-awareness-direction-marker { position: absolute; width: 1px; height: 1px; transform: translate(-50%, -50%); transition: opacity 100ms linear; }
.military-awareness-direction-marker[hidden] { display: none; }
.military-awareness-direction-arrow { position: absolute; left: 50%; top: 50%; color: #74dbff; font: 23px/1 sans-serif; transform-origin: 50% 50%; text-shadow: 0 0 5px rgba(87,223,255,0.9), 0 0 13px rgba(87,223,255,0.35); }
.military-awareness-direction-label { position: absolute; left: 50%; top: 50%; padding: 3px 6px; border: 1px solid rgba(116,219,255,0.24); border-radius: 3px; color: #bceeff; background: rgba(5,12,20,0.68); font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; white-space: pre; text-shadow: 0 0 5px rgba(116,219,255,0.38); }
.military-awareness-compass-label,
.military-awareness-compass-heading {
position: absolute;
transform: translate(-50%, -50%);
color: rgba(156, 213, 255, 0.7);
font:
9px/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
letter-spacing: 0.08em;
text-shadow: 0 0 7px rgba(53, 161, 235, 0.55);
}
.military-awareness-compass-label.cardinal-n {
color: rgba(255, 188, 87, 0.92);
}
.military-awareness-compass-heading {
color: rgba(190, 225, 249, 0.76);
font-size: 8px;
}
.military-awareness-direction-marker {
position: absolute;
width: 1px;
height: 1px;
transform: translate(-50%, -50%);
transition: opacity 100ms linear;
}
.military-awareness-direction-marker[hidden] {
display: none;
}
.military-awareness-direction-arrow {
position: absolute;
left: 50%;
top: 50%;
color: #74dbff;
font: 23px/1 sans-serif;
transform-origin: 50% 50%;
text-shadow:
0 0 5px rgba(87, 223, 255, 0.9),
0 0 13px rgba(87, 223, 255, 0.35);
}
.military-awareness-direction-label {
position: absolute;
left: 50%;
top: 50%;
padding: 3px 6px;
border: 1px solid rgba(116, 219, 255, 0.24);
border-radius: 3px;
color: #bceeff;
background: rgba(5, 12, 20, 0.68);
font:
8px/1.3 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
text-align: center;
white-space: pre;
text-shadow: 0 0 5px rgba(116, 219, 255, 0.38);
}
.data-toggle-row.gev-voice-focus {
background: rgba(92, 255, 198, 0.1);
box-shadow: inset 0 0 0 1px rgba(92, 255, 198, 0.72), 0 0 18px rgba(92, 255, 198, 0.18);
box-shadow:
inset 0 0 0 1px rgba(92, 255, 198, 0.72),
0 0 18px rgba(92, 255, 198, 0.18);
}
.data-toggle-top {
@@ -573,4 +800,3 @@
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
flex: none;
}
src/ui/styles/recording.css
-1
View File
@@ -30,4 +30,3 @@ body.recording-mode #scene-runtime.active {
body.scene-playback-mode :is(#clear-selected-layers, #reset-globe-view) {
display: none !important;
}
src/ui/styles/responsive.css
-1
View File
@@ -213,4 +213,3 @@
text-align: center;
}
}
src/ui/styles/scenes.css
+39 -11
View File
@@ -35,7 +35,9 @@
order: 2;
}
#left-panel-stack > #scene-panel { order: 4; }
#left-panel-stack > #scene-panel {
order: 4;
}
/*
* Runtime focus mode: the layout engine applies this only when the expanded
@@ -59,7 +61,8 @@
* When an expanded panel and its collapsed siblings fit together, preserve
* the canonical control order and center their combined stack at 50vh.
*/
#left-panel-stack.layout-tail > :is(#data-panel, #cctv-panel, #scene-panel):not(.collapsed) {
#left-panel-stack.layout-tail
> :is(#data-panel, #cctv-panel, #scene-panel):not(.collapsed) {
box-sizing: border-box;
flex: 0 0 var(--left-panel-allocated-height);
height: var(--left-panel-allocated-height);
@@ -91,19 +94,33 @@
}
#left-panel-stack > [data-panel-id]:not(.collapsed) .panel-divider {
background: linear-gradient(90deg, rgb(0 212 255 / 28%), rgba(0, 212, 255, 0.18) 58%, transparent);
background: linear-gradient(
90deg,
rgb(0 212 255 / 28%),
rgba(0, 212, 255, 0.18) 58%,
transparent
);
box-shadow: 0 0 7px rgba(0, 212, 255, 0.22);
}
#right-context-rail [data-panel-id]:not(.collapsed) .panel-divider {
background: linear-gradient(90deg, rgb(0 212 255 / 28%), rgba(0, 212, 255, 0.18) 58%, transparent);
background: linear-gradient(
90deg,
rgb(0 212 255 / 28%),
rgba(0, 212, 255, 0.18) 58%,
transparent
);
box-shadow: 0 0 7px rgba(0, 212, 255, 0.22);
}
#scene-panel .panel-glow {
position: absolute;
inset: -18px;
background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.16) 0%, transparent 65%);
background: radial-gradient(
ellipse at center,
rgba(0, 212, 255, 0.16) 0%,
transparent 65%
);
filter: blur(16px);
opacity: 0.25;
pointer-events: none;
@@ -209,7 +226,9 @@
border-radius: 9px;
padding: 7px 8px;
background: rgba(255, 255, 255, 0.03);
transition: border-color var(--transition-fast), background var(--transition-fast);
transition:
border-color var(--transition-fast),
background var(--transition-fast);
}
.scene-shot-row.active {
@@ -300,7 +319,11 @@
#scene-progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.75));
background: linear-gradient(
90deg,
rgba(0, 212, 255, 0.2),
rgba(0, 212, 255, 0.75)
);
color: #d5f7ff;
font-family: var(--font-mono);
font-size: 8px;
@@ -329,7 +352,9 @@
z-index: 105;
opacity: 0;
visibility: hidden;
transition: opacity 180ms ease, visibility 180ms ease;
transition:
opacity 180ms ease,
visibility 180ms ease;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
@@ -354,7 +379,9 @@
#global-context-panel.collapsed .global-context-actions,
#global-context-panel.collapsed .global-context-modes,
#global-context-panel.collapsed .context-mode-view,
#global-context-panel.collapsed > .global-context-panel-inner > .context-mode-standby,
#global-context-panel.collapsed
> .global-context-panel-inner
> .context-mode-standby,
#radio-panel.collapsed .radio-panel-inner > :not(.panel-header),
#cctv-panel.collapsed .cctv-controls,
#cctv-panel.collapsed .cctv-calibration-block,
@@ -380,7 +407,9 @@
width: var(--left-collapsed-width);
}
#global-context-panel #radio-panel.collapsed { width: 100%; }
#global-context-panel #radio-panel.collapsed {
width: 100%;
}
#data-panel.collapsed .panel-title,
#cctv-panel.collapsed .panel-title,
@@ -409,4 +438,3 @@
#param-slider-panel.collapsed .param-panel-header {
margin-bottom: 2px;
}
src/ui/styles/status.css
+79 -23
View File
@@ -74,10 +74,14 @@
letter-spacing: 1.35px;
text-transform: uppercase;
transform: translateX(-50%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 14px rgba(0, 212, 255, 0.08);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.34),
0 0 14px rgba(0, 212, 255, 0.08);
pointer-events: none;
}
#global-loading-status[hidden] { display: none; }
#global-loading-status[hidden] {
display: none;
}
#global-loading-label {
color: rgba(184, 244, 255, 0.92);
}
@@ -92,25 +96,49 @@
text-overflow: ellipsis;
white-space: nowrap;
}
#global-loading-status:is([data-state='complete'], [data-state='cancelled'], [data-state='error']) {
#global-loading-status:is(
[data-state='complete'],
[data-state='cancelled'],
[data-state='error']
) {
justify-content: center;
text-align: center;
}
#global-loading-status:is([data-state='complete'], [data-state='cancelled'], [data-state='error']) #global-loading-detail {
#global-loading-status:is(
[data-state='complete'],
[data-state='cancelled'],
[data-state='error']
)
#global-loading-detail {
display: none;
}
#global-loading-status[data-state='error'] { border-color: rgba(255, 98, 82, 0.55); color: #ff9b8e; }
#global-loading-status[data-state='error'] {
border-color: rgba(255, 98, 82, 0.55);
color: #ff9b8e;
}
#global-loading-status[data-state='error'] #global-loading-label,
#global-loading-status[data-state='error'] #global-loading-detail { color: #ff9b8e; }
#global-loading-status[data-state='cancelled'] { color: #ffd488; }
#global-loading-status[data-state='retry'] { border-color: rgba(255, 212, 136, 0.55); }
#global-loading-status[data-state='error'] #global-loading-detail {
color: #ff9b8e;
}
#global-loading-status[data-state='cancelled'] {
color: #ffd488;
}
#global-loading-status[data-state='retry'] {
border-color: rgba(255, 212, 136, 0.55);
}
#global-loading-status[data-state='retry'] #global-loading-label,
#global-loading-status[data-state='retry'] #global-loading-detail { color: #ffd488; }
#global-loading-status[data-state='retry'] #global-loading-detail {
color: #ffd488;
}
#global-loading-status[data-state='cancelled'] #global-loading-label,
#global-loading-status[data-state='cancelled'] #global-loading-detail { color: #ffd488; }
#global-loading-status[data-state='cancelled'] #global-loading-detail {
color: #ffd488;
}
#global-loading-status[data-state='acquiring'] {
border-color: rgba(0, 212, 255, 0.42);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 18px rgba(0, 212, 255, 0.12);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.34),
0 0 18px rgba(0, 212, 255, 0.12);
}
.share-icon {
@@ -141,8 +169,12 @@
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 14px rgba(0, 212, 255, 0.08);
transition:
opacity 0.22s ease,
transform 0.22s ease;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.34),
0 0 14px rgba(0, 212, 255, 0.08);
}
/* Stacked below the traffic chip so both can show at once */
@@ -270,21 +302,43 @@
them. */
.gev-flap-sizing {
display: inline-block;
transition: width var(--gev-flap-total, 500ms) cubic-bezier(0.2, 0.75, 0.25, 1);
transition: width var(--gev-flap-total, 500ms)
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* The old leaf hinges down and away on the cell's midline. */
@keyframes gev-flap-out {
0% { transform: rotateX(0deg); opacity: 1; }
48% { transform: rotateX(-88deg); opacity: 0.5; }
100% { transform: rotateX(-90deg); opacity: 0; }
0% {
transform: rotateX(0deg);
opacity: 1;
}
48% {
transform: rotateX(-88deg);
opacity: 0.5;
}
100% {
transform: rotateX(-90deg);
opacity: 0;
}
}
/* The new leaf waits for the old one to clear, then drops in and settles
with a single small overshoot — the mechanical clack. */
@keyframes gev-flap-in {
0% { transform: rotateX(90deg); opacity: 0; }
46% { transform: rotateX(90deg); opacity: 0; }
78% { transform: rotateX(-7deg); opacity: 1; }
100% { transform: rotateX(0deg); opacity: 1; }
0% {
transform: rotateX(90deg);
opacity: 0;
}
46% {
transform: rotateX(90deg);
opacity: 0;
}
78% {
transform: rotateX(-7deg);
opacity: 1;
}
100% {
transform: rotateX(0deg);
opacity: 1;
}
}
/* Matches the .cockpit-roll-track treatment: collapse the duration rather
than dropping the animation, so the final frame still lands the glyph.
@@ -322,7 +376,10 @@
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}
@@ -331,4 +388,3 @@
visibility: visible;
transform: translateX(-50%) translateY(0);
}
src/ui/styles/voice-cost.css
+3 -2
View File
@@ -28,7 +28,9 @@
letter-spacing: 0.045rem;
line-height: 1;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast),
transition:
color var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);
}
@@ -75,4 +77,3 @@
#command-dock.tray-open .gev-voice-cost {
display: none;
}