Merge pull request #210 from SrijaVuppala295/scroll

Added UI for the Scrollbar for all pages !!!

styles.css

@@ -10,7 +10,49 @@ body {
     background-color: var(--body-bg);
     color: #333;
 } 
-
+/* Style the scrollbar container */
+::-webkit-scrollbar {
+    width: 12px; /* Width of the scrollbar */
+    height: 12px; /* Height for horizontal scrollbar */
+  }
+
+  /* Style the scrollbar track (background of the scrollbar) */
+  ::-webkit-scrollbar-track {
+    background: #2d2d2d; /* Dark background */
+    border-radius: 10px;
+  }
+
+  /* Style the scrollbar thumb (the draggable part) */
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #f7e8b6, #f0d48c); /* Gradient using different yellow shades */
+    border-radius: 10px; /* Rounded corners */
+    border: 3px solid #1a1a1a; /* Border around the thumb */
+  }
+
+  /* Hover effect for the thumb */
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #f0d48c, #e6c85b); /* Lighter gradient on hover */
+  }
+
+  /* Optional: Style for the scrollbar corner */
+  ::-webkit-scrollbar-corner {
+    background: #2d2d2d; /* Dark background for corner */
+  }
+
+  /* Style for horizontal scrollbar */
+  ::-webkit-scrollbar-horizontal {
+    height: 12px; /* Height for horizontal scrollbar */
+  }
+
+  ::-webkit-scrollbar-thumb-horizontal {
+    background: linear-gradient(90deg, #f7e8b6, #f0d48c); /* Horizontal gradient */
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb-horizontal:hover {
+    background: linear-gradient(90deg, #f0d48c, #e6c85b);
+  }
+
 :root {
     --body-bg: antiquewhite;
     --primary-color: #fff;