item/item.css

@@ -79,7 +79,6 @@
   width: clamp(6vw, 20.5em, 14vw);
 }
 .detailImageContainer-main.detailImageContainer-backdrop {
-  width: 28vw;
   width: clamp(20vw, 49.5em, 28vw);
   top: 5em;
 }
@@ -101,7 +100,7 @@
 }
 .itemName-primary {
   margin: 0;
-  overflow: hidden;
+  overflow: initial;
   font-size: 2.5em;
 }
 .itemName-secondary {
@@ -223,6 +222,15 @@
   -webkit-margin-end: 0.5em;
   margin-inline-end: 0.5em;
 }
+.item-tag-button:hover {
+  color: black;
+  background-color: #a5a5a5b8;
+}
+.item-tag-button:active {
+  color: white;
+  background-color: black;
+  box-shadow: none;
+}
 .itemBackdropContainer {
   height: 40vh;
   position: relative;
@@ -256,8 +264,31 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 15;
-  font-weight: 400;
+  position: absolute;
+  width: 80ch;
+  font-weight: 520;
+  margin: 0.5em;
+  top: 0;
+  left: -0.5vw;
+  text-shadow: inherit;
+}
+/* .overview-text:hover { */
+/*   display: block; */
+/*   overflow: visible; */
+/*   z-index: 100; */
+/*   border-radius: 0.5em; */
+/*   position: absolute; */
+/*   width: 80ch; */
+/*   top: 0; */
+/*   left: -0.5vw; */
+/*   background-color: black; */
+/* } */
+.btnReadMore {
+  pointer-events: none;
+  color: var(--theme-accent-text-color-darkbg);
+  position: absolute;
+  display: none;
 }
 .btnOverviewText.emby-button-focusscale:focus {
   -webkit-transform: scale(1.04);
@@ -395,7 +426,7 @@
     margin-bottom: 1em;
   }
   .detailImageContainer-main-extrabottommargin {
-    margin-bottom: 2em;
+    margin-bottom: 0;
   }
 }
 .tracklist-sidemargin {
@@ -404,8 +435,7 @@
 }
 .detailTextContainer {
   margin: 0 0;
-  padding: 5em 1em;
+  padding: 2vw 2vw 20vw;
-  padding-bottom: 20em;
 }
 .detailTextContainer-extrapadding {
   padding: 0 1.6em;
@@ -414,7 +444,7 @@
   margin: 0.5em 0;
 }
 .directors {
-  margin: 0.5em 0;
+  display: none;
 }
 @media not all and (min-width: 50em) {
   .overview-twoline {

item/item.html

@@ -170,7 +170,7 @@
                                 <button disabled type="button" is="emby-button" class="button-link button-link-color-inherit btnOverviewText text-align-start" style="opacity:initial;">
                                     <div class="overview-text readOnlyContent"></div>
                                 </button>
-                                <a href="#" is="emby-linkbutton" class="button-link btnReadMore hide flex-shrink-zero secondaryText">${HeaderReadMore}</a>
+                                <a href="#" is="emby-linkbutton" class="button-link btnReadMore hide flex-shrink-zero secondaryText">{HeaderReadMore}</a>
                             </div>
 
                             <p class="directors hide focuscontainer-x readOnlyContent reduce-font-size-tv secondaryText">

item/item.js

@@ -225,6 +225,7 @@ define([
               });
         })(parentElem, renderAdminFields, item, mediaSource, !0));
     }
+    anyDisplayed && _usersettings.default.showFullMediaInfoOnDetailScreen()
   }
   function isRenderingTrackSelections(item) {
     return !(
@@ -792,7 +793,7 @@ define([
                 ))
               : ((hasFocusableButton = !0),
                 parentNameHtml.push(
-                  '<a style="font-weight:inherit;" class="button-link button-link-color-inherit" is="emby-linkbutton" href="' +
+                  '<a style="font-weight:300;font-size:20px" class="button-link button-link-color-inherit" is="emby-linkbutton" href="' +
                     parentRoute +
                     '">' +
                     seriesName +
@@ -1061,7 +1062,7 @@ define([
             textButton,
             textElement = elem.querySelector(".overview-text"),
             btnReadMore = elem.querySelector(".btnReadMore");
-          (btnReadMore.innerHTML = _globalize.default.translate("More")),
+          (btnReadMore.innerHTML = _globalize.default.translate("(Hover for more)")),
             overview
               ? ((textElement.innerHTML = overview),
                 elem.classList.remove("hide"),

modules/appheader/appheader.css

@@ -284,6 +284,7 @@
 }
 .tabs-viewmenubar-slider {
   padding: 0.25em;
+  background-color: black;
 }
 .main-tab-button {
   padding: 0.25em 1.76ch !important;

modules/cardbuilder/card.css

@@ -25,6 +25,10 @@
   webkit-transform: scale(1.03);
   text-shadow: 2px 2px 5px black;
 }
+.card:active {
+  transform: scale(1);
+  text-shadow 0 0 0;
+}
 .card.itemAction {
   cursor: pointer;
 }
@@ -35,9 +39,6 @@
   padding-bottom: 56.25%;
   contain: strict;
 }
-.cardPadder-margin.cardPadder-backdrop {
-  margin-bottom: 56.25%;
-}
 .cardPadder-square {
   padding-bottom: 100%;
   contain: strict;

modules/layout.css

@@ -336,7 +336,7 @@ html, body {
     Forms
     */
 form, .readOnlyContent {
-    max-width: 90ch;
+    max-width: 80ch;
 }
 
 .auto-center {

modules/listview/listview.css

@@ -80,6 +80,9 @@
   contain: layout style;
   box-sizing: border-box;
 }
+.listItem-content:active {
+  color: black;
+}
 .listItem-content-withwrap {
   -webkit-flex-direction: column;
   flex-direction: column;

modules/sections.css

@@ -126,6 +126,7 @@
 .padded-right {
   -webkit-padding-end: 3.4%;
   padding-inline-end: 3.4%;
+  padding-inline-start: 5%;
 }
 .padded-left-withalphapicker {
   -webkit-padding-start: 4%;

modules/themes/appletv/theme.css

@@ -141,9 +141,6 @@ html {
 .emby-collapsible-button-collapsed::after {
   background: var(--line-background);
 }
-.skinHeader-withBackground.headroom-scrolling {
-  background: var(--header-background);
-}
 .appfooter {
   background: var(--footer-background);
 }
@@ -1142,8 +1139,11 @@ html {
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
+  color: white;
-  background: rgba(20, 20, 20, 0.5);
+  background: hsla(var(--theme-text-color-hue),
+  var(--theme-text-color-saturation),
+  var(--theme-text-color-lightness),0.35);
+  border-radius: 0.7em;
 }
 .recordingIcon-active {
   color: #c33 !important;
@@ -1390,7 +1390,7 @@ html {
     );
   }
   .detailMainContainer-withbackdrop {
-    text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
+    text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;

modules/themes/black/theme.css

@@ -149,9 +149,6 @@ html {
 .emby-collapsible-button-collapsed::after {
   background: var(--line-background);
 }
-.skinHeader-withBackground.headroom-scrolling {
-  background: var(--header-background);
-}
 .appfooter {
   background: var(--footer-background);
 }
@@ -1138,8 +1135,11 @@ html,
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
+  color: white;
-  background: rgba(20, 20, 20, 0.5);
+  background: hsla(var(--theme-text-color-hue),
+  var(--theme-text-color-saturation),
+  var(--theme-text-color-lightness),0.35);
+  border-radius: 0.7em;
 }
 .recordingIcon-active {
   color: #c33 !important;
@@ -1392,7 +1392,7 @@ html,
     );
   }
   .detailMainContainer-withbackdrop {
-    text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
+    text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;

modules/themes/dark/theme.css

@@ -173,9 +173,6 @@ html {
 .emby-collapsible-button-collapsed::after {
   background: var(--line-background);
 }
-.skinHeader-withBackground.headroom-scrolling {
-  background: var(--header-background);
-}
 .appfooter {
   background: var(--footer-background);
 }
@@ -1170,8 +1167,11 @@ html,
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
+  color: white;
-  background: rgba(20, 20, 20, 0.5);
+  background: hsla(var(--theme-text-color-hue),
+  var(--theme-text-color-saturation),
+  var(--theme-text-color-lightness),0.35);
+  border-radius: 0.7em;
 }
 .recordingIcon-active {
   color: #c33 !important;
@@ -1424,7 +1424,7 @@ html,
     );
   }
   .detailMainContainer-withbackdrop {
-    text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
+    text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;

modules/themes/darkgradient/theme.css

@@ -277,9 +277,6 @@ html {
 .emby-collapsible-button-collapsed::after {
   background: var(--line-background);
 }
-.skinHeader-withBackground.headroom-scrolling {
-  background: var(--header-background);
-}
 .appfooter {
   background: var(--footer-background);
 }
@@ -1263,8 +1260,11 @@ html {
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
+  color: white;
-  background: rgba(20, 20, 20, 0.5);
+  background: hsla(var(--theme-text-color-hue),
+  var(--theme-text-color-saturation),
+  var(--theme-text-color-lightness),0.35);
+  border-radius: 0.7em;
 }
 .recordingIcon-active {
   color: #c33 !important;
@@ -1509,7 +1509,7 @@ html {
     );
   }
   .detailMainContainer-withbackdrop {
-    text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
+    text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;

videoosd/videoosd.html

@@ -197,7 +197,7 @@
                     <button type="button" is="emby-button" class="emby-tab-button button-link secondaryText emby-button videoosd-tab-button hide" data-index="4">${Guide}</button>
 
                 </div>
-                <button is="paper-icon-button-light" class="osdIconButton osdIconButton-icon btnCloseTabContent md-icon hide-mouse-idle-tv hide secondaryText" title="${Close}" aria-label="${Close}">
+                <button is="paper-icon-button-light" class="osdIconButton osdIconButton-icon btnCloseTabContent md-icon hide-mouse-idle-tv hide secondaryText" title="Close" aria-label="${Close}">
                     &#xe5cf;
                 </button>
             </div>
@@ -225,4 +225,4 @@
         </div>
 
     </div>
-</div>
+</div>