victor HF Staff commited on
Commit
1cfefdd
·
1 Parent(s): 180303b

safari: Add custom background for scrollbars in dark mode

Browse files

Introduces a transparent background for .scrollbar-custom scrollbars and sets a dark background in dark mode using ::-webkit-scrollbar selectors.

Files changed (1) hide show
  1. 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 */