Show your theme/style

[Hunter]

Here's my theming/styling, can't promise it will look correct as I only used it on a single laptop using the web version, let me know if there are any issues. I got a lot of the code either through finding online posts by other people or through using inspect element and trying to figure stuff out randomly, then asking chatgpt for help if needed. I think I used code snippets from zombie css and scyfin plus a couple others so their hard work really helped me reach the final visual view I wanted. There's also a couple fixes for what I think are issues, like with ZestyTheme having the transparent taskbar still interfere with interactions so I fixed that through inspect element to determine what was causing it then asking chatgpt for some help on how to write code to fix it. Same issue with text shadows that cause text to look blurry when using ZestyTheme, I fixed that too. Its amazing the hard work put into ZestyTheme though because its already near perfect for what I wanted it to do, so massive thanks to ZestyJelly for their hard work and everyone else whose snippets I might have used or learned from


@import url('https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/theme.css');
@import url('https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/colorschemes/cyan.css');

/*removes the star ratings from page*/
div.starRatingContainer {
display: none;
}

/*Removes the date shown in the episode details page: */
.itemMiscInfo .mediaInfoItem:first-child {
display: none;
}

/* (DISABLES the following: Removes glow around text on AppleTV-esque bar (this fixes that blurry text and icon issue (caused by the text shadow in the buttons) */
body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground {
text-shadow: none !important;
}

/*fixes the prominent play button margin padding being too big imo*/
/* Prominent play button */
.layout-desktop .btnPlay {
background-color: rgb(var(--white));
color: rgb(var(--darkest)) !important;
margin-right: 1vw !important; /*this is the fix*/
border-radius: 14px !important;
}
.layout-desktop .btnPlay.detailButton {
flex-direction: row;
width: 20%; /*Enlarges the width of the big play button, looks better imo*/
}

/* White border and hover highlight */
.cardOverlayContainer:hover,
.dialog,
.toast,
.raised.homeLibraryButton:hover {
box-shadow: 0px 0px 5px #fff9; /* Subtle white glow */ /*note this box shadow subtle white glow is inconsistent across the edges, the left side of the card container has no white glow, only the top, bottom, and right side do*/
border: solid 1px #fff; /* White border */
}

/*fixes the possibility of cursor being so close to edge of container that hover above doesn’t apply and the container stops highlighting white even though cursor is still on the very edge of the container*/
.cardOverlayContainer {
border: solid 1px #fff !important; /* Persistent white border */
}

/* when opening the hamburger menu it gives white edgelight and white border to right edge of menu */
.drawer-open {
box-shadow: 0px 0px 5px #fff !important; /* White edge highlight to hamburger menu */
border-right: solid 1px #fff !important; /* Right white border */
}

/* Hover zoom effects for cards and library buttons */
.layout-desktop .homeLibraryButton:hover,
.layout-tv .homeLibraryButton:hover,
.layout-desktop .homeLibraryButton:focus,
.layout-tv .homeLibraryButton:focus,
.layout-desktop .card:hover,
.layout-tv .card:focus {
transform: scale(1.02); /* Zoom in slightly */
transition: transform 1s ease; /* Smooth transition */
}

/* mobile-specific fix */
@media all and (max-width: 70em) {
.cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, 0) !important; /* Transparent button backgrounds */
}
}




/* Ensure 3 buttons (favorite, mark played, etc) to the side of the episode are visible and functional. this aligns those buttons to the left*/ /*the buttons can be aligned to right if wanted but it overlaps the number of episodes value shown in the season container card*/

.cardOverlayButton-br {
position: absolute;
top: 0; /* Positions the buttons at the top */
left: 0; /* Aligns the buttons to the left */
display: flex;
flex-direction: column; /* Stack buttons vertically */
align-items: flex-start; /* Align buttons to the left inside the column */ /* to align to right replace with: align-items: flex-end; */
width: auto;
padding: 0em;
gap: 1em; /* Space between buttons */
border-radius: 10px; /* Rounded button edges */
}


/* The card overlay 3 buttons (heart, checkmark, 3 dots icon size and more */
.cardOverlayButtonIcon {
font-size: 1.4em !important; /* Icon size */
width: 2em !important; /* Icon width */
height: 2em !important; /* Icon height */
display: flex;
justify-content: center; /* Center icons */
align-items: center;
}

/*Hides the heart/favorite button (so now its 2 buttons not 3) as its not really that necessary to select imo*/
.cardOverlayButton-br .cardOverlayButton:nth-child(2) {
display: none;
}

/* Swap the order of the buttons so three dots is middle left and add to watched is top left of overlay */
.cardOverlayButton-br .cardOverlayButton:nth-child(1) { order: 2; /* Move the first button to the second position */ }
/* Ensure the 'add to watched' button is aligned in the top left */
.cardOverlayButton-br .cardOverlayButton:nth-child(3) { position: absolute; top: 0; left: 0; } /* Make sure the three dots button is at the middle left for the other containers */ .cardOverlayButton-br .cardOverlayButton:nth-child(1) { position: absolute; top: 50%; left: 0; transform: translateY(-50%); /* Center it properly */ }

/* Responsive fixes for hiding unnecessary elements on mobile */
.layout-mobile .cardOverlayButtonIcon {
display: none !important; /* Hide overlay button icons on mobile */
}


/* Hover effects for desktop and TV */
.layout-desktop .card:hover,
.layout-tv .card:hover {
transform: scale(1.02); /* Slight zoom */
transition: transform 1s ease; /* Smooth zoom effect */
}


/* adds a dark blur to media cover/thumbs on hover, set accent to zero so the tinting when hovering over a card container no longer occurs */
.cardOverlayContainer {
background: rgba(var(--accent-off),.0);
}


/*FIX FOR the top bar being transparent for jellyfin but stuff behind it not being clickable, found with help from chatgpt and me manually getting the button classes and stuff to be able to reenable pointers for them specifically: */

.skinHeader {
pointer-events: none; /* Disable pointer events for the entire top bar */
}

/* Re-enable pointer events for all interactive elements */
.skinHeader .headerButton,
.skinHeader .material-icons,
.skinHeader .pageTitle,
.skinHeader .headerRight,
.skinHeader [class*="emby-"] {
pointer-events: auto; /* Allow pointer events for buttons, icons, and Emby-specific elements */
}

/*Give a cool white outline border around the right header (with the cast, search, etc) and around the tab header (the home and favorites button), used from zombie theme*/

.headerRight,
.headerTabs {
background-color: rgba(var(--white-off), 0.35);
border-radius: var(--rounding-circle);
color: rgba(var(--darkest));
backdrop-filter: blur(50px);
border-width: 2px;
border-style: solid;
border-color: #fff;
}

/*Make the home and favorites to be inline with the header right (the cast button, etc) so that way they are all aligned as a straight line*/
.layout-desktop .sectionTabs {
margin-top: -4.6em;
}
/* Following changes the button orders for the header right container, so search icon is first*/
/*change the button orders for the header right: */
.headerSearchButton {
order: 1; /* First button (leftmost) */
}
.headerCastButton {
order: 2; /* Second button (2nd leftmost) */
}
.headerSyncButton {
order: 3; /* Third button */
}
.headerUserButton {
order: 4; /* Last button (rightmost) */
}

/*Make the header right have more padding from the edge of the webpage: */
.headerRight {
transform: translateX(-10px); /* Shifts left by 10 pixels */
}

/* decrease header bar padding from top of webpage */
.layout-desktop .headerTop {
padding: 0em 0;
}

/*Fixes the hover and white border and white glow effect having its edge cut off at the first episode hover, also resizes the card containers so that it will still fit properly even with the padding left offset */
.card {
padding-left: 4px;
}
.overflowBackdropCard, .overflowSmallBackdropCard {
width: 22.7vw;
}

---

However there is still one last thing I've been trying to get working but I just cannot seem to get it to format around the elements properly, which is re-enabling cast and crew/season pictures removed by ZestyTheme. I've tried a number of different setups but they all don't resize properly or specific crew members who have longer names breaks the alignment, so if anyone happens to know how to rewrite the following code to fix all those issues please do let me know. The following code doesn't handle resizing well and only looks good on my computer sizing only because of that:
/*Below restore/fix the cast pics and season pictures when clicking into their detail pages*/
/*Reverses the blocking of URL pics for the cast and crew and guest stars, and season pages, etc */
.detailImageContainer .card .cardBox {
display: block !important; /* Force override */
}
.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags {
display: block !important; /* Force override */
}

/*Changes the URL cast pic alignment so that its not overtop of or blocking anything*/
.layout-desktop .detailImageContainer .card.portraitCard {
position: relative;
width: 25vw;
max-height: none;
margin-left: 42.4em;
top: 4%; /* can also make it -14 percent if you want it to be directly aligned with header right element instead of right below it, note that you will need to change next up player margin too */
}

/* Changes the next up player location so that the URL pic of the season doesn’t overlap on top of the next up player*/
.layout-desktop .nextUpSection {
margin-top: 35vh;
}
.layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
padding-top: 0.5em;
}