Player tweaks

diff --git a/static/styles.css b/static/styles.css
index daac494512d8913ede59942c4828528c3d982445..43dc49a4ef0cf832ab44d42a9cb438403171c4c9 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -322,13 +322,13 @@ div.player {
     margin: 10px;
     box-shadow: 0px 0px 20px 0px;
     border-radius: 10px;
-    min-height: 100px;
+    /*min-height: 100px;*/
     /*border-top: 3px solid;*/
     background: var(--yellow);
 }
 
 div.player-info {
-    height: 50%;
+    /*height: 50%;*/
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -345,7 +345,15 @@ div.player-info {
     justify-content: center;
     align-items: center;
     gap: 10px;
-    height: 50%;
+    /*height: 50%;*/
+    padding: 0px 10px;
+}
+
+.player-volume {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
     padding: 10px;
 }
 
@@ -392,7 +400,9 @@ div.player-info {
 }
 
 #volume-slider {
-    width: 25%;
+    width: 100px;
+    max-width: 25%;
+    margin-left: 10px;
 }
 
 .player-label {

diff --git a/templates/base.html b/templates/base.html
index 01647d7cb94ca4ff51e48c83796ea2d867a3c4bd..4c1e82a392ced391a3a7cdc80a4dfd59a7c00a04 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -105,7 +105,7 @@
                     <span class="player-time" id="player-total-time">0:00</span>
                     <audio id="player-audio"></audio>
                 </div>
-                <div class="player-controls desktop-only">
+                <div class="player-volume desktop-only">
                     <label class="player-label" for="volume">Volume</label>
                     <input id="volume-slider" name="volume" type="range" min="0" max="1" step="any" value="1"/>
                 </div>