dev: Allowed hiding the overlay button on mobile #162

dev: rearranged code

Theme/ElegantFin-theme-nightly.css

@@ -121,6 +121,18 @@
        block: makes them visible */
     --libraryLabelVisibility: none;
 
+    /* block: shows the Movie/TV clear logo if it is available [default]; 
+       none: makes the clear logo always hidden */
+    --clearLogoVisibility: block;
+
+    /* none: dynamically hides the main title of Movie/TV if its logo is available [default]; 
+       block: makes the title always visible */
+    --itemTitleVisibility: none;
+
+    /* block: shows the mini play or three-dot button on cards only on mobile [default]; 
+    none: makes them always hidden only on mobile */
+    --miniOverlayButtonVisibility: block;
+
     /* use "" to enable the card hover effect [default]; 
        use none (without quotes) to disable it */
     --cardHoverEffect: "";
@@ -451,6 +463,7 @@ html {
 [dir=ltr] .layout-mobile .cardOverlayButton-br {
     bottom: .25em;
     right: .25em;
+    display: var(--miniOverlayButtonVisibility);
 }
 
 .layout-mobile .portraitCard .cardOverlayButton-br:not([data-action="menu"]),
@@ -886,7 +899,7 @@ html {
 .layout-desktop .detailPageWrapperContainer {
     background: transparent;
     min-height: 46vh;
-    background: linear-gradient(0deg, var(--darkerGradientPointAlpha) 70%, 85%, transparent);
+    background: linear-gradient(180deg, transparent, 17vh, var(--darkerGradientPointAlpha) 50vh);
 }
 
 .layout-tv .detailPageWrapperContainer {
@@ -1024,6 +1037,11 @@ html {
     margin: .75em 0 -.75em 0;
 }
 
+.emby-scrollbuttons,
+[dir=ltr] .emby-scrollbuttons {
+    padding-top: 1.25em;
+}
+
 .sectionTitleContainer+.emby-scrollbuttons {
     padding-top: 0;
 }
@@ -1123,7 +1141,7 @@ html {
 }
 
 .detailLogo {
-    display: block;
+    display: var(--clearLogoVisibility);
     top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
@@ -1134,7 +1152,7 @@ html {
 }
 
 .layout-mobile .detailLogo {
-    display: block;
+    display: var(--clearLogoVisibility);
     z-index: 1;
     position: absolute;
     left: 1em;
@@ -1186,7 +1204,7 @@ html {
 }
 
 .layout-tv .detailLogo {
-    display: block;
+    display: var(--clearLogoVisibility);
     height: 20vh;
     top: 39vh;
     left: 30vw;
@@ -1289,16 +1307,21 @@ html {
     margin-top: .5em;
 }
 
-/* this hides the main media title when the clear logo is available*/
-.detailLogo:not(.hide)~.detailPageWrapperContainer .nameContainer h1,
+/* 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,
-.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person) {
+#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo {
     z-index: 2;
     display: none;
 }
 
+/* this hides the main media title when the clear logo is available*/
+.detailLogo:not(.hide)~.detailPageWrapperContainer .nameContainer h1 {
+    z-index: 2;
+    display: var(--itemTitleVisibility);
+}
+
 /* this shows the main media title and the poster when the clear logo is unavailable*/
 .detailLogo.hide~.detailPageWrapperContainer .nameContainer h1 {
     display: block !important;
@@ -1317,7 +1340,8 @@ html {
     aspect-ratio: 1 / 1;
 }
 
-#childrenContent:has(.listItem[data-type="Audio"]) {
+#childrenContent:has(.listItem[data-type="Audio"]),
+.programGuideSection {
     border: var(--defaultBorder);
     border-radius: var(--largeRadius);
     padding: .5em;
@@ -1746,46 +1770,6 @@ progress+span {
     flex-direction: column-reverse;
 }
 
-.itemDetailsGroup {
-    outline: none;
-    overflow: hidden;
-    margin-top: 1em;
-    border-radius: var(--smallRadius);
-    background-color: var(--lighterGradientPointAlpha);
-    border: none;
-    box-shadow: inset 0 0 0 .06em var(--borderColor) !important;
-}
-
-.detailsGroupItem {
-    margin: 0 !important;
-    justify-content: space-between;
-    padding: .5em .9em;
-    align-items: baseline;
-}
-
-.detailsGroupItem:not(:last-child) {
-    border-bottom: var(--defaultBorder);
-}
-
-.detailsGroupItem>.label {
-    font-weight: 600;
-    flex-basis: 6em;
-}
-
-.detailsGroupItem>.content>a {
-    font-weight: 400;
-    text-align: end;
-}
-
-.detailsGroupItem>.content {
-    text-align: end;
-    color: var(--dimTextColor);
-}
-
-.detailsGroupItem>.label {
-    color: var(--textColor);
-}
-
 .itemExternalLinks {
     color: var(--textColor);
 }
@@ -2303,7 +2287,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     flex-direction: row;
 }
 
-.btnPlay:after {
+.btnPlay:not(.formDialogFooterItem):after {
     content: attr(title);
     padding: 0 1ch;
 }
@@ -2605,6 +2589,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     column-gap: 3em;
     max-width: unset !important;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    margin-bottom: 1.5em;
 }
 
 .layout-mobile .detailSection {
@@ -2626,6 +2611,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--lighterGradientPointAlpha);
 }
 
+.layout-mobile .trackSelections{
+    margin-top: 0;
+}
+
 .layout-tv .trackSelections {
     order: 2;
 }
@@ -2634,6 +2623,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     order: 4;
 }
 
+.recordingButton{
+    gap: 1ch;
+}
+
 .detailsGroupItem,
 .trackSelections .selectContainer {
     max-width: unset !important;
@@ -2672,31 +2665,68 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23d1d5db" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23d1d5db" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
 }
 
-.detailSectionContent {
-    order: 1;
-    grid-column: 1 / -1;
-}
-
 .detailSectionContent a:not(.overview-expand) {
     text-align: start;
 }
 
 .layout-desktop .detailSectionContent {
     align-content: end;
-    min-height: 13vh;
+    min-height: 16vh;
+}
+
+.detailSectionContent:has(.tagline.hide+.overview.hide) {
+    min-height: unset;
 }
 
 .itemDetailsGroup {
+    outline: none;
+    overflow: hidden;
+    margin-top: 1em;
+    border-radius: var(--smallRadius);
+    background-color: var(--lighterGradientPointAlpha);
+    border: none;
+    box-shadow: inset 0 0 0 .06em var(--borderColor) !important;
     order: 2;
     grid-column: 1 / 3;
 }
 
-.layout-tv .itemDetailsGroup {
-    order: 2;
+.layout-mobile .itemDetailsGroup{
+    margin-top: 0;
 }
 
-.trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
-    grid-column: 1 / -1;
+.detailsGroupItem {
+    margin: 0 !important;
+    justify-content: space-between;
+    padding: .5em .9em;
+    align-items: baseline;
+}
+
+.detailsGroupItem:not(:last-child) {
+    border-bottom: var(--defaultBorder);
+}
+
+.detailsGroupItem>.label {
+    font-weight: 600;
+    flex-basis: 6em;
+}
+
+.detailsGroupItem>.content>a {
+    font-weight: 400;
+    text-align: end;
+}
+
+.detailsGroupItem>.content {
+    text-align: end;
+    color: var(--dimTextColor);
+}
+
+.detailsGroupItem>.label {
+    color: var(--textColor);
+}
+
+
+.layout-tv .itemDetailsGroup {
+    order: 2;
 }
 
 .detailSection>.nextUpSection {
@@ -2709,7 +2739,13 @@ div[data-role=controlgroup] a.ui-btn-active {
     grid-column: 2 / -1;
 }
 
-.nextUpSection.hide~#listChildrenCollapsible {
+.detailSectionContent {
+    order: 1;
+    grid-column: 1 / -1;
+}
+
+.nextUpSection.hide~#listChildrenCollapsible,
+.trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
     grid-column: 1 / -1;
 }
 
@@ -2723,10 +2759,20 @@ div[data-role=controlgroup] a.ui-btn-active {
 .layout-tv .itemDetailsGroup,
 .layout-tv .nextUpSection,
 .layout-tv .detailSection>#listChildrenCollapsible,
-.collectionItems {
+.collectionItems,
+.programGuideSection {
     grid-column: 1 / -1;
 }
 
+.programGuideSection:not(.hide){
+    order: -1;
+    margin-top: 2em;
+}
+
+.layout-desktop .programGuide{
+    padding-right: var(--sidePadding);
+}
+
 .collectionItems .sectionTitleContainer.padded-left {
     padding-left: .375em;
 }
@@ -2920,6 +2966,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: whitesmoke;
     box-shadow: var(--shadow);
     margin-right: var(--sidePadding);
+    color: black
 }
 
 /* this allows the skip button get focused correctly on TVs using remote navigation; needs 10.10.7*/
@@ -3131,6 +3178,15 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-bottom: 0ch;
 }
 
+.subtitle{
+    font-size: 2em;
+    padding-bottom: 1em;
+}
+
+.layout-mobile .subtitle {
+    font-size: 1.5em;
+}
+
 .itemName.originalTitle {
     padding-top: .25em;
     padding-bottom: .25em;
@@ -3154,7 +3210,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .guideProgramName {
     background-color: rgba(255, 255, 255, .05);
-    height: -webkit-fill-available;
+    height: calc(100% - .7em);
     margin: .35em 0 .35em .7em;
     border-radius: var(--smallerRadius);
 }
@@ -3820,4 +3876,4 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 .layout-tv .show-focus:focus,
 .layout-tv .show-animation:focus {
     transform: none !important;
-}
+}