Load the cockpit panel styles with the shell, formatted

Co-authored-by: Manjunath Paparaju <[email protected]>

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"
 ]

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
-body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph {
+  .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
-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) {
+  .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
-body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph {
+  .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
-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) {
+  .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
-body.cockpit-mode .cockpit-utility-control:not(.is-expanded) .cockpit-utility-glyph {
+  .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
-body.cockpit-mode .cockpit-utility-rail:has(.cockpit-utility-rail__item:nth-child(2):hover) .cockpit-utility-rail__labels > span:nth-child(2) {
+  .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;
 }
 

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';