Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add volume icon

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-25 10:37:48 +01:00
parent cfbd9403ba
commit 01271bb14d
1 changed files with 13 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Player.vue
View File

@ -7,7 +7,8 @@
class="player" class="player"
:class="player.isPlaying ? 'pause' : 'play'" /> :class="player.isPlaying ? 'pause' : 'play'" />
</div> </div>
<div id="volumeicon" class="full" /> <div class="volumeIcon volumeFull
" />
<input <input
class="volume" class="volume"
type="range" type="range"
@ -18,7 +19,6 @@
:value="player.volume" :value="player.volume"
@input="changeVolume($event)"> @input="changeVolume($event)">
<span class="stationMetadata" /> <span class="stationMetadata" />
{{ player.volume }}
</div> </div>
</template> </template>
@ -91,29 +91,19 @@ export default {
overflow:hidden; overflow:hidden;
} }
#volumeicon { .volumeIcon {
width: 20px; width: 25px;
height: 20px; height: 25px;
background-size: contain;
background-repeat: no-repeat;
position: relative; position: relative;
left: 75px; left: 85px;
top: 14px; top: 20px;
} }
#volumeicon.full { .volumeFull {
background: red; background-color: #0082c9;
/* background-image: url('../img/sound_full.png'); */ mask-repeat: no-repeat;
} mask-size: 100%;
mask-image: var(--icon-sound-000);
#volumeicon.mid {
background: yellow;
/* background-image: url('../img/sound_mid.png'); */
}
#volumeicon.silent {
background: green;
/* background-image: url('../img/sound_silent.png'); */
} }
.volume{ .volume{
@ -121,7 +111,7 @@ export default {
display: inline-block; display: inline-block;
position: relative; position: relative;
left: 40px; left: 40px;
top: -7px; top: -12px;
} }
</style> </style>