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

This commit is contained in:
Eliot Berriot 2019-07-15 16:29:55 +02:00
parent 2abcb0898f
commit 0c15a608c3
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
1 changed files with 14 additions and 14 deletions

View File

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