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,7 +1126,8 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
width: 100%; width: 100%;
} }
.app-chrome .app-chrome-item > .app-playback-controls .song-name { .app-chrome .app-chrome-item > .app-playback-controls {
.song-name {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
@ -1153,24 +1154,25 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
background-repeat: no-repeat; background-repeat: no-repeat;
margin-left: 3px; margin-left: 3px;
} }
}
.lossless-icon { .lossless-icon {
background-image: url("http://localhost:9000/assets/lossless.svg"); background-image: url("./assets/lossless.svg") !important;
height: 9px;
width: 36px;
filter: contrast(0);
background-repeat: no-repeat;
margin-left: 3px;
background-size: contain;
} }
.ppe-icon { .ppe-icon {
background-image: url("./assets/ppe.svg"); background-image: url("./assets/ppe.svg") !important;
height: 12px; }
width: 13px;
.audio-type {
filter: contrast(0); filter: contrast(0);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; 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> <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div> </div>
<div class="playback-info"> <div class="playback-info">
<div class="song-name" style="-webkit-box-orient: horizontal;" <div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']" :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'} ]">
{{ mk.nowPlayingItem["attributes"]["name"] }} {{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon" <div class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div> style="display: inline-block"></div>
<div class="ppe-icon"
v-if="app.cfg.advanced.ciderPPE == true"
style="display: inline-block"></div>
</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">
<div class="song-artist-album-content" <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' : '']" :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"