CSS/disable-static-drawer-backdrop.css

@@ -0,0 +1,116 @@
+/* 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

@@ -27,9 +27,6 @@
         background: var(--secondary-background-color) !important;
         backdrop-filter: none !important;
     }
-    .layout-desktop #itemDetailPage.noBackdropTransparency::after {
-        display: none !important;
-    }
 }
 
 /* Lower drawer buttons */
@@ -52,7 +49,7 @@
 }
 
 /* Show hamburger button */
-.layout-desktop body:not(.hideMainDrawer) .mainDrawerButton:not(.dashboardDocument) {
+.layout-desktop .mainDrawerButton:not(.dashboardDocument) {
     display: inline-flex !important;
 }
 
@@ -72,11 +69,11 @@
     margin-left: 0px !important;
 }
 
-/* Re-enable home button */
-.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
+/* Hide home button */
+.layout-desktop .headerHomeButton {
     display: block !important;
 }
-.layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton {
+.layout-desktop .dashboardDocument .headerHomeButton {
     display: block !important;
 }
 
@@ -86,7 +83,7 @@
 }
 
 /* Background for top left buttons */
-.layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
+.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
     padding: 2px !important;
     top: -3px !important;
     background-color: var(--primary-background-transparent) !important;
@@ -95,7 +92,7 @@
 }
 /* Fix for JMP */
 @supports not selector(:has(*)) {
-    .layout-desktop body:not(.hideMainDrawer) .headerLeft {
+    .layout-desktop .headerLeft {
         padding: 2px !important;
         top: -3px !important;
         background-color: var(--primary-background-transparent) !important;

CSS/scyfin-theme.css

@@ -1,9 +1,6 @@
 /* Variables */
 :root {
-    --primary-r: 0;
-    --primary-g: 164;
-    --primary-b: 220;
-    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
+    --primary-accent-color: #00a4dc;
     --secondary-accent-color: #00a4dc20;
     --primary-background-color: #101010;
     --secondary-background-color: #181818;
@@ -11,13 +8,6 @@
     --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 */
@@ -25,14 +15,7 @@
 .selectionCommandsPanel,
 .countIndicator,
 .MuiButton-root.MuiButton-containedSizeMedium,
-.MuiChip-root.MuiChip-colorInfo:not(.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 {
+.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-root.MuiChip-colorError) {
     background: var(--primary-accent-color) !important;
 }
 .MuiAlert-root.MuiAlert-standardInfo {
@@ -50,17 +33,14 @@ progress::-webkit-progress-value {
 .progressring-spiner {
     border-color: var(--primary-accent-color) !important;
 }
-.page:not(.itemDetailPage) .button-link,
+.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 {
+.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit {
     color: var(--primary-accent-color) !important;
 }
 @media (hover: hover) and (pointer: fine) {
@@ -135,13 +115,14 @@ progress::-webkit-progress-value {
 .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;
@@ -162,8 +143,7 @@ progress::-webkit-progress-value {
 .cardOverlayContainer,
 .blurhash-canvas,
 .dialog,
-.itemSelectionPanel,
-.nowPlayingPageImage {
+.itemSelectionPanel {
     border-radius: var(--rounded-cards) !important;
 }
 /* Rounded selection menu */
@@ -198,7 +178,6 @@ progress::-webkit-progress-value {
     height: 10px !important;
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
-    border-radius: 100px !important;
 }
 .innerCardFooterClear {
     background-color: none !important;
@@ -206,7 +185,7 @@ progress::-webkit-progress-value {
 .innerCardFooter .cardText {
     padding: 0 0 0 10px !important
 }
-.cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground {
+.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
     background: var(--primary-accent-color) !important;
 }
 .itemProgressBarForeground {
@@ -341,7 +320,6 @@ html,
     margin-left: auto !important;
     margin-right: auto !important;
     width: auto !important;
-    max-width: 100% !important;
 }
 .layout-mobile .emby-button-foreground {
     top: -2px !important;
@@ -374,42 +352,16 @@ html,
 .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 {
+.upNextContainer, .toastVisible {
     backdrop-filter: blur(var(--blur)) !important;
 }
-.upNextContainer:not(#skipIntro) {
+.upNextContainer {
     border-radius: var(--rounded-cards) !important;
     background-color: rgba(0, 0, 0, 0.6) !important;
-}
-.upNextContainer {
     margin: 4% !important;
 }
 .toastVisible {
@@ -426,49 +378,28 @@ html,
     top: 25px !important;
     backdrop-filter: unset !important;
 }
-@supports selector(div:not(.parent .child)) {
-    .mdl-slider-background-flex:not(.layout-mobile .nowPlayingBar .mdl-slider-background-flex) {
-        height: 10px !important;
-        margin-top: -5px !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-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::-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;
@@ -509,76 +440,27 @@ html,
 }
 
 /* Support for IntroSkipper plugin */
-#skipIntro .btnSkipIntro {
+#skipIntro {
     transition: 0.2s;
-    border-radius: 100px !important;
+    border-radius: var(--rounded-cards) !important;
     backdrop-filter: blur(var(--blur)) !important;
+    border: none !important;
 }
-#skipIntro .btnSkipIntro:hover {
+#skipIntro:hover {
+    box-shadow: unset !important;
     transition: .2s;
     transform: scale(1.05);
     background: var(--primary-accent-color) !important;
 }
+#skipIntro .btnSkipIntro {
+    background:rgba(0, 0, 0, 0) !important;
+    padding: 10px 15px !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";
+.sliderMarker {
+    display: none !important;
 }
 
 
@@ -709,11 +591,6 @@ html,
     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;
@@ -760,49 +637,6 @@ html,
     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;
-    }
-}
 
 
 
@@ -836,13 +670,8 @@ textarea {
 
 /* Resize show/movie image on details page */
 .layout-desktop .detailImageContainer .card {
-    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;
+    width: 18.3vw !important;
 }
 
 /* Re-position content on details page */
@@ -851,7 +680,6 @@ textarea {
 }
 .layout-desktop .detailPageContent {
     padding-left: 3.3% !important;
-    padding-right: 0 !important;
 }
 
 /* Re-position logo */
@@ -878,7 +706,7 @@ textarea {
 .layout-desktop .detailsGroupItem {
     background: var(--secondary-background-color) !important;
     padding: 10px 20px !important;
-    border-radius: 20px !important;
+    border-radius: 100px !important;
     width: fit-content !important;
     max-width: max-content !important;
     display: flex;
@@ -898,9 +726,6 @@ textarea {
     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 {
@@ -909,11 +734,6 @@ textarea {
     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;
@@ -931,28 +751,23 @@ textarea {
 /* 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;
+    margin-left: 20.4vw !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: -48px !important;
+    margin-top: -55px !important;
 }
 .layout-desktop .itemMiscInfo {
     position: absolute !important;
-    margin-left: 12px !important;
+    margin-left: 21px !important;
     margin-top: 16px !important;
 }
 
@@ -960,9 +775,6 @@ textarea {
 .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;
@@ -1029,14 +841,7 @@ textarea {
     -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;
+    margin: 0.45em 0 0 0 !important;
 }
 /* Modify play button */
 .layout-desktop .mainDetailButtons .btnPlay::after {
@@ -1055,18 +860,6 @@ textarea {
     -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;
-    }
-}
-*/
 
 
 
@@ -1168,11 +961,6 @@ textarea {
     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;
@@ -1181,12 +969,6 @@ textarea {
     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;

CSS/theme-coral.css

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

CSS/theme-seafoam.css

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

CSS/theme-snow.css

@@ -1,24 +1,10 @@
 :root {
-    --primary-r: 232;
-    --primary-g: 236;
-    --primary-b: 239;
-    --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
+    --primary-accent-color: #E8ECEF;
     --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,58 +1,44 @@
 <img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
 
-### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors**
+---
 
-[Go to installation](#installation)
+### **Custom CSS theme for Jellyfin with support for backdrops**
+
+---
+
+### [Go to installation](#installation)
 
 ---
 
 ### **Scyfin Base Theme**
-```
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
-```
 
 <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 base 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="seafoam-theme" width="40%"/>
-
-### 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%"/>
-
-### Snow
-```
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
-```
-<img src="./images/snow.png" alt="snow-theme" width="40%"/>
-
-### OLED
-```
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');
-```
-<img src="./images/homepage-oled.png" alt="homepage-oled" width="90%"/>
-<img src="./images/details-oled.png" alt="details-oled" width="90%"/>
+### 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');`
+- Themes:
+    - 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%"/>
+    - 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%"/>
+    - Snow
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');`
+        - <img src="./images/snow.png" alt="snow-theme" width="40%"/>
+    - OLED
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');`
+        - <img src="./images/homepage-oled.png" alt="homepage-oled" width="100%"/>
+        - <img src="./images/details-oled.png" alt="details-oled" width="100%"/>
 
 ---
 
@@ -63,7 +49,7 @@
 **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 "Branding"
+* Navigate to "General"
 * Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
     * Example:
     * <img src="./images/install-server-base.png" alt="install-server-base" width="80%"/>
@@ -87,3 +73,5 @@
     * Example:
     * <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
 * Click "Save"
+
+---