Jellyfin12.1 CSS customization

[overplant]

In the Dashboard-Branding-Custom CSS code configuration

Hide the text after the jellyfin icon

Code:

/*hide the text after the jellyfin icon*/
.css-x5lcu9 .css-iqm7ky {
font-size: 0;
color: transparent;
min-width: 49.5px;
}
.css-1oowakh {
margin: auto;
}

Hide the syncplay icon and text

Code:

/*hide the syncplay icon and text*/
[aria-label="SyncPlay"] {
display: none;
}

Hide the cast icon and text

Code:

/*hide the cast icon and text*/
[aria-label="Cast to Device"] {
display: none;
}

Hide the text after the favorite icon

Code:

/*hide the text after the favorite icon*/
.css-1f20jcn {
font-size: 0;
min-width: 43.5px;
border-radius: 50%;
}
.css-19rbmc7 {
font-size: 0;
min-width: 43.5px;
border-radius: 50%;
}
.css-1ygddt1 {
margin: auto;
}

Customize user avatar img size

Code:

/*customize user avatar img size*/
.css-1dx9e6p {
width: 28px;
height: 28px;
}

Hide the libraries icons and text on Web Client and Desktop Client

Code:

/*hide the libraries icons and text*/
html.layout-desktop .css-x5lcu9 a[href^="#/movies"] {
display: none;
}
html.layout-desktop .css-x5lcu9 a[href^="#/tv"] {
display: none;
}
html.layout-desktop .css-x5lcu9 a[href^="#/homevideos"] {
display: none;
}
html.layout-desktop .css-x5lcu9 a[href^="#/music"] {
display: none;
}
html.layout-desktop .css-x5lcu9 button[aria-controls="user-view-overflow-menu"] {
display: none;
}

Hide the poster card on mobile client

Code:

/*hide the poster card on mobile client*/
.layout-mobile .detailImageContainer .card {
display: none;
}
.layout-mobile [dir=ltr] .infoWrapper {
margin: auto;
padding-left: 0;
}