Fixed a minor visual glitch in player controls after switch to fomantic

front/src/components/audio/Player.vue

@@ -78,7 +78,7 @@
           class="two wide column control"
           @click.prevent.stop="previous"
           :disabled="emptyQueue">
-            <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -87,7 +87,7 @@
           :aria-label="labels.play"
           @click.prevent.stop="togglePlay"
           class="two wide column control">
-            <i :class="['ui', 'play', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -96,7 +96,7 @@
           :aria-label="labels.pause"
           @click.prevent.stop="togglePlay"
           class="two wide column control">
-            <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
+            <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'icon']"></i>
         </span>
         <span
           role="button"
@@ -105,7 +105,7 @@
           class="two wide column control"
           @click.prevent.stop="next"
           :disabled="!hasNext">
-            <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'secondary', 'icon']" ></i>
+            <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" ></i>
         </span>
         <div
           class="wide column control volume-control"
@@ -118,7 +118,7 @@
             :title="labels.unmute"
             :aria-label="labels.unmute"
             @click.prevent.stop="unmute">
-            <i class="volume off secondary icon"></i>
+            <i class="volume off icon"></i>
           </span>
           <span
             role="button"
@@ -126,7 +126,7 @@
             :title="labels.mute"
             :aria-label="labels.mute"
             @click.prevent.stop="mute">
-            <i class="volume down secondary icon"></i>
+            <i class="volume down icon"></i>
           </span>
           <span
             role="button"
@@ -134,7 +134,7 @@
             :title="labels.mute"
             :aria-label="labels.mute"
             @click.prevent.stop="mute">
-            <i class="volume up secondary icon"></i>
+            <i class="volume up icon"></i>
           </span>
           <input
             type="range"
@@ -152,7 +152,7 @@
             :aria-label="labels.loopingDisabled"
             @click.prevent.stop="$store.commit('player/looping', 1)"
             :disabled="!currentTrack">
-            <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
+            <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i>
           </span>
           <span
             role="button"
@@ -162,7 +162,7 @@
             v-if="looping === 1"
             :disabled="!currentTrack">
             <i
-              class="repeat secondary icon">
+              class="repeat icon">
               <span class="ui circular tiny orange label">1</span>
             </i>
           </span>
@@ -174,7 +174,7 @@
             :disabled="!currentTrack"
             @click.prevent.stop="$store.commit('player/looping', 0)">
             <i
-              class="repeat orange secondary icon">
+              class="repeat orange icon">
             </i>
           </span>
         </div>
@@ -187,7 +187,7 @@
           @click.prevent.stop="shuffle()"
           class="two wide column control">
           <div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
-          <i v-else :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+          <i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
         </span>
         <div class="one wide column" v-if="!showVolume"></div>
         <span
@@ -199,8 +199,8 @@
           @click.prevent.stop="clean()"
           class="two wide column control">
           <i class="icons">
-            <i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
-            <i :class="['ui corner large inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+            <i :class="['ui', 'trash', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+            <i :class="['ui corner inverted', 'list', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
           </i>
         </span>
       </div>
@@ -820,7 +820,7 @@ export default {
   vertical-align: middle;
 }
 
-.secondary.icon {
+.control .icon {
   font-size: 1.5em;
 }
 .progress-area .actions {