Merge pull request #1 from lscambo13/main

chore: bring up to  date with remote

README.md

@@ -93,9 +93,9 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 </details>
 
 <details>
-  <summary>3️⃣ - <i>Why do I still notice visual bugs and inconsistencies?</i></summary>
+  <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
 
-- Are you using Jellyfin Media Player? If yes, JMP seems to be using a different or probably an older version of web engine. I am working on adding workarounds, but the progress is slow.
+- Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
 - Are you not using JMP and still facing issues? See the 4th point below.
 </details>
 

Theme/ElegantFin-theme-nightly.css

@@ -32,10 +32,15 @@ html {
     font-style: normal;
 }
 
+.dashboardFooter {
+    font-family: Noto Sans;
+    transition: transform 50ms;
+}
+
 .dashboardFooter::after {
     content: "ElegantFin Nightly";
-    font-size: .6em;
-    opacity: .5;
+    font-size: .8em;
+    color: #4e4e60;
 }
 
 .card {
@@ -50,9 +55,10 @@ html {
     filter: brightness(1.125);
 }
 
-.emby-button.show-focus:focus {
+.emby-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus {
     background: #2f3a53;
-    border-radius: var(--smallRadius);
+    /* border-radius: var(--smallRadius); */
     outline: var(--borderWidth) rgb(255 255 255) solid !important;
     outline-offset: calc(-1*var(--borderWidth));
     color: #fff;
@@ -92,6 +98,7 @@ html {
     border: var(--borderColor) solid var(--borderWidth) !important;
     overflow: hidden !important;
     transition: 125ms transform;
+    /* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */
 }
 
 .cardImageContainer {
@@ -169,7 +176,7 @@ h1 {
 
 .portraitCard {
     min-width: 5em;
-    width: 30%;
+    width: 29.5%;
     max-width: 12.9em;
 }
 
@@ -200,14 +207,8 @@ h1 {
     background-color: transparent;
 }
 
-.detailPageWrapperContainer {
-    padding-top: 30vh;
-    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
-    margin-top: -40vh;
-}
-
 .itemBackdrop {
-    height: 50vh;
+    height: 13em;
 }
 
 .mediaInfoOfficialRating {
@@ -222,6 +223,27 @@ h1 {
     border: solid var(--borderWidth) var(--borderColor);
 }
 
+.layout-desktop .detailRibbon {
+    height: auto !important;
+    margin-top: unset !important;
+}
+
+.layout-desktop .detailImageContainer .card {
+    top: unset !important;
+}
+
+.detailPageWrapperContainer {
+    padding-top: unset;
+    margin-top: unset;
+    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
+}
+
+@media (max-width: 62.5em) {
+    .layout-desktop .itemBackdrop {
+        height: 7em !important;
+    }
+}
+
 @media (orientation: portrait) and (max-width: 40em) {
     .layout-mobile .itemBackdrop {
         height: 40vh;
@@ -233,6 +255,11 @@ h1 {
         padding-inline-end: .475em;
         padding-block-start: 0.470em;
     }
+
+    .detailPageWrapperContainer {
+        padding-top: 35vh;
+        margin-top: -45vh;
+    }
 }
 
 @media (max-height: 31.25em) {
@@ -242,7 +269,7 @@ h1 {
 }
 
 .layout-mobile .itemBackdrop {
-    margin-top: 3.5rem;
+    margin-top: 3.5em;
 }
 
 h2 {
@@ -478,6 +505,7 @@ html {
     background-color: var(--drawerColor);
     border-radius: var(--largeRadius) !important;
     border: solid var(--borderColor) var(--borderWidth);
+    min-width: 15em;
 }
 
 .dialogBackdropOpened {
@@ -950,13 +978,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin-block: .5em !important;
 }
 
-.programContainer>div {
-    /* background-color: #7883b66e; */
-    /* border-radius: .5em; */
-    /* border: solid var(--borderColor) var(--borderWidth); */
-    /* padding-block: .5em !important; */
-}
-
 .emby-select-iconbutton {
     background-color: var(--selectorBackgroundColor);
     border: var(--lighterBorderColor) solid var(--borderWidth);