chore: use :deep and :slotted properly

resources/assets/js/components/album/AlbumInfo.vue

@@ -76,7 +76,7 @@ const play = async () => {
   .track-listing {
     margin-top: 2rem;
 
-    ::v-deep(h1) {
+    :deep(h1) {
       margin-bottom: 1.2rem;
     }
   }

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

@@ -194,7 +194,7 @@ const logout = () => eventBus.emit('LOG_OUT')
     }
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     position: relative;
     display: flex;
     align-items: center;

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

@@ -187,17 +187,17 @@ nav {
     flex: 1;
   }
 
-  ::v-deep(h1) {
+  :deep(h1) {
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 12px;
   }
 
-  ::v-deep(a svg) {
+  :deep(a svg) {
     opacity: .7;
   }
 
-  ::v-deep(a) {
+  :deep(a) {
     display: flex;
     align-items: center;
     gap: .7rem;
@@ -230,7 +230,7 @@ nav {
     }
   }
 
-  ::v-deep(li li a) { // submenu items
+  :deep(li li a) { // submenu items
     padding-left: 11px;
 
     &:active {

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

@@ -139,7 +139,7 @@ router.onRouteChanged(route => {
     cursor: copy;
   }
 
-  ::v-deep(a) {
+  :deep(a) {
     span {
       pointer-events: none;
     }

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

@@ -12,7 +12,7 @@
   width: 560px;
 }
 
-::v-deep(.rules) {
+:slotted(.rules) {
   background: rgba(0, 0, 0, .1);
   border: 1px solid rgba(255, 255, 255, .1);
   padding: .75rem;

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

@@ -61,7 +61,7 @@ eventBus.on('PLAY_YOUTUBE_VIDEO', (payload: { id: string, title: string }) => {
 </script>
 
 <style lang="scss" scoped>
-::v-deep(#player) {
+:deep(#player) {
   height: 100%;
   flex: 1;
   display: flex;

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

@@ -188,7 +188,7 @@ const createNewPlaylistFromSongs = async () => {
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--color-bg-secondary);
+    border-bottom: 10px solid var(--color-bg-primary);
     position: absolute;
     top: -7px;
     left: calc(50% - 10px);

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

@@ -80,7 +80,7 @@ article {
       opacity: 1;
     }
 
-    ::v-deep(.cover) {
+    :deep(.cover) {
       .control {
         display: flex;
       }
@@ -92,7 +92,7 @@ article {
   }
 
   // show the thumbnail's playback control on the whole card focus and hover
-  &:hover ::v-deep(.cover), &:focus ::v-deep(.cover) {
+  &:hover :deep(.cover), &:focus :deep(.cover) {
     .control {
       display: flex;
     }

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

@@ -53,11 +53,15 @@ const onContextMenu = (e: MouseEvent) => emit('contextmenu', e)
     gap: 0.5rem;
     white-space: nowrap;
 
-    ::v-deep(a:link) {
+    &:deep(a) {
       color: var(--color-text-primary);
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    &:deep(a:hover), &:deep(a:active), &:deep(a:focus) {
+      color: var(--color-accent);
+    }
   }
 
   &:focus, &:focus-within {
@@ -92,7 +96,7 @@ const onContextMenu = (e: MouseEvent) => emit('contextmenu', e)
     gap: .3rem;
     opacity: .7;
 
-    ::v-deep(a) {
+    :deep(a) {
       & + a {
         &::before {
           content: '•';

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

@@ -13,7 +13,7 @@
 </script>
 
 <style lang="scss" scoped>
-::v-deep(.tabs) {
+:deep(.tabs) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -21,7 +21,7 @@
   color: var(--color-text-secondary);
 }
 
-::v-deep(header) {
+:deep(header) {
   display: flex;
   background: rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -53,7 +53,7 @@
   }
 }
 
-::v-deep(main) {
+:deep(main) {
   flex: 1;
   overflow: auto;
 }

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

@@ -12,7 +12,7 @@
   position: relative;
   flex-wrap: nowrap;
 
-  ::v-deep(button) {
+  :deep(button) {
     &:not(:first-child) {
       border-radius: 0;
     }
@@ -30,7 +30,7 @@
     }
   }
 
-  &[uppercased] ::v-deep(button) {
+  &[uppercased] :deep(button) {
     text-transform: uppercase;
   }
 }

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

@@ -115,7 +115,7 @@ header.screen-header {
       }
     }
 
-    > ::v-deep(* + *) {
+    > :slotted(* + *) {
       margin-left: .2rem;
       display: inline-block;