Skip to content

Instantly share code, notes, and snippets.

@AitorAstorga

AitorAstorga/prisma-jellyfin-notice.css

Last active October 15, 2025 08:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AitorAstorga/66800c36cc3e5ea74ba3af000a3910c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AitorAstorga/66800c36cc3e5ea74ba3af000a3910c9 to your computer and use it in GitHub Desktop.
Download ZIP
CSS theme for Jellyfin based on scyfin
Raw
prisma-jellyfin-notice.css
/* Prisma Jellyfin Notice — configurable CSS-only animated announcement banner */
/* Disclaimer: Assisted by AI (｡>﹏<) */
/* Based on: https://forum.jellyfin.org/t-help-with-custom-css-for-an-announcement-message-to-be-displayed-in-top-banner */
.skinHeader {
/* timings */
--notice-expand-duration: 0.15s;
--notice-hold-duration: 2s;
--notice-fade-duration: 0.35s;
/* text and content */
--notice-text-content: "NOTICE: This is your Notice Text. Thank You For Noticing.";
--notice-text: #000;
/* visual / sizing */
--notice-bg: linear-gradient(90deg, var(--primary-accent-color), var(--primary-alt3));
--notice-padding: 12px 16px;
--notice-radius: var(--rounded-cards);
--notice-z: 9999;
/* progress bar */
--progress-height: 10px;
--progress-width-vw: 90vw;
--progress-color: var(--primary-accent-color);
--progress-track: rgba(255,255,255,0.10);
/* overall stacking/position tweaks */
--notice-top: 50%;
}
/* NOTICE box (no internal progress layer) */
.skinHeader::after {
content: var(--notice-text-content);
position: fixed;
left: 50%;
top: var(--notice-top);
transform: translate(-50%, -50%) scaleX(0);
transform-origin: center;
width: 100vw;
box-sizing: border-box;
padding: var(--notice-padding);
text-align: center;
font-weight: 700;
color: var(--notice-text);
background: var(--notice-bg);
border-radius: var(--notice-radius);
z-index: var(--notice-z);
box-shadow: 0 6px 20px rgba(0,0,0,0.45);
backdrop-filter: blur(var(--blur));
pointer-events: none;
overflow: visible;
/* two separate animations:
- scale runs only during expand
- opacity (fade) runs later after hold
*/
animation:
noticeScale var(--notice-expand-duration) ease-out forwards,
noticeFade var(--notice-fade-duration) linear forwards;
/* delay the fade until expand + hold finish */
animation-delay: 0s, calc(var(--notice-expand-duration) + var(--notice-hold-duration));
}
/* Progress bar container + fill as a single ::before element */
/* It will fill during the hold period and fade when notice fades. */
.skinHeader::before {
content: "";
position: fixed;
left: 50%;
top: calc(var(--notice-top) + 42px); /* 42px places bar just below the notice: ADJUST IF YOU CHANGE PADDING */
transform: translateX(-50%);
width: var(--progress-width-vw);
max-width: 100%;
height: var(--progress-height);
border-radius: 999px;
z-index: calc(var(--notice-z) + 1);
pointer-events: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.35) inset;
/* two-layer background: track + fill (fill starts at 0%) */
background-image:
linear-gradient(90deg, var(--progress-track) 0%, var(--progress-track) 100%),
linear-gradient(90deg, var(--progress-color) 0%, var(--primary-alt3) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 0% 100%;
background-position: center, left;
/* progressFill runs during the hold period (starts after expand).
progressFade runs during fade period so the bar disappears with the notice.
*/
animation:
progressFill var(--notice-hold-duration) linear forwards,
progressFade var(--notice-fade-duration) linear forwards;
animation-delay: var(--notice-expand-duration), calc(var(--notice-expand-duration) + var(--notice-hold-duration));
}
/* scale the notice from center */
@keyframes noticeScale {
from { transform: translate(-50%, -50%) scaleX(0); }
to { transform: translate(-50%, -50%) scaleX(1); }
}
/* fade notice out during fade-duration */
@keyframes noticeFade {
from { opacity: 1; }
to { opacity: 0; transform: translate(-50%, -50%) scaleX(1.02); }
}
/* fill the progress bar during the hold period */
@keyframes progressFill {
from { background-size: 100% 100%, 0% 100%; opacity: 1; }
to { background-size: 100% 100%, 100% 100%; opacity: 1; }
}
/* fade out the progress bar in sync with the notice fade */
@keyframes progressFade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(6px); }
}
/* responsive tweaks */
@media (max-width: 600px) {
.skinHeader::after { font-size: 0.95rem; padding: 10px 8px; }
.skinHeader::before { width: 95vw; height: calc(var(--progress-height) - 3px); top: calc(var(--notice-top) + 38px); }
}
Raw
prisma-jellyfin.css
/* Variables */
:root {
--primary-r: 0;
--primary-g: 164;
--primary-b: 220;
--primary-accent-color: #D60270;
--secondary-accent-color: #9B4F9655;
--primary-background-color: #121212;
--secondary-background-color: #181818;
--primary-background-transparent: rgba(35,35,35,0.5);
--secondary-background-transparent: rgba(0,0,0,0.6);
--rounded-cards: 8px;
--blur: 10px;
/* 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);
}
/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog,
.itemSelectionPanel {
border-radius: var(--rounded-cards) !important;
}
/* Rounded selection menu */
.itemSelectionPanel {
border: 2px solid var(--primary-accent-color) !important;
}
.itemSelectionPanel .checkboxOutline {
margin: 7px !important;
}
/* 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;
}
/* Green 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 {
transform: none;
}
.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) {
transform: translateY(-50%);
}
.layout-mobile .headroom--not-top {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.layout-mobile .headroom--not-top .headerRight {
background: none !important;
}
.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
background: transparent !important;
backdrop-filter: none !important;
}
.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
background: var(--primary-background-transparent) !important;
}
@media (max-width: 380px) {
.layout-mobile .pageTitle:not(.pageTitleWithLogo):not(:empty) {
position: absolute !important;
margin-left: 50% !important;
transform: translate(-50%, 0) !important;
top: 60px !important;
}
.layout-mobile .headerTop:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
-webkit-align-items: start !important;
align-items: start !important;
}
.layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
height: 110px !important;
}
.layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)):has(.sectionTabs:not(.hide)) {
height: 140px !important;
}
.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
padding-top: 9.5em !important;
}
.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)):has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
transform: translateY(-60%);
}
}
/* Player modifications */
.upNextContainer:not(#skipIntro), .toastVisible {
backdrop-filter: blur(var(--blur)) !important;
}
.upNextContainer:not(#skipIntro) {
border-radius: var(--rounded-cards) !important;
background-color: rgba(0, 0, 0, 0.6) !important;
}
.upNextContainer {
margin: 4% !important;
}
.toastVisible {
border-radius: 30px !important;
background-color: var(--primary-background-transparent) !important;
}
.sliderBubble {
border-radius: var(--rounded-cards) !important;
background-color: var(--secondary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
background-color: #ffffff00 !important;
top: 25px !important;
backdrop-filter: unset !important;
}
.mdl-slider-background-flex {
height: 10px !important;
margin-top: -5px !important;
border-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
}
.mdl-slider-background-lower {
border-radius: 100px !important;
background-color: var(--primary-accent-color) !important;
}
/* Moz */
.mdl-slider::-moz-range-thumb {
background: #ffffff00 !important;
height: 10px !important;
width: 8px !important;
border-radius: 2px !important;
}
.mdl-slider-hoverthumb:hover::-moz-range-thumb {
transform: scaleY(2);
background: #fff !important;
}
/* Webkit */
.mdl-slider::-webkit-slider-thumb {
background: #ffffff00 !important;
height: 10px !important;
width: 8px !important;
border-radius: 2px !important;
}
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
transform: scaleY(2);
background: #fff !important;
}
.mdl-slider-background-upper {
border-top-right-radius: 100px !important;
border-bottom-right-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
transform: translateX(-3px) !important;
}
.iconOsdProgressInner {
background: var(--primary-accent-color) !important;
}
/* Up next card */
.upNextDialog-buttons .upNextDialog-button {
transition: .2s !important;
}
.upNextDialog-buttons .upNextDialog-button:hover {
transform: scale(1.1);
}
/* Support for Jellyscrub plugin */
.chapterThumbContainer {
background: none !important;
border-radius: var(--rounded-cards) !important;
box-shadow: unset !important;
}
.chapterThumb {
border-radius: var(--rounded-cards) !important;
margin-bottom: 47px !important;
box-shadow: 0 0 1.9vh #000 !important;
}
.chapterThumbTextContainer {
background: none !important;
}
.chapterThumbText {
text-align: center !important;
}
.chapterThumbText-dim {
display: none !important;
}
/* Support for IntroSkipper plugin */
#skipIntro .btnSkipIntro {
transition: 0.2s;
border-radius: 100px !important;
backdrop-filter: blur(var(--blur)) !important;
}
#skipIntro .btnSkipIntro:hover {
transition: .2s;
transform: scale(1.05);
background: var(--primary-accent-color) !important;
}
#skipIntro .paper-icon-button-light:hover:not(:disabled) {
color: #FFF !important;
}
.sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker {
opacity: 0 !important;
transition: 0.2s !important;
}
.sliderContainer:has(.mdl-slider-hoverthumb:hover) .sliderMarker {
opacity: 1 !important;
transition: 0.2s !important;
height: 10px !important;
transform: translate3d(0,40%,0) !important;
-webkit-transform: translate3d(0,40%,0) !important;
}
.sliderMarker.watched {
background-color: #FFFFFF90 !important;
z-index: 10 !important;
}
#skipIntro .upNextContainer {
padding: 0px !important;
}
#skipIntro .emby-button {
background: rgba(30, 30, 30, 0.7) !important;
}
#skipIntro .emby-button:hover {
box-shadow: 0 0 8px rgba(var(--primary-accent-color), 0.6) !important;
}
#skipIntro .emby-button:focus {
background: rgba(30, 30, 30, 0.7) !important;
box-shadow: unset !important;
}
/* Support for InPlayerEpisodePreview plugin */
.layout-desktop #popupFocusContainer {
padding: 10px !important;
}
.layout-desktop #popupTitleContainer {
margin: 0px !important;
padding: 10px 0px 10px 0px !important;
}
.layout-desktop #popupContentContainer .previewEpisodeDetails {
position: unset !important;
margin: 0px 0px 6px 10px !important;
font-size: 13.5px !important;
}
.layout-desktop #popupContentContainer .previewEpisodeTitle {
font-size: 16.5px !important;
}
.layout-desktop #popupContentContainer .listItem {
padding: .25em .25em .25em .5em !important;
}
/* Modify player buttons */
.material-icons.fast_rewind::before {
content: "\e059";
}
.material-icons.fast_forward::before {
content: "\e057";
}
.material-icons.audiotrack::before {
content: "\e91f";
}
/* Settings and dashboard modifications */
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
border-radius: var(--rounded-cards) !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
#btnShutdown,
.raised {
border-radius: 100px !important;
}
.button-submit {
background: var(--primary-accent-color) !important;
}
/* Modify username placement on profile page */
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
align-items: initial !important;
}
.layout-desktop .username {
margin: 0px 0px 10px 10px !important;
}
/* Red shutdown button */
#btnShutdown {
background: #AE3739 !important;
}
/* Remove border under certain dashboard items */
.listItem-border {
border: 0 !important;
}
/* Add padding to list items */
.layout-desktop .listItem,
.layout-tv .listItem {
padding-inline: 15px !important;
}
/* Rounded dashboard cards */
.cardBox {
border-radius: var(--rounded-cards) !important;
}
/* Removed ugliness of border-card styling */
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
border-radius: var(--rounded-cards) !important;
border-color: #3B3B3B !important;
padding: 10px 35px !important;
}
/* Rounded tab selections in dashboard */
.layout-desktop .localnav {
border-radius: 100px !important;
background: #202020 !important;
width: fit-content !important;
}
.layout-desktop a[data-role="button"] {
background: none !important;
}
.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
background: var(--primary-accent-color) !important;
border-radius: 100px !important;
}
.layout-desktop .dashboardDocument .mainAnimatedPage {
left: 260px !important;
}
#libraryDisplayPage,
#metadataImagesConfigurationPage,
#metadataNfoPage {
margin-top: 40px !important;
}
#mediaLibraryPage {
margin-top: 10px !important;
}
/* Re-align active devices in dashboard */
.activeDevices.itemsContainer {
margin: 0px !important;
}
.playbackProgress > div {
background: var(--primary-accent-color) !important;
}
/* IntroSkipper settings */
.layout-desktop summary {
border-radius: 100px !important;
}
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
padding: 10px 35px 20px 35px !important;
}
#intro_reqs,
#edl,
#silence,
#support {
padding-bottom: 10px !important;
}
/* Dashboard fixes for 10.9.x */
.layout-desktop #userProfilesPage {
left: 260px !important;
}
.MuiAlert-message {
color: #fff !important;
}
.MuiDataGrid-root.MuiDataGrid-withBorderColor {
border-radius: var(--rounded-cards) !important;
}
.infoBanner {
border-radius: var(--rounded-cards) !important;
}
.MuiToggleButton-root.MuiToggleButtonGroup-groupedHorizontal {
border-radius: var(--rounded-cards);
padding-inline: 15px !important;
}
.MuiAppBar-root.MuiAppBar-positionFixed {
padding: 10px !important;
}
.MuiAppBar-root.MuiAppBar-positionFixed.MuiAppBar-colorPrimary {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.MuiList-root.MuiList-subheader {
padding-left: 10px !important;
}
.MuiList-subheader .MuiListItem-root.MuiListItem-gutters {
width: 85% !important;
margin-inline: auto !important;
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters {
border-radius: 100px !important;
margin: 2px 0px !important;
transition: .2s !important;
height: 45px !important
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) .MuiListItemIcon-root,
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) {
color: #D1D1D1
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:hover:not(.Mui-selected) {
transform: scale(1.05) !important;
background: rgba(44, 44, 44, 0.7) !important;
}
.MuiListItemButton-root.Mui-selected {
background: var(--secondary-accent-color) !important;
}
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiListItemButton-root.Mui-selected {
color: var(--primary-accent-color) !important;
}
.MuiPaper-root.MuiDrawer-paperAnchorDockedLeft {
border-right: none !important;
background: var(--secondary-background-color) !important;
width: 250px !important;
}
.MuiListItemIcon-root.MuiSvgIcon-fontSizeMedium {
color: inherit !important;
}
.MuiPaper-root.MuiPopover-paper {
background: #252525 !important;
color: #D1D1D1 !important;
border-radius: var(--rounded-cards) !important;
}
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important) {
background: var(--secondary-accent-color) !important;
color: var(--primary-accent-color) !important;
}
.MuiList-root:not(.MuiList-subheader) .MuiListItemButton-root.MuiListItemButton-gutters {
padding: 20px 38px 10px 38px !important;
}
.MuiCollapse-root.MuiCollapse-vertical .MuiListItemButton-root.MuiListItemButton-gutters {
width: 85% !important;
margin-inline: auto !important;
padding: 8px 16px !important;
}
/* Dynamic colors for "Active Devices" section to respect theme */
.defaultCardBackground1 {
background-color: var(--primary-alt1) !important;
}
.defaultCardBackground2 {
background-color: var(--primary-alt2) !important;
}
.defaultCardBackground3 {
background-color: var(--primary-alt3) !important;
}
.defaultCardBackground4 {
background-color: var(--primary-alt4) !important;
}
.defaultCardBackground5 {
background-color: var(--primary-alt5) !important;
}
/* Metadata editor fixes */
.layout-desktop .editPageSidebar {
width: 25vw !important;
}
.layout-desktop .editPageInnerContent {
width: 74vw !important;
}
.jstree-default-large .jstree-node {
line-height: 35px !important;
}
.jstree-default .jstree-wholerow-clicked {
background: var(--secondary-accent-color) !important;
}
.jstree-wholerow-hovered {
background: var(--primary-background-transparent) !important;
}
.jstree-children {
margin-left: -10px !important;
}
#editItemMetadataPage .btnHeaderSave {
background: var(--primary-accent-color) !important;
border-radius: 100px !important;
height: 40px !important;
color: white !important;
}
/* Resize show/movie image on details page */
.layout-desktop .detailImageContainer .card {
top: 9em !important;
width: 18.3vw !important;
}
/* Re-position content on details page */
.layout-desktop .detailSection {
margin-right: 0 !important;
}
.layout-desktop .detailPageContent {
padding-left: 3.3% !important;
}
/* Re-position logo */
.layout-desktop .detailLogo,
.layout-tv .detailLogo {
right: 0 !important;
left: 4% !important;
top: 10% !important;
}
/* Transparent ribbon bar */
.detailRibbon {
background: transparent !important;
}
/* Add card around top-right buttons */
.mainDetailButtons {
background: var(--primary-background-transparent) !important;
border-radius: 100px !important;
backdrop-filter: blur(var(--blur)) !important;
}
/* Add card around groups section */
.layout-desktop .detailsGroupItem {
background: var(--secondary-background-color) !important;
padding: 10px 20px !important;
border-radius: 20px !important;
width: fit-content !important;
max-width: max-content !important;
display: flex;
gap: 1em;
}
/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
min-width: 75px;
flex-basis: unset;
margin: unset;
}
/* Alternative mobile group section card */
.layout-mobile .itemDetailsGroup {
background: var(--secondary-background-color) !important;
padding: 15px 20px 5px 20px !important;
border-radius: var(--rounded-cards) !important;
}
/* Add card around description */
.layout-desktop .detailSectionContent {
background: var(--secondary-background-color) !important;
border-radius: var(--rounded-cards) !important;
padding: 40px 20px 10px 20px !important;
margin-top: 50px !important;
}
.layout-mobile .detailSectionContent {
background: var(--secondary-background-color) !important;
border-radius: var(--rounded-cards) !important;
padding: 10px 20px !important;
}
/* Add card around track selection */
.trackSelections {
background: var(--secondary-background-color) !important;
border-radius: var(--rounded-cards) !important;
padding: 10px 20px !important;
margin-top: 20px !important;
}
/* Fix for track select dropdowns */
.trackSelections .selectContainer .detailTrackSelect {
padding: 0 10px;
margin-left: 10px !important;
}
/* Re-position title */
.layout-desktop .infoWrapper {
margin-top: 245px !important;
margin-left: 20.8vw !important;
}
.layout-desktop .detailPagePrimaryContainer {
padding-left: 3.3% !important;
}
.layout-desktop .nameContainer {
position: absolute !important;
margin-top: -48px !important;
}
.layout-desktop .itemMiscInfo {
position: absolute !important;
margin-left: 12px !important;
margin-top: 16px !important;
}
/* Move description box */
.layout-desktop .detailPagePrimaryContent {
padding-left: 20.4vw !important;
}
/* Padding for 2:3 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent {
min-height: 29vw !important;
}
/* Padding for 1:1 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
min-height: 20vw !important;
}
/* Padding for 16:9 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent {
min-height: 12vw !important;
}
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent {
min-height: 29vw !important;
}
}
/* Move track selection box */
.detailSection {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.detailSection .detailSectionContent {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.detailSection .recordingFields {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.detailSection .trackSelections {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
.detailSection .itemDetailsGroup {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
box-ordinal-group: 4;
}
/* Move episode title */
.layout-desktop .nameContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
}
.layout-desktop .nameContainer .parentName {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.layout-desktop .nameContainer .itemName {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
/* Modify original title / episode name position */
.layout-desktop .nameContainer .itemName.originalTitle {
margin: .5em 20px !important;
}
.layout-desktop .nameContainer .itemName.infoText.subtitle {
margin: .5em 20px !important;
padding: 0px !important;
}
/* Modify play button */
.layout-desktop .mainDetailButtons .btnPlay::after {
content: "Play" !important;
}
.layout-desktop .mainDetailButtons .btnPlay {
position: relative !important;
margin-right: -85px !important;
padding-right: 20px !important;
right: 110px !important;
background: var(--primary-accent-color) !important;
border-radius: 100px !important;
color: var(--secondary-background-color) !important;
}
.layout-desktop .mainDetailButtons .detailButton {
-webkit-flex-direction: row !important;
flex-direction: row !important;
}
/* Change crop for list item images */
.listItemImage {
background-size: contain !important;
border-radius: var(--rounded-cards);
}
/* Live TV */
/* Modified background color of active guide cells */
.programCell-active {
background: var(--secondary-background-color) !important;
}
/* Repositioned record button */
.recordingFields {
margin: 5px 0 -7px 0 !important;
}
.recordingButton {
height: 40px !important;
}
.recordingIcon {
color: red !important;
}
/* Remove overlapping text */
.itemMiscInfo.itemMiscInfo-secondary {
margin-left: 65px !important;
}
/* Music Player */
.layout-desktop .appfooter {
margin-left: 250px !important;
}
.layout-desktop .appfooter .nowPlayingBarInfoContainer {
margin-left: 10px !important;
}
.layout-desktop .volumeOsd {
border-radius: var(--rounded-cards) !important;
background: var(--secondary-background-transparent) !important;
}
.layout-desktop .nameContainer .musicParentName {
margin-top: 18px !important;
margin-right: 22px !important;
}
.layout-desktop .appfooter .nowPlayingBar {
margin-top: 20px !important;
}
.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
top: -15px !important;
}
/* Fix for scaling issues */
@media (width: 1600px) {
.layout-desktop .headerRight {
margin-bottom: 0 !important;
}
.layout-desktop .emby-button-foreground {
top: -4px !important;
}
}
@media (max-width: 1599px) {
.layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
}
.layout-desktop .headerTabs {
margin-top: -65px !important;
}
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
}
.layout-desktop .emby-button-foreground {
top: -2px !important;
}
}
/* Fixes for TV Layout */
.layout-tv .sectionTabs {
width: auto !important;
}
.layout-tv .headerLeft {
padding: 5px !important;
}
/* Login page */
.layout-desktop #loginPage {
display: flex;
justify-content: center;
align-items: center;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
background: var(--secondary-background-color) !important;
width: 400px !important;
border-radius: 25px !important;
padding: 50px !important;
}
.layout-desktop #loginPage .manualLoginForm .btnCancel {
position: absolute !important;
background: none !important;
width: 100px !important;
margin-left: -10px !important;
margin-top: 70px !important;
text-align: left !important;
}
.layout-desktop #loginPage .visualLoginForm {
position: relative !important;
background: var(--secondary-background-color) !important;
z-index: 1000 !important;
}
.layout-desktop #loginPage .btnForgotPassword {
background: none !important;
font-weight: normal !important;
width: 150px !important;
text-align: right !important;
position: absolute !important;
margin-left: 255px !important;
margin-top: -195px !important;
font-size: smaller !important;
color: rgba(255, 255, 255, 0.5) !important;
z-index: 1 !important;
}
.layout-desktop #loginPage .loginDisclaimerContainer {
top: 130px !important;
position: relative !important;
left: -50px !important;
width: 500px !important;
margin-top: -35px !important;
}
.layout-desktop #loginPage .squareCard {
width: 25% !important;
font-size: smaller !important;
}
@media (max-width: 100em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
width: 600px !important;
}
.layout-desktop #loginPage .btnForgotPassword {
margin-left: 450px !important;
}
.layout-desktop #loginPage .disclaimerContainer {
width: 700px !important;
}
}
@media (max-width: 87.5em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 43.75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
/* Dialog box */
.dialog {
background-color: var(--secondary-background-color) !important;
}
.actionSheetTitle {
margin: 10px 20px !important;
}
/* Dynamic backdrop support */
/* Translucent cards */
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem,
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent,
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
/* Transparent drawer */
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: linear-gradient(to right, #10101090, transparent) !important;
}
.layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer {
background: var(--secondary-background-color) !important;
}
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: transparent !important;
}
.layout-desktop #itemDetailPage.noBackdropTransparency::after {
position: fixed;
content: "";
top: 0;
left: 0;
height: 100%;
width: 250px;
background: var(--secondary-background-color);
}
}
/* Blur buttons */
.layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected {
backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption:hover:not(.navMenuOption-selected) {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment