Yesterday, 03:30 AM
Omg! I love you guys. Found this and had to create a user to reply. This thread really helped me find a style I actually love.
Now, I hope I don't come off as a spoiled brat having others do it for me, but I'd really appreciate someone helping me on improving my personal experience with the jellyfin app. I'm mainly using the web interface since I do not have a smart tv or the like of it, so I wouldn't know or care how it looks in an actual "app".
I've modified it slightly, but have some problems with a couple of stuff.... I have basically 0 knowledge of CSS and would love to get some help? I will do my best to illustrate what I mean with screenshots/images, since I don't really think I have the vocabulary to make myself understood in terms of coding.
Since this is quite a heavy post, I'm not sure if I should create my own thread for this? But here goes nothing:
This is how my homepage currently looks like:
First thing I noticed was that the menu bars are not symmetric in the sides for some reason? The left side has no padding(?) between the border of the screen and the menu, while the right side looks right.
Since I added my logo in the menu instead of jellyfin, it has empty space on the right side. I assume this is because the logo is added by CSS and therefor the jellyfin logo is still "underneath it. I was thinking that by removing the menu's background might make this easier on the eye? Though I like that when scrolling the menu goes blurry so that the menu is still visible. Any ideas?
On the "My Media" tab, the borders from the gradient doesnt go all the way, so there's some white showing in the rounded corner? Also, when hovering, the corners to the left gets straight edges, which I suppose is on purpose? Is it possible to remove all rounded corners instead? I like the black gradient.
When I open the user page, it's kinda centered which feels a bit weird, is it possible to move it more to the left like the "hamburger" menu? So it feels a bit more synchronized.
I feel the movie "header/logo" is superfluous along with the movie poster, is it possible to remove the header/logo part above? So it's not needed to scroll down so much. I dunno what a good solution for it to look neat along with the menus, maybe a black bar instead? I'm confused with myself. In case this is a settings issue; I can't really find an option for this, maybe I don't know the right term for it?
My login page is really weird. The menu is still there when logged out, just nothing in it when pushing the hamburger. It looks like this and I would like it to look like the second example.
And my last issue is basically the only coloring there is. The play button is a weak green on hover, and I'd prefer it just be inverted from the unhovered playbutton and be black/darkgrey like the background.
The "mark played" hover seems right, but when it's flagged as played it goes red, which seems weird, and should be green instead, to keep it consistent with jellyfin's "watched" logo in the upper right corner of the movie.
This is the "modified" code I'm using:
If someone actually wants to help this poor boy with these changes, would it be much to ask for an updated code? I don't think I would be able to navigate myself through all these changes/fixes...
Thanks a bunch and the biggest of hugs from Sweden.
F
Now, I hope I don't come off as a spoiled brat having others do it for me, but I'd really appreciate someone helping me on improving my personal experience with the jellyfin app. I'm mainly using the web interface since I do not have a smart tv or the like of it, so I wouldn't know or care how it looks in an actual "app".
I've modified it slightly, but have some problems with a couple of stuff.... I have basically 0 knowledge of CSS and would love to get some help? I will do my best to illustrate what I mean with screenshots/images, since I don't really think I have the vocabulary to make myself understood in terms of coding.
Since this is quite a heavy post, I'm not sure if I should create my own thread for this? But here goes nothing:
This is how my homepage currently looks like:
First thing I noticed was that the menu bars are not symmetric in the sides for some reason? The left side has no padding(?) between the border of the screen and the menu, while the right side looks right.
Since I added my logo in the menu instead of jellyfin, it has empty space on the right side. I assume this is because the logo is added by CSS and therefor the jellyfin logo is still "underneath it. I was thinking that by removing the menu's background might make this easier on the eye? Though I like that when scrolling the menu goes blurry so that the menu is still visible. Any ideas?
On the "My Media" tab, the borders from the gradient doesnt go all the way, so there's some white showing in the rounded corner? Also, when hovering, the corners to the left gets straight edges, which I suppose is on purpose? Is it possible to remove all rounded corners instead? I like the black gradient.
When I open the user page, it's kinda centered which feels a bit weird, is it possible to move it more to the left like the "hamburger" menu? So it feels a bit more synchronized.
I feel the movie "header/logo" is superfluous along with the movie poster, is it possible to remove the header/logo part above? So it's not needed to scroll down so much. I dunno what a good solution for it to look neat along with the menus, maybe a black bar instead? I'm confused with myself. In case this is a settings issue; I can't really find an option for this, maybe I don't know the right term for it?
My login page is really weird. The menu is still there when logged out, just nothing in it when pushing the hamburger. It looks like this and I would like it to look like the second example.
And my last issue is basically the only coloring there is. The play button is a weak green on hover, and I'd prefer it just be inverted from the unhovered playbutton and be black/darkgrey like the background.
The "mark played" hover seems right, but when it's flagged as played it goes red, which seems weird, and should be green instead, to keep it consistent with jellyfin's "watched" logo in the upper right corner of the movie.
This is the "modified" code I'm using:
Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
/* Custom Google Font with more variety */
@import url(https://db.onlinewebfonts.com/c/42f9da2abdd3c2f1457f73eb85d2d6f6?family=IntervogueSoftAlt-Bold);
/* Root Variables for Custom Color Scheme */
:root {
--custom-primary-color: #3498db;
--custom-secondary-color: #2ecc71;
--custom-accent-color: #e74c3c;
--custom-background-dark: #1a1a2e;
--custom-background-light: #16213e;
}
.adminDrawerLogo img { content: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; } imgLogoIcon { content: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; } .pageTitleWithLogo { background-image: url(https://i.postimg.cc/VNwW5DJp/loggo.png) !important; }
#homeTab .section0 .cardImageContainer::before {
content: attr(aria-label);
position: absolute;
bottom: 0em;
left: 0;
font-size: 1.5em;
font-weight: 400;
color: white;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
padding: 0.2em 0.5em;
padding-bottom: 0.2em;
z-index: 10;
width: 93%;
height: 7em;
display: flex;
align-items: flex-end;
background: linear-gradient(90deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.9998779296875) 6.25%, rgb(0% 0% 0% / 0.998046875) 12.5%, rgba(0, 0, 0, 0.99) 18.75%, rgba(0, 0, 0, 0.97) 25%, rgba(0, 0, 0, 0.93) 31.25%, rgba(0, 0, 0, 0.84) 37.5%, rgba(0, 0, 0, 0.71) 43.75%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.29) 56.25%, rgba(0, 0, 0, 0.16) 62.5%, rgba(0, 0, 0, 0.08) 68.75%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.01) 81.25%, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 93.75%, rgba(0, 0, 0, 0) 100% );
padding-bottom: 3.5em;
}
.verticalSection.section0 .textActionButton {
display: none;
}
/* Enhanced Global Styling */
body, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
letter-spacing: 0.5px;
text-rendering: optimizeLegibility;
}
.emby-textarea {
font-family: monospace;
font-size: 10pt;
}
/* Unique Hover and Interaction Effects */
@media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: var(--custom-secondary-color) !important;
transform: scale(1.2) rotate(5deg);
transition: all 0.3s ease;
}
}
/* Enhanced Button Styles */
.emby-button {
transition: all 0.3s ease;
font-weight: 600;
}
#skipIntro {
&.upNextContainer {
background-color: transparent !important;
backdrop-filter: none !important;
}
.emby-button {
background-color: rgba(0, 0, 0, 0.7) !important;
&:hover, &:focus {
background-color: rgba(151, 151, 151, 0.7) !important;
}
}
}
#skipIntro .emby-button:hover {
background: rgb(var(--accent));
box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
filter: brightness(1.2);
transform: translateY(-3px);
}
#skipIntro .emby-button:focus {
background: rgb(var(--accent));
box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
}
.backdropContainer:hover {
filter: brightness(1);
}
.detailRibbon {
background: linear-gradient(to top, var(--custom-background-dark), transparent) !important;
}
.layout-desktop .detailPageContent {
padding-left: 3.3% !important;
padding-right: 3.3% !important;
}
@keyframes gradientBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/* Card and Item Styling */
.listItemImage-large {
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.listItemImage-large:hover {
transform: scale(1.05);
}
/* Slider and Progress Enhancements */
.mdl-slider::-webkit-slider-thumb {
background: #fff;
}
.mdl-slider-background-flex {
height: 9px !important;
background: hsla(0,0%,100%,.15) !important;
backdrop-filter: blur(15px);
}
/* Responsive Adjustments */
@media (max-width: 1599px) {
.playlistContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
}
/* Additional Unique Touches */
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
background: #fff;
font-family: 'Orbitron', sans-serif;
}
.layout-desktop .mainDetailButtons .btnPlay::after {
content: "Play" !important;
}
/* Hide Unnecessary Elements */
.trackSelections,
.itemTags,
.itemExternalLinks,
.btnPlayTrailer,
.btnPlaystate,
.btnPreviousChapter,
.btnNextChapter,
.iconOsd,
.videoOsdBottom .buttons .mediaInfoCriticRating,
.videoOsdBottom .buttons .mediaInfoItem,
.mediaInfoCriticRatingFresh,
.mediaInfoCriticRatingRotten,
.alphaPicker {
display: none;
}
/* Additional Mobile and Responsive Styles */
.layout-mobile .itemBackdrop {
margin-top: 0px;
}
.layout-mobile .detailSectionContent {
padding: 0px 20px !important;
}
.headerTabs {
backdrop-filter: blur !important;
}
/* Other existing styles from the original theme */
.mainDetailButtons {
margin-right: 3.3%;
}
.emby-scroller {
margin-right: 0% !important;
}
/* Additional specific styles */
.selectionCommandsPanel {
background-color: rgb(21, 21, 21) !important;
}
.sectionTabs {
background: transparent !important;
}
/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
max-width: 22em;
}
/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin-top: 50px;
}
/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none;
}
If someone actually wants to help this poor boy with these changes, would it be much to ask for an updated code? I don't think I would be able to navigate myself through all these changes/fixes...
Thanks a bunch and the biggest of hugs from Sweden.
F