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.
diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 6e38f55..3020c98 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 { @@ -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);