FIREFLY-1485: Homogenise different scrollbars colors

Caltech-IPAC · Jun 21, 2024 · 7568d48 · 7568d48
1 parent 806afd1
commit 7568d48
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/firefly/html/css/global.css b/src/firefly/html/css/global.css
@@ -494,19 +494,25 @@ div.rootStyle img {
 
 /*------------------- generic-browser scrollbars ---------------------*/
 /* from https://developer.chrome.com/docs/css-ui/scrollbar-styling */
+:root {
+    --scrollbar-color-thumb: var(--joy-palette-neutral-softActiveBg);
+    --scrollbar-color-track: var(--joy-palette-background-surface);
+    --scrollbar-color-thumb-active: var(--joy-palette-neutral-softDisabledColor); /* one shade darker than softActiveBg */
+}
+
 /* Modern browsers with `scrollbar-*` support */
 @supports (scrollbar-width: auto) {
-    #app {
-        scrollbar-color: var(--joy-palette-neutral-solidBg) var(--joy-palette-background-level1); /*thumb-color track-color*/
+    body {
+        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
     }
 }
 
 /* Legacy browsers with `::-webkit-scrollbar-*` support */
 @supports selector(::-webkit-scrollbar) {
-    #app::-webkit-scrollbar-thumb {
-        background: var(--joy-palette-neutral-solidBg);
+    body::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-color-thumb);
     }
-    #app::-webkit-scrollbar-track {
-        background: var(--joy-palette-background-level1);
+    body::-webkit-scrollbar-track {
+        background: var(--scrollbar-color-track);
     }
 }
diff --git a/src/firefly/js/tables/ui/TablePanel.css b/src/firefly/js/tables/ui/TablePanel.css
@@ -165,24 +165,24 @@ Overriding default fixed-table css
 
 .public_Scrollbar_main.public_Scrollbar_mainActive,
 .public_Scrollbar_main {
-    background-color: var(--joy-palette-background-surface);
+    background-color: var(--scrollbar-color-track);
     border-color: var(--joy-palette-neutral-outlinedBorder);
 }
 
 .public_Scrollbar_mainOpaque,
 .public_Scrollbar_mainOpaque.public_Scrollbar_mainActive,
 .public_Scrollbar_mainOpaque:hover {
-    background-color: var(--joy-palette-background-surface);
+    background-color: var(--scrollbar-color-track);
 }
 
 .public_Scrollbar_face:after {
-    background-color: var(--joy-palette-neutral-softActiveBg);
+    background-color: var(--scrollbar-color-thumb);
 }
 
 .public_Scrollbar_main:hover .public_Scrollbar_face:after,
 .public_Scrollbar_mainActive .public_Scrollbar_face:after,
 .public_Scrollbar_faceActive:after {
-    background-color: var(--joy-palette-neutral-solidBg);
+    background-color: var(--scrollbar-color-thumb-active);
 }
 
 .public_fixedDataTableRow_columnsShadow {