New: Made the clear logo position from bottom configurable on desktop using a variable

New: Moved content up on some more pages
dev: Live TV icons should be visible now ee5ad227d0
dev: rearranged the code

Theme/ElegantFin-theme-nightly.css

@@ -1,7 +1,7 @@
 /* ElegantFin Theme for Jellyfin by lscambo13 */
 
 /* Add-ons: Uncomment to enable */
-/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
+/* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
 /* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */
 
 /* Inter Font Family */
@@ -16,6 +16,7 @@
     --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
     --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
+    --gradientPointAlpha: rgba(29, 38, 53, 0.3);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
 
@@ -90,8 +91,10 @@
 
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
+
     --primaryItemPageNegativeSpace: 14vh;
-    --secondaryItemPageNegativeSpace: 35vh;
+    --secondaryItemPageNegativeSpace: 60vh;
+    --clearLogoBottomSpace: 11em;
 
     --blurSmallest: blur(2px);
     --blurDefault: blur(5px);
@@ -171,6 +174,7 @@ html {
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+    --secondaryItemPageNegativeSpace: 45vh;
 }
 
 /* Material Icons Round */
@@ -936,10 +940,10 @@ html {
     background-color: transparent;
 }
 
-/* this removes the extra large left paading on 10.11.0 */
+/* this removes the extra large left padding on 10.11.0 */
 .detailPagePrimaryContainer>.detailPagePrimaryContent,
 [dir=ltr] .detailPagePrimaryContainer>.detailRibbon,
-/* this removes the extra large left paading on pre-10.11.0 */
+/* this removes the extra large left padding on pre-10.11.0 */
 [dir=ltr] .detailPagePrimaryContainer.detailRibbon {
     padding-left: var(--sidePadding);
 }
@@ -1000,6 +1004,7 @@ html {
     margin: 0 calc(-1 * var(--sidePadding));
     padding: 0 var(--sidePadding);
     padding-left: calc(var(--sidePadding) - 0.375em);
+    /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }
 
 .layout-desktop .emby-scroller-container,
@@ -1069,6 +1074,7 @@ html {
     transform: translateY(-0.15em);
     font-weight: 600;
     border: var(--defaultBorder);
+    color: var(--textColor);
 }
 
 .starIcon {
@@ -1088,17 +1094,16 @@ html {
     content: "%";
 }
 
-.layout-desktop .detailRibbon {
-    height: 100%;
-    min-height: 30vh;
-    margin-top: unset;
+.detailRibbon:has(.portraitCard .folder) {
+    min-height: 32vh;
+    align-content: flex-end;
 }
 
-/* test disabled for 10.11.0 */
-/* .layout-desktop [dir=ltr] .detailPagePrimaryContainer,
-.layout-tv [dir=ltr] .detailPagePrimaryContainer {
-    padding-left: var(--sidePadding);
-} */
+.layout-desktop .detailRibbon {
+    height: 100%;
+    min-height: 25vh;
+    margin-top: unset;
+}
 
 @keyframes animMoveDown {
     from {
@@ -1136,9 +1141,63 @@ html {
     }
 }
 
+/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
+/* .videoPlayerContainer {
+    position: relative !important;
+    -webkit-mask: var(--themeVideoPlayerMask);
+    mask: var(--themeVideoPlayerMask);
+    height: 90vh;
+}
+
+.layout-mobile .videoPlayerContainer {
+    z-index: 1;
+    height: 35vh;
+}
+
+.videoPlayerContainer>.htmlvideoplayer {
+    width: -webkit-fill-available;
+    object-fit: cover;
+} */
+
+.itemBackdrop {
+    display: block !important;
+}
+
+.layout-desktop .itemBackdrop {
+    height: calc(100vh - 27vh - var(--primaryItemPageNegativeSpace));
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: 0;
+    position: sticky;
+    top: -30%;
+    -webkit-mask: var(--itemBackdropMask);
+    mask: var(--itemBackdropMask);
+    animation: animMoveDown 0.5s ease-out forwards;
+    height: 45vh;
+}
+
+.layout-tv .itemBackdrop {
+    height: 33vh;
+}
+
+#itemDetailPage:has(.subtitle) .itemBackdrop,
+#itemDetailPage:has(.musicParentName) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .live_tv) .itemBackdrop {
+    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+}
+
+#itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
+    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+}
+
 .detailLogo {
     display: var(--clearLogoVisibility);
-    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
+    top: calc(100vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
     transform: translateY(-100%);
@@ -1159,46 +1218,6 @@ html {
     animation: animMoveUp 1s ease-out forwards;
 }
 
-.itemBackdrop {
-    display: block !important;
-}
-
-/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
-/* .videoPlayerContainer {
-    position: relative !important;
-    -webkit-mask: var(--themeVideoPlayerMask);
-    mask: var(--themeVideoPlayerMask);
-    height: 90vh;
-}
-
-.layout-mobile .videoPlayerContainer {
-    z-index: 1;
-    height: 35vh;
-}
-
-.videoPlayerContainer>.htmlvideoplayer {
-    width: -webkit-fill-available;
-    object-fit: cover;
-} */
-
-.layout-desktop .itemBackdrop {
-    height: calc(100vh - 32vh - var(--primaryItemPageNegativeSpace)) !important;
-}
-
-.layout-mobile .itemBackdrop {
-    margin-top: 0;
-    position: sticky;
-    top: -30%;
-    -webkit-mask: var(--itemBackdropMask);
-    mask: var(--itemBackdropMask);
-    animation: animMoveDown 0.5s ease-out forwards;
-    height: 45vh;
-}
-
-.layout-mobile #itemDetailPage:has(.detailLogo.hide) .itemBackdrop {
-    margin-bottom: -10vh;
-}
-
 .layout-tv .detailLogo {
     display: var(--clearLogoVisibility);
     height: 20vh;
@@ -1208,22 +1227,16 @@ html {
     margin: auto 5vw;
 }
 
-.layout-tv .itemBackdrop {
-    height: 33vh;
+#itemDetailPage:has(.subtitle) .detailLogo {
+    top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }
 
-/* .detailImageContainer.padded-left {
-    padding-left: 0;
-} */
-
-/* .layout-tv .detailImageContainer .card {
-    padding-left: var(--sidePadding);
-
-    position: fixed;
-} */
+.layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
+    top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
+}
 
 .layout-desktop .detailImageContainer .card {
-    position: absolute !important;
+    position: relative !important;
     width: 22vh !important;
     float: none;
     left: 0 !important;
@@ -1232,12 +1245,6 @@ html {
     margin: auto;
     margin-bottom: 0;
     place-self: center;
-    transform: translateY(-80%);
-}
-
-.layout-desktop .detailImageContainer .backdropCard,
-.layout-desktop .detailImageContainer .squareCard {
-    transform: translateY(-100%);
 }
 
 .detailImageContainer .card.backdropCard {
@@ -1303,11 +1310,10 @@ html {
     margin-top: 0.5em;
 }
 
-/* this hides the media card when detail logo is visible */
-.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person),
-#itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo {
+/* this hides the detail logo  when media card is visible */
+#itemDetailPage:has(.detailImageContainer .backdropCard) .detailLogo,
+#itemDetailPage:has(.detailImageContainer .album) .detailLogo,
+#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
     z-index: 2;
     display: none;
 }
@@ -1344,31 +1350,30 @@ html {
     background-color: var(--lighterGradientPointAlpha);
 }
 
-/* this shows the poster in the cast, book and music pages */
-.detailImageContainer .card:has(.book, .person, .album),
-.detailImageContainer .card.backdropCard:has(.tv),
-.detailImageContainer .card.backdropCard:has(.movie),
-.detailImageContainer .card.backdropCard:has(.live_tv) {
+/* this shows the poster in the cast, book, live tv and other pages */
+.detailImageContainer > .backdropCard,
+.detailImageContainer > .squareCard,
+.detailImageContainer > .card:has(.book),
+.detailImageContainer > .card:has(.person),
+.detailImageContainer > .card:has(.album),
+.detailImageContainer > .card:has(.queue),
+.detailImageContainer > .card:has(.live_tv) {
     display: block;
 }
 
-/* This reduces the top padding in the cast, live tv, episode, song, album and artist pages i.e. shifts up page content */
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book)
-    .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.live_tv) .itemBackdrop {
-    height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
+/* this hides artist's poster */
+.detailImageContainer .squareCard:has(.person) {
+    display: none;
 }
 
-#itemDetailPage:has(.detailImageContainer .card.backdropCard),
-#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
+#itemDetailPage:has(.subtitle),
+#itemDetailPage:has(.musicParentName) {
     background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
 }
 
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
+.layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.subtitle) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.musicParentName) .itemBackdrop {
     animation: animMoveDownSecondaryPage 0.5s ease-out forwards;
 }
 
@@ -2281,7 +2286,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     flex-direction: row;
 }
 
-.btnPlay:not(.formDialogFooterItem):after {
+.btnPlay:not(.formDialogFooterItem):not(.play-button):after {
     content: attr(title);
     padding: 0 1ch;
 }
@@ -2585,7 +2590,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 25% 1fr 1fr 1fr;
     margin-bottom: 1.5em;
 }
 
@@ -3140,35 +3145,41 @@ div[data-role="controlgroup"] a.ui-btn-active {
     flex-direction: row-reverse;
 }
 
-.infoWrapper h1.itemName,
-.infoWrapper h1.parentName {
+.nameContainer > h3,
+.nameContainer > h1 {
+    word-break: break-word;
+    overflow: hidden;
+}
+
+.nameContainer > h1.itemName,
+.nameContainer > h1.parentName {
     font-size: 4em;
     white-space: pre-wrap;
     padding-bottom: 0.5ch;
     color: white;
 }
 
-.infoWrapper h1.itemName,
-.infoWrapper h1.parentName,
-.infoWrapper h1.itemName a,
-.infoWrapper h1.parentName a {
+.nameContainer > h1.itemName,
+.nameContainer > h1.parentName,
+.nameContainer > h1.itemName a,
+.nameContainer > h1.parentName a {
     font-weight: 200;
 }
 
-.infoWrapper h1.itemName bdi,
-.infoWrapper h1.parentName bdi,
-.infoWrapper h1.itemName a,
-.infoWrapper h1.parentName a {
-    /* overflow: hidden; */
+.nameContainer > h1.itemName bdi,
+.nameContainer > h1.parentName bdi,
+.nameContainer > h1.itemName a,
+.nameContainer > h1.parentName a {
+    overflow: hidden;
     display: -webkit-box !important;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;
 }
 
-.layout-mobile .infoWrapper h1.itemName,
-.layout-mobile .infoWrapper h1.parentName,
-.layout-mobile .infoWrapper h1.parentNameLast {
+.layout-mobile .nameContainer > h1.itemName,
+.layout-mobile .nameContainer > h1.parentName,
+.layout-mobile .nameContainer > h1.parentNameLast {
     font-size: 2em;
     word-wrap: break-word;
     padding-bottom: 0ch;
@@ -3181,6 +3192,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .layout-mobile .subtitle {
     font-size: 1.5em;
+    padding-bottom: 0.5em;
 }
 
 .itemName.originalTitle {
@@ -3840,8 +3852,13 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
+.nowPlayingPage {
+    background: linear-gradient(var(--darkerGradientPointAlpha), transparent);
+}
+
 .remoteControlContent {
     padding: 0 var(--sidePadding) !important;
+    background: linear-gradient(transparent, var(--darkerGradientPointAlpha) 20em);
 }
 
 /* .layout-tv *,
@@ -3869,3 +3886,41 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 .layout-tv .show-animation:focus {
     transform: none !important;
 }
+
+/* basic styling for the Media Bar Plugin - start
+for extended styling, use the add-on */
+
+#slides-container {
+    top: calc(-0.5 * var(--appBarHeight));
+}
+
+.backdrop-overlay {
+    background: linear-gradient(
+        var(--lighterGradientPoint),
+        var(--gradientPointAlpha),
+        60%,
+        var(--darkerGradientPointAlpha)
+    );
+}
+
+.plot {
+    color: var(--textColor);
+    text-shadow: 1px 1px var(--lighterGradientPointAlpha);
+}
+
+.button-container {
+    align-items: center;
+}
+
+.favorite-button {
+    background: none;
+    color: var(--textColor);
+}
+
+.detail-button:hover,
+.favorite-button:hover {
+    background: var(--dimTextColor);
+    color: black;
+}
+
+/* basic styling for the Media Bar Plugin - end */

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -1,20 +1,5 @@
 /* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
-.button-container {
-    align-items: center;
-}
-
-.favorite-button {
-    background: none;
-    color: var(--textColor);
-}
-
-.detail-button:hover,
-.favorite-button:hover {
-    background: var(--dimTextColor);
-    color: black;
-}
-
 .play-button::before,
 .detail-button::before,
 .favorite-button::before,
@@ -23,7 +8,7 @@
 }
 
 .play-button {
-    font-family: 'Inter';
+    font-family: "Inter";
     font-size: 1em;
     font-weight: 500;
 }
@@ -31,8 +16,8 @@
 .backdrop,
 .backdrop-container,
 .backdrop-overlay {
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
     background-color: transparent;
 }
 
@@ -40,7 +25,6 @@
     transform-origin: center left;
 }
 
-/* this is my own take */
 .rating-value {
     flex-wrap: wrap;
     justify-content: center;
@@ -53,21 +37,13 @@
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: calc(1.5 * var(--appBarHeight));
+    top: var(--appBarHeight);
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
-    transition: all .125s, border 0s;
+    transition: all 0.125s, border 0s;
     user-select: none;
 }
 
-.layout-tv #slides-container {
-    top: 0em;
-}
-
-.layout-mobile #slides-container {
-    top: 10em;
-}
-
 .logo-container {
     top: 10vh;
 }
@@ -80,7 +56,7 @@
 }
 
 .backdrop-overlay {
-    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
@@ -89,10 +65,6 @@
         transform: translateX(-50%) scale(0.8);
     }
 
-    .info-container {
-        /* top: calc(50% + 6vh); */
-    }
-
     .tomato-rating {
         display: none;
     }
@@ -108,7 +80,7 @@
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(.5 * var(--appBarHeight));
+        top: calc(0.5 * var(--appBarHeight));
     }
 }