Update README

Removed dashboard image from README.

CSS/disable-static-drawer.css

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

CSS/scyfin-theme.css

@@ -25,7 +25,7 @@
 .selectionCommandsPanel,
 .countIndicator,
 .MuiButton-root.MuiButton-containedSizeMedium,
-.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-root.MuiChip-colorError),
+.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-colorError),
 progress[aria-valuenow]:before {
     background: var(--primary-accent-color) !important;
 }
@@ -50,7 +50,7 @@ progress::-webkit-progress-value {
 .progressring-spiner {
     border-color: var(--primary-accent-color) !important;
 }
-.button-link:not(.itemDetailPage .button-link),
+.page:not(.itemDetailPage) .button-link,
 .selectLabelFocused,
 .textareaLabelFocused,
 .inputLabelFocused,
@@ -135,14 +135,13 @@ 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;
@@ -163,7 +162,8 @@ progress::-webkit-progress-value {
 .cardOverlayContainer,
 .blurhash-canvas,
 .dialog,
-.itemSelectionPanel {
+.itemSelectionPanel,
+.nowPlayingPageImage {
     border-radius: var(--rounded-cards) !important;
 }
 /* Rounded selection menu */
@@ -206,7 +206,7 @@ progress::-webkit-progress-value {
 .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 {
@@ -426,11 +426,21 @@ html,
     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;
+@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-lower {
     border-radius: 100px !important;
@@ -699,6 +709,11 @@ 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;
@@ -761,6 +776,33 @@ html,
 .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;
+    }
+}
 
 
 
@@ -794,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 */
@@ -804,6 +851,7 @@ html,
 }
 .layout-desktop .detailPageContent {
     padding-left: 3.3% !important;
+    padding-right: 0 !important;
 }
 
 /* Re-position logo */
@@ -850,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 {
@@ -858,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;
@@ -886,6 +942,10 @@ html,
 .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;
@@ -900,6 +960,9 @@ html,
 .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;
@@ -997,6 +1060,13 @@ html,
     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;
+    }
+}
+*/
 
 
 
@@ -1098,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;
@@ -1106,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;

README.md

@@ -7,35 +7,52 @@
 ---
 
 ### **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%"/>
 
-### Base Theme
-`@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="100%"/>
-        - <img src="./images/details-oled.png" alt="details-oled" width="100%"/>
+### **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%"/>
 
 ---
 
@@ -46,7 +63,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 "General"
+* Navigate to "Branding"
 * 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%"/>