static/flexbox/index.html

@@ -25,45 +25,8 @@
           <input type="range" id="progress" name="progress" min="0" max="100" />
         </div>
       </div>
-      <div id="queue-volume-controls">
-        <div id="queue-controls">
-          <div id="queue-playback-order-controls">
-            <div>
-              <input type="checkbox" id="repeat" name="repeat" />
-              <label for="repeat">repeat</label>
-            </div>
-            <div>
-              <input type="checkbox" id="shuffle" name="shuffle" />
-              <label for="shuffle">shuffle</label>
-            </div>
-          </div>
-          <div id="queue-xfade-control">
-            <div>
-              <label for="xfade">xfade</label>
-            </div>
-            <div id="queue-xfade-buttons">
-              <button>-</button>
-              <div id="xfade">00</div>
-            <button>+</button>
-            </div>
-          </div>
-        </div>
-        <div id="volume-control">
-          <label for="volume"></label>
-          <input id="volume" name="volume" type="range" min="1" max="100" />
-        </div>
-      </div>
-      <div class="track-info">
-        <p>Now playing: 00:00:00/100:00:00</p>
+      <div id="queue-controls">
 
-        <label for="track">track</label>
-        <input type="text" id="track" name="track" disabled />
-      </div>
-      <div id="top-logo-container">
-        <div id="top-logo">
-          <img id="sanic-logo" src="../img/sanic-logo.webp">
-          Sanic
-        </div>
       </div>
     </div>
     <div id="queue">
@@ -73,7 +36,7 @@
         controls bottom
     </div>
     <div id="footer">
-      sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
+        footer
     </div>
   </div>
 </body>

static/flexbox/sanic.css

@@ -1,7 +1,6 @@
-html, body {
+body {
   background-color: #09101d;
   color: #bbb;
-  height: 99%;
 }
 
 div {
@@ -13,89 +12,22 @@ button {
   color: #bbb;
 }
 
-input {
-  background-color: #28374a;
-  color: white;
-}
-
 #flexbox-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
 }
 
 #controls-top {
   display: flex;
   flex-direction: row;
-  justify-content: space-b;
 }
 
 #top-left-controls {
   display: flex;
   flex-direction: column;
-  width: 100px;
-}
-
-#top-left-controls button {
-  text-align: left;
 }
 
 #playback-controls {
   display: flex;
   flex-direction: column;
-  width: 160px;
-}
-
-#queue-volume-controls {
-  width: 150px;
-}
-
-#queue-controls {
-  display: flex;
-  flex-direction: row;
-}
-
-#queue-xfade-control {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-}
-
-#queue-xfade-buttons {
-  display: flex;
-  flex-direction: row;
-}
-
-#top-logo {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  color: white;
-  width: 50px;
-}
-
-#top-logo-container {
-  display: flex;
-  flex-grow: 1;
-  justify-content: flex-end;
-}
-
-#sanic-logo {
-  width: 50px;
-}
-
-#xfade {
-  width: 20px;
-}
-
-#queue {
-  flex-grow: 1;
-}
-
-#controls_bottom {
-  flex-grow: 2;
-}
-
-#footer {
-  text-align: right;
 }