jellyfin-custom-css/style.css

/* --- Variables --- */

:root {
    --default-blue-1: #dc007d;
    --default-blue-2: #ef0d98;
    --default-blue-3: #f4428f;
    --translucent-hover-1: rgba(220, 0, 114, 0.2);
    --translucent-hover-2: rgba(220, 0, 93, 0.2);
    --translucent-hover-3: rgba(220, 0, 110, 0.28);
    --card-background-1: #5c0036;
    --card-background-2: #e14483;
    --card-background-3: #db0070;
    --card-background-4: #5c1c3a;
    --card-background-5: #a80051;
    --rounding: 12px;
}

/* --- Subtitles --- */

.htmlvideoplayer::cue {
  text-shadow:.08em .08em .08em #000 !important;
}

/* --- Backdrop & Header --- */

.mainAnimatedPage {
    height: 100%;
    position: relative;
}

.backgroundContainer.withBackdrop {
    background-color: transparent !important;
}

.skinHeader {
    background: transparent !important;
    position: static;
}

.detailRibbon {
    background: rgba(32, 32, 32, 0.6);
}

.backdropContainer {
    filter:
        blur(5px) saturate(140%) contrast(120%) brightness(80%);
    mask-image:
        linear-gradient(180deg, #000, rgba(0, 0, 0, 0.25));
    -webkit-mask-image:
        linear-gradient(180deg, #000, rgba(0, 0, 0, 0.25));
}

/* --- Colors --- */

@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled) {
        color: var(--default-blue-1) !important;
        background-color: var(--translucent-hover-1) !important;
    }
}

.paper-icon-button-light:active:not(:disabled) {
    color: var(--default-blue-1) !important;
    background-color: var(--translucent-hover-1) !important;
}

.paper-icon-button-light.show-focus:focus {
    color: var(--default-blue-1) !important;
}

.button-submit {
    background: var(--default-blue-1) !important;
}

.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
    color: var(--default-blue-1) !important;
}

.itemSelectionPanel {
    border: 1px solid var(--default-blue-1) !important;
}

.selectionCommandsPanel {
    background: var(--default-blue-1) !important;
}

.upNextDialog-countdownText {
    color: var(--default-blue-1) !important;
}

.alphaPickerButton-tv:focus {
    background-color: var(--default-blue-1) !important;
}

.progressring-spiner {
    border-color: var(--default-blue-1) !important;
}

.button-flat:hover {
    color: var(--default-blue-1) !important;
}

.button-link {
    color: var(--default-blue-1) !important;
}

.emby-input:focus,
.emby-textarea:focus {
    border-color: var(--default-blue-1) !important;
}

.emby-select-withcolor:focus {
    border-color: var(--default-blue-1) !important;
}

.emby-select-tv-withcolor:focus {
    background-color: var(--default-blue-1) !important;
}

.emby-checkbox:checked+span+.checkboxOutline {
    border-color: var(--default-blue-1) !important;
}

.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
    background-color: var(--default-blue-1) !important;
}

.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
    border-color: var(--default-blue-1) !important;
}

.countIndicator,
.fullSyncIndicator,
.mediaSourceIndicator,
.playedIndicator {
    background: var(--default-blue-1) !important;
}

.navMenuOption-selected {
    background: var(--default-blue-1) !important;
}

.emby-button.show-focus:focus {
    background: var(--default-blue-1) !important;
}

.emby-tab-button.show-focus:focus {
    color: var(--default-blue-1) !important;
}

.emby-tab-button:hover {
    color: var(--default-blue-1) !important;
}

.guide-channelHeaderCell:focus,
.programCell:focus {
    background-color: var(--default-blue-1) !important;
}

.guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus {
    color: var(--default-blue-1) !important;
}

.guide-date-tab-button.show-focus:focus {
    background-color: var(--default-blue-1) !important;
}

.buttonActive {
    color: var(--default-blue-1) !important !important;
}

.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-color: var(--default-blue-1) !important;
}

.metadataSidebarIcon {
    color: var(--default-blue-1) !important;
}

.emby-button.detailFloatingButton {
    background-color: var(--default-blue-1) !important;
}

.layout-tv .emby-button.detailFloatingButton:focus {
    color: var(--default-blue-1) !important;
}

#dialogToc .bookplayerButtonIcon:hover {
    color: var(--default-blue-1) !important;
}

#dialogToc .toc li a:active,
#dialogToc .toc li a:hover {
    color: var(--default-blue-1) !important;
}

.listItemIcon.material-icons.notifications {
    background-color: var(--default-blue-1) !important;
}

progress {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

progress[aria-valuenow]:before {
    background-color: var(--default-blue-1) !important;
}

progress::-webkit-progress-bar {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 0px solid rgba(255, 255, 255, 0.22);
}

progress::-moz-progress-bar {
    background-color: var(--default-blue-1) !important;
}

progress::-webkit-progress-value {
    background-color: var(--default-blue-1) !important;
}

#divRunningTasks span {
    color: rgba(255, 255, 255, 0.75) !important;
}

.taskProgressOuter {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.taskProgressInner {
    background: var(--default-blue-1) !important;
}

#scheduledTasksPage span {
    color: rgba(255, 255, 255, 0.75) !important;
}

.mdl-spinner__layer-1 {
    border-color: var(--default-blue-1) !important;
}

.mdl-spinner__layer-2 {
    border-color: var(--default-blue-1) !important;
}

.mdl-spinner__layer-3 {
    border-color: var(--default-blue-1) !important;
}

.mdl-spinner__layer-4 {
    border-color: var(--default-blue-1) !important;
}

.listItemImageButton:hover {
    background: var(--translucent-hover-1) !important;
    color: var(--default-blue-1) !important;
}

.listItemIcon:not(.listItemIcon-transparent) {
    background-color: var(--default-blue-1) !important;
}

div[data-role=controlgroup] a.ui-btn-active {
    background: var(--default-blue-1) !important;
}

.playbackProgress>div {
    background-color: var(--default-blue-1) !important;
}

.button-accent-flat {
    color: var(--default-blue-1) !important;
}

.mdl-slider {
    color: var(--default-blue-1) !important;
}

.mdl-slider::-webkit-slider-thumb {
    background: var(--default-blue-1) !important;
}

.mdl-slider::-moz-range-thumb {
    background: var(--default-blue-1) !important;
}

.mdl-slider::-ms-thumb {
    background: var(--default-blue-1) !important;
}

.mdl-slider-background-lower {
    background-color: var(--default-blue-1) !important;
}

.sliderMarker.watched {
    background-color: var(--default-blue-1) !important;
}

.iconOsdProgressInner {
    background: var(--default-blue-1) !important;
}

.taskProgressInner {
    background: var(--default-blue-1) !important;
}

.downloadbutton-icon-complete,
.downloadbutton-icon-on {
    color: var(--default-blue-3) !important;
}

.defaultCardBackground1 {
    background-color: var(--card-background-1) !important;
}

.defaultCardBackground2 {
    background-color: var(--card-background-2) !important;
}

.defaultCardBackground3 {
    background-color: var(--card-background-3) !important;
}

.defaultCardBackground4 {
    background-color: var(--card-background-4) !important;
}

.defaultCardBackground5 {
    background-color: var(--card-background-5) !important;
}

.button-submit:focus {
    background: var(--default-blue-2) !important;
}

.Mui-selected {
    background-color: var(--translucent-hover-2) !important;
}

.Mui-selected:hover {
    background-color: var(--translucent-hover-3) !important;
}


/* --- Rounded Corners --- */

.detailButton {
    border-radius: 50%;
}

progress {
    border-radius: var(--rounding);
}

progress::-webkit-progress-bar {
    border-radius: var(--rounding);
}

progress::-moz-progress-bar {
    border-radius: var(--rounding);
}

progress::-webkit-progress-value {
    border-radius: var(--rounding);
}

.taskProgressOuter,
.taskProgressInner {
    border-radius: var(--rounding) !important;
}

.formDialogHeader {
    border-top-left-radius: var(--rounding);
    border-top-right-radius: var(--rounding);
}

.formDialogFooter {
    border-bottom-left-radius: var(--rounding);
    border-bottom-right-radius: var(--rounding);
}

.cardOverlayContainer {
    border-radius: var(--rounding) !important;
}

.missingIndicator,
.unairedIndicator,
.detailTable,
.primaryImageWrapper>img,
.toast,
.paperList,
.cardContent,
.sessionNowPlayingInnerContent,
.listItem:hover,
.cardImage,
.fab,
.raised,
.multiSelectCheckboxOutline,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemImageButton,
.listItemButton,
.innerCardFooter,
.blurhash-canvas,
.dialog,
.countIndicator,
.playedIndicator,
.listItemIcon,
.listItem-border,
.visualCardBox,
.checkboxOutline,
.emby-select-withcolor,
.chapterThumbTextContainer,
.chapterThumbContainer,
.chapterThumb,
.emby-input,
.emby-textarea,
.emby-select-withcolor,
.nowPlayingPageImage,
.upNextDialog-poster-img,
.upNextContainer,
.cardOverlayButtonIcon {
    border-radius: var(--rounding) !important;
}

.osdPoster img {
    border-radius: var(--rounding);
    border: none;
}

.mdl-slider::-moz-range-thumb {
    border-radius: var(--rounding);
}

.mdl-slider::-ms-thumb {
    border-radius: var(--rounding);
}

.mdl-slider::-webkit-slider-thumb {
    border-radius: var(--rounding);
}

div[data-role="controlgroup"] a[data-role="button"]:first-child {
    border-bottom-left-radius: var(--rounding);
    border-top-left-radius: var(--rounding);
}

div[data-role="controlgroup"] a[data-role="button"]:last-child {
    border-bottom-right-radius: var(--rounding);
    border-top-right-radius: var(--rounding);
}

#dashboardPage .cardContent,
#dashboardPage .sessionNowPlayingInnerContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}

#divVirtualFolders .cardImageContainer,
#divVirtualFolders .cardContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}

#userProfilesPage .cardImage,
#userProfilesPage .cardContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}