Fixed a minor visual glitch in player controls after switch to fomantic
This commit is contained in:
parent
2abcb0898f
commit
0c15a608c3
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue