refactor table css

src/library/TrackList.vue

@@ -2,7 +2,7 @@
   <div>
     <table class="table table-hover table-borderless">
       <thead>
-        <tr class="text-muted text-uppercase" style="font-size: 80%;">
+        <tr>
           <th class="pl-0 pr-0 text-center">
             #
           </th>
@@ -27,7 +27,7 @@
         <tr
           v-for="(item, index) in tracks"
           :key="index"
-          :class="{'current-track': item.id === playingTrackId}"
+          :class="{'active': item.id === playingTrackId}"
           :draggable="true"
           @dragstart="dragstart(item.id, $event)"
         >
@@ -35,7 +35,7 @@
               style="min-width: 20px; max-width: 20px;"
               @click="play(index)">
             <template v-if="item.id === playingTrackId">
-              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary" />
+              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" />
             </template>
             <template v-else>
               <span class="track-number">{{ item.track || 1 }}</span>
@@ -80,11 +80,6 @@
   .track-number-hover {
     display: none;
   }
-  .current-track {
-    td, a {
-      color: var(--primary);
-    }
-  }
   tr:hover {
     .track-number-hover {
       display: inline;

src/style/main.scss

@@ -37,7 +37,6 @@ $input-color: $theme-text;
 
 // Other
 $progress-bg: rgb(35, 35, 35);
-$table-hover-bg: rgba(#fff, .1);
 
 :root {
   --text-muted: #{$theme-text-muted};
@@ -65,6 +64,7 @@ h1, h2, h3, h4, h5 {
 }
 
 @import './nav';
+@import './table';
 
 $enable-print-styles: false;
 $enable-responsive-font-sizes: true;

src/style/table.scss

@@ -0,0 +1,13 @@
+$table-hover-bg: rgba(#fff, .1);
+
+table thead tr {
+  font-size: 80%;
+  text-transform: uppercase;
+  color: $theme-text-muted;
+}
+
+table tr.active {
+  td, td a, td svg {
+    color: var(--primary);
+  }
+}