From 57209a8159fd9238cb3b698b3273f32c0997d245 Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Sat, 30 Nov 2024 15:43:02 -0500
Subject: [PATCH] style scrollbars

---
 index.html | 180 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 117 insertions(+), 63 deletions(-)

diff --git a/index.html b/index.html
index 4bc00c5..83ed5eb 100644
--- a/index.html
+++ b/index.html
@@ -250,77 +250,131 @@
       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 */
-  display: flex;
-  flex-direction: column-reverse; /* Stack alerts upwards */
-  gap: 10px; /* Add space between alerts */
-  pointer-events: none; /* Prevent container from blocking clicks */
-}
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      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 */
+    }
 
-.alert {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 80%;
-  padding: 12px 20px;
-  background-color: #2b2b2b;
-  color: #e0e0e0;
-  border-radius: 6px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-  animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  pointer-events: auto; /* Allow alerts to be interactive */
-}
+    .alert {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 80%;
+      padding: 12px 20px;
+      background-color: #2b2b2b;
+      color: #e0e0e0;
+      border-radius: 6px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      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 {
-  background: none;
-  border: none;
-  color: #e0e0e0;
-  font-size: 16px;
-  cursor: pointer;
-  margin-left: auto; /* Align to the far right */
-}
+    .alert .close-btn {
+      background: none;
+      border: none;
+      color: #e0e0e0;
+      font-size: 16px;
+      cursor: pointer;
+      margin-left: auto;
+      /* Align to the far right */
+    }
 
-@media (max-width: 768px) {
-  #alert-container {
-    bottom: 10px;
-    right: 10px;
-  }
+    @media (max-width: 768px) {
+      #alert-container {
+        bottom: 10px;
+        right: 10px;
+      }
 
-  .alert {
-    max-width: 90%;
-    font-size: 12px;
-    padding: 10px 15px;
-    white-space: normal; /* Allow wrapping on small screens */
-    text-overflow: clip; /* Disable ellipsis when wrapping */
-  }
-}
+      .alert {
+        max-width: 90%;
+        font-size: 12px;
+        padding: 10px 15px;
+        white-space: normal;
+        /* Allow wrapping on small screens */
+        text-overflow: clip;
+        /* Disable ellipsis when wrapping */
+      }
+    }
 
-@media (min-width: 768px) {
-  .alert {
-    white-space: nowrap; /* Re-enable nowrap for larger screens */
-    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
-  }
-}
-#sidebar.collapsed .btn-danger {
-  display: none;
-}
+    @media (min-width: 768px) {
+      .alert {
+        white-space: nowrap;
+        /* Re-enable nowrap for larger screens */
+        text-overflow: ellipsis;
+        /* Add ellipsis for overflowed text */
+      }
+    }
+
+    #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>