Customized scrollbar

sohinirathor2004 · Jun 27, 2024 · 9ff4409 · 9ff4409
1 parent f4dfabc
commit 9ff4409
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 14 deletions.
diff --git a/Css-files/cart.css b/Css-files/cart.css
@@ -197,3 +197,25 @@ background-size: 100% 100%;}
     font-size: 28px;
     font-weight: bold;
 }
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+  }
+
+  ::-webkit-scrollbar {
+    width:12px;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ff0707;
+    border-radius: 10px;
+    border:.3px solid white;
+    background-image: -webkit-linear-gradient(90deg,
+        rgb(20, 21, 12) 0%,
+        rgb(0, 0, 0) 25%,
+        transparent 100%,
+        rgb(247, 4, 4) 75%,
+        transparent)
+  }
diff --git a/Css-files/cateringservices.css b/Css-files/cateringservices.css
@@ -111,3 +111,24 @@ textarea {
 #butt:hover {
   background-color: rgb(196, 89, 89);
 }
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+  background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+}
+
+::-webkit-scrollbar {
+  width:12px;
+
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ff0707;
+  border-radius: 10px;
+  border:.3px solid white;
+  background-image: -webkit-linear-gradient(90deg,
+      rgb(20, 21, 12) 0%,
+      rgb(0, 0, 0) 25%,
+      transparent 100%,
+      rgb(247, 4, 4) 75%,
+      transparent)
+}
diff --git a/Css-files/content.css b/Css-files/content.css
@@ -757,3 +757,25 @@ td {
 	margin-top: 250px;
 	margin-left: 100px;
 } */
+
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+	background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+  }
+
+  ::-webkit-scrollbar {
+	width:12px;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+	background-color: #ff0707;
+	border-radius: 10px;
+	border:.3px solid white;
+	background-image: -webkit-linear-gradient(90deg,
+		rgb(20, 21, 12) 0%,
+		rgb(0, 0, 0) 25%,
+		transparent 100%,
+		rgb(247, 4, 4) 75%,
+		transparent)
+  }
diff --git a/Css-files/detailed-dish.css b/Css-files/detailed-dish.css
@@ -118,3 +118,24 @@
         gap: 10px;
     }
 }
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+  }
+
+  ::-webkit-scrollbar {
+    width:12px;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ff0707;
+    border-radius: 10px;
+    border:.3px solid white;
+    background-image: -webkit-linear-gradient(90deg,
+        rgb(20, 21, 12) 0%,
+        rgb(0, 0, 0) 25%,
+        transparent 100%,
+        rgb(247, 4, 4) 75%,
+        transparent)
+  }
diff --git a/Css-files/offers.css b/Css-files/offers.css
@@ -66,16 +66,26 @@ body {
 =========================================
 */
 
-::-webkit-scrollbar {
-  width: 0.625rem;
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+  background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
 }
 
-::-webkit-scrollbar-track {
-  background: var(--white-color);
+::-webkit-scrollbar {
+  width:12px;
+
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--secondry-color);
+  background-color: #ff0707;
+  border-radius: 10px;
+  border:.3px solid white;
+  background-image: -webkit-linear-gradient(90deg,
+      rgb(20, 21, 12) 0%,
+      rgb(0, 0, 0) 25%,
+      transparent 100%,
+      rgb(247, 4, 4) 75%,
+      transparent)
 }
 
 /*

diff --git a/Css-files/services.css b/Css-files/services.css
@@ -182,4 +182,26 @@ textarea {
 
 #butt:hover {
     background-color: rgb(196, 89, 89);
-}
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+  }
+
+  ::-webkit-scrollbar {
+    width:12px;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ff0707;
+    border-radius: 10px;
+    border:.3px solid white;
+    background-image: -webkit-linear-gradient(90deg,
+        rgb(20, 21, 12) 0%,
+        rgb(0, 0, 0) 25%,
+        transparent 100%,
+        rgb(247, 4, 4) 75%,
+        transparent)
+  }
diff --git a/Css-files/services1.css b/Css-files/services1.css
@@ -90,4 +90,25 @@
     font-weight: 500;
     text-decoration: 8px;
     border-radius: 8px;
-}
+}
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
+  }
+
+  ::-webkit-scrollbar {
+    width:12px;
+
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ff0707;
+    border-radius: 10px;
+    border:.3px solid white;
+    background-image: -webkit-linear-gradient(90deg,
+        rgb(20, 21, 12) 0%,
+        rgb(0, 0, 0) 25%,
+        transparent 100%,
+        rgb(247, 4, 4) 75%,
+        transparent)
+  }
diff --git a/Css-files/style.css b/Css-files/style.css
@@ -843,4 +843,14 @@ textarea {
         height: fit-content;
         padding: 100px;
     }
+}
+::-webkit-scrollbar{
+    width:20px;
+}
+::-webkit-scrollbar-track{
+    background: red;
+}
+::-webkit-scrollbar-thumb{
+    border-radius: 12px;
+    background-color: yellow;
 }
diff --git a/style.css b/style.css
@@ -47,22 +47,24 @@ body {
 /*Scrollbar Style*/
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-  background-color: #CCCCCC;
+  /* background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); */
+  background-color: white;
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  background-color: #F5F5F5;
+  width:12px;
+
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #FFF;
+  background-color: #ff0707;
   border-radius: 10px;
+  border:.3px solid white;
   background-image: -webkit-linear-gradient(90deg,
-      rgba(0, 0, 0, 1) 0%,
-      rgba(0, 0, 0, 1) 25%,
+      rgb(20, 21, 12) 0%,
+      rgb(0, 0, 0) 25%,
       transparent 100%,
-      rgba(0, 0, 0, 1) 75%,
+      rgb(247, 4, 4) 75%,
       transparent)
 }