Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: original title font size too big #152

Open
ausar47 opened this issue Jun 7, 2024 · 2 comments
Open

Bug: original title font size too big #152

ausar47 opened this issue Jun 7, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@ausar47
Copy link

ausar47 commented Jun 7, 2024

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.
image
How it looks like on the main page of a series. The original title is too big, maybe you forgot to deal with it.
image
Now on the Season page, as the original title is too big, the title is elevated and overlaps with the logo.
image
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)
image
image
image

image
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.

@ausar47 ausar47 added the bug Something isn't working label Jun 7, 2024
@ausar47
Copy link
Author

ausar47 commented Jun 7, 2024

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.

@LeviSnoot
Copy link

Seems like a duplicate of #148

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants