Woodpecker pipeline #943 current status: created. ⏳

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Woodpecker pipeline #943 current status: created. ⏳

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Woodpecker pipeline #943 current status: created. ⏳

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Woodpecker pipeline #943 current status: created. ⏳

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Woodpecker pipeline #943 current status: created. ⏳

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Woodpecker pipeline #943 completed with status: success. ✅

• Details: https://woodpecker.radworks.garden/repos/6/pipeline/513

Could we do this:

• change the color so it doesn’t blend in with selected items in the drop-down
• simplify to just one set of CSS variables, we can use the transparent version everywhere, it just works
• prefix the css class with global so there’s a hint where it comes from

diff --git a/public/index.css b/public/index.css
index a7b9d88..f34d144 100644
--- a/public/index.css
+++ b/public/index.css
@@ -22,30 +22,6 @@ body {
   background-color: var(--color-background-default);
 }
 
-:root {
-  .os-theme-radicle {
-    --os-size: 16px;
-    --os-handle-border-radius: 4px;
-    --os-padding-perpendicular: 4px;
-    --os-padding-axis: 2px;
-    --os-track-bg: var(--color-background-default);
-    --os-handle-bg: var(--color-fill-ghost);
-    --os-handle-bg-hover: var(--color-fill-ghost);
-    --os-handle-bg-active: var(--color-fill-ghost);
-  }
-
-  .os-theme-radicle-bg-transparent {
-    --os-size: 16px;
-    --os-handle-border-radius: 4px;
-    --os-padding-perpendicular: 4px;
-    --os-padding-axis: 2px;
-    --os-track-bg: transparent;
-    --os-handle-bg: var(--color-fill-ghost);
-    --os-handle-bg-hover: var(--color-fill-ghost);
-    --os-handle-bg-active: var(--color-fill-ghost);
-  }
-}
-
 ::selection {
   background: var(--color-fill-yellow);
   color: var(--color-foreground-black);
@@ -110,6 +86,19 @@ body {
   text-underline-offset: 2px;
 }
 
+:root {
+  .global-os-theme-radicle {
+    --os-size: 16px;
+    --os-handle-border-radius: 4px;
+    --os-padding-perpendicular: 4px;
+    --os-padding-axis: 2px;
+    --os-handle-bg: var(--color-border-default);
+    --os-handle-bg-hover: var(--color-border-default);
+    --os-handle-bg-active: var(--color-border-default);
+    --os-track-bg: transparent;
+  }
+}
+
 :root {
   --elevation-low: 0 0 48px 0 #000000ee;
 }
diff --git a/src/components/DropdownList.svelte b/src/components/DropdownList.svelte
index 0d63137..43535e4 100644
--- a/src/components/DropdownList.svelte
+++ b/src/components/DropdownList.svelte
@@ -19,7 +19,7 @@
       const [initialize] = useOverlayScrollbars({
         options: () => ({
           scrollbars: {
-            theme: "os-theme-radicle-bg-transparent",
+            theme: "global-os-theme-radicle",
             autoHide: "scroll",
           },
         }),
diff --git a/src/components/InboxButton.svelte b/src/components/InboxButton.svelte
index 6656e4b..787e3b9 100644
--- a/src/components/InboxButton.svelte
+++ b/src/components/InboxButton.svelte
@@ -35,7 +35,7 @@
     if (borderComponent) {
       const [initialize] = useOverlayScrollbars({
         options: () => ({
-          scrollbars: { theme: "os-theme-radicle", autoHide: "scroll" },
+          scrollbars: { theme: "global-os-theme-radicle", autoHide: "scroll" },
         }),
         defer: true,
       });
diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
index 743893d..07eacad 100644
--- a/src/views/repo/Layout.svelte
+++ b/src/views/repo/Layout.svelte
@@ -131,7 +131,7 @@
     options={{
       overflow: { x: "visible" },
       scrollbars: {
-        theme: "os-theme-radicle",
+        theme: "global-os-theme-radicle",
         autoHide: "scroll",
       },
     }}
@@ -158,7 +158,7 @@
     style="grid-column: 3/4; width: 100%;"
     options={{
       scrollbars: {
-        theme: "os-theme-radicle",
+        theme: "global-os-theme-radicle",
         autoHide: "scroll",
       },
     }}

Apply feedback from rudolfs