Fix: Prevented long section headings from breaking into another line on the homepage on phones

Changes:
- redesigned the side indicator dots
- tweaked the layout specifically for phones and TVs
- improved responsiveness on TV layout
- made parental rating font consistent with its siblings
- positioned it correctly for the experimental layout
- positioned the pause button in the top-right corner
- updated colors of dot separators
- tweaked its distance from the header on small screens

Theme/ElegantFin-theme-nightly.css

@@ -1096,11 +1096,6 @@ body {
     margin: 0.75em 0 -0.75em 0;
 }
 
-.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    text-align: left;
-    margin: 0.75em 0 -0.75em 0;
-}
-
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
     padding-top: 1.25em;
@@ -2976,8 +2971,13 @@ div[data-role="controlgroup"] a.ui-btn-active {
 }
 
 .sectionTitleTextButton > * {
-    padding: 0.3em 0 !important;
+    text-align: left;
-    margin: 0 0 !important;
+    padding: 0.3em 0;
+    /* margin: 0 0 !important; */
+    /* this prevents long library names from breaking into another line */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .dashboardSection .sectionTitleTextButton > .material-icons,
@@ -3825,13 +3825,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     overflow: visible !important;
 }
 
-.layout-tv .sectionTabs {
-    /* this prevents the section tabs from being off-center in the music library
-     after I set the overflow to visible to fix visual glitches */
-    width: 70%;
-    margin-right: 2em;
-}
-
 .sectionTabs .emby-tab-button {
     display: inline-flex;
     margin: 0.25em 0.5em;
@@ -3849,6 +3842,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     background-color: var(--textColor);
 }
 
+/* this increases page top padding when section tabs are expanded */
+.libraryPage:not(.noSecondaryNavPage) {
+    padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+}
+
 @media (min-width: 75em) {
     .sectionTabs {
         -webkit-align-items: center;
@@ -3857,14 +3855,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
         align-self: center;
         -webkit-justify-content: center;
         justify-content: center;
+        /* this collapses the section tabs expanded earlier than the default 100em max-width */
         margin-top: calc(-1 * var(--appBarHeight));
         position: relative;
         width: auto;
     }
 
-    /* this reduces top page padding when section tabs are minimised */
+    /* this reduces page top padding when section tabs are collapsed */
-    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
+    .libraryPage:not(.noSecondaryNavPage) {
-        padding-top: 6.8em !important;
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
     }
 
     /* this fixes the header like on desktop on larger tablet screens */
@@ -3874,11 +3873,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
+@media (min-width: 100em) {
+    /* this reduces top padding when section tabs are collapsed on TVs */
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
+    }
+}
+
 @media (max-width: 100em) {
     /* this makes the font size consistent */
     .sectionTabs {
         font-size: 100%;
     }
+
+    /* this keeps the section tabs expanded on TVs under 100em width */
+    .layout-tv .sectionTabs {
+        margin-top: unset;
+    }
+
+    /* this increases page top padding when section tabs are expanded on TVs*/
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+    }
 }
 
 @media (max-width: 75em) {
@@ -3892,16 +3908,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
-/* this increased top page padding when section tabs are maximised */
-.libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 9.5em !important;
-}
-
-/* this limits top page padding when section tabs always on TVs */
-.layout-tv .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 6em !important;
-}
-
 .layout-tv .headerLeft {
     overflow: unset;
     margin: 0em 0.6em;

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

@@ -32,16 +32,20 @@
 
 .age-rating {
     font-size: 0.8em;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
 }
 
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: var(--appBarHeight);
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
     transition: all 0.125s, border 0s;
     user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
 }
 
 .logo-container {
@@ -59,28 +63,74 @@
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
+.pause-button {
+    top: 1em !important;
+}
+
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
 @media only screen and (max-width: 767px) and (orientation: portrait) {
     .button-container {
-        top: calc(50% + 20vh);
+        bottom: 3em;
-        transform: translateX(-50%) scale(0.8);
     }
 
-    .tomato-rating {
+    .tomato-rating,
+    .genre {
         display: none;
     }
 
     .dots-container {
-        top: calc(50% + 19vh);
+        bottom: 6em;
+    }
+
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
     }
 
     .backdrop {
         transform-origin: center;
     }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
 }
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(0.5 * var(--appBarHeight));
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
     }
 }
 
@@ -94,10 +144,4 @@
     }
 }
 
-@media only screen and (max-width: 767px) and (orientation: portrait) {
-    .logo-container {
-        top: 50%;
-    }
-}
-
 /* this styles the media bar plugin - end */