add a better scrollbar style

now scrollbar don't affect navbar:

make it less annoying

ui/dist/themes/dark.css

@@ -40,7 +40,11 @@
     --table-item-even: var(--color-bg-alt);
     --table-item-odd: transparent;
 
-    /* Modla */
+    /* Modal */
     --modal-overlay-bg: var(--color-dark-overlay);
     --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+
+    /* Scrollbar */
+    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
+    --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
 }

ui/scss/_gui.scss

@@ -30,10 +30,16 @@ body
 
 #main-content
 {
-  padding: $spacing-vertical;
-  margin-top: var(--header-height);
+  margin: auto;
   display: flex;
   flex-direction: column;
+  overflow: overlay;
+  padding: $spacing-vertical;
+  position: absolute;
+  top: var(--header-height);
+  bottom: 0;
+  left: 5px;
+  right: 5px;
   main {
     margin-left: auto;
     margin-right: auto;

ui/scss/_vars.scss

@@ -125,4 +125,11 @@ $text-color: #000;
   --tooltip-bg: var(--color-bg);
   --tooltip-color: var(--text-color);
   --tooltip-border: 1px solid #aaa;
+
+  /* Scrollbar */
+  --scrollbar-radius: 10px;
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20);
+  --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
+  --scrollbar-thumb-active-bg: var(--color-primary);
+  --scrollbar-track-bg: transparent;
 }

ui/scss/all.scss

@@ -21,5 +21,6 @@
 @import "component/_video.scss";
 @import "component/_pagination.scss";
 @import "component/_markdown-editor.scss";
+@import "component/_scrollbar.scss";
 @import "page/_developer.scss";
 @import "page/_show.scss";

ui/scss/component/_scrollbar.scss

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+    width: 6px;
+    overflow: auto;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-bg);
+    border-radius: var(--scrollbar-radius);
+    margin: 16px 0;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: var(--scrollbar-radius);
+    background-color: var(--scrollbar-thumb-bg);
+    transition: background-color 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-bg);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: var(--scrollbar-thumb-active-bg);
+}