Bug: original title font size too big
ausar47 opened this issue · comments
Describe the bug
The original title of the new version is too big, which makes the logo and title overlap.
To Reproduce
Steps to reproduce the behavior:
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
.backdropContainer{filter:brightness(70%)saturate(110%)contrast(130%) !important;}
body #itemDetailPage .detailLogo {
top: 0vh;
}
Use the CSS above, and navigate to a Season page with the original title.
Expected behavior
A clear and concise description of what you expected to happen.
No overlap.
Screenshots
If applicable, add screenshots to help explain your problem.
'Original title' refers to the show's title in its original language stored in metadata.
How it looks like on the main page of a series. The original title is too big, maybe you forgot to deal with it.
Now on the Season page, as the original title is too big, the title is elevated and overlaps with the logo.
The same issue occurs on the episode info page.
Below is what the original title looks like before version 12.5. (I highlight it in case you can't recognize foreign characters)
Besides, on the episode info page where the original title is blank, the title and the logo overlap slightly.
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Edge
- Version: 125.0.2535.92
Additional context
1920 * 1080 displayer, 125% zooming in the display setting for the system, 80% zooming on the Jellyfin web page, f11 to fullscreen. This zooming setting makes the page look exactly the same as Jellyfin Media Player. I tried 100% zooming for all and the issue still occurred.
body #itemDetailPage .detailLogo {
top: 3vh;
}
body #itemDetailPage:has(.itemName.subtitle) .detailLogo {
top:3vh;
}
#itemDetailPage .infoWrapper .nameContainer {
grid-area: text;
padding-top: 200px;
}
#itemDetailPage .infoWrapper .itemName {
font-size: 0em;
}
#itemDetailPage .infoWrapper .itemName.subtitle {
font-size: 1em;
}
Did a small fix, at least it now displays correctly on my screen.
