From 2bd563466b0bf264d56c607de165e2564017c1f0 Mon Sep 17 00:00:00 2001
From: l4kr <root@embyserver.ji>
Date: Wed, 6 Sep 2023 15:52:40 +0200
Subject: [PATCH] UX prettified in the menu again

---
 item/item.css                                     |  7 +++----
 modules/cardbuilder/card.css                      |  4 ++++
 modules/emby-elements/emby-button/emby-button.css |  7 +++++++
 modules/themes/appletv/theme.css                  | 10 +++++++---
 modules/themes/black/theme.css                    | 10 +++++++---
 modules/themes/dark/theme.css                     | 10 +++++++---
 modules/themes/darkgradient/theme.css             | 10 +++++++---
 modules/themes/light/theme.css                    | 10 +++++++---
 8 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/item/item.css b/item/item.css
index fd25d61..743081b 100644
--- a/item/item.css
+++ b/item/item.css
@@ -101,7 +101,7 @@
 }
 .itemName-primary {
   margin: 0;
-  overflow: hidden;
+  overflow: initial;
   font-size: 2.5em;
 }
 .itemName-secondary {
@@ -265,8 +265,8 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  font-weight: 400;
+  -webkit-line-clamp: 8;
+  font-weight: 520;
 }
 .btnOverviewText.emby-button-focusscale:focus {
   -webkit-transform: scale(1.04);
@@ -414,7 +414,6 @@
 .detailTextContainer {
   margin: 0 0;
   padding: 5em 1em;
-  padding-bottom: 20em;
 }
 .detailTextContainer-extrapadding {
   padding: 0 1.6em;
diff --git a/modules/cardbuilder/card.css b/modules/cardbuilder/card.css
index df2b3c5..b9da932 100644
--- a/modules/cardbuilder/card.css
+++ b/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;
 }
diff --git a/modules/emby-elements/emby-button/emby-button.css b/modules/emby-elements/emby-button/emby-button.css
index 8b2074f..669c821 100644
--- a/modules/emby-elements/emby-button/emby-button.css
+++ b/modules/emby-elements/emby-button/emby-button.css
@@ -207,6 +207,13 @@
   z-index: 1;
   vertical-align: middle;
 }
+.paper-icon-button-light:hover {
+  background: hsla(
+      var(--theme-text-color-hue),
+      var(--theme-text-color-saturation),
+      var(--theme-text-color-lightness),
+      0.2);
+}
 .paper-icon-button-light.md-icon {
   font-size: 1.66956521739130434em;
   margin: 0 0.17em;
diff --git a/modules/themes/appletv/theme.css b/modules/themes/appletv/theme.css
index 77f5280..e121da5 100644
--- a/modules/themes/appletv/theme.css
+++ b/modules/themes/appletv/theme.css
@@ -1139,8 +1139,11 @@ html {
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
-  background: rgba(20, 20, 20, 0.5);
+  color: white;
+  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;
@@ -1387,7 +1390,8 @@ 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);
+    padding-bottom: 11em;
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;
diff --git a/modules/themes/black/theme.css b/modules/themes/black/theme.css
index b13ce20..06bde98 100644
--- a/modules/themes/black/theme.css
+++ b/modules/themes/black/theme.css
@@ -1135,8 +1135,11 @@ html,
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
-  background: rgba(20, 20, 20, 0.5);
+  color: white;
+  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;
@@ -1389,7 +1392,8 @@ 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);
+    padding-bottom: 11em;
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;
diff --git a/modules/themes/dark/theme.css b/modules/themes/dark/theme.css
index b31a68a..bc940ac 100644
--- a/modules/themes/dark/theme.css
+++ b/modules/themes/dark/theme.css
@@ -1167,8 +1167,11 @@ html,
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
-  background: rgba(20, 20, 20, 0.5);
+  color: white;
+  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;
@@ -1421,7 +1424,8 @@ 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);
+    padding-bottom: 11em;
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;
diff --git a/modules/themes/darkgradient/theme.css b/modules/themes/darkgradient/theme.css
index ab63ca1..7a63ce3 100644
--- a/modules/themes/darkgradient/theme.css
+++ b/modules/themes/darkgradient/theme.css
@@ -1260,8 +1260,11 @@ html {
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
-  background: rgba(20, 20, 20, 0.5);
+  color: white;
+  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;
@@ -1506,7 +1509,8 @@ 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);
+    padding-bottom: 11em;
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;
diff --git a/modules/themes/light/theme.css b/modules/themes/light/theme.css
index 6bbb7ce..c970922 100644
--- a/modules/themes/light/theme.css
+++ b/modules/themes/light/theme.css
@@ -1099,8 +1099,11 @@ html,
   }
 }
 .scrollbuttoncontainer {
-  color: #fff;
-  background: rgba(20, 20, 20, 0.5);
+  color: white;
+  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;
@@ -1355,7 +1358,8 @@ 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);
+    padding-bottom: 11em;
   }
   .details-additionalContent-withbackdrop {
     --theme-text-color-alpha: 0.85;