Added customised scrollbar to all the games pages (Spandan-Bhattachar…

…ya#330)
Anshikaa-Saini · Feb 25, 2024 · 1448c1a · 1448c1a
1 parent 90c1f62
commit 1448c1a
Show file tree

Hide file tree

Showing 24 changed files with 433 additions and 14 deletions.
diff --git a/2048/style.css b/2048/style.css
@@ -241,4 +241,21 @@ html{
       padding: 0px 9px;
   }
 
+}
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
 }
diff --git a/Bingo Game/style.css b/Bingo Game/style.css
@@ -1,3 +1,8 @@
+*{
+	margin: 0;
+	padding: 0;
+}
+
 body { 
 	font-family: Arial, sans-serif; 
 	background-color: #d8f3dc; 
@@ -192,4 +197,22 @@ label {
 .foot-social a{
     font-size: 30px;
     color: #ffb780;
-}
+}
+html {
+	scroll-behavior: smooth;
+	overflow-x: hidden;
+  }
+
+  ::-webkit-scrollbar {
+	width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+	border-radius: 5px;
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+	border-radius: 5px;
+	background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Block-Buster/styles.css b/Block-Buster/styles.css
@@ -1,3 +1,8 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -147,4 +152,22 @@ body {
 .foot-social a{
   font-size: 30px;
   color: #ffb780;
+}
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
 }
diff --git a/CrossWord/style.css b/CrossWord/style.css
@@ -275,4 +275,21 @@ html{
       padding: 0px 9px;
   }
 
+}
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
 }
diff --git a/Dino Game/style.css b/Dino Game/style.css
@@ -110,4 +110,21 @@ img{
 .reset:hover{
     transform: scale(1.05);
     transition: all 0.2s ease-in-out;
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/HangMan Game/style.css b/HangMan Game/style.css
@@ -363,4 +363,21 @@ html{
         padding: 0px 9px;
     }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Memory Card game/style.css b/Memory Card game/style.css
@@ -207,4 +207,21 @@ body{
 .foot-social a{
   font-size: 30px;
   color: #ffb780;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
 }
diff --git a/Ping_Pong/style.css b/Ping_Pong/style.css
@@ -115,3 +115,20 @@ h1{
 .back-to-home:hover {
     background-color: #4556a0;
 }
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+}
diff --git a/Rock Paper Scissor/style.css b/Rock Paper Scissor/style.css
@@ -305,4 +305,21 @@ html{
         padding: 0px 9px;
     }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Rubiks-Cube/style.css b/Rubiks-Cube/style.css
@@ -352,4 +352,21 @@ body {
 }
 .ui__buttons {
   z-index: 5;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
 }
diff --git a/Simon Game/styles.css b/Simon Game/styles.css
@@ -227,4 +227,21 @@ backHome a:hover,
       padding: 0px 9px;
   }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Snake Game/style.css b/Snake Game/style.css
@@ -231,4 +231,21 @@ backHome a:hover,
         padding: 0px 9px;
     }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Sudoku_Game_8x8/style.css b/Sudoku_Game_8x8/style.css
@@ -265,4 +265,21 @@ html{
         font-size: 7vw;
     }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Sudoku_Game_9x9/style.css b/Sudoku_Game_9x9/style.css
@@ -299,4 +299,21 @@ html{
         font-size: 6vw;
     }
 
-}
+}
+html {
+    scroll-behavior: smooth;
+  }
+
+  ::-webkit-scrollbar {
+    width: 15px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+  }
diff --git a/Tetris/style.css b/Tetris/style.css
@@ -193,7 +193,23 @@ html{
   }
 
 }
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
 
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: linear-gradient(to top, rgba(0, 212, 255, 1), rgba(9, 9, 121, 1));
+}