From d2647f35ba055c8aa81a59d8aef7ae070b143e10 Mon Sep 17 00:00:00 2001
From: Said Turksever <28983926+asturksever@users.noreply.github.com>
Date: Thu, 29 Oct 2026 10:40:14 +0000
Subject: [PATCH] Give the side panels one title style, hover and toggle inset

Every rail panel title uses the command dock's label type and colour,
collapsed or open, instead of three sizes at 30% opacity. Panels answer
hover as the dock trays do, with a blue edge, a soft glow and an accent
title. In the default theme each panel's title and collapse button sit
19px from its edge; Context's toggle no longer shrinks beside the radio
button. The cyber theme keeps its own colours and insets.
---
 src/ui/styles/controls.css       | 105 +++++++++++++++++++++++++++----
 src/ui/styles/layers.css         |   8 ++-
 src/ui/styles/recent-imagery.css |   4 --
 src/ui/styles/scenes.css         |   8 ---
 src/ui/styles/weather.css        |   4 --
 5 files changed, 99 insertions(+), 30 deletions(-)

diff --git a/src/ui/styles/controls.css b/src/ui/styles/controls.css
index 59f275109..58f756039 100644
--- a/src/ui/styles/controls.css
+++ b/src/ui/styles/controls.css
@@ -81,6 +81,23 @@
   white-space: nowrap;
 }
 
+/* Side panel titles read like the command dock's labels: one type for every
+   panel, collapsed or open, and bright enough to read over the globe. */
+:is(#left-panel-stack, #right-context-rail)
+  :is(.panel-header > .panel-title, .pp-header-label) {
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  font-weight: 500;
+  letter-spacing: 0.13rem;
+  text-transform: uppercase;
+}
+
+:root:not([data-ui-theme='cyber'])
+  :is(#left-panel-stack, #right-context-rail)
+  :is(.panel-header > .panel-title, .pp-header-label, .panel-collapse-btn) {
+  color: rgba(206, 232, 239, 0.72);
+}
+
 /* A longer translated title in a collapsed rail launcher tightens its
    tracking rather than pushing the disclosure button out of the card. */
 html:not([lang='en'])
@@ -109,6 +126,8 @@ html:not([lang='en'])
   font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1;
+  /* A long title or a header action must not squeeze the toggle. */
+  flex-shrink: 0;
   cursor: pointer;
   transition:
     background-color var(--transition-fast),
@@ -116,17 +135,72 @@ html:not([lang='en'])
     color var(--transition-fast);
 }
 
-/* A long translated title must not squeeze the toggle into a sliver. */
-html:not([lang='en']) .panel-collapse-btn {
-  flex-shrink: 0;
-}
-
 .panel-collapse-btn:hover {
   border-color: var(--glass-border-hover);
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.07);
 }
 
+/* A side panel answers the pointer as the command dock does: a blue edge,
+   a soft glow and an accent title. */
+:root:not([data-ui-theme='cyber'])
+  :is(#left-panel-stack, #right-context-rail)
+  :is(
+    .data-panel-inner,
+    .scene-panel-inner,
+    .cctv-panel-inner,
+    .radio-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .street-level-panel-inner,
+    .global-context-panel-inner,
+    #pp-toggles:not(.collapsed),
+    #pp-toggles.collapsed > .pp-header-row
+  ) {
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+:root:not([data-ui-theme='cyber'])
+  :is(#left-panel-stack, #right-context-rail)
+  :is(
+    .data-panel-inner,
+    .scene-panel-inner,
+    .cctv-panel-inner,
+    .radio-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .street-level-panel-inner,
+    .global-context-panel-inner,
+    #pp-toggles:not(.collapsed),
+    #pp-toggles.collapsed > .pp-header-row
+  ):hover {
+  border-color: rgba(0, 212, 255, 0.55);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(0, 212, 255, 0.08) inset,
+    0 0 1rem rgba(0, 212, 255, 0.12);
+}
+
+:root:not([data-ui-theme='cyber'])
+  :is(#left-panel-stack, #right-context-rail)
+  :is(
+    .data-panel-inner,
+    .scene-panel-inner,
+    .cctv-panel-inner,
+    .radio-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .street-level-panel-inner,
+    .global-context-panel-inner,
+    #pp-toggles:not(.collapsed),
+    #pp-toggles.collapsed > .pp-header-row
+  ):hover
+  :is(.panel-title, .pp-header-label, .panel-collapse-btn) {
+  color: var(--accent);
+}
+
 /* ── Button Grid ──────────────────────────────── */
 .button-grid {
   display: flex;
@@ -431,17 +505,26 @@ html:not([lang='en']) .panel-collapse-btn {
 }
 
 #pp-toggles .pp-header-label {
-  font-family: var(--font-mono);
-  font-size: 8px;
-  letter-spacing: 1.4px;
   color: var(--text-dim);
 }
 
+/* Display's title and toggle sit where the other panels' do: 14px of panel
+   padding plus a 4px header inset. The cyber theme sets its own insets. */
+:root:not([data-ui-theme='cyber']) #pp-toggles.collapsed > .pp-header-row {
+  padding: 8px 18px;
+}
+
+:root:not([data-ui-theme='cyber'])
+  #pp-toggles:not(.collapsed)
+  > .pp-header-row {
+  padding: 0 10px;
+}
+
 #pp-toggles > .pp-header-row .pp-collapse-btn {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: 13px;
   padding: 0;
 }
 
diff --git a/src/ui/styles/layers.css b/src/ui/styles/layers.css
index ea64eefc5..0c17d372f 100644
--- a/src/ui/styles/layers.css
+++ b/src/ui/styles/layers.css
@@ -58,7 +58,7 @@
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--panel-radius);
-  padding: 14px 16px 12px;
+  padding: 14px 14px 12px;
   backdrop-filter: blur(24px) saturate(1.4);
   -webkit-backdrop-filter: blur(24px) saturate(1.4);
   box-shadow:
@@ -249,10 +249,12 @@
   box-sizing: border-box;
   justify-content: center;
   overflow: visible;
-  padding: 8px 10px 8px 14px;
+  padding: 8px 14px;
 }
 #right-context-rail #global-context-panel.collapsed .panel-header {
   margin: 0;
+  /* Room for the radio button between the title and the toggle. */
+  gap: 8px;
 }
 #right-context-rail.layout-focus {
   height: var(--right-stack-max-height);
@@ -1002,7 +1004,7 @@
   display: flex;
   min-height: 0;
   flex-direction: column;
-  padding: 14px 16px 12px;
+  padding: 14px 14px 12px;
   border: 1px solid var(--glass-border);
   border-radius: var(--panel-radius);
   background: var(--glass-bg);
diff --git a/src/ui/styles/recent-imagery.css b/src/ui/styles/recent-imagery.css
index e13e17b95..70ee7a9c2 100644
--- a/src/ui/styles/recent-imagery.css
+++ b/src/ui/styles/recent-imagery.css
@@ -56,10 +56,6 @@
 #recent-imagery-split-line[hidden] {
   display: none !important;
 }
-#recent-imagery-panel.collapsed .panel-title {
-  font-size: 8px;
-  letter-spacing: 1.8px;
-}
 #recent-imagery-panel.collapsed .panel-header {
   margin-bottom: 2px;
 }
diff --git a/src/ui/styles/scenes.css b/src/ui/styles/scenes.css
index 29250a636..da17a9c80 100644
--- a/src/ui/styles/scenes.css
+++ b/src/ui/styles/scenes.css
@@ -378,14 +378,6 @@ html:not([lang='en']) #scene-panel .scene-controls .scene-btn {
   width: 100%;
 }
 
-#data-panel.collapsed .panel-title,
-#cctv-panel.collapsed .panel-title,
-#radio-panel.collapsed .panel-title,
-#scene-panel.collapsed .panel-title {
-  font-size: 8px;
-  letter-spacing: 1.8px;
-}
-
 #control-panel.collapsed .panel-inner,
 #data-panel.collapsed .data-panel-inner,
 #cctv-panel.collapsed .cctv-panel-inner,
diff --git a/src/ui/styles/weather.css b/src/ui/styles/weather.css
index f7cd999d3..b2c052e0e 100644
--- a/src/ui/styles/weather.css
+++ b/src/ui/styles/weather.css
@@ -50,10 +50,6 @@
 .weather-readout[hidden] {
   display: none !important;
 }
-#weather-panel.collapsed .panel-title {
-  font-size: 8px;
-  letter-spacing: 1.8px;
-}
 #weather-panel.collapsed .panel-header {
   margin-bottom: 2px;
 }