safari: Add custom background for scrollbars in dark mode
Browse filesIntroduces a transparent background for .scrollbar-custom scrollbars and sets a dark background in dark mode using ::-webkit-scrollbar selectors.
- src/styles/main.css +10 -0
src/styles/main.css
CHANGED
|
@@ -32,6 +32,16 @@
|
|
| 32 |
@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-black/10 scrollbar-thumb-rounded-full scrollbar-w-1 hover:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20;
|
| 33 |
}
|
| 34 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
/* Rounded top/bottom caps for vertical scrollbars (Chrome/Edge/Safari) */
|
| 36 |
.scrollbar-custom::-webkit-scrollbar-track {
|
| 37 |
@apply rounded-full bg-clip-padding; /* clip bg to padding so caps look round */
|
|
|
|
| 32 |
@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-black/10 scrollbar-thumb-rounded-full scrollbar-w-1 hover:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20;
|
| 33 |
}
|
| 34 |
|
| 35 |
+
.scrollbar-custom::-webkit-scrollbar {
|
| 36 |
+
background-color: transparent;
|
| 37 |
+
width: 8px;
|
| 38 |
+
height: 8px;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.dark .scrollbar-custom::-webkit-scrollbar {
|
| 42 |
+
background-color: rgba(17, 17, 17, 0.85);
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
/* Rounded top/bottom caps for vertical scrollbars (Chrome/Edge/Safari) */
|
| 46 |
.scrollbar-custom::-webkit-scrollbar-track {
|
| 47 |
@apply rounded-full bg-clip-padding; /* clip bg to padding so caps look round */
|