diff --git a/scripts/format-scope.json b/scripts/format-scope.json index 49f71deb8..8026811ea 100644 --- a/scripts/format-scope.json +++ b/scripts/format-scope.json @@ -1461,5 +1461,6 @@ "src/data/placementProvider.test.mjs", "src/layers/vessels/placement.test.mjs", "src/ui/styles/visual-panel.css", - "src/ui/styles/scope-off-shadows.css" + "src/ui/styles/scope-off-shadows.css", + "src/ui/styles/cockpit-panels.css" ] diff --git a/src/ui/styles/cockpit-panels.css b/src/ui/styles/cockpit-panels.css index 04e13144f..dbf89e96e 100644 --- a/src/ui/styles/cockpit-panels.css +++ b/src/ui/styles/cockpit-panels.css @@ -29,7 +29,9 @@ /* Contact's header: the buttons share the kicker's row, so the subject runs the full width on at most two lines instead of wrapping beside them. */ -.cockpit-context-window:not([data-collapsed='true']) .cockpit-context-header > div { +.cockpit-context-window:not([data-collapsed='true']) + .cockpit-context-header + > div { display: contents; } @@ -139,11 +141,24 @@ body.cockpit-mode #left-panel-stack > .gev-panel-rail--left { display: block; } -body.cockpit-mode #left-panel-stack > .gev-panel-rail--left :is([data-rail-item='scene-panel'], [data-rail-item='utilities-panel'], [data-rail-item='pp-toggles']), body.cockpit-mode #left-panel-stack > .gev-panel-rail--left - .ui-tooltip:has(> :is([data-rail-item='scene-panel'], [data-rail-item='utilities-panel'], [data-rail-item='pp-toggles'])) { + :is( + [data-rail-item='scene-panel'], + [data-rail-item='utilities-panel'], + [data-rail-item='pp-toggles'] + ), +body.cockpit-mode + #left-panel-stack + > .gev-panel-rail--left + .ui-tooltip:has( + > :is( + [data-rail-item='scene-panel'], + [data-rail-item='utilities-panel'], + [data-rail-item='pp-toggles'] + ) + ) { display: none; } @@ -164,12 +179,24 @@ body.cockpit-mode body.cockpit-mode #left-panel-stack > .gev-panel-rail--left - .ui-rail:has(:is([data-rail-item='scene-panel'], [data-rail-item='utilities-panel'], [data-rail-item='pp-toggles'])[aria-pressed='true']) + .ui-rail:has( + :is( + [data-rail-item='scene-panel'], + [data-rail-item='utilities-panel'], + [data-rail-item='pp-toggles'] + )[aria-pressed='true'] + ) > .ui-tooltip::before, body.cockpit-mode #left-panel-stack > .gev-panel-rail--left - .ui-rail:has(:is([data-rail-item='scene-panel'], [data-rail-item='utilities-panel'], [data-rail-item='pp-toggles'])[aria-pressed='true'])::before { + .ui-rail:has( + :is( + [data-rail-item='scene-panel'], + [data-rail-item='utilities-panel'], + [data-rail-item='pp-toggles'] + )[aria-pressed='true'] + )::before { /* Nor may the sliding highlight stay where the hidden icon was. */ display: none; } @@ -177,7 +204,13 @@ body.cockpit-mode body.cockpit-mode #left-panel-stack > .gev-panel-rail--left - .ui-rail:has(:is([data-rail-item='scene-panel'], [data-rail-item='utilities-panel'], [data-rail-item='pp-toggles'])[aria-pressed='true']) { + .ui-rail:has( + :is( + [data-rail-item='scene-panel'], + [data-rail-item='utilities-panel'], + [data-rail-item='pp-toggles'] + )[aria-pressed='true'] + ) { background: rgba(16, 20, 28, 0.82) !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important; @@ -186,7 +219,13 @@ body.cockpit-mode } body.cockpit-mode #left-panel-stack > [data-panel-id].collapsed, -body.cockpit-mode #left-panel-stack > :is([data-panel-id='scene-panel'], [data-panel-id='utilities-panel'], [data-panel-id='pp-toggles']) { +body.cockpit-mode + #left-panel-stack + > :is( + [data-panel-id='scene-panel'], + [data-panel-id='utilities-panel'], + [data-panel-id='pp-toggles'] + ) { display: none; } @@ -196,7 +235,9 @@ body.cockpit-mode .cockpit-utility-controls { gap: 0; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher { display: flex; justify-content: flex-end; align-items: stretch; @@ -212,8 +253,13 @@ body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-la -webkit-backdrop-filter: none; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher > span:first-child, -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher + > span:first-child, +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph { display: flex; align-items: center; box-sizing: border-box; @@ -225,7 +271,10 @@ body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-gl -webkit-backdrop-filter: blur(24px) saturate(1.4); } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher > span:first-child { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher + > span:first-child { width: 120px; padding: 0 14px; color: rgba(224, 236, 242, 0.72); @@ -233,11 +282,15 @@ body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-la letter-spacing: 0.16em; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-divider { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-divider { display: none; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph { justify-content: center; width: 42px; padding: 0; @@ -269,33 +322,48 @@ body.cockpit-mode #cockpit-radio-toggle-btn::before { content: 'radio'; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph:hover { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph:hover { color: #fff; background: rgba(0, 212, 255, 0.12); } /* Round the ends of each strip and draw its top / bottom edge. */ -body.cockpit-mode .cockpit-utility-control:first-child:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control:first-child:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { padding-top: 4px; border-top-width: 1px; border-radius: 12px 12px 0 0; } -body.cockpit-mode .cockpit-utility-control:last-child:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control:last-child:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { padding-bottom: 4px; border-bottom-width: 1px; border-radius: 0 0 12px 12px; } /* A strip left alone beside an open panel is rounded all round. */ -body.cockpit-mode .cockpit-utility-control.is-expanded + .cockpit-utility-control:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph), -body.cockpit-mode .cockpit-utility-control:not(.is-expanded):has(+ .cockpit-utility-control.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control.is-expanded + + .cockpit-utility-control:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph), +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded):has( + + .cockpit-utility-control.is-expanded + ) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { padding-block: 4px; border-block-width: 1px; border-radius: 12px; } -body.cockpit-mode .cockpit-utility-control.is-expanded + .cockpit-utility-control:not(.is-expanded) { +body.cockpit-mode + .cockpit-utility-control.is-expanded + + .cockpit-utility-control:not(.is-expanded) { margin-top: 7px; } @@ -313,7 +381,9 @@ body.cockpit-mode #cesium-credits { white-space: nowrap; } -body.cockpit-mode #cesium-credits :is(.cesium-widget-credits, .cesium-credit-textContainer) { +body.cockpit-mode + #cesium-credits + :is(.cesium-widget-credits, .cesium-credit-textContainer) { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; @@ -411,7 +481,9 @@ body.cockpit-mode #intel-hud .hud-bottom-right { color: rgba(224, 236, 242, 0.5) !important; } -.cockpit-signal-list li.actionable:is(:hover, :focus-within) .cockpit-signal-target-chevron { +.cockpit-signal-list + li.actionable:is(:hover, :focus-within) + .cockpit-signal-target-chevron { color: #fff !important; } @@ -493,8 +565,13 @@ body.cockpit-mode #intel-hud .hud-bottom-right { /* The Display / Radio strips carry the left rail's exact frame: border, glass, corners and drop shadow. */ -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher > span:first-child, -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher + > span:first-child, +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph { border-color: rgba(255, 255, 255, 0.14); background: rgba(16, 20, 28, 0.82); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); @@ -502,19 +579,30 @@ body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-gl -webkit-backdrop-filter: blur(20px); } -body.cockpit-mode .cockpit-utility-control:first-child:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control:first-child:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { border-radius: 14px 14px 0 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); } -body.cockpit-mode .cockpit-utility-control:last-child:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control:last-child:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { border-radius: 0 0 14px 14px; } -body.cockpit-mode .cockpit-utility-control.is-expanded + .cockpit-utility-control:not(.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph), -body.cockpit-mode .cockpit-utility-control:not(.is-expanded):has(+ .cockpit-utility-control.is-expanded) :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { +body.cockpit-mode + .cockpit-utility-control.is-expanded + + .cockpit-utility-control:not(.is-expanded) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph), +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded):has( + + .cockpit-utility-control.is-expanded + ) + :is(.cockpit-utility-launcher > span:first-child, .cockpit-utility-glyph) { border-radius: 14px; } @@ -524,7 +612,9 @@ body.cockpit-mode .cockpit-utility-control.is-expanded { box-sizing: border-box; } -body.cockpit-mode .cockpit-utility-control.is-expanded .cockpit-utility-launcher { +body.cockpit-mode + .cockpit-utility-control.is-expanded + .cockpit-utility-launcher { display: flex; align-items: center; gap: 8px; @@ -534,7 +624,9 @@ body.cockpit-mode .cockpit-utility-control.is-expanded .cockpit-utility-launcher letter-spacing: 0.22em; } -body.cockpit-mode .cockpit-utility-control.is-expanded .cockpit-utility-divider { +body.cockpit-mode + .cockpit-utility-control.is-expanded + .cockpit-utility-divider { flex: 0 1 22px; height: 1px; margin-right: auto; @@ -574,22 +666,34 @@ body.cockpit-mode .cockpit-utility-collapse:focus-visible { /* Same measurements as the left rail: a 170px label strip, 4px gap, 42px icon strip, 38px rows. */ -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher { gap: 4px; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher > span:first-child { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher + > span:first-child { width: 170px; } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher > span:first-child, -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher + > span:first-child, +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph { height: 38px; } /* Hover as on the left rail: a 32px rounded square lights behind the icon and the icon and its label brighten; the strip itself stays put. */ -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph::before { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph::before { display: grid; place-items: center; width: 32px; @@ -602,16 +706,23 @@ body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-gl background var(--transition-fast, 120ms); } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph:hover { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph:hover { background: rgba(16, 20, 28, 0.82); color: var(--text-primary, #fff); } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph:hover::before { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-glyph:hover::before { background: rgba(255, 255, 255, 0.05); } -body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-launcher:has(.cockpit-utility-glyph:hover) > span:first-child { +body.cockpit-mode + .cockpit-utility-control:not(.is-expanded) + .cockpit-utility-launcher:has(.cockpit-utility-glyph:hover) + > span:first-child { color: var(--text-primary, #fff); } @@ -649,7 +760,8 @@ body.cockpit-mode .cockpit-utility-rail { pointer-events: auto; } -body.cockpit-mode :is(.cockpit-utility-rail__labels, .cockpit-utility-rail__icons) { +body.cockpit-mode + :is(.cockpit-utility-rail__labels, .cockpit-utility-rail__icons) { display: flex; flex-direction: column; gap: 12px; @@ -675,7 +787,11 @@ body.cockpit-mode .cockpit-utility-rail__labels > span { align-items: center; height: 32px; color: rgba(225, 236, 242, 0.82); - font: 500 9.28px/1 Inter, -apple-system, system-ui, sans-serif; + font: + 500 9.28px/1 Inter, + -apple-system, + system-ui, + sans-serif; letter-spacing: 2.08px; } @@ -729,7 +845,9 @@ body.cockpit-mode .cockpit-utility-rail.is-open .cockpit-utility-rail__item { position: relative; } -body.cockpit-mode .cockpit-utility-rail.is-open .cockpit-utility-rail__item::before { +body.cockpit-mode + .cockpit-utility-rail.is-open + .cockpit-utility-rail__item::before { position: absolute; inset: -5px; z-index: -1; @@ -743,35 +861,50 @@ body.cockpit-mode .cockpit-utility-rail.is-open .cockpit-utility-rail__item::bef pointer-events: none; } -body.cockpit-mode.panels-edge-right .cockpit-utility-rail.is-open .cockpit-utility-rail__icons { +body.cockpit-mode.panels-edge-right + .cockpit-utility-rail.is-open + .cockpit-utility-rail__icons { gap: 12px; } /* Hovering an icon lights its label too, as on the left. */ -body.cockpit-mode .cockpit-utility-rail:has(.cockpit-utility-rail__item:nth-child(1):hover) .cockpit-utility-rail__labels > span:nth-child(1), -body.cockpit-mode .cockpit-utility-rail:has(.cockpit-utility-rail__item:nth-child(2):hover) .cockpit-utility-rail__labels > span:nth-child(2) { +body.cockpit-mode + .cockpit-utility-rail:has(.cockpit-utility-rail__item:nth-child(1):hover) + .cockpit-utility-rail__labels + > span:nth-child(1), +body.cockpit-mode + .cockpit-utility-rail:has(.cockpit-utility-rail__item:nth-child(2):hover) + .cockpit-utility-rail__labels + > span:nth-child(2) { color: var(--text-primary, #fff); } /* Docked (align-to-edge) with a panel open: as on the main page, the panel takes the edge and the rail's icons sit in a row above it. */ -body.cockpit-mode.panels-edge-right .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) { +body.cockpit-mode.panels-edge-right + .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) { grid-template-columns: auto; justify-items: end; row-gap: 8px; } -body.cockpit-mode.panels-edge-right .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) .cockpit-utility-rail { +body.cockpit-mode.panels-edge-right + .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) + .cockpit-utility-rail { grid-column: 1; grid-row: 1; } -body.cockpit-mode.panels-edge-right .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) .cockpit-utility-control.is-expanded { +body.cockpit-mode.panels-edge-right + .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) + .cockpit-utility-control.is-expanded { grid-column: 1; grid-row: 2; } -body.cockpit-mode.panels-edge-right .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) .cockpit-utility-rail__icons { +body.cockpit-mode.panels-edge-right + .cockpit-utility-controls:has(.cockpit-utility-control.is-expanded) + .cockpit-utility-rail__icons { flex-direction: row; } diff --git a/style.css b/style.css index 2d79212fb..6f623d8ea 100644 --- a/style.css +++ b/style.css @@ -50,6 +50,7 @@ @import './src/ui/styles/left-tools.css'; @import './src/ui/styles/panel-edge.css'; @import './src/ui/styles/visual-panel.css'; +@import './src/ui/styles/cockpit-panels.css'; @import './src/ui/styles/ai-chat.css'; @import './src/ui/styles/scope-off-shadows.css'; @import './src/ui/styles/cyber.css';