Scyfin OLED (Modified) by LitCastVlog

/* ==UserStyle==
@name         Scyfin-mod (OLED)
@version      20250416.02.28
@namespace    https://userstyles.world/user/LitCastVlog
@description  Custom Jellyfin theme, userstyle version.
@author       LitCastVlog
@license      GPL v3
==/UserStyle== */

@-moz-document regexp("^(http|https)://.*:8096/.*") {
/*Scyfin-theme main*/
/* Variables */
:root {
    --primary-r: 0;
    --primary-g: 164;
    --primary-b: 220;
    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
    --secondary-accent-color: #00a4dc20;
    --primary-background-color: #101010;
    --secondary-background-color: #181818;
    --primary-background-transparent: rgba(35,35,35,0.5);
    --secondary-background-transparent: rgba(0,0,0,0.6);
    --rounded-cards: 15px;
    --blur: 5px;

    /* Alternate accents*/
    --primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 1);
    --primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85);
    --primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7);
    --primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55);
    --primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4);
}

/* Setting accent color variable */
.emby-checkbox:checked + span + .checkboxOutline,
.selectionCommandsPanel,
.countIndicator,
.MuiButton-root.MuiButton-containedSizeMedium,
.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-root.MuiChip-colorError),
progress[aria-valuenow]:before {
    background: var(--primary-accent-color) !important;
}
progress::-moz-progress-bar {
    background: var(--primary-accent-color) !important;
}
progress::-webkit-progress-value {
    background: var(--primary-accent-color) !important;
}
.MuiAlert-root.MuiAlert-standardInfo {
    background: var(--secondary-accent-color) !important;
}
.emby-checkbox:checked + span + .checkboxOutline,
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.mdl-spinner__layer-1,
.mdl-spinner__layer-2,
.mdl-spinner__layer-3,
.mdl-spinner__layer-4,
.progressring-spiner {
    border-color: var(--primary-accent-color) !important;
}
.button-link:not(.itemDetailPage .button-link),
.selectLabelFocused,
.textareaLabelFocused,
.inputLabelFocused,
.emby-tab-button:hover,
.metadataSidebarIcon,
.upNextDialog-countdownText,
.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit,
.listItemImageButton:hover,
.button-flat:hover,
#divRunningTasks span {
    color: var(--primary-accent-color) !important;
}
@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled) {
        color: var(--primary-accent-color) !important;
        background-color: var(--secondary-accent-color) !important;
    }
}

/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
    margin-left: 25px !important;
    height: 40px !important;
}

/* Fix for empty header with padding */
[dir="ltr"] .pageTitle:not(.pageTitleWithLogo):empty {
    margin: 0 !important;
}

/* Static left drawer */
.layout-desktop .mainDrawer {
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    /* Modified background color */
    background: var(--secondary-background-color) !important;
    /* Move drawer behind header */
    z-index: 998 !important;
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
    margin-top: 95px !important;
    margin-left: 10px !important;
}
.layout-mobile .mainDrawer-scrollContainer {
    margin-top: 15px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
    margin-left: 250px !important;
}
/* Fix for Jellyfin Media Player */
.quickConnectSettingsContainer {
    margin-left: 250px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
    transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
    display: none !important;
}
/* Fix for dashboard leaking out of the sections */
.dashboardColumn {
    flex-shrink: inherit;
}
/* Fix for dashboard drawer button height */
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
    padding-top: 0 !important;
}
/* Hide home button */
.layout-desktop .headerHomeButton {
    display: none !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
    display: block !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
    left: -320px !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
    margin-right: -2% !important;
}
/* Fix for collection items misalignment */
.layout-desktop .collectionItems .collectionItemsContainer {
    padding-left: 0% !important;
}
/* Dynamic buttons */
.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
    transform: scale(1.05) !important;
}
.layout-desktop .listItem {
    transition: .2s !important;
    border-radius: var(--rounded-cards) !important;
}
.layout-desktop #myPreferencesMenuPage .listItem:hover {
    transform: scale(1.015);
}

/* Floating progress bar */
.innerCardFooter {
    border-radius: var(--rounded-cards) !important;
    margin-left: 5px !important;
    margin-bottom: 5px !important;
    padding: 5px 15px 5px 5px !important;
    bottom: 0% !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(var(--blur)) !important;
}
.fullInnerCardFooter {
    bottom: 5% !important;
    width: 90% !important;
    margin: auto !important;
    border-radius: 100px !important;
    padding: 0px !important;
    backdrop-filter: none !important;
}
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
    height: 10px !important;
    background: var(--primary-background-transparent) !important;
    backdrop-filter: blur(2px) !important;
    border-radius: 100px !important;
}
.innerCardFooterClear {
    background-color: none !important;
}
.innerCardFooter .cardText {
    padding: 0 0 0 10px !important
}
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
    background: var(--primary-accent-color) !important;
}
.itemProgressBarForeground {
    border-radius: 100px !important;
}
.transcodingProgress > div {
    background-color: hsla(0,0%,100%,.2) !important;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
    bottom: 10px !important;
    border-radius: 100px !important;
    width: 90% !important;
    left: 5% !important;
}
.sessionNowPlayingInnerContent {
    padding-bottom: 12px !important;
    padding-inline: 17px !important;
}
.sessionAppInfo {
    padding: .5em 0em !important;
}
.sessionNowPlayingInfo {
    padding: .8em 0em !important;
}



/*  watched indicator */
.playedIndicator {
    background: #409843 !important;
}


/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
    border-radius: 100px !important;
    width: 85% !important;
    margin: auto !important;
    text-align: center !important;
    height: 45px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
    background-color: rgba(44, 44, 44, 0.7);
}
/* Center icons and text and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
    position: inherit !important;
    left: -10% !important;
    margin-top: 0 !important;
}
/* Fix for header buttons */
.layout-desktop .emby-button-foreground {
    top: -9px !important;
}
.layout-tv .emby-button-foreground {
    top: -14px !important;
}



/* Custom button color */
.navMenuOption-selected {
    background: var(--secondary-accent-color) !important;
    color: var(--primary-accent-color) !important;
}

/* Modified background color */
html,
.backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent),
.noBackdropTransparency .detailPageSecondaryContainer {
    background-color: var(--primary-background-color) !important;
}


/* Transparent header bar */
.skinHeader {
    background-color: transparent !important;
}
.layout-desktop .skinHeader,
.layout-tv .skinHeader {
    padding-top: 1.5em !important;
}
.layout-tv .skinHeader {
    padding-bottom: 10px !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
    background-color: var(--primary-background-transparent) !important;
    border-radius: 50px !important;
    backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop .headerTabs,
.layout-tv .headerTabs {
    margin-bottom: 10px !important;
}
.layout-desktop .headerTabs {
    margin-left: 160px !important;
    margin-top: -58px !important;
}
/* Button height */
.headerRight,
.emby-tab-button {
    height: 45px !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
    padding: 0px 5px !important;
}
.layout-tv .headerRight {
    padding: 20px 10px !important;
}
/* Move left header back up */
.layout-desktop .headerLeft
.layout-tv .headerLeft {
    position: relative !important;
    top: -17px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
    transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100% !important;
}
.layout-mobile .emby-button-foreground {
    top: -2px !important;
}
.layout-mobile .skinHeader {
    transition: .1s !important;
}
.layout-mobile .mainDrawer {
    background: var(--secondary-background-color) !important;
}
.layout-mobile .headroom--unpinned {
    tra...