feat(design): add focus style for cards

resources/assets/js/components/layout/main-wrapper/Sidebar.vue

@@ -151,10 +151,6 @@ eventBus.on('TOGGLE_SIDEBAR', () => (showing.value = !showing.value))
       letter-spacing: 1px;
       padding: 0 16px;
       margin-bottom: 12px;
-
-      i {
-        float: right;
-      }
     }
 
     a {

resources/assets/js/components/playlist/PlaylistSidebarItem.vue

@@ -146,6 +146,7 @@ eventBus.on('LOAD_MAIN_CONTENT', (view: MainViewName, _playlist: Playlist): void
 <style lang="scss" scoped>
 .playlist {
   user-select: none;
+  overflow: hidden;
 
   a {
     white-space: nowrap;

resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue

@@ -123,10 +123,6 @@ const removeRule = () => emit('remove')
   margin-left: .3rem;
 }
 
-button.remove-rule i {
-  margin-right: 0;
-}
-
 .value-wrapper {
   flex: 1;
   display: inline-flex;

resources/assets/js/components/screens/HomeScreen.vue

@@ -85,10 +85,6 @@ eventBus.on('LOAD_MAIN_CONTENT', async (view: MainViewName) => {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     grid-gap: .7em 1em;
-
-    ol, li {
-      overflow: hidden;
-    }
   }
 
   .recent {

resources/assets/js/components/song/SongCard.vue

@@ -72,6 +72,10 @@ article {
   border-radius: 5px;
   align-items: center;
 
+  &:focus, &:focus-within {
+    box-shadow: 0 0 1px 1px var(--color-highlight);
+  }
+
   &.playing {
     color: var(--color-highlight);
   }

resources/assets/js/components/song/SongListItem.vue

@@ -4,6 +4,7 @@
     class="song-item"
     data-testid="song-item"
     @dblclick.prevent.stop="play"
+    tabindex="0"
   >
     <span v-if="columns.includes('track')" class="track-number text-secondary">{{ song.track || '' }}</span>
     <span v-if="columns.includes('title')" class="title">{{ song.title }}</span>
@@ -65,20 +66,15 @@ const doPlayback = () => {
   height: 35px;
   display: flex;
 
+  &:focus, &:focus-within {
+    box-shadow: 0 0 1px 1px var(--color-highlight) inset;
+    border-radius: 4px;
+  }
+
   &:hover {
     background: rgba(255, 255, 255, .05);
   }
 
-  .play {
-    i {
-      font-size: 1.5rem;
-    }
-  }
-
-  .favorite .fa-heart, .favorite:hover .fa-heart-o {
-    color: var(--color-maroon);
-  }
-
   &.selected {
     background-color: rgba(255, 255, 255, .08);
   }

resources/assets/js/components/ui/Btn.vue

@@ -59,18 +59,8 @@ button {
     border-radius: 0;
   }
 
-  &[icon-only] {
-    i {
-      margin-right: 0;
-    }
-  }
-
   &[uppercase] {
     text-transform: uppercase;
   }
-
-  i {
-    margin-right: 4px;
-  }
 }
 </style>

resources/assets/sass/partials/_mixins.scss

@@ -49,8 +49,12 @@
       max-width: 100%;
     }
 
+    &:focus, &:focus-within {
+      box-shadow: 0 0 1px 1px var(--color-highlight);
+    }
+
     &:hover .right, &:focus-within .right {
-      display: block !important;
+      display: flex !important;
     }
 
     &.compact {
@@ -89,11 +93,19 @@
         display: none;
 
         @media (hover: none) {
-          display: block;
+          display: flex;
         }
 
-        a + a {
-          margin-left: 1rem;
+        gap: .3rem;
+
+        a {
+          padding: 0 4px;
+          border-radius: 3px;
+
+          &:hover {
+            background: var(--color-text-primary);
+            color: var(--color-bg-primary);
+          }
         }
       }
     }