RELEASE: ElegantFin v25.11.25

README.md

@@ -205,7 +205,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 </details>
 
 <details>
-  <summary><i>7. Enable experimental support for the Media Bar plugin</i></summary>
+  <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
 
@@ -217,6 +217,23 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - To undo this change, simply remove this code block.
 </details>
 
+<details>
+  <summary><i>8. Switch between different app bar styles</i></summary>
+
+  https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+
+- You can switch between these using `--appBarHeight`.
+- Use 5em to enable the fading app bar (seamless) (default);
+- Or, use 4.6em to get the solid app bar (cleaner with border)
+```
+:root{
+  /* example */
+  --appBarHeight: 4.6em;
+}
+```
+- To undo this change, simply remove this code block.
+</details>
+
 <hr>
 
 ### 🆗 Tested on 
@@ -231,7 +248,10 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
 - Check the version number at the bottom in the Settings screen. 
-- It should be something like `ElegantFin v25.10.XX`.
+- It should be something like `ElegantFin v25.XX.XX`.
+
+  <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
+
 </details>
 
 <details>
@@ -241,7 +261,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - Once that cache is updated, the new version will be loaded automatically. 
 - There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
 - On the web version, you can force a hard refresh of the page using CTRL + F5.
-- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
+- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
 </details>
 
 <details>

Theme/ElegantFin-theme-nightly.css

@@ -92,9 +92,6 @@
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
 
-    --primaryItemPageNegativeSpace: 14vh;
-    --secondaryItemPageNegativeSpace: 60vh;
-    --clearLogoBottomSpace: 11em;
     --minEpisodeCardWidth: 26em;
 
     --blurSmallest: blur(2px);
@@ -157,9 +154,9 @@
        use 4.6em to get the solid app bar (cleaner with border) */
     --appBarHeight: 5em;
 
-    /* use 50% to crop the top of the backdrop image slightly (recommended) [default]; 
-       use 0% to prevent the cropping from top, or choose between 0% and 100% according to your preference */
-    --backdropPositionY: 50%;
+    /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
+       use a figure between 0% and 20% according to your liking */
+    --backdropTrimFromTop: 10%;
 }
 
 html {
@@ -170,11 +167,25 @@ html {
     -webkit-tap-highlight-color: transparent !important;
 }
 
+body {
+    --primaryItemPageNegativeSpace: 14vh;
+    --secondaryItemPageNegativeSpace: 60vh;
+    --clearLogoBottomSpace: 11em;
+}
+
+.layout-desktop > body:has(> audio[src]) {
+    --primaryItemPageNegativeSpace: calc(14vh + 5em);
+    --secondaryItemPageNegativeSpace: calc(60vh + 5em);
+}
+
 .layout-mobile {
     --itemColumnGap: 0;
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+}
+
+.layout-mobile > body {
     --secondaryItemPageNegativeSpace: 45vh;
 }
 
@@ -392,7 +403,7 @@ html {
     background: rgba(255, 255, 255, 0.05);
 }
 
-.card-hoverable .cardOverlayContainer:after {
+.cardOverlayContainer:after {
     content: var(--cardHoverEffect);
     transition: 0.5s;
     position: absolute;
@@ -494,7 +505,7 @@ html {
     color: white;
 }
 
-.cardOverlayContainer:has(.cardOverlayButton:hover) {
+.cardOverlayContainer:has(> button:hover) {
     backdrop-filter: var(--blurDefault);
 }
 
@@ -509,63 +520,53 @@ html {
 
 /* episode grid start */
 
-.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
-    gap: var(--itemColumnGap);
-}
+@supports (display: revert) {
+    .vertical-list:has(.listItem-largeImage) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
+        gap: var(--itemColumnGap);
+    }
 
-/* @media (max-width: 64em) {
-    .layout-desktop .listItemImage-large {
+    .layout-desktop .listItem-largeImage {
+        display: grid;
+        margin-bottom: 0 !important;
+    }
+
+    .layout-desktop .listItem-largeImage > .listItem-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 2em;
+        order: 1;
+        height: 100%;
+        align-items: start;
+    }
+
+    .layout-desktop .listItem-largeImage > .listItem-bottomoverview {
+        order: 2;
+    }
+
+    .layout-desktop .listItem-largeImage .listItemImage-large {
+        order: 1;
+        grid-column: 1 / -1;
+        height: max-content;
+        min-height: 15em;
         width: 100%;
+        aspect-ratio: 16 / 9;
+        box-sizing: border-box;
     }
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(2, 1fr);
+
+    .layout-desktop .listItem-largeImage .listItemBody {
+        order: 2;
+        grid-column: 1 / 3;
+        padding: 1em 0.125em;
     }
-} */
 
-.layout-desktop .listItem-largeImage {
-    display: grid;
-    margin-bottom: 0 !important;
-}
-
-.layout-desktop .listItem-largeImage > .listItem-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr 2em;
-    order: 1;
-    height: 100%;
-    align-items: start;
-}
-
-.layout-desktop .listItem-largeImage > .listItem-bottomoverview {
-    order: 2;
-}
-
-.layout-desktop .listItem-largeImage .listItemImage-large {
-    order: 1;
-    grid-column: 1 / -1;
-    height: max-content;
-    min-height: 15em;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    /* margin: 0 !important; */
-    box-sizing: border-box;
-}
-
-.layout-desktop .listItem-largeImage .listItemBody {
-    order: 2;
-    grid-column: 1 / 3;
-    padding: 1em 0.125em;
-}
-
-.layout-desktop .listItem-largeImage .listViewUserDataButtons {
-    flex-direction: column;
-    font-size: small;
-    order: 2;
-    grid-column: 3;
-    align-self: center;
+    .layout-desktop .listItem-largeImage .listViewUserDataButtons {
+        flex-direction: column;
+        font-size: small;
+        order: 2;
+        grid-column: 3;
+        align-self: center;
+    }
 }
 
 /* episode grid end */
@@ -1252,7 +1253,7 @@ html {
 }
 
 #itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
-    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+    height: calc(100vh - 20vh - var(--secondaryItemPageNegativeSpace));
 }
 
 .detailLogo {
@@ -1503,7 +1504,7 @@ html,
 }
 
 .backdropImage {
-    background-position-y: var(--backdropPositionY);
+    background-position-y: clamp(0%, calc(var(--backdropTrimFromTop) * 5), 100%);
 }
 
 .backdropImage:after,
@@ -2187,10 +2188,6 @@ progress + span {
     }
 }
 
-.layout-tv .emby-checkbox:focus + span + .checkboxOutline {
-    transform: scale(1.75);
-}
-
 .cardIndicators {
     -webkit-align-items: center;
     align-items: center;
@@ -2894,9 +2891,9 @@ div[data-role="controlgroup"] a.ui-btn-active {
     padding-right: var(--sidePadding) !important;
 }
 
-.paddded-left {
+/* .padded-left {
     padding-left: var(--sidePadding) !important;
-}
+} */
 
 .layout-mobile .padded-right-withalphapicker {
     padding-left: 4.5%;
@@ -3888,7 +3885,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }
 
 /* this allows switching between the header styles easily */
-#reactRoot > div:nth-of-type(3) {
+#reactRoot > div:nth-child(3) {
     container-name: skinHeader;
     container-type: size;
     height: var(--appBarHeight);
@@ -3944,6 +3941,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     background: linear-gradient(transparent, var(--darkerGradientPointAlpha) 20em);
 }
 
+/* performance improvements fot low-end TVs - start */
+
 /* .layout-tv *,
 .layout-tv *::before,
 .layout-tv *::after {
@@ -3965,11 +3964,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     display: none !important;
 } */
 
+/* .layout-tv .emby-checkbox:focus + span + .checkboxOutline {
+    transform: scale(1.75);
+} */
+
 .layout-tv .show-focus:focus,
-.layout-tv .show-animation:focus {
+.layout-tv .show-animation:focus,
+.emby-select-focusscale:focus {
     transform: none !important;
 }
 
+.layout-tv .focuscontainer,
+.layout-tv .backdropImage {
+    animation-duration: 0s !important;
+    backdrop-filter: none;
+}
+
+.card.show-animation .cardBox {
+    transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out;
+}
+
+/* performance improvements fot low-end TVs - end */
+
 /* basic styling for the Media Bar Plugin - start
 for extended styling, use the add-on */
 

Theme/assets/add-ons/custom-media-covers-nightly.css

@@ -40,8 +40,9 @@
 
 [data-type="CollectionFolder"] .cardContent::before,
 [data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
     position: absolute;
-    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
     font-weight: 800;
     color: white;
     font-family: "Noto Sans";
@@ -50,6 +51,24 @@
     white-space: normal;
 }
 
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
 [data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
 [data-type="UserView"] .cardImageIcon:not(.quiz)::before {
     display: none;
@@ -114,8 +133,3 @@
     background-color: var(--colorOverlayRecordedtvCover) !important;
     background-image: var(--urlRecordedtvCover) !important;
 }
-
-[data-type="CollectionFolder"] .cardContent::before,
-[data-type="UserView"] .cardContent::before {
-    content: attr(aria-label);
-}

Theme/assets/add-ons/custom-media-covers-v25.11.25.css

@@ -0,0 +1,135 @@
+/* Add-on: Custom media covers v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+}
+
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}

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

@@ -1,2 +1,2 @@
-/* Add-on: Media Bar plugin support v25.08.08 for the ElegantFin Theme for Jellyfin by lscambo13 */
- .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,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:'Inter';font-size:1em;font-weight:500}.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));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:60%;top:8em;border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.layout-tv #slides-container{top:0}.layout-mobile #slides-container{top:10em}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.info-container{}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+ .play-button::before,.detail-button::before,.favorite-button::before,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:"Inter";font-size:1em;font-weight:500}.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));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:62%;top:var(--appBarHeight);border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}@media (min-width:75em){#slides-container{top:calc(.5 * var(--appBarHeight))}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}@media only screen and (max-width:767px) and (orientation:portrait){.logo-container{top:50%}}

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

@@ -84,4 +84,20 @@
     }
 }
 
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
 /* this styles the media bar plugin - end */

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

@@ -0,0 +1,103 @@
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: "Inter";
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    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;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: var(--appBarHeight);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(0.5 * var(--appBarHeight));
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
+/* this styles the media bar plugin - end */