Forced scrollbars in disclosure (#194)

* scrollbars * macos screenshots --------- Co-authored-by: Shane Osbourne <[email protected]>
duckduckgo · Oct 15, 2024 · acb35e4 · acb35e4
1 parent 15c0dfe
commit acb35e4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/build/app/public/css/popup.css b/build/app/public/css/popup.css
@@ -3893,11 +3893,13 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
   overflow-y: scroll;
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  background: rgba(0, 0, 0, 0.01);
+  /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+  background: rgb(252, 252, 252);
   padding: 16px 20px 20px 16px;
 }
 .body--theme-dark .scrollable {
-  background: rgba(255, 255, 255, 0.03);
+  /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+  background: rgb(57, 57, 57);
   border-color: rgba(255, 255, 255, 0.09);
 }
 
@@ -3972,17 +3974,19 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
   margin-bottom: 16px;
 }
 .toggle-report__scroller .scrollable::-webkit-scrollbar {
-  width: 10px;
+  width: 14px;
 }
 .toggle-report__scroller .scrollable::-webkit-scrollbar-track {
   border-radius: 6px;
 }
 .toggle-report__scroller .scrollable::-webkit-scrollbar-thumb {
-  border: 1px solid rgba(0, 0, 0, 0.1);
   background: rgba(0, 0, 0, 0.1);
+  /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+  border: 2px solid rgb(252, 252, 252);
   border-radius: 6px;
 }
 .body--theme-dark .toggle-report__scroller .scrollable::-webkit-scrollbar-thumb {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+  border-color: rgb(57, 57, 57);
   background: rgba(0, 0, 0, 0.3);
 }
diff --git a/...on-tests/macos.spec-int.js-snapshots/screen-toggle-report-show-macos-darwin.png b/...on-tests/macos.spec-int.js-snapshots/screen-toggle-report-show-macos-darwin.png
diff --git a/shared/js/ui/components/_stack.scss b/shared/js/ui/components/_stack.scss
@@ -16,11 +16,13 @@
     overflow-y: scroll;
     border-radius: 6px;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    background: rgba(0, 0, 0, 0.01);
+    /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+    background: rgba(252, 252, 252, 1);
     padding: 16px 20px 20px 16px;
 
     .body--theme-dark & {
-        background: rgba(255, 255, 255, 0.03);
+        /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+        background: rgba(57, 57, 57, 1);
         border-color: rgba(255, 255, 255, 0.09);
     }
 

diff --git a/shared/js/ui/components/toggle-report/toggle-report.scss b/shared/js/ui/components/toggle-report/toggle-report.scss
@@ -24,21 +24,23 @@
 
     .scrollable {
         &::-webkit-scrollbar {
-            width: 10px;
+            width: 14px;
         }
 
         &::-webkit-scrollbar-track {
             border-radius: 6px;
         }
 
         &::-webkit-scrollbar-thumb {
-            border: 1px solid rgba(0, 0, 0, 0.1);
             background: rgba(0, 0, 0, 0.1);
+            /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+            border: 2px solid rgba(252, 252, 252, 1);
             border-radius: 6px;
         }
 
         .body--theme-dark &::-webkit-scrollbar-thumb {
-            border: 1px solid rgba(0, 0, 0, 0.1);
+            /* NOTE: this is not using alpha because the custom scrollbars need to stack */
+            border-color: rgba(57, 57, 57, 1);
             background: rgba(0, 0, 0, 0.3);
         }
     }