update scrollbar style.

2 files changed, 39 insertions, 11 deletions

diff --git a/assets/css/dark-style.css b/assets/css/dark-style.css
index a38df61..12e6c24 100644
--- a/assets/css/dark-style.css
+++ b/assets/css/dark-style.css
@@ -1,3 +1,11 @@
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.25)
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.5)
+}
+
 body {
   color: #d8dde2;
   background-color: #222831;
diff --git a/assets/css/style.css b/assets/css/style.css
index 7817c26..597a859 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,19 +1,39 @@
-.color-orange { color: #d28e5d;}
-.color-red { color: #dc3c3c;}
-.color-fusia { color: #b73999;}
-.color-purple { color: #8485ce;}
-.color-forest-green { color: #64878f;}
-.color-mint-green { color: #95c76f;}
-.color-green { color: #52bd58;}
-.color-blue-green { color: #00aba5;}
-.color-blue { color: #4670d8;}
-.bg-dark { background-color: #20222B; }
-
 :root {
   color-scheme: light dark;
   supported-color-schemes: light dark;
 }
 
+/* Works on Firefox */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar-thumb) transparent
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px; /* width of the entire scrollbar */
+  height: 12px
+}
+
+*::-webkit-scrollbar-track-piece {
+  background: transparent
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent /* color of the tracking area */
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.175);   /* color of the scroll thumb */
+  background-clip: padding-box;
+  border-radius: 6px;       /* roundness of the scroll thumb */
+  border: 2px solid transparent  /* creates padding around scroll thumb */
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.35)
+}
+
 html {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Segoe UI',
     Ubuntu, Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans',