mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
Said Turksever
e35483d37d
Utilities stays in Cockpit for Directions, but only Data Layers folded the Cockpit context rail away when opened, set its top below the open panel and took Cyber's Cockpit size. Utilities now does all three, and Contact expanding closes it as it closes Data Layers.
2910 lines
74 KiB
CSS
2910 lines
74 KiB
CSS
/* Cyber is selected from DISPLAY > HUD > Layout. It skins the application
|
||
shell while map imagery and source media retain their original colours. */
|
||
|
||
/* Radio retains Context's nested player and disclosure geometry in Cyber. */
|
||
:root[data-ui-theme='cyber'] #radio-panel.collapsed .radio-panel-inner {
|
||
height: 50px;
|
||
min-height: 50px;
|
||
box-sizing: border-box;
|
||
}
|
||
:root[data-ui-theme='cyber'] #radio-panel:not(.collapsed) .radio-panel-inner {
|
||
max-height: 100%;
|
||
overflow-y: auto;
|
||
scrollbar-gutter: stable;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #right-context-rail > #pp-toggles:not(.collapsed) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles > .pp-header-row {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail
|
||
:is(#cctv-panel, #global-context-panel):not(.collapsed)
|
||
> :is(.cctv-panel-inner, .global-context-panel-inner) {
|
||
overflow: visible;
|
||
scrollbar-gutter: auto;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(.cctv-panel-inner, .global-context-panel-inner)
|
||
> .panel-header {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .cyber-panel-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .cctv-panel-inner > .cyber-panel-body {
|
||
gap: 8px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .cyber-panel-body > * {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
.panel-collapsible.collapsed
|
||
> :is(.cctv-panel-inner, .global-context-panel-inner)
|
||
> .cyber-panel-body {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles > .pp-panel-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
width: 100%;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles > .pp-panel-body > * {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles.collapsed > .pp-panel-body {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] {
|
||
color-scheme: dark;
|
||
--scroll-thumb: rgba(165, 188, 199, 0.35);
|
||
--scroll-track: transparent;
|
||
--cyber-red: #c45454;
|
||
--cyber-red-bright: #e16666;
|
||
--cyber-slate: #26343a;
|
||
--cyber-slate-raised: #334a53;
|
||
--cyber-grid: rgba(188, 211, 218, 0.1);
|
||
--cyber-telemetry-fill: rgba(13, 20, 23, 0.985);
|
||
--cyber-panel-width: 272px;
|
||
--cyber-right-panel-width: 312px;
|
||
--cyber-panel-collapsed-width: 200px;
|
||
--cyber-panel-gap: 8px;
|
||
--cyber-panel-control-size: 30px;
|
||
--cyber-panel-surface: rgba(18, 24, 27, 0.92);
|
||
--cyber-panel-surface-detail: linear-gradient(
|
||
135deg,
|
||
rgba(68, 88, 94, 0.16),
|
||
transparent 48%
|
||
);
|
||
--cyber-panel-shadow:
|
||
3px 0 0 rgba(196, 84, 84, 0.2) inset,
|
||
-1px 0 0 rgba(226, 235, 236, 0.05) inset, 0 10px 28px rgba(0, 0, 0, 0.42);
|
||
--bg-dark: #090d0f;
|
||
--glass-bg: var(--cyber-panel-surface);
|
||
--glass-border: rgba(206, 222, 226, 0.28);
|
||
--glass-border-hover: rgba(196, 84, 84, 0.82);
|
||
--accent: #e9f0f1;
|
||
--accent-dim: rgba(196, 84, 84, 0.2);
|
||
--accent-glow: rgba(196, 84, 84, 0.34);
|
||
--text-primary: #f2f5f4;
|
||
--text-secondary: rgba(226, 235, 236, 0.82);
|
||
--text-dim: rgba(180, 198, 202, 0.58);
|
||
--panel-radius: 1px;
|
||
--btn-radius: 1px;
|
||
--cyber-panel-frame: polygon(
|
||
0 10px,
|
||
10px 0,
|
||
calc(50% - 25px) 0,
|
||
calc(50% - 18px) 6px,
|
||
calc(50% + 18px) 6px,
|
||
calc(50% + 25px) 0,
|
||
calc(100% - 10px) 0,
|
||
100% 10px,
|
||
100% calc(100% - 10px),
|
||
calc(100% - 10px) 100%,
|
||
10px 100%,
|
||
0 calc(100% - 10px)
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body {
|
||
font-family: var(--font-mono);
|
||
background-color: var(--bg-dark);
|
||
}
|
||
|
||
/* A restrained technical grid echoes the reference without obscuring the map. */
|
||
:root[data-ui-theme='cyber'] body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
pointer-events: none;
|
||
opacity: 0.32;
|
||
background-image:
|
||
linear-gradient(var(--cyber-grid) 1px, transparent 1px),
|
||
linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px);
|
||
background-size: 116px 116px;
|
||
background-position: center center;
|
||
-webkit-mask-image: radial-gradient(
|
||
circle at 50% 50%,
|
||
transparent 0 min(40vw, 52vh),
|
||
#000 calc(min(40vw, 52vh) + 18px)
|
||
);
|
||
mask-image: radial-gradient(
|
||
circle at 50% 50%,
|
||
transparent 0 min(40vw, 52vh),
|
||
#000 calc(min(40vw, 52vh) + 18px)
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(
|
||
.panel-inner,
|
||
.panel-collapsible,
|
||
#pp-toggles:not(.collapsed),
|
||
#pp-toggles .pp-header-row,
|
||
.pp-toggle-btn,
|
||
.style-btn,
|
||
.dock-tray-toggle,
|
||
.dock-popover,
|
||
.scene-btn,
|
||
.gev-action-button:not(.gev-action-button--compact),
|
||
.context-mode-button,
|
||
.map-stack-chip,
|
||
.key-setup-chip,
|
||
.locale-picker-button,
|
||
.locale-picker-popup,
|
||
.first-run-card
|
||
) {
|
||
border-color: var(--glass-border);
|
||
border-radius: var(--btn-radius);
|
||
background-color: var(--cyber-panel-surface);
|
||
background-image: var(--cyber-panel-surface-detail);
|
||
box-shadow:
|
||
0 0 0 1px rgba(0, 0, 0, 0.32) inset,
|
||
0 8px 20px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
/* Compact Cyber rails must wrap multi-word actions within their own button. */
|
||
:root[data-ui-theme='cyber'] #scene-panel .scene-controls .scene-btn {
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Carry the raised voice-module silhouette across the primary panel system.
|
||
The six-pixel calibration bay is decorative and stays outside panel content. */
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.data-panel-inner,
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.scene-panel-inner,
|
||
.utilities-panel-inner,
|
||
.global-context-panel-inner,
|
||
.radio-panel-inner,
|
||
#pp-toggles:not(.collapsed),
|
||
#pp-toggles.collapsed > .pp-header-row
|
||
) {
|
||
border-radius: 0;
|
||
clip-path: var(--cyber-panel-frame);
|
||
box-shadow: var(--cyber-panel-shadow);
|
||
}
|
||
|
||
/* Turn every panel header into a compact instrument readout. The stronger
|
||
title marker and tapered divider improve hierarchy without adding another
|
||
decorative object over the keyhole. */
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.data-panel-inner,
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.scene-panel-inner,
|
||
.utilities-panel-inner,
|
||
.global-context-panel-inner,
|
||
.radio-panel-inner
|
||
)
|
||
> .panel-header {
|
||
min-height: 28px;
|
||
gap: 9px;
|
||
padding: 0 2px 7px 8px;
|
||
border-bottom: 1px solid rgba(206, 222, 226, 0.08);
|
||
}
|
||
|
||
/* The right-rail surfaces use different content gutters, but their disclosure
|
||
controls should still read as one vertical column. Eight pixels here plus
|
||
the shared two-pixel header inset matches Display's eleven-pixel framed
|
||
edge inset once the surface border is included. */
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail
|
||
:is(
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.global-context-panel-inner
|
||
) {
|
||
padding-inline-end: 8px;
|
||
}
|
||
|
||
/* Collapsed right-rail panels otherwise inherit different legacy gutters:
|
||
CCTV lands five pixels low while Context lands four pixels high. Give every
|
||
compact launcher the same centered 48px content row inside its 1px frame. */
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail
|
||
:is(
|
||
#cctv-panel,
|
||
#weather-panel,
|
||
#recent-imagery-panel,
|
||
#street-level-panel,
|
||
#global-context-panel
|
||
).collapsed
|
||
> :is(
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.global-context-panel-inner
|
||
) {
|
||
padding: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail
|
||
:is(
|
||
#cctv-panel,
|
||
#weather-panel,
|
||
#recent-imagery-panel,
|
||
#street-level-panel,
|
||
#global-context-panel
|
||
).collapsed
|
||
> :is(
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.global-context-panel-inner
|
||
)
|
||
> .panel-header {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 48px;
|
||
min-height: 48px;
|
||
margin: 0;
|
||
padding: 0 10px 0 14px;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.data-panel-inner,
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.scene-panel-inner,
|
||
.utilities-panel-inner,
|
||
.global-context-panel-inner,
|
||
.radio-panel-inner
|
||
)
|
||
> .panel-header
|
||
.panel-title {
|
||
position: relative;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.data-panel-inner,
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.scene-panel-inner,
|
||
.utilities-panel-inner,
|
||
.global-context-panel-inner,
|
||
.radio-panel-inner
|
||
)
|
||
> .panel-header
|
||
.panel-title::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -8px;
|
||
width: 3px;
|
||
height: 11px;
|
||
background: var(--cyber-red);
|
||
clip-path: polygon(0 0, 100% 2px, 100% calc(100% - 2px), 0 100%);
|
||
content: '';
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.data-panel-inner,
|
||
.cctv-panel-inner,
|
||
.weather-panel-inner,
|
||
.recent-imagery-panel-inner,
|
||
.street-level-panel-inner,
|
||
.scene-panel-inner,
|
||
.utilities-panel-inner,
|
||
.global-context-panel-inner,
|
||
.radio-panel-inner
|
||
)
|
||
> .panel-header
|
||
.panel-divider {
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(196, 84, 84, 0.62),
|
||
rgba(206, 222, 226, 0.08)
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .panel-collapsible.collapsed::after {
|
||
width: 24px;
|
||
opacity: 0.56;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .panel-collapsible:not(.collapsed)::after {
|
||
width: 58px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(.panel-collapse-btn, body.cockpit-mode .cockpit-utility-glyph) {
|
||
display: grid;
|
||
width: var(--cyber-panel-control-size);
|
||
min-width: var(--cyber-panel-control-size);
|
||
height: var(--cyber-panel-control-size);
|
||
place-items: center;
|
||
padding: 0;
|
||
border-color: rgba(206, 222, 226, 0.22);
|
||
clip-path: polygon(
|
||
5px 0,
|
||
calc(100% - 5px) 0,
|
||
100% 5px,
|
||
100% calc(100% - 5px),
|
||
calc(100% - 5px) 100%,
|
||
5px 100%,
|
||
0 calc(100% - 5px),
|
||
0 5px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
.panel-collapsible:not(#location-bar):not(#control-panel) {
|
||
position: relative;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
.panel-collapsible:not(#location-bar):not(#control-panel)::after {
|
||
position: absolute;
|
||
z-index: 4;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 36px;
|
||
height: 6px;
|
||
border-top: 1px solid rgba(225, 102, 102, 0.84);
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(196, 84, 84, 0.22) 18% 82%,
|
||
transparent
|
||
);
|
||
clip-path: polygon(0 0, 7px 100%, calc(100% - 7px) 100%, 100% 0);
|
||
content: '';
|
||
pointer-events: none;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
/* Display follows the same red title treatment as the other panel headers. */
|
||
:root[data-ui-theme='cyber'] #pp-toggles:not(.collapsed) {
|
||
background-color: var(--cyber-panel-surface);
|
||
background-image: var(--cyber-panel-surface-detail);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles .pp-header-label {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
/* Clip the Display surface, not its shared calibration accent. Data Layers
|
||
already separates its inner frame from the outer accent in the same way. */
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
#pp-toggles:not(.collapsed),
|
||
:root[data-ui-theme='cyber']
|
||
#global-context-panel.panel-collapsible
|
||
.global-context-panel-inner,
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded:has([data-cockpit-launcher='display']) {
|
||
isolation: isolate;
|
||
clip-path: none;
|
||
background: none;
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
#pp-toggles:not(.collapsed)::before,
|
||
:root[data-ui-theme='cyber']
|
||
#global-context-panel.panel-collapsible
|
||
.global-context-panel-inner::before,
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded:has(
|
||
[data-cockpit-launcher='display']
|
||
)::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
border: 1px solid var(--glass-border);
|
||
background-color: var(--cyber-panel-surface);
|
||
background-image: var(--cyber-panel-surface-detail);
|
||
box-shadow: var(--cyber-panel-shadow);
|
||
clip-path: var(--cyber-panel-frame);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles > .pp-header-row .pp-collapse-btn {
|
||
width: var(--cyber-panel-control-size);
|
||
min-width: var(--cyber-panel-control-size);
|
||
height: var(--cyber-panel-control-size);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] :where(button, select, input, textarea) {
|
||
border-radius: var(--btn-radius);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(
|
||
button:hover,
|
||
button.active,
|
||
button[aria-pressed='true'],
|
||
button[aria-selected='true'],
|
||
.style-btn.active,
|
||
.map-stack-chip.active
|
||
) {
|
||
border-color: var(--cyber-red);
|
||
color: var(--text-primary);
|
||
background-color: rgba(64, 45, 46, 0.94);
|
||
box-shadow:
|
||
3px 0 0 var(--cyber-red) inset,
|
||
0 0 12px rgba(196, 84, 84, 0.14);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .pp-toggle-btn.active,
|
||
:root[data-ui-theme='cyber'] .style-btn.active,
|
||
:root[data-ui-theme='cyber'] .map-stack-chip.active {
|
||
border-color: var(--cyber-red);
|
||
color: var(--text-primary);
|
||
background: rgba(64, 45, 46, 0.94);
|
||
box-shadow:
|
||
3px 0 0 var(--cyber-red) inset,
|
||
0 0 12px rgba(196, 84, 84, 0.14);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .gev-segmented,
|
||
:root[data-ui-theme='cyber'] .pp-mode-seg {
|
||
border-color: rgba(206, 222, 226, 0.24);
|
||
border-radius: 1px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .gev-segment[aria-checked='true'],
|
||
:root[data-ui-theme='cyber'] .pp-mode-btn.active {
|
||
background: var(--cyber-red);
|
||
color: #f7f8f7;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#utilities-panel
|
||
.utilities-tools
|
||
.pp-toggle-btn:is([aria-pressed='true'], .active) {
|
||
background: rgba(64, 45, 46, 0.94);
|
||
box-shadow: 3px 0 0 var(--cyber-red) inset;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .pp-toggle-btn.active .pp-label {
|
||
color: #f5f7f6;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #detection-toggle.active,
|
||
:root[data-ui-theme='cyber'] #detection-toggle.panoptic,
|
||
:root[data-ui-theme='cyber'] #detection-toggle.god {
|
||
border-color: var(--cyber-red);
|
||
background: rgba(64, 45, 46, 0.94);
|
||
box-shadow:
|
||
3px 0 0 var(--cyber-red) inset,
|
||
0 0 12px rgba(196, 84, 84, 0.14);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#detection-toggle.active
|
||
:where(.pp-label, .pp-icon),
|
||
:root[data-ui-theme='cyber']
|
||
#detection-toggle.panoptic
|
||
:where(.pp-label, .pp-icon),
|
||
:root[data-ui-theme='cyber'] #detection-toggle.god :where(.pp-label, .pp-icon) {
|
||
color: #f5f7f6;
|
||
text-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(.pp-select, select, input, textarea):where(:not(.gev-field)) {
|
||
border-color: rgba(206, 222, 226, 0.24);
|
||
background-color: rgba(26, 35, 39, 0.96);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Shared fields consume theme palettes through their own surface rule.
|
||
Feature palettes (Radio) retain precedence without restyling native fields. */
|
||
:root[data-ui-theme='cyber'] .gev-field {
|
||
--gev-field-border-color: rgba(206, 222, 226, 0.24);
|
||
--gev-field-background: rgba(26, 35, 39, 0.96);
|
||
--gev-field-color: var(--text-primary);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(
|
||
.panel-title,
|
||
.panel-mini-label,
|
||
.pp-header-label,
|
||
.pp-label,
|
||
.pp-slider-mini-label,
|
||
.btn-label,
|
||
.layer-name,
|
||
.context-mode-label,
|
||
.dock-tray-label,
|
||
label
|
||
) {
|
||
color: var(--text-secondary);
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
text-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(.panel-title, .pp-header-label, .panel-mini-label) {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(
|
||
.material-symbols-outlined,
|
||
.pp-icon,
|
||
.btn-icon,
|
||
.dock-label-icon,
|
||
.first-run-arrow,
|
||
.panel-collapse-btn
|
||
) {
|
||
color: #f2f5f4;
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* Replace pictographic emoji with a single-colour instrument glyph set while
|
||
Cyber is active. Data semantics and accessible labels remain unchanged. */
|
||
:root[data-ui-theme='cyber'] .data-icon,
|
||
:root[data-ui-theme='cyber'] #command-dock .btn-icon {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 1.05rem;
|
||
min-width: 1.05rem;
|
||
color: rgba(235, 241, 241, 0.88);
|
||
font-family: var(--font-mono);
|
||
font-size: 0 !important;
|
||
font-style: normal;
|
||
line-height: 1;
|
||
filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .data-icon::before,
|
||
:root[data-ui-theme='cyber'] #command-dock .btn-icon::before {
|
||
content: '◇';
|
||
font-size: 0.82rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='satellites']
|
||
.data-icon::before {
|
||
content: '◎';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='flights']
|
||
.data-icon::before {
|
||
content: '△';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='military']
|
||
.data-icon::before {
|
||
content: '✦';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='vessels']
|
||
.data-icon::before {
|
||
content: '◭';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='traffic']
|
||
.data-icon::before {
|
||
content: '◈';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='transit']
|
||
.data-icon::before {
|
||
content: '▤';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='bikeshare']
|
||
.data-icon::before {
|
||
content: '∞';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='cctv']
|
||
.data-icon::before {
|
||
content: '◉';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='alpr-cameras']
|
||
.data-icon::before {
|
||
content: '⌗';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='military-installations']
|
||
.data-icon::before {
|
||
content: '⌖';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='local-datacenters']
|
||
.data-icon::before {
|
||
content: '▦';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='submarine-cables']
|
||
.data-icon::before {
|
||
content: '≋';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='local-dams']
|
||
.data-icon::before {
|
||
content: '▰';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='rocket-launches']
|
||
.data-icon::before {
|
||
content: '↑';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='earthquakes']
|
||
.data-icon::before {
|
||
content: '≋';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='local-firms']
|
||
.data-icon::before {
|
||
content: '▲';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='directions']
|
||
.data-icon::before {
|
||
content: '⌁';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
.data-toggle-row[data-layer-id='radio']
|
||
.data-icon::before {
|
||
content: '◉';
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='normal']
|
||
.btn-icon::before {
|
||
content: '○';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='retro']
|
||
.btn-icon::before {
|
||
content: '▦';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='surveillance']
|
||
.btn-icon::before {
|
||
content: '◒';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='thermal']
|
||
.btn-icon::before {
|
||
content: '≋';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='anime']
|
||
.btn-icon::before {
|
||
content: '✦';
|
||
}
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.style-btn[data-style='noir']
|
||
.btn-icon::before {
|
||
content: '◐';
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle) {
|
||
font-size: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle)::before {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
min-width: 1rem;
|
||
color: #f2f5f4;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #bloom-toggle::before {
|
||
content: '✦';
|
||
}
|
||
:root[data-ui-theme='cyber'] #sharpen-toggle::before {
|
||
content: '⌕';
|
||
}
|
||
:root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle) .pp-icon {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle) .pp-label {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(
|
||
button:hover,
|
||
button.active,
|
||
button[aria-pressed='true'],
|
||
button[aria-selected='true']
|
||
)
|
||
:where(.material-symbols-outlined, .pp-icon, .btn-icon, .dock-label-icon) {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(.dock-pin-btn img, .title-logo img, .brand-logo img) {
|
||
filter: grayscale(1) brightness(2.2) contrast(1.1);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(input[type='range'], input[type='checkbox'], input[type='radio']) {
|
||
accent-color: var(--cyber-red);
|
||
}
|
||
|
||
/* Street Level's range wears Cyber's slider accent like every other range. */
|
||
:root[data-ui-theme='cyber'] .sl-range {
|
||
--accent: inherit;
|
||
--accent-glow: inherit;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:where(button, a[href], input, select, textarea):focus-visible {
|
||
outline-color: var(--cyber-red-bright) !important;
|
||
box-shadow:
|
||
0 0 0 2px #090d0f,
|
||
0 0 0 4px var(--cyber-red-bright);
|
||
}
|
||
|
||
/* These controls are clipped to a chamfered tag. Keep focus inside that shape;
|
||
an outside outline/shadow is clipped away, including in cockpit launchers. */
|
||
:root[data-ui-theme='cyber']
|
||
:is(.panel-collapse-btn, body.cockpit-mode .cockpit-utility-glyph):is(
|
||
:hover,
|
||
:focus-visible
|
||
) {
|
||
border-color: var(--cyber-red-bright);
|
||
color: var(--text-primary);
|
||
background-color: rgba(64, 45, 46, 0.94);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
:is(
|
||
.panel-collapse-btn,
|
||
body.cockpit-mode .cockpit-utility-glyph
|
||
):focus-visible {
|
||
outline: 2px solid var(--cyber-red-bright) !important;
|
||
outline-offset: -3px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #title-bar h1,
|
||
:root[data-ui-theme='cyber'] #style-indicator {
|
||
color: #f5f7f6;
|
||
text-shadow: 2px 2px 0 rgba(196, 84, 84, 0.3);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #title-bar .subtitle,
|
||
:root[data-ui-theme='cyber'] #style-indicator .label,
|
||
:root[data-ui-theme='cyber'] #style-indicator .indicator-label {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #title-bar .title-logo {
|
||
filter: drop-shadow(0 0 10px rgba(196, 84, 84, 0.24));
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#title-bar
|
||
.title-logo
|
||
:is(#outer_eye, #inner_eye) {
|
||
fill: #090d0f;
|
||
stroke: #f5f7f6;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #title-bar .title-logo #globe {
|
||
fill: var(--cyber-red);
|
||
stroke: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #title-bar .title-logo #globe_cage {
|
||
fill: #f5f7f6;
|
||
stroke: #090d0f;
|
||
opacity: 0.72;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #top-center-actions button {
|
||
--cyber-action-edge: rgba(226, 235, 236, 0.34);
|
||
--cyber-action-fill: rgba(14, 20, 23, 0.94);
|
||
position: relative;
|
||
isolation: isolate;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: var(--cyber-action-edge);
|
||
clip-path: polygon(
|
||
29% 0,
|
||
71% 0,
|
||
100% 29%,
|
||
100% 71%,
|
||
71% 100%,
|
||
29% 100%,
|
||
0 71%,
|
||
0 29%
|
||
);
|
||
color: #f2f5f4;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #top-center-actions button::before {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 1px;
|
||
background: var(--cyber-action-fill);
|
||
clip-path: inherit;
|
||
content: '';
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #top-center-actions button:hover,
|
||
:root[data-ui-theme='cyber'] #top-center-actions button:focus-visible,
|
||
:root[data-ui-theme='cyber'] #top-center-actions button[aria-pressed='true'] {
|
||
--cyber-action-edge: var(--cyber-red);
|
||
--cyber-action-fill: rgba(64, 45, 46, 0.94);
|
||
color: var(--cyber-red-bright);
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock {
|
||
--dock-side-compact: clamp(9rem, 11vw, 9.75rem);
|
||
--dock-voice-width: 8rem;
|
||
padding: 0.3rem 0.48rem 0.34rem;
|
||
gap: 0.12rem;
|
||
overflow: visible;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
isolation: isolate;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock::before {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(196, 84, 84, 0.16),
|
||
transparent 18% 82%,
|
||
rgba(196, 84, 84, 0.16)
|
||
),
|
||
rgba(10, 15, 18, 0.96);
|
||
box-shadow:
|
||
0 0 0 1px rgba(196, 84, 84, 0.62) inset,
|
||
0 0 0 2px rgba(238, 243, 243, 0.035) inset;
|
||
clip-path: polygon(
|
||
12px 0,
|
||
calc(100% - 12px) 0,
|
||
100% 12px,
|
||
100% calc(100% - 12px),
|
||
calc(100% - 12px) 100%,
|
||
12px 100%,
|
||
0 calc(100% - 12px),
|
||
0 12px
|
||
);
|
||
filter: drop-shadow(0 13px 18px rgba(0, 0, 0, 0.52));
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 1rem;
|
||
bottom: -0.26rem;
|
||
left: 1rem;
|
||
height: 0.22rem;
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
rgba(196, 84, 84, 0.9) 0 2px,
|
||
transparent 2px 6px,
|
||
rgba(226, 235, 236, 0.38) 6px 7px,
|
||
transparent 7px 11px
|
||
);
|
||
opacity: 0.68;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #location-bar,
|
||
:root[data-ui-theme='cyber'] #command-dock > #control-panel {
|
||
border: 1px solid rgba(112, 145, 153, 0.34);
|
||
background:
|
||
linear-gradient(135deg, rgba(62, 86, 94, 0.26), transparent 52%),
|
||
rgba(28, 39, 43, 0.92);
|
||
box-shadow:
|
||
0 0 0 1px rgba(0, 0, 0, 0.32) inset,
|
||
3px 0 0 rgba(196, 84, 84, 0.18) inset;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #location-bar {
|
||
border-left-color: rgba(196, 84, 84, 0.68);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #control-panel {
|
||
border-right-color: rgba(196, 84, 84, 0.68);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #location-bar::after,
|
||
:root[data-ui-theme='cyber'] #command-dock > #control-panel::after {
|
||
position: absolute;
|
||
bottom: 0.22rem;
|
||
color: rgba(165, 190, 196, 0.42);
|
||
font-size: 0.32rem;
|
||
letter-spacing: 0.1rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #location-bar::after {
|
||
content: 'LOC / GRID';
|
||
left: 0.75rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #control-panel::after {
|
||
content: 'OPT / MATRIX';
|
||
right: 0.75rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #gev-voice-control {
|
||
--cyber-voice-wave: 105, 203, 209;
|
||
--cyber-voice-peak: 226, 240, 240;
|
||
--cyber-voice-alert: 196, 84, 84;
|
||
/* Popups extend above this root. Only its decorative layer may be clipped. */
|
||
isolation: isolate;
|
||
overflow: visible;
|
||
clip-path: none;
|
||
border-color: transparent;
|
||
background: none;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock > #gev-voice-control::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
border: 1px solid rgba(196, 84, 84, 0.58);
|
||
border-radius: 0;
|
||
background:
|
||
linear-gradient(180deg, rgba(196, 84, 84, 0.14), transparent 34%),
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
rgba(188, 211, 218, 0.035) 0 1px,
|
||
transparent 1px 9px
|
||
),
|
||
rgba(38, 52, 58, 0.98);
|
||
box-shadow:
|
||
0 9px 22px rgba(0, 0, 0, 0.48),
|
||
3px 0 0 rgba(196, 84, 84, 0.72) inset,
|
||
-3px 0 0 rgba(196, 84, 84, 0.32) inset;
|
||
clip-path: polygon(
|
||
12px 0,
|
||
calc(100% - 12px) 0,
|
||
100% 12px,
|
||
100% calc(100% - 12px),
|
||
calc(100% - 12px) 100%,
|
||
12px 100%,
|
||
0 calc(100% - 12px),
|
||
0 12px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #gev-voice-button {
|
||
border: 1px solid rgba(226, 235, 236, 0.24);
|
||
background: rgba(8, 13, 15, 0.32);
|
||
box-shadow: 0 0 0 3px rgba(196, 84, 84, 0.08) inset;
|
||
clip-path: polygon(
|
||
8px 0,
|
||
100% 0,
|
||
100% calc(100% - 8px),
|
||
calc(100% - 8px) 100%,
|
||
0 100%,
|
||
0 8px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-mic-orbit {
|
||
position: relative;
|
||
border-color: rgba(196, 84, 84, 0.58);
|
||
border-radius: 0;
|
||
background: rgba(196, 84, 84, 0.1);
|
||
box-shadow:
|
||
0 0 0 0.16rem rgba(196, 84, 84, 0.07),
|
||
0 0 0.7rem rgba(196, 84, 84, 0.12);
|
||
transform: rotate(45deg) scale(0.8);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-mic-orbit::before {
|
||
position: absolute;
|
||
inset: -0.3rem;
|
||
border: 1px solid rgba(var(--cyber-voice-wave), 0.26);
|
||
box-shadow:
|
||
0 0 0 1px rgba(0, 0, 0, 0.5),
|
||
0 0 0.55rem rgba(var(--cyber-voice-wave), 0.12);
|
||
content: '';
|
||
opacity: 0.56;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control:is(
|
||
[data-status='connecting'],
|
||
[data-status='listening'],
|
||
[data-status='executing']
|
||
)
|
||
.gev-mic-orbit::before {
|
||
animation: gev-cyber-voice-lock 1.45s ease-in-out infinite;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-mic-orbit > * {
|
||
transform: rotate(-45deg) scale(1.25);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control[data-speaker='user'] {
|
||
--cyber-voice-wave: 232, 157, 78;
|
||
--cyber-voice-peak: 255, 218, 154;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control[data-speaker='ai'] {
|
||
--cyber-voice-wave: 105, 203, 209;
|
||
--cyber-voice-peak: 211, 247, 248;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer {
|
||
position: relative;
|
||
isolation: isolate;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.11rem;
|
||
height: 2.25rem;
|
||
padding: 0.28rem 0.24rem;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(var(--cyber-voice-wave), 0.26);
|
||
border-left-color: rgba(var(--cyber-voice-alert), 0.72);
|
||
background:
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
rgba(var(--cyber-voice-wave), 0.07) 0 1px,
|
||
transparent 1px 6px
|
||
),
|
||
repeating-linear-gradient(
|
||
0deg,
|
||
rgba(var(--cyber-voice-wave), 0.055) 0 1px,
|
||
transparent 1px 7px
|
||
),
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(var(--cyber-voice-alert), 0.09),
|
||
rgba(3, 13, 16, 0.9) 24% 76%,
|
||
rgba(var(--cyber-voice-wave), 0.08)
|
||
);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(0, 0, 0, 0.34),
|
||
inset 0 0 0.7rem rgba(var(--cyber-voice-wave), 0.055);
|
||
clip-path: polygon(
|
||
5px 0,
|
||
100% 0,
|
||
100% calc(100% - 5px),
|
||
calc(100% - 5px) 100%,
|
||
0 100%,
|
||
0 5px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0.2rem;
|
||
left: 0.2rem;
|
||
z-index: 0;
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(var(--cyber-voice-wave), 0.62) 18% 82%,
|
||
transparent
|
||
);
|
||
box-shadow: 0 0 0.35rem rgba(var(--cyber-voice-wave), 0.28);
|
||
content: '';
|
||
opacity: 0.72;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer::after {
|
||
position: absolute;
|
||
top: 2px;
|
||
bottom: 2px;
|
||
left: -34%;
|
||
z-index: 0;
|
||
width: 32%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(var(--cyber-voice-wave), 0.04) 28%,
|
||
rgba(var(--cyber-voice-peak), 0.36) 82%,
|
||
rgba(var(--cyber-voice-peak), 0.78) 96%,
|
||
transparent
|
||
);
|
||
content: '';
|
||
opacity: 0.42;
|
||
pointer-events: none;
|
||
transform: skewX(-10deg);
|
||
animation: gev-cyber-voice-scan 2.8s linear infinite;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer span,
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
.gev-voice-visualizer
|
||
span:nth-child(n) {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 0.13rem;
|
||
min-height: 2px;
|
||
height: var(--audio-level, 5px);
|
||
border-radius: 0;
|
||
opacity: var(--audio-opacity, 0.6);
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(var(--cyber-voice-peak), 0.98),
|
||
rgba(var(--cyber-voice-wave), 0.9) 42% 72%,
|
||
rgba(var(--cyber-voice-alert), 0.82)
|
||
);
|
||
box-shadow:
|
||
0 0 0.32rem rgba(var(--cyber-voice-wave), 0.42),
|
||
0 0 1px rgba(var(--cyber-voice-peak), 0.94);
|
||
transform-origin: center;
|
||
clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control:is(
|
||
[data-status='connecting'],
|
||
[data-status='listening'],
|
||
[data-status='executing']
|
||
)
|
||
.gev-voice-visualizer {
|
||
border-color: rgba(var(--cyber-voice-wave), 0.58);
|
||
border-left-color: rgba(var(--cyber-voice-alert), 0.9);
|
||
opacity: 1;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(0, 0, 0, 0.34),
|
||
inset 0 0 0.9rem rgba(var(--cyber-voice-wave), 0.12),
|
||
0 0 0.55rem rgba(var(--cyber-voice-wave), 0.12);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control:is([data-status='listening'], [data-status='executing'])
|
||
.gev-voice-visualizer::after {
|
||
opacity: 0.72;
|
||
animation-duration: 1.65s;
|
||
}
|
||
|
||
@keyframes gev-cyber-voice-scan {
|
||
from {
|
||
left: -34%;
|
||
}
|
||
|
||
to {
|
||
left: 104%;
|
||
}
|
||
}
|
||
|
||
@keyframes gev-cyber-voice-lock {
|
||
0%,
|
||
100% {
|
||
opacity: 0.34;
|
||
transform: scale(0.94);
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.9;
|
||
transform: scale(1.08);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer::after,
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
#gev-voice-control:is(
|
||
[data-status='connecting'],
|
||
[data-status='listening'],
|
||
[data-status='executing']
|
||
)
|
||
.gev-mic-orbit::before {
|
||
animation: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .gev-voice-visualizer::after {
|
||
left: 52%;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .dock-popover-content {
|
||
padding-top: 1.65rem;
|
||
/* The pin straddles the tray edge; keep it outside the decorative mask. */
|
||
isolation: isolate;
|
||
clip-path: none;
|
||
border-color: transparent;
|
||
border-radius: 0;
|
||
background: none;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
:is(#location-bar, #control-panel)
|
||
.dock-popover-content::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
width: auto;
|
||
height: auto;
|
||
transform: none;
|
||
pointer-events: none;
|
||
border: 1px solid rgba(196, 84, 84, 0.62);
|
||
background:
|
||
linear-gradient(135deg, rgba(62, 86, 94, 0.22), transparent 46%),
|
||
linear-gradient(rgba(188, 211, 218, 0.045) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(188, 211, 218, 0.045) 1px, transparent 1px),
|
||
rgba(12, 18, 21, 0.98);
|
||
background-size:
|
||
auto,
|
||
32px 32px,
|
||
32px 32px,
|
||
auto;
|
||
box-shadow:
|
||
0 1rem 2.6rem rgba(0, 0, 0, 0.64),
|
||
4px 0 0 rgba(196, 84, 84, 0.2) inset;
|
||
clip-path: var(--cyber-panel-frame);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .dock-popover-content::before {
|
||
position: absolute;
|
||
top: 0.46rem;
|
||
left: 0.7rem;
|
||
color: rgba(225, 102, 102, 0.78);
|
||
font-size: 0.4rem;
|
||
letter-spacing: 0.12rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #location-bar-popover::before {
|
||
content: 'NAVIGATION DECK // 01';
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #control-panel-popover::before {
|
||
content: 'VISUAL MATRIX // 03';
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
:where(.style-btn, .location-pill, .poi-pill) {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(142, 171, 178, 0.3);
|
||
border-radius: 0;
|
||
background:
|
||
linear-gradient(135deg, rgba(55, 78, 85, 0.42), transparent 66%),
|
||
rgba(31, 45, 50, 0.94);
|
||
clip-path: polygon(
|
||
0 0,
|
||
calc(100% - 7px) 0,
|
||
100% 7px,
|
||
100% 100%,
|
||
7px 100%,
|
||
0 calc(100% - 7px)
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
:where(.style-btn, .location-pill, .poi-pill)::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 7px;
|
||
height: 7px;
|
||
background: var(--cyber-red);
|
||
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
||
opacity: 0.72;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock .style-btn.active {
|
||
border-color: rgba(225, 102, 102, 0.78);
|
||
background:
|
||
linear-gradient(135deg, rgba(196, 84, 84, 0.42), transparent 72%),
|
||
rgba(60, 42, 43, 0.96);
|
||
box-shadow: 3px 0 0 var(--cyber-red) inset;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #search-toggle {
|
||
color: rgba(235, 241, 241, 0.9);
|
||
font-size: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #search-toggle > span {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock #search-toggle::before {
|
||
content: '⌕';
|
||
font-family: var(--font-mono);
|
||
font-size: 0.86rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#command-dock
|
||
:where(.panel-title, .location-toolbar-label, .gev-voice-kicker) {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #top-center-actions #key-setup-chip {
|
||
position: relative;
|
||
inset: auto;
|
||
flex: 0 0 36px;
|
||
width: 36px;
|
||
height: 36px;
|
||
padding: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #key-setup-chip[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #key-setup-chip [data-key-setup-chip-label] {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #north-up-view .camera-compass-n {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#north-up-view[data-north-up='true']
|
||
.camera-compass-n {
|
||
color: var(--cyber-red-bright);
|
||
text-shadow: 0 0 6px var(--cyber-red);
|
||
}
|
||
|
||
/* Cyber frames each mode button itself; the shared segmented track would
|
||
draw a third, blue frame around them. */
|
||
:root[data-ui-theme='cyber'] .global-context-modes {
|
||
gap: 7px;
|
||
padding: 0;
|
||
border: 0;
|
||
background: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .dock-tray-toggle,
|
||
:root[data-ui-theme='cyber'] .context-mode-button {
|
||
background-color: rgba(38, 52, 58, 0.95);
|
||
border-color: rgba(152, 179, 186, 0.34);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] {
|
||
--hud-color: rgba(244, 247, 246, 0.94) !important;
|
||
--hud-glow: rgba(196, 84, 84, 0.24) !important;
|
||
--hud-border: rgba(196, 84, 84, 0.74) !important;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-sonar {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: block;
|
||
width: min(
|
||
var(--cyber-sonar-size-vw, 80vw),
|
||
var(--cyber-sonar-size-vh, 104vh)
|
||
);
|
||
aspect-ratio: 1;
|
||
border: 1px solid rgba(226, 235, 236, 0.2);
|
||
border-radius: 50%;
|
||
opacity: var(--cyber-sonar-visual-intensity, 0.57);
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
transform: translate(-50%, -50%);
|
||
box-shadow:
|
||
0 0 0 1px rgba(196, 84, 84, 0.12),
|
||
inset 0 0 48px rgba(196, 84, 84, 0.035);
|
||
}
|
||
|
||
:root[data-cyber-sonar='off'] #intel-hud[data-variant='cyber'] .hud-sonar {
|
||
display: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-sonar::before,
|
||
#intel-hud[data-variant='cyber'] .hud-sonar::after {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
content: '';
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-sonar::before {
|
||
opacity: 0.52;
|
||
background: repeating-radial-gradient(
|
||
circle,
|
||
transparent 0 calc(var(--cyber-sonar-ring-step, 12.5%) - 1px),
|
||
rgba(226, 235, 236, 0.17) calc(var(--cyber-sonar-ring-step, 12.5%) - 1px)
|
||
var(--cyber-sonar-ring-step, 12.5%)
|
||
);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-sonar::after {
|
||
background: conic-gradient(
|
||
from 0deg,
|
||
rgba(245, 250, 250, 0.3) 0deg,
|
||
rgba(235, 116, 116, 0.14) 0.55deg,
|
||
rgba(196, 84, 84, 0.075) var(--cyber-sonar-sector-quarter, 6deg),
|
||
rgba(150, 206, 215, 0.035) var(--cyber-sonar-sector-middle, 14.4deg),
|
||
transparent var(--cyber-sonar-sector-width, 24deg) 360deg
|
||
);
|
||
filter: drop-shadow(0 0 4px rgba(226, 235, 236, 0.1));
|
||
mask-image: radial-gradient(
|
||
circle,
|
||
#000 0 84%,
|
||
rgba(0, 0, 0, 0.65) 92%,
|
||
transparent 100%
|
||
);
|
||
transform-origin: 50% 50%;
|
||
will-change: transform;
|
||
animation: cyber-sonar-sweep 5.2s linear infinite;
|
||
animation-delay: var(--cyber-sonar-phase-delay, 0ms);
|
||
}
|
||
|
||
@keyframes cyber-sonar-sweep {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
#cyber-sonar-status:empty {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .hud-sonar {
|
||
display: none;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#intel-hud[data-variant='cyber'] .hud-sonar::after {
|
||
display: none;
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-bar {
|
||
display: flex;
|
||
border-color: var(--hud-border);
|
||
background-color: rgba(14, 20, 23, 0.9);
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
rgba(196, 84, 84, 0.12),
|
||
transparent 46%
|
||
);
|
||
box-shadow: 0 0 0 1px rgba(234, 240, 241, 0.06) inset;
|
||
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
|
||
}
|
||
|
||
/* Cyber keeps the useful style and locality readouts, not fictional IDs. */
|
||
#intel-hud[data-variant='cyber'] .hud-top-left .hud-classification,
|
||
#intel-hud[data-variant='cyber'] .hud-top-left .hud-system {
|
||
display: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-bar {
|
||
bottom: calc(2vh + 9.8rem);
|
||
width: min(48vw, 680px);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-top-left,
|
||
#intel-hud[data-variant='cyber'] .hud-top-right {
|
||
top: max(14vh, 136px);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-left,
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-right {
|
||
bottom: calc(2vh + 6.5rem);
|
||
}
|
||
|
||
/* Attribution's logo row extends above its text baseline. Reserve the whole
|
||
row plus a gap above the dock-relative 2vh + 5rem credit position. */
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-left {
|
||
bottom: calc(2vh + 7.75rem);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-corner {
|
||
position: fixed;
|
||
isolation: isolate;
|
||
box-sizing: border-box;
|
||
padding: 8px 11px;
|
||
border: 0;
|
||
background: rgba(196, 84, 84, 0.72);
|
||
clip-path: var(--cyber-panel-frame);
|
||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-corner::before {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 1px;
|
||
background:
|
||
linear-gradient(135deg, rgba(68, 88, 94, 0.2), transparent 48%),
|
||
var(--cyber-telemetry-fill);
|
||
clip-path: inherit;
|
||
content: '';
|
||
pointer-events: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bracket {
|
||
color: var(--cyber-red-bright);
|
||
text-shadow: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-mode::after {
|
||
content: ' // CYBER';
|
||
color: var(--cyber-red-bright);
|
||
font-size: 0.62em;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
/* Cyber also owns a distinct desktop composition. Existing components keep
|
||
their controls and semantics, but move onto asymmetric mission-deck rails. */
|
||
@media (min-width: 961px) and (max-height: 649px) {
|
||
/* The compact-height layout drops the desktop rail composition one pixel
|
||
below its 650px threshold. Keep the left rail inside the same telemetry
|
||
and attribution-safe floor while its panel bodies take over scrolling. */
|
||
:root[data-ui-theme='cyber'] #left-panel-stack {
|
||
bottom: calc(2vh + 13rem);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 961px) and (min-height: 650px) {
|
||
:root[data-ui-theme='cyber'] {
|
||
/* Compose the upper mission card and both panel rails as one compact lane.
|
||
The shared rail anchor keeps expanded left/right panels aligned. */
|
||
--cyber-hud-card-top: max(100px, 10.25vh);
|
||
--cyber-left-rail-top: max(220px, calc(var(--cyber-hud-card-top) + 120px));
|
||
}
|
||
|
||
/* Keep the rotated COLL / ONA telemetry in the upper clearance lane. Its
|
||
lower edge follows the panel rail instead of crossing expanded controls. */
|
||
#intel-hud[data-variant='cyber'] .hud-left-edge {
|
||
top: calc(var(--cyber-left-rail-top) - 18px);
|
||
left: 14px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #left-panel-stack {
|
||
/* The stack holds still, so its rail needs no offset (leftPanelRail.js). */
|
||
--panel-stack-top-pinned: 1;
|
||
top: var(--cyber-left-rail-top) !important;
|
||
bottom: calc(2vh + 13rem);
|
||
inset-inline-start: calc(54px + var(--panel-rail-clearance));
|
||
width: 300px;
|
||
padding-inline-start: 10px;
|
||
border-inline-start: 1px solid transparent;
|
||
}
|
||
|
||
/* An edge line marks each side's open panel, mirrored left and right. */
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
#left-panel-stack:has(> [data-panel-id]:not(.collapsed, [hidden])) {
|
||
border-inline-start-color: rgba(196, 84, 84, 0.72);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
#right-context-rail:has(> [data-panel-id]:not(.collapsed, [hidden])) {
|
||
border-inline-end-color: rgba(196, 84, 84, 0.72);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
#left-panel-stack:has(> [data-panel-id]:not(.collapsed))
|
||
> :is(#data-panel, #cctv-panel, #utilities-panel, #scene-panel):not(.collapsed) {
|
||
flex: 1 1 auto;
|
||
height: auto;
|
||
max-height: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#left-panel-stack.layout-focus
|
||
> [data-panel-id].collapsed {
|
||
display: block;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* The panel rail lists the collapsed panels. */
|
||
:root[data-ui-theme='cyber']
|
||
#left-panel-stack.layout-focus.layout-exclusive
|
||
> [data-panel-id].collapsed {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel, #scene-panel) {
|
||
--panel-expanded-width: var(--cyber-panel-width);
|
||
width: var(--panel-expanded-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel, #scene-panel).collapsed {
|
||
width: var(--cyber-panel-collapsed-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel, #scene-panel).collapsed
|
||
:is(.data-panel-inner, .utilities-panel-inner, .scene-panel-inner) {
|
||
box-sizing: border-box;
|
||
height: 50px;
|
||
min-height: 50px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Match the collapsed Data Layers frame without shrinking expanded headers
|
||
or changing the compact-screen cockpit layout. */
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control:not(.is-expanded)
|
||
.cockpit-utility-launcher {
|
||
height: 50px;
|
||
min-height: 50px;
|
||
padding: 9px 18px 9px 24px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control:not(.is-expanded)
|
||
.cockpit-utility-launcher::after {
|
||
bottom: 6px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body:not(.cockpit-mode)
|
||
:is(#data-panel, #utilities-panel, #scene-panel)
|
||
.panel-collapse-btn {
|
||
width: var(--cyber-panel-control-size);
|
||
min-width: var(--cyber-panel-control-size);
|
||
height: var(--cyber-panel-control-size);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #right-context-rail {
|
||
--right-display-collapsed-width: var(--cyber-panel-collapsed-width);
|
||
--right-context-collapsed-width: var(--cyber-panel-collapsed-width);
|
||
/* The edge line and its gap keep the panels where they were. */
|
||
right: calc(51px + var(--panel-rail-clearance));
|
||
width: 323px;
|
||
padding-inline-end: 10px;
|
||
border-inline-end: 1px solid transparent;
|
||
}
|
||
|
||
/* The map rails now use one visible expanded width. Keeping the rail itself
|
||
wider preserves its overlay-avoidance corridor while the framed surfaces
|
||
align to the same measure on both sides of the scene. */
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail
|
||
> :is(
|
||
#pp-toggles,
|
||
#cctv-panel,
|
||
#weather-panel,
|
||
#recent-imagery-panel,
|
||
#street-level-panel,
|
||
#global-context-panel
|
||
):not(.collapsed) {
|
||
width: var(--cyber-right-panel-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #right-context-rail > #pp-toggles {
|
||
--pp-expanded-width: var(--cyber-right-panel-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #global-context-panel #radio-panel.collapsed {
|
||
width: 100%;
|
||
}
|
||
|
||
/* The shared rail owns intrinsic sizing and constrained allocations. A
|
||
zero flex basis here collapses expanded bodies when the rail has only a
|
||
max-height (normal mode), and overrides its focus-mode allocation. */
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-top-left {
|
||
top: var(--cyber-hud-card-top);
|
||
right: auto;
|
||
left: 28px;
|
||
width: 238px;
|
||
box-sizing: border-box;
|
||
transform: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-top-left .hud-content,
|
||
#intel-hud[data-variant='cyber'] .hud-top-left .hud-summary-wrap {
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-top-left .hud-summary {
|
||
max-width: 100%;
|
||
padding-right: 18px;
|
||
-webkit-mask-image: linear-gradient(
|
||
90deg,
|
||
#000 0 calc(100% - 24px),
|
||
transparent 100%
|
||
);
|
||
mask-image: linear-gradient(
|
||
90deg,
|
||
#000 0 calc(100% - 24px),
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail.layout-focus
|
||
#global-context-panel:not(.collapsed)
|
||
.context-mode-standby:not([hidden]) {
|
||
position: relative;
|
||
isolation: isolate;
|
||
min-height: 132px;
|
||
flex: 1 1 auto;
|
||
place-content: center;
|
||
padding: 12px;
|
||
border: 1px solid rgba(206, 222, 226, 0.14);
|
||
border-radius: 7px;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
transparent 49.8%,
|
||
rgba(206, 222, 226, 0.08) 50%,
|
||
transparent 50.2%
|
||
),
|
||
linear-gradient(
|
||
transparent 49.8%,
|
||
rgba(206, 222, 226, 0.08) 50%,
|
||
transparent 50.2%
|
||
),
|
||
radial-gradient(
|
||
circle at center,
|
||
transparent 0 22px,
|
||
rgba(196, 84, 84, 0.18) 23px 24px,
|
||
transparent 25px 45px,
|
||
rgba(206, 222, 226, 0.1) 46px 47px,
|
||
transparent 48px
|
||
),
|
||
rgba(7, 12, 14, 0.44);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
#right-context-rail.layout-focus
|
||
#global-context-panel:not(.collapsed)
|
||
.context-mode-standby:not([hidden])::before {
|
||
position: absolute;
|
||
z-index: -1;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 84px;
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(225, 102, 102, 0.5),
|
||
transparent
|
||
);
|
||
content: '';
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-bar {
|
||
display: none;
|
||
}
|
||
|
||
/* Sits above the language picker row in the bottom-right corner
|
||
(locale-picker.css: 0.9rem inset + one ~2rem button + a gap). */
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-right {
|
||
right: 28px;
|
||
bottom: 3.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
:root[data-ui-theme='cyber'] body::after {
|
||
background-size: 78px 78px;
|
||
}
|
||
|
||
#intel-hud[data-variant='cyber'] .hud-bottom-bar {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock {
|
||
padding-right: 0.32rem;
|
||
padding-left: 0.32rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #command-dock::before {
|
||
content: 'NAV // COMMAND // VIS';
|
||
top: -0.72rem;
|
||
}
|
||
}
|
||
|
||
/* Cyber cockpit
|
||
The map shell becomes a purpose-built sensor visor in first person. The
|
||
concentric scanner is line-only so the optical center and target labels stay
|
||
readable; controls and source-backed telemetry remain at the perimeter. */
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #cockpit-hud {
|
||
--cockpit-accent: #69cbd1;
|
||
--cockpit-caution: #c45454;
|
||
--cockpit-side-panel-width: min(294px, 23vw);
|
||
color: #e9f2f2;
|
||
text-shadow: none;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(4, 24, 29, 0.38),
|
||
transparent 18% 82%,
|
||
rgba(4, 24, 29, 0.38)
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(2, 13, 16, 0.5),
|
||
transparent 24% 78%,
|
||
rgba(2, 13, 16, 0.44)
|
||
);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(105, 203, 209, 0.18),
|
||
inset 0 0 96px rgba(0, 0, 0, 0.42);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #cockpit-hud::before {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 18px 20px 24px;
|
||
pointer-events: none;
|
||
opacity: 0.58;
|
||
background:
|
||
linear-gradient(var(--cockpit-accent), var(--cockpit-accent)) 0 72px / 76px
|
||
1px no-repeat,
|
||
linear-gradient(var(--cockpit-caution), var(--cockpit-caution)) 76px 72px /
|
||
42px 1px no-repeat,
|
||
linear-gradient(var(--cockpit-accent), var(--cockpit-accent)) 100% 72px /
|
||
76px 1px no-repeat,
|
||
linear-gradient(var(--cockpit-caution), var(--cockpit-caution))
|
||
calc(100% - 76px) 72px / 42px 1px no-repeat,
|
||
linear-gradient(var(--cockpit-accent), var(--cockpit-accent)) 0
|
||
calc(100% - 54px) / 122px 1px no-repeat,
|
||
linear-gradient(var(--cockpit-accent), var(--cockpit-accent)) 100%
|
||
calc(100% - 54px) / 122px 1px no-repeat;
|
||
border-right: 1px solid rgba(105, 203, 209, 0.16);
|
||
border-left: 1px solid rgba(105, 203, 209, 0.16);
|
||
clip-path: polygon(
|
||
0 0,
|
||
34% 0,
|
||
36% 8px,
|
||
64% 8px,
|
||
66% 0,
|
||
100% 0,
|
||
100% 100%,
|
||
68% 100%,
|
||
66% calc(100% - 8px),
|
||
34% calc(100% - 8px),
|
||
32% 100%,
|
||
0 100%
|
||
);
|
||
}
|
||
|
||
/* Cyber cockpit has its own complete telemetry hierarchy. Suppress the map-mode
|
||
intelligence cards so they cannot compete with the scanner or duplicate the
|
||
source-backed cockpit rails. */
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #intel-hud.active {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-visor-shell {
|
||
inset: clamp(76px, 10vh, 104px) clamp(20px, 3vw, 48px) clamp(40px, 6vh, 64px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-visor-shell::before,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-visor-shell::after {
|
||
display: none;
|
||
}
|
||
|
||
/* Native instrument geometry is hidden in every other HUD theme. */
|
||
.cockpit-scan-array,
|
||
.cockpit-frame-lines {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-frame-lines {
|
||
display: block;
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
color: rgba(105, 203, 209, 0.38);
|
||
stroke-width: 0.8;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-frame-warning {
|
||
stroke: rgba(196, 84, 84, 0.65);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-frame-meter {
|
||
stroke: rgba(105, 203, 209, 0.9);
|
||
stroke-width: 4;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-scan-array {
|
||
display: block;
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 46%;
|
||
left: 50%;
|
||
/* Grow into the clear center lane without reaching the side panels/readouts. */
|
||
width: min(48vw, 60vh);
|
||
aspect-ratio: 1;
|
||
pointer-events: none;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(3, 13, 19, 0.42) 0 28%,
|
||
rgba(3, 13, 19, 0.14) 58%,
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-geometry {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: visible;
|
||
stroke: rgba(186, 212, 220, 0.45);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-hairline {
|
||
stroke: rgba(105, 203, 209, 0.4);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-side-arcs {
|
||
stroke: rgba(211, 225, 230, 0.58);
|
||
stroke-width: 16;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-ticks {
|
||
stroke: rgba(213, 233, 237, 0.75);
|
||
stroke-width: 6;
|
||
stroke-dasharray: 1 9;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-dots {
|
||
stroke: rgba(105, 203, 209, 0.8);
|
||
stroke-width: 3;
|
||
stroke-dasharray: 2 13;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-warning-dots {
|
||
stroke: rgba(196, 84, 84, 0.88);
|
||
stroke-width: 4;
|
||
stroke-dasharray: 2 14;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-core {
|
||
stroke: rgba(206, 222, 230, 0.5);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
/* Decorative motion only: the sight, attitude references and telemetry stay
|
||
fixed. Transform/opacity animations add no Cesium render loop or JS timer. */
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
:is(
|
||
.cockpit-target-rotor,
|
||
.cockpit-target-drift,
|
||
.cockpit-target-ticks,
|
||
.cockpit-target-orbit,
|
||
.cockpit-target-dots,
|
||
.cockpit-target-warning-dots
|
||
) {
|
||
transform-box: view-box;
|
||
transform-origin: 50% 50%;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-rotor {
|
||
transform: rotate(9deg);
|
||
animation: cockpit-instrument-rotate 24s linear infinite;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-drift {
|
||
animation: cockpit-instrument-drift 48s linear infinite;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-ticks {
|
||
animation: cockpit-instrument-trim 8s ease-in-out infinite alternate;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-side-arcs {
|
||
animation: cockpit-instrument-breathe 4.8s ease-in-out infinite alternate;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-orbit {
|
||
animation: cockpit-instrument-drift 36s linear infinite;
|
||
}
|
||
|
||
/* Small opposing sweeps preserve the open sides of the instrument. */
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-dots {
|
||
animation: cockpit-instrument-band 10s ease-in-out infinite alternate;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-warning-dots {
|
||
animation: cockpit-instrument-band 13s ease-in-out infinite alternate-reverse;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-target-spokes {
|
||
animation: cockpit-instrument-support 6s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes cockpit-instrument-band {
|
||
from {
|
||
transform: rotate(-5deg);
|
||
}
|
||
to {
|
||
transform: rotate(5deg);
|
||
}
|
||
}
|
||
|
||
@keyframes cockpit-instrument-support {
|
||
from {
|
||
opacity: 0.45;
|
||
}
|
||
to {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
@keyframes cockpit-instrument-rotate {
|
||
from {
|
||
transform: rotate(9deg);
|
||
}
|
||
to {
|
||
transform: rotate(369deg);
|
||
}
|
||
}
|
||
|
||
@keyframes cockpit-instrument-drift {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(-360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes cockpit-instrument-trim {
|
||
from {
|
||
transform: rotate(-3deg);
|
||
}
|
||
to {
|
||
transform: rotate(3deg);
|
||
}
|
||
}
|
||
|
||
@keyframes cockpit-instrument-breathe {
|
||
from {
|
||
opacity: 0.68;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
:is(
|
||
.cockpit-target-rotor,
|
||
.cockpit-target-drift,
|
||
.cockpit-target-ticks,
|
||
.cockpit-target-side-arcs,
|
||
.cockpit-target-orbit,
|
||
.cockpit-target-dots,
|
||
.cockpit-target-warning-dots,
|
||
.cockpit-target-spokes
|
||
) {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc {
|
||
top: 12px;
|
||
width: min(560px, 44vw);
|
||
height: 82px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc::before {
|
||
content: 'TARGET SCANNING // LIVE VECTOR';
|
||
position: absolute;
|
||
top: -30px;
|
||
left: 50%;
|
||
width: max-content;
|
||
padding: 0 12px 8px;
|
||
border: 0;
|
||
color: rgba(231, 241, 241, 0.84);
|
||
background: none;
|
||
font-size: 7px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.28em;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc::after {
|
||
inset: 20px 8% 0;
|
||
border-color: rgba(105, 203, 209, 0.52);
|
||
border-radius: 50% 50% 0 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc span {
|
||
color: rgba(205, 225, 226, 0.5);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc span::after {
|
||
background: rgba(105, 203, 209, 0.72);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc span.active {
|
||
color: #f1f6f6;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-topline {
|
||
top: 24px;
|
||
left: 30px;
|
||
right: 30px;
|
||
align-items: start;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-topline
|
||
> div:first-child,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-topline::after {
|
||
width: min(252px, 24vw);
|
||
box-sizing: border-box;
|
||
padding: 8px 12px 7px;
|
||
border-top: 1px solid rgba(105, 203, 209, 0.46);
|
||
border-bottom: 1px solid rgba(105, 203, 209, 0.16);
|
||
background: linear-gradient(90deg, rgba(10, 27, 31, 0.72), transparent);
|
||
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-topline::after {
|
||
content: 'SYS 06 // SENSOR FUSION // READY';
|
||
grid-column: 3;
|
||
justify-self: end;
|
||
color: rgba(205, 225, 226, 0.6);
|
||
background: linear-gradient(270deg, rgba(10, 27, 31, 0.72), transparent);
|
||
font-size: 7px;
|
||
letter-spacing: 0.16em;
|
||
text-align: right;
|
||
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
|
||
}
|
||
|
||
/* The universal loading/status feed normally sits at 74px with the map shell.
|
||
That puts it underneath this cockpit's target-scan rail (z145). Give it the
|
||
narrow protected slot below the vision selector and promote only this live
|
||
status surface above the visor. */
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #global-loading-status {
|
||
top: 60px;
|
||
z-index: 146;
|
||
max-width: min(430px, calc(100vw - 40px));
|
||
padding: 3px 10px;
|
||
border-color: rgba(105, 203, 209, 0.46);
|
||
border-radius: 1px;
|
||
background: rgba(5, 18, 22, 0.94);
|
||
color: rgba(220, 238, 239, 0.94);
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
|
||
clip-path: polygon(
|
||
6px 0,
|
||
calc(100% - 6px) 0,
|
||
100% 6px,
|
||
100% 100%,
|
||
0 100%,
|
||
0 6px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #global-loading-detail {
|
||
color: var(--cockpit-accent);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-kicker,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-readout-label {
|
||
color: var(--cockpit-accent);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #cockpit-callsign {
|
||
font-size: 16px;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-aircraft-meta {
|
||
color: rgba(205, 225, 226, 0.48);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-aircraft-meta.emergency {
|
||
color: var(--cyber-red-bright);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-vision-controls {
|
||
margin-top: 0;
|
||
border-color: rgba(105, 203, 209, 0.38);
|
||
border-radius: 1px;
|
||
background: rgba(6, 20, 24, 0.78);
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-vision-controls button {
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-vision-controls
|
||
.cockpit-vision-current {
|
||
border-color: rgba(196, 84, 84, 0.7);
|
||
background: rgba(196, 84, 84, 0.12);
|
||
box-shadow: inset 0 -2px 0 rgba(196, 84, 84, 0.82);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-reticle {
|
||
z-index: 6;
|
||
display: grid;
|
||
width: 18px;
|
||
height: 18px;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 0;
|
||
color: transparent;
|
||
background:
|
||
linear-gradient(rgba(231, 241, 241, 0.86), rgba(231, 241, 241, 0.86)) 50%
|
||
0 / 1px 11px no-repeat,
|
||
linear-gradient(rgba(231, 241, 241, 0.86), rgba(231, 241, 241, 0.86)) 50%
|
||
100% / 1px 11px no-repeat,
|
||
linear-gradient(90deg, rgba(231, 241, 241, 0.86), rgba(231, 241, 241, 0.86))
|
||
0 50% / 11px 1px no-repeat,
|
||
linear-gradient(90deg, rgba(231, 241, 241, 0.86), rgba(231, 241, 241, 0.86))
|
||
100% 50% / 11px 1px no-repeat;
|
||
font-size: 0;
|
||
opacity: 0.92;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-reticle::before,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-reticle::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-reticle::before {
|
||
width: 5px;
|
||
height: 5px;
|
||
border: 1px solid rgba(231, 241, 241, 0.86);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-reticle::after {
|
||
width: 3px;
|
||
height: 3px;
|
||
border-radius: 50%;
|
||
background: rgba(196, 84, 84, 0.96);
|
||
box-shadow: 0 0 8px rgba(196, 84, 84, 0.8);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-horizon-guide {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-route-direction {
|
||
top: 74%;
|
||
filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-route-direction
|
||
.cockpit-route-chevron {
|
||
width: 26px;
|
||
height: 26px;
|
||
filter: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-horizon-guide small {
|
||
padding: 3px 8px;
|
||
border: 1px solid rgba(196, 84, 84, 0.62);
|
||
color: #eef4f4;
|
||
background: rgba(8, 22, 26, 0.58);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
:is(.cockpit-altitude-rim, .cockpit-speed-rim) {
|
||
color: var(--cockpit-accent);
|
||
opacity: 0.72;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-altitude-rim-rail::before {
|
||
border: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-altitude-rim-scale
|
||
> span
|
||
b {
|
||
border-radius: 0;
|
||
background: rgba(4, 18, 22, 0.38);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-compass {
|
||
bottom: clamp(34px, 5vh, 52px);
|
||
width: min(650px, 56vw);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-readout {
|
||
min-width: 104px;
|
||
padding: 5px 10px 6px;
|
||
border-top-color: rgba(105, 203, 209, 0.48);
|
||
border-bottom-color: rgba(196, 84, 84, 0.34);
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(6, 22, 26, 0.56),
|
||
transparent
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-readout strong {
|
||
font-size: clamp(26px, 3vw, 40px);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-heading-value {
|
||
min-width: 66px;
|
||
color: #f0f5f5;
|
||
font-size: 29px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-compass-tape::before {
|
||
border-color: rgba(105, 203, 209, 0.54);
|
||
background: transparent;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-compass-tape
|
||
span::before {
|
||
background: rgba(105, 203, 209, 0.66);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
:is(.cockpit-context-window, .cockpit-signal-window) {
|
||
top: var(--cockpit-context-top, clamp(255px, 28vh, 300px));
|
||
bottom: auto;
|
||
max-height: min(44vh, 410px);
|
||
border-color: rgba(105, 203, 209, 0.34);
|
||
border-top-color: rgba(196, 84, 84, 0.82);
|
||
border-radius: 0;
|
||
background:
|
||
linear-gradient(135deg, rgba(105, 203, 209, 0.07), transparent 38%),
|
||
rgba(8, 23, 27, 0.78);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
|
||
0 12px 30px rgba(0, 0, 0, 0.24);
|
||
text-shadow: none;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-context-window {
|
||
left: 30px;
|
||
transform: none;
|
||
clip-path: polygon(
|
||
0 0,
|
||
calc(100% - 14px) 0,
|
||
100% 14px,
|
||
100% 100%,
|
||
14px 100%,
|
||
0 calc(100% - 14px)
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-signal-window {
|
||
top: var(--cockpit-signal-top, clamp(255px, 28vh, 300px));
|
||
max-height: min(44vh, 410px, var(--cockpit-signal-max-height, 410px));
|
||
right: 30px;
|
||
transform: none;
|
||
clip-path: polygon(
|
||
14px 0,
|
||
100% 0,
|
||
100% calc(100% - 14px),
|
||
calc(100% - 14px) 100%,
|
||
0 100%,
|
||
0 14px
|
||
);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-card-header {
|
||
border-bottom-color: rgba(105, 203, 209, 0.25);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
:is(.cockpit-card-kicker, .cockpit-route-kicker) {
|
||
color: var(--cockpit-caution);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-context-cohorts > div,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-signal-list li {
|
||
border-color: rgba(105, 203, 209, 0.16);
|
||
border-radius: 0;
|
||
background: rgba(7, 19, 23, 0.42);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-controls {
|
||
top: var(--cockpit-utility-top, clamp(164px, 19vh, 204px));
|
||
right: 30px;
|
||
width: var(--cyber-right-panel-width);
|
||
gap: var(--cyber-panel-gap);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
#cockpit-hud:has(.cockpit-utility-control.is-expanded)
|
||
.cockpit-signal-window[data-collapsed='true'] {
|
||
top: auto;
|
||
bottom: 80px;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
z-index: 12;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-launcher {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
width: var(--cyber-panel-width);
|
||
min-height: 60px;
|
||
padding: 14px 18px 20px 24px;
|
||
gap: 9px;
|
||
border-color: var(--glass-border);
|
||
border-radius: 0;
|
||
background-color: var(--cyber-panel-surface);
|
||
background-image: var(--cyber-panel-surface-detail);
|
||
box-shadow: var(--cyber-panel-shadow);
|
||
clip-path: var(--cyber-panel-frame);
|
||
color: var(--cyber-red-bright);
|
||
font-size: 8px;
|
||
font-weight: 600;
|
||
letter-spacing: 1.8px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control:not(.is-expanded)
|
||
.cockpit-utility-launcher {
|
||
width: var(--cyber-panel-collapsed-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-launcher::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(50% - 25px);
|
||
width: 50px;
|
||
height: 6px;
|
||
background: rgba(196, 84, 84, 0.22);
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-launcher::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 12px;
|
||
left: 16px;
|
||
border-bottom: 1px solid rgba(206, 222, 226, 0.08);
|
||
pointer-events: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-launcher
|
||
> span:first-child {
|
||
position: relative;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-launcher
|
||
> span:first-child::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -8px;
|
||
width: 3px;
|
||
height: 11px;
|
||
background: var(--cyber-red);
|
||
clip-path: polygon(0 0, 100% 2px, 100% calc(100% - 2px), 0 100%);
|
||
content: '';
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-divider {
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(196, 84, 84, 0.62),
|
||
rgba(206, 222, 226, 0.08)
|
||
);
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-glyph {
|
||
border-color: rgba(206, 222, 226, 0.22);
|
||
border-radius: 0;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
color: #f2f5f4;
|
||
font-size: 0;
|
||
}
|
||
|
||
/* Keep the existing button labels/expanded semantics; match Data Layers' glyph. */
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-glyph::after {
|
||
content: '+';
|
||
font-size: 13px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-glyph[aria-expanded='true']::after {
|
||
content: '−';
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded
|
||
.cockpit-utility-launcher {
|
||
width: 100%;
|
||
min-height: 42px;
|
||
padding: 6px 2px 8px 14px;
|
||
clip-path: none;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded
|
||
.cockpit-utility-launcher::before,
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded
|
||
.cockpit-utility-launcher::after {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded {
|
||
position: relative;
|
||
width: var(--cyber-right-panel-width);
|
||
padding: 8px;
|
||
border-color: rgba(105, 203, 209, 0.34);
|
||
border-radius: 0;
|
||
background-color: var(--cyber-panel-surface);
|
||
background-image: var(--cyber-panel-surface-detail);
|
||
box-shadow: var(--cyber-panel-shadow);
|
||
clip-path: var(--cyber-panel-frame);
|
||
}
|
||
|
||
/* Expanded utility panels are full panel surfaces, not floating popovers.
|
||
Reuse the same centered calibration tab as Data Layers so Display and Radio
|
||
read as equal members of the cockpit rail. */
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded::after {
|
||
position: absolute;
|
||
z-index: 4;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 36px;
|
||
height: 6px;
|
||
border-top: 1px solid rgba(225, 102, 102, 0.84);
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(196, 84, 84, 0.22) 18% 82%,
|
||
transparent
|
||
);
|
||
clip-path: polygon(0 0, 7px 100%, calc(100% - 7px) 100%, 100% 0);
|
||
content: '';
|
||
pointer-events: none;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded:has([data-cockpit-launcher='display']),
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded:has([data-cockpit-launcher='radio']) {
|
||
width: var(--cyber-right-panel-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded:has([data-cockpit-launcher='display']) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #cockpit-display-panel {
|
||
max-height: calc(var(--cockpit-utility-expanded-max-height, 72vh) - 62px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #left-panel-stack {
|
||
top: clamp(164px, 19vh, 204px) !important;
|
||
bottom: auto;
|
||
/* The cockpit keeps its physical sides in every language (rtl.css): the
|
||
utility controls hold the right edge. */
|
||
right: auto;
|
||
left: 30px;
|
||
width: var(--cyber-panel-width);
|
||
padding-inline-start: 0;
|
||
border-inline-start: 0;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel) {
|
||
--panel-expanded-width: var(--cyber-panel-width);
|
||
width: var(--cyber-panel-width);
|
||
max-height: min(64vh, 610px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel).collapsed {
|
||
width: var(--cyber-panel-collapsed-width);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-position-readout,
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-help {
|
||
bottom: 24px;
|
||
color: rgba(205, 225, 226, 0.54);
|
||
font-size: 8px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-position-readout {
|
||
right: 30px;
|
||
/* Clears the language picker row it shares the corner with, as in the
|
||
other themes (locale-picker.css). */
|
||
bottom: 3.5rem;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-help {
|
||
left: 30px;
|
||
}
|
||
|
||
@media (min-width: 761px) and (max-height: 820px) {
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc::before {
|
||
top: -18px;
|
||
}
|
||
}
|
||
|
||
/* Both expanded side panels occupy the same slot; footers clear the frame. */
|
||
@media (min-width: 761px) {
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
#left-panel-stack
|
||
> :is(#data-panel, #utilities-panel):not(.collapsed) {
|
||
flex: 0 0 var(--cyber-cockpit-panel-height, 40vh);
|
||
height: var(--cyber-cockpit-panel-height, 40vh);
|
||
max-height: var(--cyber-cockpit-panel-height, 40vh);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control.is-expanded {
|
||
height: var(--cyber-cockpit-panel-height, 40vh);
|
||
max-height: var(--cyber-cockpit-panel-height, 40vh);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
#cockpit-hud:has(.cockpit-utility-control.is-expanded)
|
||
.cockpit-signal-window[data-collapsed='true'] {
|
||
top: var(--cockpit-signal-top);
|
||
bottom: auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 960px), (max-height: 700px) {
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-topline::after {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-scan-array {
|
||
width: min(54vw, 58vh);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode #cockpit-hud::before {
|
||
inset: 10px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-topline {
|
||
top: 14px;
|
||
right: 14px;
|
||
left: 14px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-topline
|
||
> div:first-child {
|
||
width: min(210px, 50vw);
|
||
padding: 6px 8px;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc {
|
||
top: 44px;
|
||
width: 78vw;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-roll-arc::before {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-scan-array {
|
||
width: min(76vw, 52vh);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-compass {
|
||
width: 94vw;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] #pp-toggles > .pp-panel-body {
|
||
max-height: min(48vh, 440px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] .cyber-panel-body {
|
||
max-height: min(48vh, 440px);
|
||
}
|
||
|
||
:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-utility-controls {
|
||
top: 92px !important;
|
||
right: 12px;
|
||
bottom: auto;
|
||
}
|
||
|
||
:root[data-ui-theme='cyber']
|
||
body.cockpit-mode
|
||
.cockpit-utility-control:not(.is-expanded)
|
||
.cockpit-utility-launcher {
|
||
width: min(150px, calc((100vw - 32px) / 2));
|
||
min-height: 54px;
|
||
padding: 10px 12px 18px 18px;
|
||
}
|
||
}
|