diff --git a/src/layouts/default/PlayerOSD/PlayerFullscreen.vue b/src/layouts/default/PlayerOSD/PlayerFullscreen.vue index 247d6dc46..870533df5 100644 --- a/src/layouts/default/PlayerOSD/PlayerFullscreen.vue +++ b/src/layouts/default/PlayerOSD/PlayerFullscreen.vue @@ -69,7 +69,6 @@ store.activePlayer?.powered != false && store.activePlayer?.current_media?.image_url " - style="max-width: 100%; width: auto" :src=" getMediaImageUrl(store.activePlayer.current_media.image_url) " @@ -177,7 +176,7 @@ store.activePlayer?.powered != false && store.curQueueItem?.streamdetails " - style="margin: auto; padding-top: min(20px, 2vh)" + style="padding-top: min(20px, 2vh)" > @@ -379,7 +378,6 @@
{ case "xs": return "1.2em"; case "sm": - return "1.4em"; + return "1.5em"; case "md": - return "2em"; + return "1.7em"; case "lg": - return store.showQueueItems ? "1.5em" : "2.5em"; + return store.showQueueItems ? "1.5em" : "2em"; case "xl": - return store.showQueueItems ? "1.6em" : "3em"; + return store.showQueueItems ? "1.6em" : "2.2em"; case "xxl": - return store.showQueueItems ? "1.7em" : "3.2em"; + return store.showQueueItems ? "1.7em" : "2.4em"; default: - return "1.0em."; + return "1.0em"; } }); @@ -758,17 +756,17 @@ const subTitleFontSize = computed(() => { case "xs": return "1.05em"; case "sm": - return "1.15em"; + return "1.25em"; case "md": - return "1.7em"; + return "1.35em"; case "lg": - return store.showQueueItems ? "1.0em" : "1.6em"; + return store.showQueueItems ? "1.1em" : "1.45em"; case "xl": - return store.showQueueItems ? "1.2em" : "2em"; + return store.showQueueItems ? "1.2em" : "1.6em"; case "xxl": - return store.showQueueItems ? "1.2em" : "2em"; + return store.showQueueItems ? "1.3em" : "1.8em"; default: - return "1.0em."; + return "1.0em"; } }); @@ -1476,10 +1474,13 @@ watchEffect(() => { padding-bottom: 5px; } -.main-media-details { +.main .main-media-details { flex: 50%; max-width: 100%; width: 50%; + height: 100%; + display: flex; + flex-direction: column; } .main-queue-items { @@ -1503,21 +1504,26 @@ watchEffect(() => { min-height: 50%; max-height: 80%; height: 60%; - align-content: center; + display: flex; + justify-content: center; + align-items: center; padding-left: 20px; padding-right: 20px; + container-type: size; } .main-media-details-image .v-img { - width: auto; + width: min(100cqi, 100cqh); + height: min(100cqi, 100cqh); + flex: 0 0 auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + overflow: hidden; } .main-media-details-image-alt { height: 100% !important; max-height: 100% !important; - align-content: center; - padding: 0px !important; + padding: 10px !important; } .main-media-details-track-info { @@ -1538,6 +1544,7 @@ watchEffect(() => { bottom: 0; position: unset !important; padding-bottom: 5%; + width: 100%; } .track-info {