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 {