+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Custom CSS (/t-custom-css)
Custom CSS - keduncan3 - 2024-05-14
Hello everyone,
After a recent DNS server change, my CSS has stopped functioning correctly. On the dashboard and general settings pages, the menu on the left is right, but the container for the settings is being placed at the top of the page with only a sliver of the container being visible. I was hoping someone would look at my CSS and see if they can find the issue.
Thanks in advance!
/*Top menu transparency*/
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {background:none; background-color:rgba(0, 0, 0, 0);}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background:none; background-color:rgba(0, 0, 0, 0);}
/*Adjust both "size-adjust" and "size" to modify size*/
.headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}
.pageTitle {margin-top: auto; margin-bottom: auto;}
.emby-tab-button {padding: 1.75em 1.7em;}
/*New progress bar*/
#indexPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
background-color: transparent !important;
box-shadow: none;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
border-radius: .5em;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground {
background-color: rgba(39, 157, 245, 0.
!important;}
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
height: 6px;
background: rgba(0,0,0,0.4);
margin: .5em .8em;
}
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
body, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
}
/*Banner transparency*/
#dashboardPage,
#dashboardGeneralPage,
#userProfilesPage,
#devicesPage,
#serverActivityPage,
#liveTvStatusPage,
#liveTvSettingsPage,
#networkingPage,
#apiKeysPage,
#logPage,
#notificationSettingsPage,
#scheduledTasksPage,
#itemDetailPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
@media all and (min-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
overflow: scroll;
}
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px);
overflow: scroll;
margin-top: 30px;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
overflow: scroll;
margin-top: 20px;
}
}
/*Library Page - remove vertical alpha Picker*/
div.alphaPickerRow-vertical {display: none !important;}
/*Library (Folders) - Remove Shuffle and play all buttons*/
.btnPlay.button-flat {display: none;}
.btnShuffle.button-flat {display: none;}
/*Item Page - resize Subtitle bar*/
.trackSelections {max-width: 22em;}
/*Item Page - simplify Item page*/
.detailPagePrimaryContainer {background: rgba(0, 0, 0, 0) !important; margin-top: 0 !important;}
.itemBackdrop::after {background-color: rgba(0, 0, 0, 0) !important; background: none;}
.itemBackdrop {height: 0; background-image: none !important;}
.detailPageWrapperContainer {margin-top: 30vh;}
.detailButtonHideonMobile {display: inline !important;}
.detailFloatingButton {display: none !important;}
/*.detailLogo {display: none;}*/
/*Universal - Rounded corners and square hover buttons*/
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardOverlayContainer,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.innerCardFooter,
.blurhash-canvas,
.actionSheetMenuItem:hover,
.dialog
{border-radius: 10px !important;}
.cardContent-button,
.itemDetailImage {
border-radius: 1em;
}
/* 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;
}
/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
height: 110px;
}
.listItem-content {
height: 115px;
}
.secondary.listItem-overview.listItemBodyText {
height: 61px;
margin: 0;
}
#castContent .card.overflowPortraitCard {
width: 4.2cm;
font-size: 90%;
}
#castContent .personCard {
width: auto;
}
#castContent .personCard .cardBox {
margin-bottom: 0px;
margin-right: 0px;
}
#castContent {
flex-wrap: wrap;
max-height: 9.75em;
}
div.personCard > :first-child > :first-child {
display: none;
}
.itemDetailPage .cardText {
text-align: left;
}
.itemDetailPage .textActionButton {
text-align: left;
}
/*Tweak entry fields*/
.selectContainer {margin-right: 1em !important;}
.emby-input, .emby-textarea, .emby-select-withcolor
{background: rgba(0, 0, 0, 0.4); border: 0.01em solid rgba(255, 255, 255, 0.22); border-radius: 6px;}
.emby-input:focus, .emby-textarea;focus, .emby-select-withcolor:focus
{background: rgba(0, 0, 0, 0.
; border: 0.01em solid #00a4dcc2 !important;}/*Make the red checkmark and likes blue like everything else*/
.playstatebutton-icon-played, .ratingbutton-icon-withrating {color: #00a4dc;}
/*Library Page - Make watched icon dark and transparent*/
.playedIndicator {background: #00000058;}
/*Library Page - Make Collection count icon dark and transparent*/
.countIndicator {background: #00000058;}
/*Library Page - Movie Versions icon dark and transparent*/
.mediaSourceIndicator {background: #00000058;}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Hover background for buttons*/
.button-flat:hover {
background: rgba(0,0,0,0.4);
}
.button-flat {
padding: .5em !important;
margin: .2em !important;
}
/*Some themeing for the dashboard*/
#user_usage_report_table,
.detailTable {
background: rgba(0,0,0,.5);
border-radius: .5em;
}
.detailTableBodyRow-shaded {
background: #0000 !important;
}
.infoBanner {
background: #101010;
}
.navMenuOptionText {
margin-top: 0;
}
.backgroundProgress > div {
background-color: #0000;
}
.visualCardBox, .cardImageContainer {
box-shadow: none;
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
background: rgba(120, 120, 120, 0.6);
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: white;
}
.dashboardSection h3 {
margin-left: 0.5em;
}
.sessionCardFooter {
border: none;
}
.paperList,
.visualCardBox {
background-color: rgba(0, 0, 0, 0.5);
}
.listItem-border {
border-color: rgba(255, 255, 255, 0) !important;
}
fieldset {
border: 1px solid rgba(40, 40, 40, 0.
; border-radius: 0.4em;
}
/*Enlarge button row on item page, even more on mobile*/
.mainDetailButtons {
font-size: 120%;
}
/*Tweak entry field padding and alignment/sizes*/
.emby-input,
.emby-textarea {
padding: .4em .55em;
}
.emby-select {
padding: .35em 1.9em .35em .35em;
}
.selectArrow {
margin-top: 1.05em;
}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Improve some menu alignments*/
.navMenuOptionText {
margin-top: 0;
}
.formDialogHeaderTitle {
margin-left: 1em;
}
.formDialogContent {
margin-bottom: 6.2em;
}
.dialogContentInner {
padding: .5em 1em 1em;
padding-right: 1em;
padding-left: 1em;
}
.listItem-indexnumberleft {
margin: 1em;
}
.listItem {
padding-left: 1em;
}
/*Theme some dialogue
.dialog {background-color: rgba(0, 0, 0, 0.9);}
.actionSheetMenuItem:hover {background-color: rgba(39, 157, 245, 0.4);}
.mainDrawer {background-color: rgba(0, 0, 0, 0.9);}
.navMenuOption:hover {background: rgba(39, 157, 245, 0.4);}*/
RE: Custom CSS - TheDreadPirate - 2024-05-14
Can you try clearing the site data in your browser for your jellyfin server?
RE: Custom CSS - keduncan3 - 2024-05-15
(2024-05-14, 02:57 PM)TheDreadPirate Wrote: Can you try clearing the site data in your browser for your jellyfin server?
I tried this and it didn't help. I removed all the CSS and will try adding them back one by one to determine which one is the culprit.
RE: Custom CSS - hsj - 2024-08-21
No CSS expert at all, but I noticed your code takes U+1F913 as a nerdface emoji here. Could it be that it collides within jellyfin server as well?
And I don't know if you're a fan or not. But try copying the code onto an AI like chatgpt. They're very good at detecting details that we would miss. Since it's only part of a css, no sensitive information is shared anyway.