Bug: logo.css misaligned

[LeviSnoot]

Describe the bug
Logos overlap titles and other elements on the detail page.

To Reproduce
Steps to reproduce the behavior:

• Add the following to Custom CSS:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/logo.css");

• Navigate to an item with a logo.

Expected behavior
No overlap with other UI elements.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 125.0.6422.142 (Official Build) (64-bit)

Additional context
Did a quick fix with the following (however this doesn't work with all logos, needs further investigation):
logo.css

body #itemDetailPage .detailLogo {
    background-position: 0 100%!important;
    height: 30vh;
    left: 18.8vw;
-   top: 17.5vh
+   top: 0vh
}

After:

[weatherluvr]

I'm having the same issue in the before image, but the scaling correction LeviSnoot provided isn't fixing it for me (identical desktop information) no matter if it's right after the jellyskin import, after the theme, or at the very bottom of the CSS.

[LeviSnoot]

I'm having the same issue in the before image, but the scaling correction LeviSnoot provided isn't fixing it for me (identical desktop information) no matter if it's right after the jellyskin import, after the theme, or at the very bottom of the CSS.

Tried to troubleshoot this but it works no matter what I do. All I can think of is if you added the rule with the diff declarations which would make the CSS syntax not work. Try adding exactly this to your custom CSS and see if it works:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/logo.css");

body #itemDetailPage .detailLogo {
  top: 0vh;
}

[prayag17]

Logos might not be optimised for smaller screen sizes rightnow but I will fix it

[Ch1ch1]

Hi @prayag17

If it can help : here is some screnshoots with different window size (with Jellifin client):

@2560x1440:

@1280x1440:

Got almost the same result with chrome.

[prayag17]

Update your chrome browser and as for Jellyfin Media Player, it does not support baseline 2023 yet so JellySkin is not supported. Look at readme

[Ch1ch1]

Thanks for your answer

I was up to date for the test
Jellyfin Media Player 1.10.1
Firefox 126.0.1 (was firefox not chrome.. my bad)
I ve just updated Jellyfin server to 10.9.5

I tried to uninstall Jellyfin Media Player delete the cache in AppData/Local reinstall it, same result
I cleared my Firefox cache and same result too

Still got theses problems

[julianaexx]

I'm having the same issue in the before image, but the scaling correction LeviSnoot provided isn't fixing it for me (identical desktop information) no matter if it's right after the jellyskin import, after the theme, or at the very bottom of the CSS.

Tried to troubleshoot this but it works no matter what I do. All I can think of is if you added the rule with the diff declarations which would make the CSS syntax not work. Try adding exactly this to your custom CSS and see if it works:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/logo.css");

body #itemDetailPage .detailLogo {
  top: 0vh;
}

It's work for me,thank you!

[mihawk90]

This problem is even more exagerated with music albums:

With the top alignment removed:

I am not seeing an obvious selector to target specifically for music though :/

[prayag17]

I was up to date for the test
Jellyfin Media Player 1.10.1

Jellyfin Media Player does not support baseline 23 yet so this skin wont work there, not for now atleast. You can disable logos to restore some functionality.

I am not seeing an obvious selector to target specifically for music though :/

I might have forgotten to check music albums since my default server was dead and I was using a dummy server on my desktop. I will add that in next build.

And before posting any other instance of where logo fails please check if your browser supports baseline 23

[WilmeRWubS]

Having the following indeed seems to be a good solution for now. Thanks!

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");

body #itemDetailPage .detailLogo {
  top: 0vh;
}

I'm having the same issue in the before image, but the scaling correction LeviSnoot provided isn't fixing it for me (identical desktop information) no matter if it's right after the jellyskin import, after the theme, or at the very bottom of the CSS.

Tried to troubleshoot this but it works no matter what I do. All I can think of is if you added the rule with the diff declarations which would make the CSS syntax not work. Try adding exactly this to your custom CSS and see if it works:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.5.0/dist/logo.css");

body #itemDetailPage .detailLogo {
  top: 0vh;
}

[mihawk90]

Did a quick fix with the following (however this doesn't work with all logos, needs further investigation)

@LeviSnoot just been looking into this again cause I'm bored and I'm wondering if you could elaborate on this?

Do you have any examples for Logos where this doesn't work?

On preliminary checks I've seen issues still happening on vertical screens where the logo gets dragged down into the description area. The reason for that is this:

JellySkin/src/logo.scss

Line 25 in 4d465d8

height: 30vh;

Regarding your quickfix:
Instead of 0 (no unit required on 0 by the way), we can also use 10vh, which is what Jellyfin itself uses:

---

I'm not sure what the intention for both the height above or the top in the initial post was though. Is it to align the Logo with the bottom of the Poster? That... might be tricky to pull off across libraries since the Logo is unfortunately in a parent element :/

---

edit:
On a related note, on named TV Seasons the Season Title is also overlaying the Logo:

Can be similarly fixed with:

 body #itemDetailPage:has(.itemName.subtitle) .detailLogo {
-     top: 9.5vh;
+     top: 0;
 }