prayag17 / jellyskin Goto Github PK

Hello. Not sure how to describe this. But recently it seems that the custom CSS is not properly theming the My Media library buttons. Instead of being clear and centered like in the preview screenshots on this GitHub, they started looking like this:

I've already tried clearing CSS, saving, then re-applying CSS and saving. But the buttons just don't seem to want to theme properly. Currently running Jellyfin 10.6.4 using your import URL @import url(https://prayag17.github.io/JellySkin/default.css);. I've also tried copying just the raw CSS and using that, to the same result. Tested in Chrome v86 and Firefox Nightly v83

Describe the bug
When you go to edit images for a title, the skin renders two versions of the same image at two different sizes.

To Reproduce
Steps to reproduce the behavior:

1. Open the 'Edit Images' dialog.
2. Check images (especially images with transparency such as logos).

Expected behavior
A single image.

Screenshots

Video example:
https://user-images.githubusercontent.com/13402525/149960978-c5b67fdb-c442-456e-997e-8f9b9e9de79c.mp4

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome & Firefox

It's not working fine on mobile since last two or three days - before that it worked very well.
problems like a big play button for watching movie before it was plain n simple

The book background gets removed with this skin making them impossible to read

Device:
iPhone 12 Pro
Operating System:
iOS 14.4.1
Browser:

• Firefox Daylight 33.0
• official Jellyfin App 1.3.0 (5.3.1.1)

When browsing the episode list of a series, there seems to be something off with the background of the individual episodes.

When browsing an album, the colour of the artists text is incorrect (white on white bg) and the individual music tracks are way too large (This is an "issue" on desktop as well). After selecting one track, the colour of the name is incorrect (grey on grey bg).

The box at the bottom of chapter cards showing title and time isn't tall enough for the text and just displays as a thin line:

I've written some CSS to fix this, but it might not be how you want your theme to look, so you might want to change it a bit before copy/pasting into the theme. I also fixed zooming in on hover:

/* text box fix */
.chapterCard .innerCardFooter {
  height: auto;
  background: rgba(0, 0, 0, 0.7);
}

.chapterCard .innerCardFooter > .cardText:first-child {
  float: left;
}

.chapterCard .innerCardFooter > .cardText:last-child {
  float: right;
}

/* zoom fix */
.chapterCard .cardImageContainer {
  background-size: 100%;
  transition: background-size 0.15s ease-out;
  background-position: center;
}

Describe the bug
A clear and concise description of what the bug is.
A missing icon
To Reproduce
Steps to reproduce the behavior:

1. Go to 'dashboard'
2. Click on 'scan library'
3. See missing button

Expected behavior
A clear and concise description of what you expected to happen.
to show a proper icon for the cancel button
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 78.12.0esr

Additional context
Add any other context about the problem here.

It is suggested that every update should be divided into different versions, otherwise a code will always change and make me feel bad!

As you can see in this video, the episode previews does not scale correctly with the width of a display, and gets square corners at a certain point.

This does not happen on a 1080p display, but always on a 1440p display and above.

Fix!!

Describe the bug
A clear and concise description of what the bug is.
Arrows on dashboard are too close to text & Casting to devices shows blank icon where cast button is
To Reproduce
Steps to reproduce the behavior:

1. Click on your profile
2. go to your Dashboard
3. See Arrows are too close to text

Steps to reproduce the behavior V2:

1. Click on Cast
2. Click on any device
3. See Icon Missing

Expected behavior
A clear and concise description of what you expected to happen.
The Arrows to be not be overlapping w/ text & That The Casting to a device will show something and not just a blank area

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

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 78.14.0esr

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
I don't really like the icons, that are used by JellySkin right now, and then I found, that you have your JellyIcons Repo and those icons look very awesome, but they don't work with JellySkin.

Could you make them work so everybody can use their custom icon packs with JellySkin?

Describe the bug
NGINX CSP blocks the import of the nested css files (FA fonts), see the screenshot from the dev console. The main jellyskin loads without issue, but the fonts throw errors.

Expected behavior
Not block them

Screenshots

Desktop (please complete the following information):

• OS: Win10
• Browser Brave
• Version latest

Good evening,
Firstly I love your skin.
The only problem I have is that when I watch a movie with subtitles they're blured out and hiding behind the menu if it's open and / or they're too small in general, especially when Chrome is on 66% as the recommendations.
Example with skin:
https://i.imgur.com/ylr3FUS.png
Without skin:
https://i.imgur.com/2yeckm6.png

Thanks in advance :)

Hey!
During playback there is the background of the scrollbar visible.

https://i.imgur.com/xLQDfD3.png

Kinda annoying and I think it only recently popped up.

Very good work asides from this one thing :)

Cheers!

I like the design of the web side very much, but I don't like the design on the mobile phone. Is there any way to display the style of the web side on the mobile client ?

When I'm trying to use this option on Andorid or www works as expected, but when I'm trying to use in on JMP it just show up for a split of the second and than its invisible and cannod be used

The #loginPage background image property (line 1505-1506) is set as !important.

This means that I can't use jellyfin-fanartbackground because the default JellySkin background takes priority over it. It'd be great to have the option to disable the default #loginPage background using an imported script or something so I can use my own more easily.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'any show's episode or movie'
2. Click on 'edit metadata'
3. See error

Expected behavior
A clear and concise description of what you expected to happen.
To show the metadata stuff to edit

Screenshots
If applicable, add screenshots to help explain your issue

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] Samsung galaxy s8
• OS: [e.g. iOS8.1] Android 9
• Browser [e.g. stock browser, safari] jellyfin app
• Version [e.g. 22] 2.4.1

Additional context
Add any other context about the problem here.

Hi - your css is really cool but I want to use it with custom logo - when I add my custom logo url then whole css changed to default, it will be great if you give choice to add custom logo by default!

Currently only desktop can display logos, but it'd be great to allow mobile devices to as well.

On mobile only 2 columns of cards are shown rather than three, only one actor card can be seen at a time, and collections become a list rather than a grid since everything is too large.

Movie > Genres

RightNow in JellySkin the movie Posters shrink while everything else increases its scale

Hi, I like your theme, but if I use it on mobile, there the "My Media" section on the top is completely missing and I have to use the Burger menu to access the libraries.

In addition, the sidebar of the tablet home page will automatically retract after touching and scrolling. This problem did not exist in the previous version.

Dunno what it is, I add default, refresh, it works fine, replace it with logo, and it reverts to plain ol jellyfin.

Describe the bug
Login page is really laggy, I think that the problem is the animated background

To Reproduce
Simply load login page on Chromium or Firefox. I am using a 2K monitor, and other 4K, on both I have the same problem.

Expected behavior
It is expected to be fluid. I would like to have an option to delete the login background, or add my own with a static image.

Screenshots
Not visible on screenshot

Desktop (please complete the following information):

• Chromium, Firefox (Tested on Manjaro Linux and Windows 11)

Smartphone (please complete the following information):

• I don't know if it also happens in smarthpones

PD: Really thank for your work, this jellyfin skin is the best by far and it's so beautiful.

Edit: I also tested adding the fix performance option but it doesn't improve nothing in this problem
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/imp-per.css");

When I go to read a epub book through the web the text is black on a black transparent background, making it hard to see the text.
I really enjoy the JellySkin, thanks for it.

The episode information on the mobile device is displayed incorrectly. It is crowded on the left and cannot be clicked on the right. The watched button is also far away.

Thanks for fixing these issues so quickly, but there are still some minor issues. When I mark a video as watched, its image turns green. The second picture is a suggestion. There is a lot of space on the tablet. Moving this part of the information to the right of the title can improve space utilization and display more introductions. In the third picture, the singer and duration in white fonts are a little unclear on a white background, and it is better to change them to gray. The fourth picture is that sometimes the picture mask disappears, and I don't know how to reproduce it. Finally, the page on the phone is still not clickable. And they vary in length and are not as neat as web pages and tablets.

How can it be seen in the image, I don't know it shows the header with the logo and also the home and favorites links are on top of the collections

Hey,

I'm encountering an issue on Samsung Tv's (Tizen) where on first install it worked perfectly after exiting the app you're able to see the full screen up until you start scrolling once you scroll the screen comes up blank

TV Model: QN65Q70AAFXZA
Software Version: T-NKM2AKUC-1805.4

Steps to reproduce:

Login to Jellyfin
Press the back button until you are asked Do you want to exit?
Click Yes

The next time I open the app I have this issue

jellyfin/jellyfin-tizen#98

The recommended fix is

.layout-tv div[data-role="page"] {
overflow: auto;
}

Since a recent commit, Privacy Badger add-on blocked all the icons because it was hosted by google. I don't want to enable google on Privacy Badger, so is there a way to change that without downloading the file locally ? I wanna keep the @import url in my jellyfin settings so I can still get all the udpates.

Hi! I've been struggling with adding the version with logos with no success for half an hour until I've tryed to just go to the code tab and copy-paste the entire css in the Logos.css. That worked for me, so after trying to figure out why this worked but @import didn't, I've seen there is a typo in the import code provided here and in https://prayag17.github.io/JellySkin/. Here is a screenshot for reference in case you are willing to edit it.

Thanks for your skin! It's really great.

Pretty self explanatory. Not sure what causes this, but thought I'd put up an issue.

The CSS format you provided is wrong

The items in a music album page are listed in a strange layout:

Is this intentional? With the vanilla CSS, they are listed as an single column which I think is a lot better.

Hello brother, I like your theme very much, but there is a bug here that you need to solve.
I have a suggestion. Can the blue part of the screenshot be changed to a gradient or a blurry transparent effect? :D

Issue exist no matter of platform
Playback reporting 10.0.0.0

All black on black :)

[email protected]

On Jellyfin Media Player and Android app Cast & Crew looks just weird
Screen shoot >> https://ibb.co/QP4SsST

No problem on www

Version: 10.7.7

Describe the bug

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

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

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] Samsung Galaxy s8
• OS: [e.g. iOS8.1] android 9
• Browser [e.g. stock browser, safari] app
• Version [e.g. 22] 2.3.0-Beta

Additional context
Add any other context about the problem here.

Screenshot attached.

Describe the bug
A clear and concise description of what the bug is.
Whenever you use your mobile device as a remote control it will not fit the borders
To Reproduce
Steps to reproduce the behavior:

1. Go to 'cast.'
2. Click on 'any device'
3. Scroll down to 'it wont fit your mobile device'

Expected behavior
A clear and concise description of what you expected to happen.
For the theme to fit on the screen
Screenshots
If applicable, add screenshots to help explain your issue

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] firefox
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] Samsung Galaxy S8
• OS: [e.g. iOS8.1] android 9
• Browser [e.g. stock browser, safari] jellyfin app
• Version [e.g. 22] 2.3.0-Beta.6

Additional context
Add any other context about the problem here.

Hey, great work, the theme looks awesome.

I‘m using the default.css and the logo.css.
Sadly, especially on the mobile version, I encountered several problems, as you can see here:

Actors don’t have a logo, therefore nothing but a blank space is displayed.
Same goes for playlists (music), artists, ...

It would be nice, (don’t know if it’s possible), to only hide the title text, if there actually is a logo image present.

Also since the last update, the episode list doesn’t have the same white background, every other page has, but a giant image.

Unlike any other page, I‘m able to drag the episode list page sideways. Which leads to some sort of „wobbly“ feeling, when scrolling.

Also also, the big image seems to impact performance on the episode list page. While scrolling, everything is constantly loading in.

(Catching this on foto isn’t quite easy, but I tried here)

The logo is displayed alongside the name/title on the album page.
Also it’s (about 75% the times for me) sometimes overlapping the text.
Also also the colour of the music tracks seems to be incorrect.

On android some text is almost invisible
pls see screenshoot >> https://ibb.co/TcWgc11

The floating player:

I'm not sure how to enable/disable this or whatever and how it is suppose to look, but this looks strange.

When hovering on a song in a playlist, the item gets so much bigger the little thing to reorder goes out of the screen on a 1080 display. Not sure if the animation could be less intense or smaller on playlist items so re-ordering would be possible. I couldn't get the screenshot to reflect the issue.

Side note: Damn that skin is sick, thanks! ❤️ I might change a couple of things to my taste but I love it! Many thanks.

Was hoping you'd update your most excellent work for the drab plain interface to work with 10.7

The color still seems to work but the animations and all the other many great features seem broken at this time.