Update README

Removed dashboard image from README.

CSS/disable-static-drawer-backdrop.css

@@ -1,116 +0,0 @@
-/* Reset size of Jellyfin logo */
-.layout-desktop .pageTitleWithLogo {
-    height: 30px !important;
-    width: 100px !important;
-}
-
-/* Un-static left drawer */
-.layout-desktop .mainDrawer:not(.dashboardDocument) {
-    left: -345px !important;
-    width: 275px !important;
-    /* Move drawer behind header */
-    z-index: 1099 !important;
-    /* Modified background color */
-    background-color: var(--primary-background-transparent) !important;
-    border-radius: var(--rounded-cards) !important;
-    backdrop-filter: blur(50px) !important;
-}
-
-/* Lower drawer buttons */
-.layout-desktop .mainDrawer-scrollContainer {
-    margin-top: 15px !important;
-    margin-left: 25px !important;
-}
-
-/* Shift content back to the left */
-.layout-desktop .libraryPage:not(#editItemMetadataPage) {
-    margin-left: 0px !important;
-}
-/* Fix for Jellyfin Media Player */
-.quickConnectSettingsContainer {
-    margin-left: 0px !important;
-}
-
-/* Add transition back */
-.layout-desktop .touch-menu-la.transition {
-    transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
-}
-
-/* Show hamburger button */
-.layout-desktop .mainDrawerButton:not(.dashboardDocument) {
-    display: inline-flex !important;
-}
-
-/* Fix for dashboard */
-.layout-desktop .dashboardDocument .mainDrawer {
-    top: 0px !important;
-    left: 0px !important;
-    width: 300px !important;
-    z-index: 998 !important;
-}
-.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
-    padding-top: 75px !important;
-}
-
-/* Re-center header buttons */
-.layout-desktop .headerTabs {
-    margin-left: 0px !important;
-}
-
-/* Hide home button */
-.layout-desktop .headerHomeButton {
-    display: block !important;
-}
-.layout-desktop .dashboardDocument .headerHomeButton {
-    display: block !important;
-}
-
-/* Fix for scroll menus on home page */
-.emby-scroller {
-    margin-right: 3.3% !important;
-}
-
-/* Background for top left buttons */
-.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
-    padding: 2px 15px 2px 2px !important;
-    top: -3px !important;
-    background-color: var(--primary-background-transparent) !important;
-    border-radius: 50px !important;
-    backdrop-filter: blur(50px) !important;
-}
-.headerLeft {
-    flex-grow: 0 !important;
-    -webkit-flex-grow: 0 !important;
-}
-.headerRight {
-    position: absolute !important;
-    right: 12px !important;
-}
-
-/* Reduce the size of the header when the logo is not present */
-.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
-    width: 160px;
-}
-
-.layout-desktop .pageTitle {
-    z-index: 1099 !important;
-}
-
-@media (width: 1600px) {
-    .layout-desktop:not(.transparentDocument) .headerLeft::before {
-        top: 35px;
-        left: 10px;
-    }
-}
-
-@media (max-width: 1599px) {
-    .layout-desktop:not(.transparentDocument) .headerLeft::before {
-        top: 35px;
-        left: 5px;
-    }
-}
-
-/* Music Player */
-.layout-desktop .appfooter {
-    margin-left: 0px !important;
-}

CSS/disable-static-drawer.css

@@ -2,15 +2,34 @@
 .layout-desktop .pageTitleWithLogo {
     height: 30px !important;
     width: 100px !important;
+    margin: 0 1em 0 .5em !important;
+}
+[dir="ltr"] .pageTitle {
+    margin: 0 1em 0 .5em !important;
 }
 
 /* Un-static left drawer */
 .layout-desktop .mainDrawer:not(.dashboardDocument) {
     left: -320px !important;
-    /* Move drawer behind header */
     z-index: 1099 !important;
-    background-color: var(--secondary-background-color) !important;
+    border-top-right-radius : var(--rounded-cards) !important;
-    border-radius: var(--rounded-cards) !important;
+    border-bottom-right-radius : var(--rounded-cards) !important;
+    background: var(--secondary-background-color) !important;
+    backdrop-filter: none !important;
+}
+.layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer:not(.dashboardDocument) {
+    width: 275px !important;
+    background-color: var(--primary-background-transparent) !important;
+    backdrop-filter: blur(var(--blur)) !important;
+}
+@supports not selector(:has(*)) {
+    .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
+        background: var(--secondary-background-color) !important;
+        backdrop-filter: none !important;
+    }
+    .layout-desktop #itemDetailPage.noBackdropTransparency::after {
+        display: none !important;
+    }
 }
 
 /* Lower drawer buttons */
@@ -33,7 +52,7 @@
 }
 
 /* Show hamburger button */
-.layout-desktop .mainDrawerButton:not(.dashboardDocument) {
+.layout-desktop body:not(.hideMainDrawer) .mainDrawerButton:not(.dashboardDocument) {
     display: inline-flex !important;
 }
 
@@ -53,11 +72,11 @@
     margin-left: 0px !important;
 }
 
-/* Hide home button */
+/* Re-enable home button */
-.layout-desktop .headerHomeButton {
+.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
     display: block !important;
 }
-.layout-desktop .dashboardDocument .headerHomeButton {
+.layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton {
     display: block !important;
 }
 
@@ -67,12 +86,22 @@
 }
 
 /* Background for top left buttons */
-.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
+.layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
-    padding: 2px 15px 2px 2px !important;
+    padding: 2px !important;
     top: -3px !important;
     background-color: var(--primary-background-transparent) !important;
     border-radius: 50px !important;
-    backdrop-filter: blur(50px) !important;
+    backdrop-filter: blur(var(--blur)) !important;
+}
+/* Fix for JMP */
+@supports not selector(:has(*)) {
+    .layout-desktop body:not(.hideMainDrawer) .headerLeft {
+        padding: 2px !important;
+        top: -3px !important;
+        background-color: var(--primary-background-transparent) !important;
+        border-radius: 50px !important;
+        backdrop-filter: blur(var(--blur)) !important;
+    }
 }
 .headerLeft {
     flex-grow: 0 !important;
@@ -83,29 +112,6 @@
     right: 12px !important;
 }
 
-/* Reduce the size of the header when the logo is not present */
-.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
-    width: 160px;
-}
-
-.layout-desktop .pageTitle {
-    z-index: 1099 !important;
-}
-
-@media (width: 1600px) {
-    .layout-desktop:not(.transparentDocument) .headerLeft::before {
-        top: 35px;
-        left: 10px;
-    }
-}
-
-@media (max-width: 1599px) {
-    .layout-desktop:not(.transparentDocument) .headerLeft::before {
-        top: 35px;
-        left: 5px;
-    }
-}
-
 /* Music Player */
 .layout-desktop .appfooter {
     margin-left: 0px !important;

CSS/scyfin-theme-backdrop.css

@@ -1,995 +0,0 @@
-/* Variables */
-:root {
-    --primary-accent-color: #00a4dc;
-    --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;
-}
-
-/* Setting accent color variable */
-.emby-checkbox:checked + span + .checkboxOutline,
-.selectionCommandsPanel,
-.countIndicator,
-.MuiButton-root,
-.MuiChip-root:not(.MuiChip-colorError) {
-    background: var(--primary-accent-color) !important;
-}
-.MuiAlert-root {
-    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,
-.MuiAlert-icon {
-    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;
-}
-
-/* Static left drawer */
-.layout-desktop .mainDrawer {
-    left: 0 !important;
-    top: 0 !important;
-    width: 250px !important;
-    /* Modified background color */
-    background-color: transparent !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: 20px !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 !important;
-    bottom: 0% !important;
-    background: rgba(0,0,0,0.5) !important;
-    backdrop-filter: blur(10px) !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;
-}
-.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;
-}
-.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;
-    backdrop-filter: blur(50px) !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(50px) !important;
-}
-.layout-desktop .headerTabs,
-.layout-desktop .headerRight,
-.layout-tv .headerTabs,
-.layout-tv .headerRight {
-    margin-bottom: 10px !important;
-}
-.layout-desktop .headerTabs {
-    margin-left: 160px !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;
-}
-.layout-mobile .emby-button-foreground {
-    top: -2px !important;
-}
-
-
-
-/* Player modifications */
-.upNextContainer, .toastVisible {
-    backdrop-filter: blur(10px) !important;
-}
-.upNextContainer {
-    border-radius: var(--rounded-cards) !important;
-    background-color: rgba(0, 0, 0, 0.6) !important;
-    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(10px) !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;
-}
-.mdl-slider::-moz-range-thumb,
-.mdl-slider::-webkit-slider-thumb {
-    background: #ffffff00 !important;
-    height: 10px !important;
-    width: 8px !important;
-    border-radius: 2px !important;
-}
-.mdl-slider-hoverthumb:hover::-moz-range-thumb,
-.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 {
-    transition: 0.2s;
-    border-radius: 100px !important;
-    padding: 5px 10px !important;
-    backdrop-filter: blur(10px) !important;
-    border: none !important;
-}
-.skipIntro:hover {
-    box-shadow: unset !important;
-    transition: .2s;
-    transform: scale(1.05);
-}
-.skipIntro .paper-icon-button-light:hover:not(:disabled) {
-    color: #FFF !important;
-}
-.sliderMarker {
-    display: none !important;
-}
-
-
-
-/* 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 {
-    border-radius: var(--rounded-cards) !important;
-}
-.infoBanner,
-.MuiPopover-paper {
-    border-radius: var(--rounded-cards) !important;
-}
-.MuiToggleButton-root {
-    border-radius: var(--rounded-cards);
-    padding-inline: 15px !important;
-}
-.MuiAppBar-root {
-    padding: 10px !important;
-}
-.MuiList-subheader .MuiListItemButton-root {
-    border-radius: 100px !important;
-    margin: 2px 15px !important;
-    transition: .2s !important;
-}
-.MuiList-subheader .MuiListItemButton-root:not(.Mui-selected) {
-    color: #D1D1D1
-}
-.MuiList-subheader .MuiListItemButton-root:hover:not(.Mui-selected) {
-    transform: scale(1.05) !important;
-    background: rgba(44, 44, 44, 0.7) !important;
-}
-.Mui-selected {
-    color: var(--primary-accent-color) !important;
-    background: var(--secondary-accent-color) !important;
-}
-.MuiDrawer-paper {
-    border-right: none !important;
-    background: var(--secondary-background-color)
-}
-.MuiListItemIcon-root {
-    color: inherit !important;
-}
-.MuiPopover-paper {
-    background: #252525 !important;
-    color: #D1D1D1 !important;
-}
-.listItemIcon:not(.listItemIcon-transparent):not(.notification_important) {
-    background: var(--secondary-accent-color) !important;
-    color: var(--primary-accent-color) !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 */
-.layout-desktop .mainDetailButtons {
-    background: var(--primary-background-transparent) !important;
-    border-radius: 100px !important;
-    backdrop-filter: blur(10px) !important;
-}
-.layout-mobile .mainDetailButtons {
-    background: var(--secondary-background-color) !important;
-    border-radius: 100px !important;
-}
-
-/* Add card around groups section */
-.layout-desktop .detailsGroupItem {
-    background: var(--primary-background-transparent) !important;
-    padding: 10px 20px !important;
-    border-radius: 100px !important;
-    width: fit-content !important;
-    max-width: max-content !important;
-    backdrop-filter: blur(40px) !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(--primary-background-transparent) !important;
-    border-radius: var(--rounded-cards) !important;
-    padding: 40px 20px 10px 20px !important;
-    margin-top: 50px !important;
-    backdrop-filter: blur(40px) !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 */
-.layout-desktop .trackSelections {
-    background: var(--primary-background-transparent) !important;
-    border-radius: var(--rounded-cards) !important;
-    padding: 10px 20px !important;
-    margin-top: 20px !important;
-    backdrop-filter: blur(40px) !important;
-}
-.layout-mobile .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;
-}
-
-/* Re-position title */
-.layout-desktop .infoWrapper {
-    margin-top: 245px !important;
-    margin-left: 20.4vw !important;
-}
-.layout-desktop .detailPagePrimaryContainer {
-    padding-left: 3.3% !important;
-}
-.layout-desktop .nameContainer {
-    position: absolute !important;
-    margin-top: -55px !important;
-}
-.layout-desktop .itemMiscInfo {
-    position: absolute !important;
-    margin-left: 21px !important;
-    margin-top: 16px !important;
-}
-
-/* Move description box */
-.layout-desktop .detailPagePrimaryContent {
-    padding-left: 20.4vw !important;
-    min-height: 29vw !important;
-}
-.layout-desktop .detailPageSecondaryContainer:has(.moreFromSeasonSection:not(.hide)) .detailPagePrimaryContent {
-    min-height: 12vw !important;
-} 
-.layout-desktop .detailPageSecondaryContainer:has(#childrenCollapsible:not(.hide) div[data-type="Audio"]) .detailPagePrimaryContent {
-    min-height: 20vw !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;
-}
-/* Fix for backdrops */
-.layout-desktop #itemBackdrop {
-    display: none !important;
-}
-.layout-desktop .detailPageWrapperContainer {
-    padding-top: 20% !important;
-}
-/* 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;
-    margin: 0.45em 0 0 0 !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;
-}
-
-
-
-/* Live TV */
-/* Modified background color of active guide cells */
-.programCell-active {
-    background: var(--secondary-background-color) !important;
-}
-/* Translucent buttons */
-.raised.emby-button:not(.button-submit):not(.btnForgotPassword) {
-    background: rgba(35, 35, 35, 0.5) !important;
-    backdrop-filter: blur(40px) !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;
-    }
-}
-@media (max-width: 85em) {
-    .layout-desktop .detailLogo, .layout-tv .detailLogo {
-        top: 6% !important;
-    }
-}
-@media (max-width: 68.75em) {
-    .layout-desktop .mainDetailButtons {
-        position: absolute !important;
-        left: 140px !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;
-}

CSS/scyfin-theme.css

@@ -1,23 +1,41 @@
 /* Variables */
 :root {
-    --primary-accent-color: #00a4dc;
+    --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: 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-root.MuiButton-containedSizeMedium,
-.MuiChip-root:not(.MuiChip-colorError) {
+.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-colorError),
+progress[aria-valuenow]:before {
     background: var(--primary-accent-color) !important;
 }
-.MuiAlert-root {
+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,
@@ -32,14 +50,17 @@
 .progressring-spiner {
     border-color: var(--primary-accent-color) !important;
 }
-.button-link:not(.itemDetailPage .button-link),
+.page:not(.itemDetailPage) .button-link,
 .selectLabelFocused,
 .textareaLabelFocused,
 .inputLabelFocused,
 .emby-tab-button:hover,
 .metadataSidebarIcon,
 .upNextDialog-countdownText,
-.MuiAlert-icon {
+.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit,
+.listItemImageButton:hover,
+.button-flat:hover,
+#divRunningTasks span {
     color: var(--primary-accent-color) !important;
 }
 @media (hover: hover) and (pointer: fine) {
@@ -55,13 +76,18 @@
     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-color: var(--secondary-background-color) !important;
+    background: var(--secondary-background-color) !important;
     /* Move drawer behind header */
     z-index: 998 !important;
 }
@@ -109,14 +135,13 @@
 .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;
 }
+.layout-desktop .collectionItems .sectionTitleContainer {
+    padding-left: 0% !important;
+}
 /* Dynamic buttons */
 .layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
     transform: scale(1.05) !important;
@@ -137,7 +162,8 @@
 .cardOverlayContainer,
 .blurhash-canvas,
 .dialog,
-.itemSelectionPanel {
+.itemSelectionPanel,
+.nowPlayingPageImage {
     border-radius: var(--rounded-cards) !important;
 }
 /* Rounded selection menu */
@@ -158,7 +184,7 @@
     padding: 5px 15px 5px 5px !important;
     bottom: 0% !important;
     background: rgba(0,0,0,0.5) !important;
-    backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(var(--blur)) !important;
 }
 .fullInnerCardFooter {
     bottom: 5% !important;
@@ -172,6 +198,7 @@
     height: 10px !important;
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
+    border-radius: 100px !important;
 }
 .innerCardFooterClear {
     background-color: none !important;
@@ -179,7 +206,7 @@
 .innerCardFooter .cardText {
     padding: 0 0 0 10px !important
 }
-.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
+.cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground {
     background: var(--primary-accent-color) !important;
 }
 .itemProgressBarForeground {
@@ -225,6 +252,8 @@
     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);
@@ -258,9 +287,6 @@ html,
 .noBackdropTransparency .detailPageSecondaryContainer {
     background-color: var(--primary-background-color) !important;
 }
-.backgroundContainer.withBackdrop {
-    background: var(--secondary-background-transparent) !important;
-}
 
 
 /* Transparent header bar */
@@ -279,16 +305,15 @@ html,
 .headerRight {
     background-color: var(--primary-background-transparent) !important;
     border-radius: 50px !important;
-    backdrop-filter: blur(50px) !important;
+    backdrop-filter: blur(var(--blur)) !important;
 }
 .layout-desktop .headerTabs,
-.layout-desktop .headerRight,
+.layout-tv .headerTabs {
-.layout-tv .headerTabs,
-.layout-tv .headerRight {
     margin-bottom: 10px !important;
 }
 .layout-desktop .headerTabs {
     margin-left: 160px !important;
+    margin-top: -58px !important;
 }
 /* Button height */
 .headerRight,
@@ -316,20 +341,75 @@ html,
     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, .toastVisible {
+.upNextContainer:not(#skipIntro), .toastVisible {
-    backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(var(--blur)) !important;
 }
-.upNextContainer {
+.upNextContainer:not(#skipIntro) {
     border-radius: var(--rounded-cards) !important;
     background-color: rgba(0, 0, 0, 0.6) !important;
+}
+.upNextContainer {
     margin: 4% !important;
 }
 .toastVisible {
@@ -339,35 +419,56 @@ html,
 .sliderBubble {
     border-radius: var(--rounded-cards) !important;
     background-color: var(--secondary-background-transparent) !important;
-    backdrop-filter: blur(10px) !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 {
+@supports selector(div:not(.parent .child)) {
-    height: 10px !important;
+    .mdl-slider-background-flex:not(.layout-mobile .nowPlayingBar .mdl-slider-background-flex) {
-    margin-top: -5px !important;
+        height: 10px !important;
-    border-radius: 100px !important;
+        margin-top: -5px !important;
-    background: hsla(0,0%,100%,.2) !important;
+        border-radius: 100px !important;
+        background: hsla(0,0%,100%,.2) !important;
+    }
+}
+@supports not selector(div:not(.parent .child)) {
+    .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;
 }
-.mdl-slider::-moz-range-thumb,
+/* 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::-moz-range-thumb,
 .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;
@@ -408,23 +509,76 @@ html,
 }
 
 /* Support for IntroSkipper plugin */
-.skipIntro {
+#skipIntro .btnSkipIntro {
     transition: 0.2s;
     border-radius: 100px !important;
-    padding: 5px 10px !important;
+    backdrop-filter: blur(var(--blur)) !important;
-    backdrop-filter: blur(10px) !important;
-    border: none !important;
 }
-.skipIntro:hover {
+#skipIntro .btnSkipIntro:hover {
-    box-shadow: unset !important;
     transition: .2s;
     transform: scale(1.05);
+    background: var(--primary-accent-color) !important;
 }
-.skipIntro .paper-icon-button-light:hover:not(:disabled) {
+#skipIntro .paper-icon-button-light:hover:not(:disabled) {
     color: #FFF !important;
 }
-.sliderMarker {
+.sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker {
-    display: none !important;
+    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";
 }
 
 
@@ -487,7 +641,6 @@ html,
 }
 .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;
@@ -532,51 +685,124 @@ html,
 .MuiAlert-message {
     color: #fff !important;
 }
-.MuiDataGrid-root {
+.MuiDataGrid-root.MuiDataGrid-withBorderColor {
     border-radius: var(--rounded-cards) !important;
 }
-.infoBanner,
+.infoBanner {
-.MuiPopover-paper {
     border-radius: var(--rounded-cards) !important;
 }
-.MuiToggleButton-root {
+.MuiToggleButton-root.MuiToggleButtonGroup-groupedHorizontal {
     border-radius: var(--rounded-cards);
     padding-inline: 15px !important;
 }
-.MuiAppBar-root {
+.MuiAppBar-root.MuiAppBar-positionFixed {
     padding: 10px !important;
 }
-.MuiList-subheader .MuiListItemButton-root {
+.MuiAppBar-root.MuiAppBar-positionFixed.MuiAppBar-colorPrimary {
-    border-radius: 100px !important;
+    background: var(--primary-background-transparent) !important;
-    margin: 2px 15px !important;
+    backdrop-filter: blur(var(--blur)) !important;
-    transition: .2s !important;
 }
-.MuiList-subheader .MuiListItemButton-root:not(.Mui-selected) {
+.MuiList-root.MuiList-subheader {
+    padding-left: 10px !important;
+}
+.MuiList-subheader .MuiListItem-root.MuiListItem-gutters {
+    width: 85% !important;
+    margin-inline: auto !important;
+}
+/* Fix for plugins section of dashboard */
+[aria-labelledby="plugins-subheader"].MuiList-subheader .MuiListItemButton-root.MuiListItemButton-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:hover:not(.Mui-selected) {
+.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:hover:not(.Mui-selected) {
     transform: scale(1.05) !important;
     background: rgba(44, 44, 44, 0.7) !important;
 }
-.Mui-selected {
+.MuiListItemButton-root.Mui-selected {
-    color: var(--primary-accent-color) !important;
     background: var(--secondary-accent-color) !important;
 }
-.MuiDrawer-paper {
+.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
-    border-right: none !important;
+.MuiListItemButton-root.Mui-selected {
-    background: var(--secondary-background-color)
+    color: var(--primary-accent-color) !important;
 }
-.MuiListItemIcon-root {
+.MuiPaper-root.MuiDrawer-paperAnchorDockedLeft {
+    border-right: none !important;
+    background: var(--secondary-background-color) !important;
+    width: 250px !important;
+}
+.MuiListItemIcon-root.MuiSvgIcon-fontSizeMedium {
     color: inherit !important;
 }
-.MuiPopover-paper {
+.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;
+}
+/* Modify padding for textarea items so the bottom isn't cut off */
+textarea {
+    padding-bottom: 10px !important;
+}
+/* Background behind dashboard dropdown navigation buttons */
+@supports selector(:has(*)) {
+    .MuiListItem-root:has(.MuiSvgIcon-root[data-testid^="Expand"])::before {
+        content: '';
+        position: absolute;
+        background: #121212;
+        inset: 1px -5px 0px -5px;
+        border-radius: 25px;
+        opacity: 0;
+        transition: inset 0.25s ease-out, opacity 0.01s 0.25s;
+    }
+    .MuiListItem-root:has(.MuiSvgIcon-root[data-testid="ExpandLessIcon"])::before {
+        inset: 0px -5px -190px -5px;
+        opacity: 1;
+        transition: inset 0.25s ease-out, opacity 0.01s;
+    }
+    .MuiListItemButton-root:has(.MuiSvgIcon-root[data-testid="ExpandLessIcon"]) {
+        transform: scale(1.05) !important;
+    }
+    .MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
+        padding-bottom: 5px !important;
+    }
+}
 
 
 
@@ -610,8 +836,13 @@ html,
 
 /* Resize show/movie image on details page */
 .layout-desktop .detailImageContainer .card {
-    top: 9em !important;
+    top: 1.8em !important;
     width: 18.3vw !important;
+    position: absolute !important;
+}
+/* Legacy style to not break pre-10.11.X */
+.layout-desktop .infoWrapper .detailImageContainer .card {
+    top: 9em !important;
 }
 
 /* Re-position content on details page */
@@ -620,6 +851,7 @@ html,
 }
 .layout-desktop .detailPageContent {
     padding-left: 3.3% !important;
+    padding-right: 0 !important;
 }
 
 /* Re-position logo */
@@ -639,14 +871,14 @@ html,
 .mainDetailButtons {
     background: var(--primary-background-transparent) !important;
     border-radius: 100px !important;
-    backdrop-filter: blur(10px) !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: 100px !important;
+    border-radius: 20px !important;
     width: fit-content !important;
     max-width: max-content !important;
     display: flex;
@@ -666,6 +898,9 @@ html,
     padding: 15px 20px 5px 20px !important;
     border-radius: var(--rounded-cards) !important;
 }
+.layout-mobile .detailPageContent {
+    padding-right: 0 !important;
+}
 
 /* Add card around description */
 .layout-desktop .detailSectionContent {
@@ -674,6 +909,11 @@ html,
     padding: 40px 20px 10px 20px !important;
     margin-top: 50px !important;
 }
+@supports selector(:has(*)) {
+    .layout-desktop .detailPageWrapperContainer:not(:has(.itemMiscInfo-primary .mediaInfoItem)) .detailSectionContent {
+        padding: 0px 20px 10px 20px !important;
+    }
+}
 .layout-mobile .detailSectionContent {
     background: var(--secondary-background-color) !important;
     border-radius: var(--rounded-cards) !important;
@@ -691,37 +931,56 @@ html,
 /* 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.4vw !important;
+    margin-left: 20.8vw !important;
 }
 .layout-desktop .detailPagePrimaryContainer {
     padding-left: 3.3% !important;
 }
+/* Fix for title position on 10.11.X */
+.layout-desktop [dir="ltr"] .detailPagePrimaryContainer:not(.detailRibbon) .detailRibbon {
+    padding-left: unset !important;
+}
 .layout-desktop .nameContainer {
     position: absolute !important;
-    margin-top: -55px !important;
+    margin-top: -48px !important;
 }
 .layout-desktop .itemMiscInfo {
     position: absolute !important;
-    margin-left: 21px !important;
+    margin-left: 12px !important;
     margin-top: 16px !important;
 }
 
 /* Move description box */
 .layout-desktop .detailPagePrimaryContent {
     padding-left: 20.4vw !important;
+}
+.layout-mobile .detailPagePrimaryContent {
+    padding-right: 5% !important;
+}
+/* Padding for 2:3 posters */
+.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent {
     min-height: 29vw !important;
 }
-.layout-desktop .detailPageSecondaryContainer:has(.moreFromSeasonSection:not(.hide)) .detailPagePrimaryContent {
+/* Padding for 1:1 posters */
-    min-height: 12vw !important;
+.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
-} 
-.layout-desktop .detailPageSecondaryContainer:has(#childrenCollapsible:not(.hide) div[data-type="Audio"]) .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 {
@@ -770,7 +1029,14 @@ html,
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     box-ordinal-group: 2;
-    margin: 0.45em 0 0 0 !important;
+}
+/* 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 {
@@ -789,6 +1055,18 @@ html,
     -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);
+}
+/* Move up content if no backdrop image is present - I might make this work at some point, right now it causes the page to jump around when it is loading
+@supports selector(:has(*)) {
+    .layout-desktop:not(:has(.backdropContainer .backdropImage)) #itemBackdrop {
+        height: 20vh !important;
+    }
+}
+*/
 
 
 
@@ -890,6 +1168,11 @@ html,
     border-radius: 25px !important;
     padding: 50px !important;
 }
+/* Fix padding if login disclaimer is not present */
+.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y:not(:has(.loginDisclaimer p)) {
+    padding-bottom: 100px !important;
+}
+/* Move cancel button */
 .layout-desktop #loginPage .manualLoginForm .btnCancel {
     position: absolute !important;
     background: none !important;
@@ -898,6 +1181,12 @@ html,
     margin-top: 70px !important;
     text-align: left !important;
 }
+/* Shift cancel button on JMP */
+@supports not selector(:has(*)) {
+    .layout-desktop #loginPage .manualLoginForm .btnCancel {
+        margin-top: 115px !important;
+    }
+}
 .layout-desktop #loginPage .visualLoginForm {
     position: relative !important;
     background: var(--secondary-background-color) !important;
@@ -964,4 +1253,48 @@ html,
 }
 .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;
 }

CSS/theme-coral.css

@@ -1,4 +1,7 @@
 :root {
-    --primary-accent-color: #EA7070;
+    --primary-r: 234;
+    --primary-g: 112;
+    --primary-b: 112;
+    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
     --secondary-accent-color: rgba(234, 112, 112, 0.2);
 }

CSS/theme-oled.css

@@ -0,0 +1,71 @@
+/* Variables */
+:root {
+    --primary-background-color: #000;
+    --secondary-background-color: #101010;
+    --tertiary-background-color: #181818;
+    --outline-color: #252525;
+    --primary-background-transparent: rgba(35,35,35,0.5);
+    --secondary-background-transparent: rgba(0,0,0,0.6);
+}
+
+.fab,
+.raised,
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background: var(--secondary-background-color) !important;
+}
+
+.checkboxList.paperList {
+    background: var(--primary-background-color) !important;
+    border: 2px solid var(--outline-color) !important;
+}
+
+.MuiPaper-root.MuiPopover-paper {
+    background: var(--tertiary-background-color) !important;
+}
+
+.button-submit {
+    background: var(--secondary-accent-color) !important;
+    color: var(--primary-accent-color) !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline {
+    background: var(--secondary-accent-color) !important;
+    border-color: var(--secondary-accent-color) !important;
+}
+.checkboxIcon {
+    color: var(--primary-accent-color)
+}
+
+.layout-desktop .detailSectionContent,
+.trackSelections,
+.layout-desktop .detailsGroupItem,
+.layout-desktop .localnav {
+    background: var(--primary-background-color) !important;
+    border: 2px solid var(--outline-color) !important;
+}
+
+.listItem:hover {
+    background: var(--secondary-background-color) !important;
+}
+
+select,
+textarea,
+input:not(.mdl-slider) {
+    background: var(--primary-background-color) !important;
+    border: 2px solid var(--outline-color) !important;
+}
+
+.navMenuOption:hover:not(.navMenuOption-selected) {
+    background: var(--tertiary-background-color) !important;
+}
+
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
+    border-color: var(--secondary-accent-color) !important;
+}
+.checkboxOutline {
+    border-color: var(--outline-color) !important;
+}

CSS/theme-seafoam.css

@@ -1,4 +1,7 @@
 :root {
-    --primary-accent-color: #93D7B6;
+    --primary-r: 147;
+    --primary-g: 215;
+    --primary-b: 182;
+    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
     --secondary-accent-color: #93D7B620;
 }

CSS/theme-snow.css

@@ -1,10 +1,24 @@
 :root {
-    --primary-accent-color: #E8ECEF;
+    --primary-r: 232;
+    --primary-g: 236;
+    --primary-b: 239;
+    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
     --secondary-accent-color: rgba(232, 236, 239, 0.2);
+
+    /* Alternate accents*/
+    --primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85);
+    --primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7);
+    --primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55);
+    --primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4);
+    --primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.25);
 }
 
 .layout-desktop .button-submit,
 .layout-desktop .checkboxIcon,
 .layout-desktop .countIndicator {
     color: var(--secondary-background-color) !important;
+}
+
+#skipIntro .emby-button:hover {
+    color: #000 !important;
 }

README.md

@@ -1,65 +1,58 @@
 <img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
 
----
+### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors**
 
-### **Custom CSS theme for Jellyfin (plus a backdrops supported version)**
+[Go to installation](#installation)
 
 ---
 
-### [Go to installation](#installation)
+### **Scyfin Base Theme**
-
+```
----
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
-
+```
-### **Scyfin Complete Theme**
 
 <img src="./images/homepage.png" alt="homepage" width="100%"/>
+<img src="./images/homepage-backdrops.png" alt="homepage-backdrops" width="100%"/>
 <img src="./images/details.png" alt="details" width="100%"/>
+<img src="./images/details-backdrops.png" alt="details-backdrops" width="100%"/>
 <img src="./images/movies.png" alt="movies" width="100%"/>
-<img src="./images/dashboard.png" alt="dashboard" width="100%"/>
 <img src="./images/login.png" alt="login" width="100%"/>
 
-`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');`
-
-### Options (Add these below the full theme)
-- Disable static left drawer 
-    - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');`
-- Themes:
-    - Seafoam
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');`
-        - <img src="./images/seafoam.png" alt="install2" width="40%"/>
-    - Coral
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');`
-        - <img src="./images/coral.png" alt="install2" width="40%"/>
-    - Snow
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');`
-        - <img src="./images/snow.png" alt="install2" width="40%"/>
-
 ---
 
-### **Scyfin Complete Theme - Backdrops Supported**
+### **Options (Add these below the base theme)**
+### Disable static left drawer 
+```
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
+```
 
-**Note -** 
+---
-* Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
-* Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
 
-<img src="./images/homepage-backdrops.png" alt="homepage-backdrops" width="100%"/>
+### **Themes:**
-<img src="./images/details-backdrops.png" alt="details-backdrops" width="100%"/>
+### Seafoam
+```
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');
+```
+<img src="./images/seafoam.png" alt="seafoam-theme" width="40%"/>
 
-`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme-backdrop.css');`
+### Coral
+```
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
+```
+<img src="./images/coral.png" alt="coral-theme" width="40%"/>
 
-### Options (Add these below the full theme)
+### Snow
-- Disable static left drawer (BACKDROP VERSION) 
+```
-    - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer-backdrop.css');`
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
-- Themes:
+```
-    - Seafoam
+<img src="./images/snow.png" alt="snow-theme" width="40%"/>
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');`
+
-        - <img src="./images/seafoam.png" alt="install2" width="40%"/>
+### OLED
-    - Coral
+```
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');`
+@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');
-        - <img src="./images/coral.png" alt="install2" width="40%"/>
+```
-    - Snow
+<img src="./images/homepage-oled.png" alt="homepage-oled" width="90%"/>
-        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');`
+<img src="./images/details-oled.png" alt="details-oled" width="90%"/>
-        - <img src="./images/snow.png" alt="install2" width="40%"/>
 
 ---
 
@@ -70,15 +63,13 @@
 **Server-wide install:**
 * Click the hamburger icon (Top left)
 * Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account)
-* Navigate to "General"
+* Navigate to "Branding"
-* Near the bottom, under "Custom CSS code", paste the `@import url` for the theme you want
+* Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
-    * Note - 
-        * Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
     * Example:
-    * <img src="./images/install.png" alt="install" width="80%"/>
+    * <img src="./images/install-server-base.png" alt="install-server-base" width="80%"/>
-* Optional - Paste the `@import url` for any options you want
+* Optional - Paste the `@import url` for any options / themes you may want
     * Example:
-    * <img src="./images/install2.png" alt="install2" width="80%"/>
+    * <img src="./images/install-server-options.png" alt="install-server-options" width="80%"/>
 * Click "Save"
 
 ---
@@ -87,15 +78,12 @@
 * Click the hamburger icon (Top left)
 * Navigate to "Settings"
 * Navigate to "Display"
-* Near the middle, under "Custom CSS code", paste the `@import url` for the theme you want
+* Near the middle, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
     * Note - 
-        * Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
         * If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other
     * Example:
-    * <img src="./images/install3.png" alt="install3" width="80%"/>
+    * <img src="./images/install-client-base.png" alt="install-client-base" width="80%"/>
-* Optional - Paste the `@import url` for any options you want
+* Optional - Paste the `@import url` for any options / themes you may want
     * Example:
-    * <img src="./images/install4.png" alt="install4" width="80%"/>
+    * <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
 * Click "Save"
-
----