unify scrollbars

• style the scrollbar on the document element to match the brand colors
• add styles for scrollbars on playground editor and preview
• make scrollbars look consistent across browsers
• clean up styles

pages/assets/css/_base.css

@@ -14,6 +14,7 @@
   --brand-color-1000: #033844;
   --gray-color-100: #f3f4f6;
   --gray-color-200: #e5e7eb;
+  --gray-color-300: #a9c6ce;
   --gray-color-500: #6b7280;
   --gray-color-600: #3e3e3e;
   --gray-color-800: #202020;
@@ -27,24 +28,63 @@ html {
   scroll-behavior: smooth;
 }
 
+@media (pointer: fine) {
+  html {
+    scrollbar-color: var(--brand-color-100) var(--brand-color-700);
+  }
+
+  html::-webkit-scrollbar {
+    background-color: var(--brand-color-700);
+    height: 12px;
+    width: 12px;
+  }
+
+  html::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--brand-color-100);
+    border: 3px solid transparent;
+    border-radius: 12px;
+  }
+
+  html::-webkit-scrollbar-thumb:hover {
+    background-color: var(--gray-color-300);
+  }
+}
+
+body * {
+  scrollbar-width: thin;
+}
+
+body ::-webkit-scrollbar,
+body ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+body ::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+body ::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  border: 1.5px solid transparent;
+  border-radius: 6px;
+}
+
 body {
   font-family: var(--brand-font-primary);
   color: var(--gray-color-800);
-  background: linear-gradient(#f9fafb 0%, #fff 35%);
-  /* fallback */
-  background-color: #fff;
+  background: #fff linear-gradient(#f9fafb 0%, #fff 35%);
 }
 
 @media screen and (min-width: 769px) {
   body {
-    background: linear-gradient(#eaeaea 0%, #f9fafb 25%);
-    /* fallback */
-    background-color: #f9fafb;
+    background: #f9fafb linear-gradient(#eaeaea 0%, #f9fafb 25%);
   }
 }
 
 .header {
-  background-color: white;
+  background-color: #fff;
 }
 
 .header .menu a {
@@ -572,18 +612,23 @@ section.try .toggle {
 }
 
 #editorCode .cm-scroller {
-  border-radius: 5px;
   font-family: var(--monospace-font);
 }
 
-#editorCode .cm-scroller::-webkit-scrollbar {
-  height: 8px;
-  width: 8px;
-  background: #f0f0f0;
+#editorCode .cm-scroller,
+#editorPreview {
+  overscroll-behavior: none;
+  scrollbar-color: var(--brand-color-500) transparent;
+}
+
+#editorCode .cm-scroller::-webkit-scrollbar-thumb,
+#editorPreview::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-500);
 }
 
-#editorCode .cm-scroller::-webkit-scrollbar-thumb {
-  background: #cdcdcd;
+#editorCode .cm-scroller::-webkit-scrollbar-thumb:hover,
+#editorPreview::-webkit-scrollbar-thumb:hover {
+  background-color: var(--brand-color-600);
 }
 
 #editorPreview h1,
@@ -593,7 +638,7 @@ section.try .toggle {
 }
 
 #editorPreview {
-  border-left: 5px solid #f0f0f0;
+  border-left: 3px solid var(--gray-color-200);
   border-radius: 0 5px 5px 0;
   color: var(--gray-color-800);
   padding-left: 1rem;
@@ -1660,26 +1705,8 @@ section.docs a:hover {
   padding-top: 0.62em;
 }
 
-.listingblock.editor > .content::-webkit-scrollbar {
-  width: 3px;
-  background-color: #475569; /* or add it to the track */
-}
-
-.listingblock.editor > .content::-webkit-scrollbar-thumb {
-  background: #7dd3fc;
-}
-
-.from .listingblock.editor > .content::-webkit-scrollbar {
-  background-color: #a3acb8; /* or add it to the track */
-}
-
-.from .listingblock.editor > .content::-webkit-scrollbar-thumb {
-  background: #5a6a81;
-}
-
 .listingblock.editor > .content {
   overscroll-behavior: none;
-  scrollbar-width: thin;
 }
 
 .to .listingblock.editor > .content {
@@ -1690,6 +1717,14 @@ section.docs a:hover {
   scrollbar-color: #5a6a81 transparent;
 }
 
+.to .listingblock.editor > .content::-webkit-scrollbar-thumb {
+  background-color: #7dd3fc;
+}
+
+.from .listingblock.editor > .content::-webkit-scrollbar-thumb {
+  background-color: #5a6a81;
+}
+
 .editor-content > .tabset {
   padding: 0;
   margin: 0;
@@ -1739,22 +1774,6 @@ section.docs a:hover {
   overflow: visible;
 }
 
-.editor .listingblock > .content code {
-  background-color: transparent;
-  line-height: 1.25rem;
-  scrollbar-color: #5a6a81 #a3acb8;
-  scrollbar-width: thin;
-}
-
-.editor .listingblock > .content code::-webkit-scrollbar {
-  height: 3px;
-  background: #a3acb8;
-}
-
-.editor .listingblock > .content code::-webkit-scrollbar-thumb {
-  background: #5a6a81;
-}
-
 .exampleblock.compare > .content {
   display: flex;
   gap: 1rem;