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;
}