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;
}

/* --- Dashboard Width --- */
.dashboardDocument {
  max-width: 75vw;
}

/* --- Backdrop & Header --- */
.mainAnimatedPage {
  height: 100%;
  position: relative;
}
.backgroundContainer.withBackdrop {
  background-color: transparent !important;
}
.skinHeader {
  background: transparent !important;
  position: static;
}
.detailRibbon {
  background: none;
}
.backdropContainer {
  filter:
  blur(8px) contrast(120%) brightness(60%);
  mask-image: none;
  -webkit-mask-image: none;
}

/* --- Login Page --- */
#loginPage:after {
  background:url(https://levi.land/public/jf-login-bg.webp);
  filter: blur(8px);
  background-size:cover;
  content:"";
  height:100vh;
  left:0;
  position:fixed;
  top:0;
  width:100vw;
  z-index:-1;
}
#loginPage>div {
  left:50%;
  max-width:50vw;
  min-width:40vw;
  padding:0!important;
  position:absolute;
  top:50%;
  transform:translate(-50%,0%);
  z-index:2;
}
#loginPage #divUsers .card {
  width:8vw;
}
body:has(#loginPage:not(.hide)) .skinHeader {
  display: none !important;
}
body:not(:has(#loginPage:not(.hide))) .skinHeader {
  display: flex !important;
}

/* --- Mobile --- */
.layout-mobile #loginPage #divUsers .card {
  width:30vw;
}
.layout-mobile #loginPage>div {
  max-width:95vw;
  width:95vw;
}


/* --- Header Padding --- */
.pageWithAbsoluteTabs:not(.noSecondaryNavPage) {
  padding-top: 0 !important;
}


/* --- Sidebar --- */
.mainDrawer,
.drawer-open {
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(60px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(180%) !important;
}

/* --- Dialog Boxes --- */
.focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.centeredDialog.opened {
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
}
.backgroundContainer,
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
}
.focuscontainer.dialog.smoothScrollY.dialog-fixedSize.dialog-small.opened {
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
}

/* --- 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: #fff !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;
}
.emby-select-withcolor {
  background: transparent;
  border: none;
  padding: 20px;
  backdrop-filter: blur(60px) brightness(95%) !important;
  -webkit-backdrop-filter: blur(60px) !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;
}
.card.portraitCard {
  border-radius: var(--rounding);
}
.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;
}
.sliderBubble {
  border-radius: var(--rounding);
}
.layout-desktop .detailImageContainer .card {
  border-radius: var(--rounding);
}

/* --- Skip Intro Button --- */
#skipIntro .emby-button:hover,
#skipIntro .emby-button:focus {
  background-color: rgba(168,0,81,0.7);
  transform: 0.3s;
}

/* --- Poster Cards --- */
.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear),
.paperList,
.visualCardBox {
  background-color: transparent !important;
  backdrop-filter: blur(60px) brightness(80%) !important;
  -webkit-backdrop-filter: blur(60px) brightness(80%) !important;
}
.layout-desktop .detailImageContainer .card {
  top: 0%;
}

/* --- Animations --- */
.listItem {
  transition: 0.18s ease-out;
}
.listItem:hover {
  transition: 0.18s ease-in;
}

/* --- CSS Masks --- */

.emby-scroller-container {
	position: relative;
	mask-image: linear-gradient(to right, #000 97%, transparent 99%);
}