Merge pull request #152 from vichydra/fix-scrollbar

feat: fix preview scrollbars
ubiquity · Nov 3, 2024 · 6dc2dab · 6dc2dab
2 parents 2334b9f + f4cba62
commit 6dc2dab
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -562,7 +562,6 @@
   }
   .preview-body-inner {
     padding: 16px;
-    overflow: scroll;
   }
   .preview-body-inner > :last-child {
     margin-bottom: 0;
@@ -627,11 +626,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .preview-body {
-    overflow: scroll;
-    max-height: calc(100vh - 156px);
-    display: block;
-  }
   .preview button.close-preview {
     right: 0;
     top: 0;
@@ -912,6 +906,7 @@
 
   .preview-body {
     overflow-y: auto;
+    overflow-x: hidden;
     /* Update height calculation to use dvh */
     max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px));
     display: block;
@@ -922,4 +917,12 @@
     /* Prevent content from going under bottom bar */
     /* padding-bottom: 48px; */
   }
+
+  .preview-body::-webkit-scrollbar {
+    width: 2px;
+  }
+
+  .preview-body::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+  }
 }
diff --git a/static/style/special.css b/static/style/special.css
@@ -35,6 +35,17 @@
   #issues-container::after {
     filter: blur(0px) drop-shadow(0 0 8px #fff);
   }
+  .preview-body::-webkit-scrollbar-track {
+    background: var(--dark-background); /* Background */
+  }
+
+  .preview-body::-webkit-scrollbar-thumb {
+    background-color: var(--light-background-half); /* Scrollbar thumb */
+  }
+
+  .preview-body::-webkit-scrollbar-thumb:hover {
+    background-color: var(--light-background);
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -70,6 +81,17 @@
     animation: none;
     background-image: none;
   }
+  .preview-body::-webkit-scrollbar-track {
+    background: var(--light-background); /* Background */
+  }
+
+  .preview-body::-webkit-scrollbar-thumb {
+    background-color: var(--dark-background-half); /* Scrollbar thumb */
+  }
+
+  .preview-body::-webkit-scrollbar-thumb:hover {
+    background-color: var(--dark-background);
+  }
 }
 
 @keyframes highlight-dark-mode {

diff --git a/static/style/style.css b/static/style/style.css
@@ -562,7 +562,6 @@
   }
   .preview-body-inner {
     padding: 16px;
-    overflow: scroll;
   }
   .preview-body-inner > :last-child {
     margin-bottom: 0;
@@ -627,11 +626,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .preview-body {
-    overflow: scroll;
-    max-height: calc(100vh - 156px);
-    display: block;
-  }
   .preview button.close-preview {
     right: 0;
     top: 0;
@@ -912,6 +906,7 @@
 
   .preview-body {
     overflow-y: auto;
+    overflow-x: hidden;
     /* Update height calculation to use dvh */
     max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px));
     display: block;
@@ -922,4 +917,12 @@
     /* Prevent content from going under bottom bar */
     /* padding-bottom: 48px; */
   }
+
+  .preview-body::-webkit-scrollbar {
+    width: 2px;
+  }
+
+  .preview-body::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+  }
 }