style(front): queue mobile player

front/src/components/Queue.vue

@@ -22,8 +22,10 @@ import PlayerControls from '~/components/audio/PlayerControls.vue'
 import VirtualList from '~/components/vui/list/VirtualList.vue'
 import QueueItem from '~/components/QueueItem.vue'
 
-import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
+import Button from '~/components/ui/Button.vue'
 import Pill from '~/components/ui/Pill.vue'
 
 const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
@@ -339,7 +341,8 @@ if (!isWebGLSupported) {
               <i class="loading spinner icon" />
             </p>
           </div>
-          <div class="additional-controls desktop-and-below">
+          <Spacer :size="16" class="desktop-and-below" />
+          <Layout flex class="additional-controls desktop-and-below">
             <track-favorite-icon
               v-if="store.state.auth.authenticated"
               :track="currentTrack"
@@ -358,7 +361,7 @@ if (!isWebGLSupported) {
               :title="labels.addArtistContentFilter"
               @click="hideArtist"
             />
-          </div>
+          </Layout>
           <div class="progress-wrapper">
             <div class="progress-area">
               <div
@@ -391,7 +394,7 @@ if (!isWebGLSupported) {
               </template>
             </div>
           </div>
-          <player-controls class="desktop-and-below" />
+          <player-controls class="desktop-and-below queue-controls" />
         </template>
       </div>
       <div id="queue">

front/src/components/audio/PlayerControls.vue

@@ -26,7 +26,6 @@ const labels = computed(() => ({
       :aria-label="labels.previous"
       round
       ghost
-      alignSelf="center"
       class="control tablet-and-up"
       icon="bi-skip-backward-fill"
       @click.prevent.stop="playPrevious()"
@@ -35,7 +34,6 @@ const labels = computed(() => ({
       :title="isPlaying ? labels.pause : labels.play"
       round
       ghost
-      alignSelf="center"
       :aria-label="isPlaying ? labels.pause : labels.play"
       :class="['control', isPlaying ? 'pause' : 'play', 'large']"
       :icon="isPlaying ? 'bi-pause-fill' : 'bi-play-fill'"
@@ -46,7 +44,6 @@ const labels = computed(() => ({
       :aria-label="labels.next"
       round
       ghost
-      alignSelf="center"
       :disabled="!hasNext"
       class="control"
       icon="bi-skip-forward-fill"

front/src/style/components/_queue.scss

@@ -225,18 +225,30 @@
   }
 
   .player-controls {
+    display: flex;
     .control:not(:first-child) {
       margin-left: 1em;
     }
-    .icon {
-      font-size: 1.1em;
-    }
 
-    button {
-      padding: 0;
+    &.queue-controls .button {
+      width: 80px !important;
+      height: 80px !important;
+      background: transparent !important;
       border: none;
-      background-color: transparent;
-      color: inherit;
+      &:hover {
+        background: transparent;
+        i {
+          transform: scale(1.2);
+        }
+      }
+      &.large {
+        > i {
+          font-size: 4em;
+        }
+      }
+      > i {
+        font-size: 2em;
+      }
     }
   }
 
@@ -449,6 +461,11 @@
         font-size: 1.5rem;
         width: 54vh;
         max-width: 90%;
+        .position.bar {
+          position: relative;
+          bottom: 5px;
+          height: 5px;
+        }
       }
     }