pleroma-fe

commit: b8b7ae856463b69baf1e08499aea130e2f1174ef
parent b5ded67c0608724fe23be15e346dd6842819635f
Author: Henry Jameson <me@hjkos.com>
Date:   Thu,  7 Apr 2022 16:00:28 +0300

fancy scrollbars

Diffstat:
M
src/App.scss
61
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
M
src/services/style_setter/style_setter.js
8
++++----

2 files changed, 61 insertions(+), 8 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -25,6 +25,63 @@ body {
   }
 }
 
+* {
+  scrollbar-color: var(--btn) transparent;
+
+  &::-webkit-scrollbar {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-button,
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--btn);
+    box-shadow: var(--buttonShadow);
+  }
+
+  &::-webkit-scrollbar-button {
+    --___bgPadding: 2px;
+
+    color: var(--btnText);
+    background-repeat: no-repeat, no-repeat;
+
+    &:horizontal {
+      background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
+
+      &:increment {
+        background-image:
+          linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
+          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+        background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
+      }
+
+      &:decrement {
+        background-image:
+          linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
+          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+        background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
+      }
+    }
+
+    &:vertical {
+      background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
+
+      &:increment {
+        background-image:
+          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
+          linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+        background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
+      }
+
+      &:decrement {
+        background-image:
+          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
+          linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+        background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
+      }
+    }
+  }
+}
+
 a {
   text-decoration: none;
   color: $fallback--link;
@@ -207,10 +264,6 @@ nav {
   }
 }
 
-#content,
-.column.-scrollable {
-}
-
 .text-center {
   text-align: center;
 }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -13,10 +13,10 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   body.classList.remove('hidden')
 }