style scrollbars

index.html

@@ -250,18 +250,23 @@
       display: none !important;
       /* Hide the dashboard completely when not needed */
     }
+
     #alert-container {
       position: fixed;
       bottom: 20px;
       right: 20px;
-  z-index: 1055; /* Ensure it overlays important elements only */
+      z-index: 1055;
+      /* Ensure it overlays important elements only */
       display: flex;
-  flex-direction: column-reverse; /* Stack alerts upwards */
-  gap: 10px; /* Add space between alerts */
-  pointer-events: none; /* Prevent container from blocking clicks */
-}
+      flex-direction: column-reverse;
+      /* Stack alerts upwards */
+      gap: 10px;
+      /* Add space between alerts */
+      pointer-events: none;
+      /* Prevent container from blocking clicks */
+    }
 
-.alert {
+    .alert {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -277,27 +282,31 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-  pointer-events: auto; /* Allow alerts to be interactive */
-}
+      pointer-events: auto;
+      /* Allow alerts to be interactive */
+    }
 
-.alert.success {
-  border-left: 6px solid #28a745; /* Green border for success */
-}
+    .alert.success {
+      border-left: 6px solid #28a745;
+      /* Green border for success */
+    }
 
-.alert.danger {
-  border-left: 6px solid #dc3545; /* Red border for danger */
-}
+    .alert.danger {
+      border-left: 6px solid #dc3545;
+      /* Red border for danger */
+    }
 
-.alert .close-btn {
+    .alert .close-btn {
       background: none;
       border: none;
       color: #e0e0e0;
       font-size: 16px;
       cursor: pointer;
-  margin-left: auto; /* Align to the far right */
-}
+      margin-left: auto;
+      /* Align to the far right */
+    }
 
-@media (max-width: 768px) {
+    @media (max-width: 768px) {
       #alert-container {
         bottom: 10px;
         right: 10px;
@@ -307,20 +316,65 @@
         max-width: 90%;
         font-size: 12px;
         padding: 10px 15px;
-    white-space: normal; /* Allow wrapping on small screens */
-    text-overflow: clip; /* Disable ellipsis when wrapping */
+        white-space: normal;
+        /* Allow wrapping on small screens */
+        text-overflow: clip;
+        /* Disable ellipsis when wrapping */
+      }
     }
-}
 
-@media (min-width: 768px) {
+    @media (min-width: 768px) {
       .alert {
-    white-space: nowrap; /* Re-enable nowrap for larger screens */
-    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
+        white-space: nowrap;
+        /* Re-enable nowrap for larger screens */
+        text-overflow: ellipsis;
+        /* Add ellipsis for overflowed text */
       }
-}
-#sidebar.collapsed .btn-danger {
+    }
+
+    #sidebar.collapsed .btn-danger {
       display: none;
-}
+    }
+
+    /* General scrollbar styles for dark and skinny scrollbars */
+    * {
+      scrollbar-width: thin;
+      /* Firefox */
+      scrollbar-color: #555 #1a1a1a;
+      /* Firefox: thumb and track color */
+    }
+
+    /* WebKit-based browsers (Chrome, Edge, Safari) */
+    *::-webkit-scrollbar {
+      width: 8px;
+      /* Width of vertical scrollbar */
+      height: 8px;
+      /* Height of horizontal scrollbar */
+    }
+
+    *::-webkit-scrollbar-track {
+      background: #1a1a1a;
+      /* Track color */
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: #555;
+      /* Thumb color */
+      border-radius: 10px;
+      /* Round the thumb */
+      border: 2px solid #1a1a1a;
+      /* Space between thumb and track */
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+      background-color: #777;
+      /* Lighter color on hover */
+    }
+
+    *::-webkit-scrollbar-thumb:active {
+      background-color: #999;
+      /* Even lighter color when active */
+    }
   </style>
 
 </head>