Merge pull request #428 from SrijaVuppala295/scrollbar

Enhancing the UI of Scrollbar with Gradient Colors, Hover Effects, and Dark Mode Support

src/app/components/aboutUs-page/aboutUs.component.css

@@ -18,6 +18,29 @@ body {
   flex-direction: column;
   min-height: 100vh;
 }
+/* For WebKit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+  width: 10px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f0f0f0; /* Background of the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
+  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+}
+
+/* For Firefox */
+html {
+  scrollbar-width: thin; /* Makes the scrollbar thin */
+  scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
+}
 
 /* Header Styling */
 header {

src/app/components/faq/faq.component.css

@@ -10,6 +10,30 @@ font-family: Arial, sans-serif;
   margin-top:30px
 }
 
+/* For WebKit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+    width: 10px; /* Width of the scrollbar */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f0f0f0; /* Background of the track */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
+    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+  }
+
+  /* For Firefox */
+  html {
+    scrollbar-width: thin; /* Makes the scrollbar thin */
+    scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
+  }
+
 .faq{
   width: 800px;
   margin-top: 5rem !important;

src/app/components/header/header.component.html

@@ -71,6 +71,40 @@
   height: 25px;
   width: 25px;
 }
+  * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            height: 100%; /* Ensure full height */
+            overflow: hidden; /* Prevent body scrolling */
+        }
+
+        /* For WebKit browsers (Chrome, Safari, Edge) */
+        ::-webkit-scrollbar {
+            width: 12px; /* Width of the scrollbar */
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f0f0f0; /* Background of the track */
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
+            border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+        }
+
+        /* For Firefox */
+        html {
+            scrollbar-width: thin; /* Makes the scrollbar thin */
+            scrollbar-color: #ff66b2 #800ab3; /* Color of the thumb and track */
+        }
 
 
   </style>

src/app/components/header/style.css

@@ -4,6 +4,30 @@
   padding: 0;
   box-sizing: border-box;
 }
+/* For WebKit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+  width: 10px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #aa1313; /* Background of the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
+  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+}
+
+/* For Firefox */
+html {
+  scrollbar-width: thin; /* Makes the scrollbar thin */
+  scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
+}
+
 
 body {
   font-family: "Inter", sans-serif;

src/app/components/quiz/quiz.component.css

@@ -8,6 +8,29 @@
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+/* For WebKit browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+  width: 10px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f0f0f0; /* Background of the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
+  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+}
+
+/* For Firefox */
+html {
+  scrollbar-width: thin; /* Makes the scrollbar thin */
+  scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
+}
 
 header {
   text-align: center;

src/index.html

@@ -206,9 +206,7 @@
       z-index: 1001;
     }
 
-    .toast.show {
-
-    }
+
 
     /* Testimonials Section Styles */
     .testimonials {
@@ -611,6 +609,56 @@ <h2>Contact Us</h2>
 
 <!-- Add custom CSS for GTranslate -->
 <style>
+/* Global scrollbar styling for Firefox */
+html {
+  scrollbar-width: auto; /* Firefox: auto for normal width */
+  scrollbar-color: #ff66b2 #f0f0f0; /* Initial color of the thumb and track */
+}
+
+/* For WebKit browsers (Chrome, Safari) */
+html::-webkit-scrollbar {
+  width: 24px; /* Width of the scrollbar */
+  height: 24px; /* Height of the scrollbar (for horizontal scrollbar) */
+}
+
+html::-webkit-scrollbar-thumb {
+  background-color: #ff66b2; /* Initial color of the scrollbar thumb */
+  border-radius: 12px; /* Rounded corners for the scrollbar thumb */
+  transition: background-color 0.3s; /* Smooth transition for hover effect */
+}
+
+html::-webkit-scrollbar-track {
+  background-color: #f0f0f0; /* Initial color of the scrollbar track */
+  border-radius: 12px; /* Rounded corners for the scrollbar track */
+}
+
+/* Hover effect for scrollbar thumb */
+html::-webkit-scrollbar-thumb:hover {
+  background-color: #ff3399; /* Change thumb color on hover */
+}
+
+/* Hover effect for scrollbar track */
+html::-webkit-scrollbar-track:hover {
+  background-color: #e0e0e0; /* Change track color on hover */
+}
+
+
+/* Dark mode or night-time styling (optional) */
+@media (prefers-color-scheme: dark) {
+    html {
+        scrollbar-color: #6911a8 #df50e1a4; /* Change scrollbar color for dark mode (Firefox) */
+    }
+
+    ::-webkit-scrollbar-track {
+        background: hsl(222, 81%, 47%); /* Dark gray track in dark mode */
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Gradient works in dark mode too */
+    }
+}
+
+
 .gtranslate_wrapper {
   position: fixed !important;
   left: 10px !important;