init

devtweakr · Dec 17, 2023 · 188c3a1 · 188c3a1
1 parent 41cc863
commit 188c3a1
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/style.css b/style.css
@@ -28,42 +28,51 @@ body.dark-mode {
 
 .slider {
   width: 170px;
-  height: 5px;
+  height: 6px;
   margin: 10px 15px;
   border-radius: 5px;
-  background-color: #ffffff;
+  background-color: #444;
   /* Bluish background color */
   appearance: none;
   /* Remove default styling */
   outline: none;
   /* Remove outline on focus */
 }
 
+.slider:hover {
+  color: #028afa;
+}
+
 .slider::-webkit-slider-thumb {
-  width: 20px;
-  height: 20px;
-  background-color: #1565c0;
+  width: 15px;
+  height: 15px;
+  background-color: #64b5f6;
   /* Bluish handle color */
-  /* Darker border color */
   border-radius: 50%;
   cursor: pointer;
   appearance: none;
   /* Remove default styling */
 }
 
+.slider::-webkit-slider-thumb:hover {
+  color: #028afa;
+}
+
 .slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  background-color: #2196f3;
+  width: 15px;
+  height: 15px;
+  background-color: #64b5f6;
   /* Bluish handle color for Firefox */
-  border: 2px solid #1565c0;
-  /* Darker border color */
   border-radius: 50%;
   cursor: pointer;
   box-shadow: none;
   /* Remove default styling */
 }
 
+.slider::-moz-range-thumb:hover {
+  color: #028afa;
+}
+
 .speakers {
   display: flex;
   align-items: center;
@@ -78,6 +87,6 @@ body.dark-mode {
 }
 
 .speaker:hover {
-  color: #42a5f5;
+  color: #028afa;
   /* Lighter bluish color on hover */
 }