music-player #26: Playback progress bar styling

helitopia · Jul 11, 2024 · fbde15d · fbde15d
1 parent 0642009
commit fbde15d
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/music-player/src/style.css b/music-player/src/style.css
@@ -58,25 +58,30 @@ body {
 }
 
 #song-progress {
-    width : 100%;
+    appearance    : none;
+    width         : 100%;
+    height        : 7px;
+    background    : rgba(163, 162, 164, 0.4);
+    border-radius : 4px;
+    cursor        : pointer;
 }
 
 .song-time-wrapper {
-    width            : 100%;
-    display          : flex;
-    justify-content  : space-between;
-    margin-block-end : 1em;
+    width           : 100%;
+    display         : flex;
+    justify-content : space-between;
+    margin-block    : 0.5em 1em;
 }
 
 .remaining-song-time, .overall-song-duration {
-    color          : rgba(128,128,128, 1);
+    color          : rgba(128, 128, 128, 1);
     font-size      : 90%;
     padding-inline : 0.5em;
 }
 
 .remaining-song-time:hover {
-    cursor: pointer;
-    color: rgba(128,128,128, 0.5);
+    cursor : pointer;
+    color  : rgba(128, 128, 128, 0.5);
 }
 
 .player-buttons {