Scrollbar styling

Make scrollbars - if present - fit better
into the UI.

Signed-off-by: Thomas von Deyen <[email protected]>

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -153,6 +153,9 @@
   --picture-tool-background-color: var(--a-darker-grey);
   --picture-tool-hover-background-color: var(--a-darkest-grey);
 
+  --scrollbar-thumb-color: var(--a-dark-grey);
+  --scrollbar-track-color: var(--a-darkest-grey);
+
   --search-field-background-color: var(--a-dark-grey);
 
   /* Selects */
@@ -422,6 +425,9 @@
   --picture-tool-background-color: var(--color-white);
   --picture-tool-hover-background-color: var(--color-grey_very_light);
 
+  --scrollbar-thumb-color: var(--color-white);
+  --scrollbar-track-color: var(--color-grey_light);
+
   --search-field-background-color: var(--color-grey_very_light);
 
   /* Selects */

app/assets/builds/alchemy/dark-theme.css

@@ -4,6 +4,8 @@ html {
   box-sizing: border-box;
   height: 100%;
   font-size: var(--font-size_medium);
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
 
   &.turbo-progress-bar::before,
   .turbo-progress-bar {
@@ -19,6 +21,7 @@ html {
 *,
 *::before,
 *::after {
+  scrollbar-width: inherit;
   box-sizing: inherit;
 }