CSS Fixes for PPE button

This commit is contained in:
Core 2022-02-06 18:24:59 +00:00
parent 0131a1a70a
commit d08b2966d0
No known key found for this signature in database
GPG key ID: FE9BF1B547F8F3C6
2 changed files with 38 additions and 39 deletions

View file

@ -1126,51 +1126,53 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
width: 100%;
}
.app-chrome .app-chrome-item > .app-playback-controls .song-name {
font-weight: 600;
text-align: center;
font-size: 13px;
height: 1.3em;
line-height: 1.3em;
white-space: nowrap;
max-width: 360px;
.app-chrome .app-chrome-item > .app-playback-controls {
.song-name {
font-weight: 600;
text-align: center;
font-size: 13px;
height: 1.3em;
line-height: 1.3em;
white-space: nowrap;
max-width: 360px;
.song-name-normal {
height: inherit;
}
.song-name-normal {
height: inherit;
}
&.song-artist-marquee {
> marquee {
//margin-bottom: -3px;
&.song-artist-marquee {
> marquee {
//margin-bottom: -3px;
}
}
.explicit-icon {
background-image: url("./assets/explicit.svg");
height: 9px;
width: 13px;
filter: contrast(0);
background-repeat: no-repeat;
margin-left: 3px;
}
}
.explicit-icon {
background-image: url("./assets/explicit.svg");
height: 9px;
width: 13px;
filter: contrast(0);
background-repeat: no-repeat;
margin-left: 3px;
}
.lossless-icon {
background-image: url("http://localhost:9000/assets/lossless.svg");
height: 9px;
width: 36px;
filter: contrast(0);
background-repeat: no-repeat;
margin-left: 3px;
background-size: contain;
background-image: url("./assets/lossless.svg") !important;
}
.ppe-icon {
background-image: url("./assets/ppe.svg");
height: 12px;
width: 13px;
background-image: url("./assets/ppe.svg") !important;
}
.audio-type {
filter: contrast(0);
background-repeat: no-repeat;
background-size: contain;
height: 15px;
width: 15px;
position: absolute;
right: 0;
margin-bottom: 15px;
}
}

View file

@ -50,17 +50,14 @@
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="song-name" style="-webkit-box-orient: horizontal;"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
:style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' || mk.nowPlayingItem['attributes']['lossless'] == true ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
<div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
{{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div>
<div class="ppe-icon"
v-if="app.cfg.advanced.ciderPPE == true"
style="display: inline-block"></div>
</div>
<div class="audio-type ppe-icon" v-if="app.cfg.advanced.ciderPPE == true"></div>
<div class="song-artist-album">
<div class="song-artist-album-content"
:class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"