hide album/artist name when hovered over nowPlayingItem

This commit is contained in:
Jason Chen 2022-01-18 22:53:41 -08:00
parent 0b4d771d23
commit e0f1fcc795
2 changed files with 49 additions and 6 deletions

View file

@ -827,12 +827,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px;
}
.app-chrome-item.volume-icon {
opacity: 0.7;
.volume-button {
background-image: url("./assets/feather/volume-2.svg");
height: 15px;
width: 30px;
padding: 0px;
background: transparent;
border: 0px;
border-radius: 0px;
box-shadow: unset;
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.70;
border-radius: 6px;
}
.volume-button:active, .volume-button--small:active {
transform: scale(0.9);
}
.volume-button.active, .volume-button--small.active {
background-image: url("./assets/feather/volume.svg");
}
.volume-button--small {
border-radius: 6px;
color: inherit;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
height: 15px;
width: 30px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
background-image: url("./assets/feather/volume-2.svg");
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
@ -3980,6 +4011,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 5vh;
justify-content: space-evenly;
.volume {
background-image: url("./assets/feathers/volume.svg");
padding: 0.5vh;
width: 2vh;
height: 2vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.queue {
background-image: url("./assets/list.svg");
padding: 0.5vh;
@ -4043,6 +4083,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.song-artist {
font-size: 0.875em;
font-weight: 400;
}
.song-name {

View file

@ -87,12 +87,14 @@
</div>
<div class="song-artist "
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block;"
<div class="item-navigate song-artist" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'} ]"
@click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')">
<div class="song-artist item-navigate" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'}]"
@click="getNowPlayingItemDetailed('album')">
<div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@ -127,7 +129,7 @@
</div>
<div class="app-chrome--right">
<div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div>
<button class="volume-button--small volume"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">