From 1d50e2b673423bc626dac6e103fd7f12f6e26fac Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 08:53:28 -0800 Subject: [PATCH 1/8] dev: Use em instead of rem for consistency with other units --- Theme/ElegantFin-theme-nightly.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 68e3dc8..317cbca 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -237,7 +237,7 @@ h1 { } .layout-mobile .itemBackdrop { - margin-top: 3.5rem; + margin-top: 3.5em; } h2 { From b9e9deb9d12dd497adb51786ed6526802e029445 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 09:06:38 -0800 Subject: [PATCH 2/8] Fix: Prevent card overflow on small screens --- Theme/ElegantFin-theme-nightly.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 317cbca..bc812d5 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -92,6 +92,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 +170,7 @@ h1 { .portraitCard { min-width: 5em; - width: 30%; + width: 29.5%; max-width: 12.9em; } From 50bcb364661545bb307d73638acbb5253a4579d3 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 09:21:06 -0800 Subject: [PATCH 3/8] Fix: Set a minimum width on dialog boxes to prevent overlaps in case of little content inside --- Theme/ElegantFin-theme-nightly.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index bc812d5..ebf5852 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -474,6 +474,7 @@ html { background-color: var(--drawerColor); border-radius: var(--largeRadius) !important; border: solid var(--borderColor) var(--borderWidth); + min-width: 15em; } .dialogBackdropOpened { From 1174801b8e9f952971e8e3a428bc82879c55a079 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 09:25:19 -0800 Subject: [PATCH 4/8] Fix: Reworked media page layout to prevent abnormally large --- Theme/ElegantFin-theme-nightly.css | 31 +++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index ebf5852..6d00bd0 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -197,13 +197,13 @@ h1 { } .detailPageWrapperContainer { - padding-top: 30vh; + /* padding-top: 30vh; */ background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent); - margin-top: -40vh; + /* margin-top: -40vh; */ } .itemBackdrop { - height: 50vh; + height: 13em; } .mediaInfoOfficialRating { @@ -218,6 +218,26 @@ 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; +} + +@media (max-width: 62.5em) { + .layout-desktop .itemBackdrop { + height: 7em !important; + } +} + @media (orientation: portrait) and (max-width: 40em) { .layout-mobile .itemBackdrop { height: 40vh; @@ -229,6 +249,11 @@ h1 { padding-inline-end: .475em; padding-block-start: 0.470em; } + + .detailPageWrapperContainer { + padding-top: 35vh; + margin-top: -45vh; + } } @media (max-height: 31.25em) { From 34d3e9338057731c5201fa77b3dc878dffb276d6 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 09:48:10 -0800 Subject: [PATCH 5/8] Fix: Styled focus effect on header buttons in TV layout --- Theme/ElegantFin-theme-nightly.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 6d00bd0..8744dbd 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -50,9 +50,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; From 349ba3aa98845b63f42494a65dc85daa318ef9df Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 10:12:06 -0800 Subject: [PATCH 6/8] Fix: Avoid applying the new font in Dashboard footer to retain the original Jellyfin branding --- Theme/ElegantFin-theme-nightly.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 8744dbd..555f14a 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/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 { From 1899b955129ea10af4987d87e82c6007d600045a Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 10:39:07 -0800 Subject: [PATCH 7/8] Updated FAQ --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3574341..b9e31bc 100644 --- a/README.md +++ b/README.md @@ -93,9 +93,9 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
- 3️⃣ - Why do I still notice visual bugs and inconsistencies? + 3️⃣ - Why do I notice visual bugs and inconsistencies on Jellyfin Media Player? -- 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.
From 2ec9fee511991b9e20a16ced975a21a093f05889 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 19 Dec 2024 11:58:54 -0800 Subject: [PATCH 8/8] dev: Cleaned unused code --- Theme/ElegantFin-theme-nightly.css | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 555f14a..1d0cf18 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -202,12 +202,6 @@ h1 { background-color: transparent; } -.detailPageWrapperContainer { - /* padding-top: 30vh; */ - background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent); - /* margin-top: -40vh; */ -} - .itemBackdrop { height: 13em; } @@ -236,6 +230,7 @@ h1 { .detailPageWrapperContainer { padding-top: unset; margin-top: unset; + background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent); } @media (max-width: 62.5em) { @@ -978,13 +973,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);