frontend: use custom scrollbars only on linux and windows

Changed to use native scrollbars on macOS and iOS. Android does not use scrollbars (at lest from Android version 14). Only keep custom scrollbar CSS for Linux and Windows.
BitBoxSwiss · Nov 19, 2024 · cd25e9c · cd25e9c
1 parent df1ad7d
commit cd25e9c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/frontends/web/src/components/layout/main.module.css b/frontends/web/src/components/layout/main.module.css
@@ -1,4 +1,5 @@
 .main {
+    background-color: var(--background);
     display: flex;
     flex-direction: column;
     flex-grow: 1;

diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
@@ -37,15 +37,18 @@ h1, h2, h3, h4, h5 {
     line-height: 1.25;
 }
 
-::-webkit-scrollbar {
+.os-linux::-webkit-scrollbar,
+.os-windows::-webkit-scrollbar {
     background-color: transparent;
     width: 4px;
 }
-::-webkit-scrollbar-track {
+.os-linux::-webkit-scrollbar-track,
+.os-windows::-webkit-scrollbar-track {
     background-color: transparent;
 }
 
-::-webkit-scrollbar-thumb {
+.os-linux::-webkit-scrollbar-thumb,
+.os-windows::-webkit-scrollbar-thumb {
     background-color: var(--color-secondary);
 }