CSS/css-scyfin/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(--main-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(--main-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/css-scyfin/disable-static-drawer.css

@@ -0,0 +1,112 @@
+/* Reset size of Jellyfin logo */
+.layout-desktop .pageTitleWithLogo {
+    height: 30px !important;
+    width: 100px !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-radius: var(--rounded-cards) !important;
+}
+
+/* Lower drawer buttons */
+.layout-desktop .mainDrawer-scrollContainer {
+    margin-top: 15px !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(--main-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/css-scyfin/scyfin-theme-backdrop.css

@@ -0,0 +1,796 @@
+/* Variables */
+:root {
+    --main-accent-color: #00a4dc;
+    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --main-background-color: #0F0F0F;
+    --secondary-background-color: var(--secondary-background-color);
+    --main-background-transparent: rgba(35,35,35,0.5);
+    --secondary-background-transparent: rgba(0,0,0,0.6);
+    --rounded-cards: 15px;
+}
+
+/* Setting accent color variable */
+.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
+.countIndicator {
+    background: var(--main-accent-color) !important;
+}
+.emby-checkbox: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 {
+    border-color: var(--main-accent-color) !important;
+}
+.button-link:not(.itemDetailPage .button-link),
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.emby-tab-button:hover,
+.metadataSidebarIcon {
+    color: var(--main-accent-color) !important;
+}
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        color: var(--main-accent-color) !important;
+        background-color: var(--secondary-accent-color) !important;
+    }
+}
+
+/* Increase size of Jellyfin logo */
+.layout-desktop .pageTitleWithLogo {
+    margin-left: 10px !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;
+}
+.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;
+}
+
+
+
+/* Rounded cards */
+.cardContent,
+.cardPadder,
+.cardOverlayContainer,
+.blurhash-canvas,
+.dialog,
+.itemSelectionPanel {
+    border-radius: var(--rounded-cards) !important;
+}
+/* Rounded selection menu */
+.itemSelectionPanel {
+    border: 2px solid var(--main-accent-color) !important;
+}
+.itemSelectionPanel .checkboxOutline {
+    margin: 7px !important;
+}
+
+
+
+/* Floating progress bar */
+.innerCardFooter {
+    border-radius: var(--rounded-cards) !important;
+    width: 100px !important;
+    margin-left: 5px !important;
+    margin-bottom: 5px !important;
+    padding: 5px !important;
+    bottom: 0% !important;
+    background: rgba(0,0,0,0.5) !important;
+}
+.fullInnerCardFooter {
+    bottom: 5% !important;
+    width: 90% !important;
+    margin: auto !important;
+    border-radius: 100px !important;
+    padding: 0px !important;
+}
+.itemProgressBar {
+    height: 10px !important;
+    background: var(--main-background-transparent) !important;
+    backdrop-filter: blur(2px) !important;
+}
+.innerCardFooterClear {
+    background-color: none !important;
+}
+.innerCardFooter .cardText {
+    padding: 0 0 0 10px !important
+}
+.itemProgressBarForeground {
+    border-radius: 100px !important;
+    background: var(--main-accent-color) !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(--main-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(--main-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(50px) !important;
+}
+.upNextContainer {
+    border-radius: var(--rounded-cards) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.toastVisible {
+    border-radius: 30px !important;
+    background-color: var(--main-background-transparent) !important;
+}
+.sliderBubble {
+    border-radius: var(--rounded-cards) !important;
+    background-color: var(--secondary-background-transparent) !important;
+    backdrop-filter: blur(10px) !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(--main-accent-color) !important;
+}
+.mdl-slider::-moz-range-thumb {
+    background: rgba(0,0,0,0) !important;
+}
+.mdl-slider-background-upper {
+    display: none !important;
+}
+.iconOsdProgressInner {
+    background: var(--main-accent-color) !important;
+}
+
+/* Support for Jellyscrub plugin */
+.chapterThumbContainer {
+    background: none !important;
+    border-radius: var(--rounded-cards) !important;
+}
+.chapterThumb {
+    border-radius: var(--rounded-cards) !important;
+    margin-bottom: 40px !important;
+}
+.chapterThumbTextContainer {
+    background: none !important;
+}
+.chapterThumbText {
+    text-align: center !important;
+}
+.chapterThumbText-dim {
+    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(--main-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-left: 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(--main-accent-color) !important;
+    border-radius: 100px !important;
+}
+/* Re-align active devices in dashboard */
+.activeDevices.itemsContainer {
+    margin: 0px !important;
+}
+
+
+
+/* Metadata editor fixes */
+.editPageSidebar {
+    margin-left: 250px !important;
+    width: 20% !important;
+}
+.layout-desktop #editItemMetadataPage {
+    margin-left: 215px !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(--main-background-transparent) !important;
+}
+.jstree-children {
+    margin-left: -10px !important;
+}
+#editItemMetadataPage .btnHeaderSave {
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+    height: 40px !important;
+    color: white !important;
+}
+
+
+
+/* Remove show/movie image on details page */
+.layout-desktop .detailImageContainer {
+    display: none !important;
+}
+
+/* Re-position content on details page */
+.layout-desktop .detailSection {
+    margin-right: 0 !important;
+}
+.layout-desktop .detailPageContent {
+    padding-left: 4% !important;
+}
+
+/* Re-position logo */
+.layout-desktop .detailLogo,
+.layout-tv .detailLogo {
+    right: 0 !important;
+    left: 4% !important;
+    top: 14vh !important;
+}
+
+/* Transparent ribbon bar */
+.detailRibbon {
+    background: transparent !important;
+}
+
+/* Add card around top-right buttons */
+.layout-desktop .mainDetailButtons {
+    background: var(--main-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(--main-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(--main-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(--main-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;
+}
+.layout-desktop .detailPagePrimaryContainer {
+    padding-left: 4% !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 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(--main-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) {
+    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;
+    }
+}
+
+
+
+/* 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 .disclaimerContainer {
+    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 */
+.layout-desktop .dialog {
+    padding: 0px 10px 10px 10px !important;
+}

CSS/css-scyfin/scyfin-theme.css

@@ -0,0 +1,775 @@
+/* Variables */
+:root {
+    --main-accent-color: #00a4dc;
+    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --main-background-color: #0F0F0F;
+    --secondary-background-color: #181818;
+    --main-background-transparent: rgba(35,35,35,0.5);
+    --secondary-background-transparent: rgba(0,0,0,0.6);
+    --rounded-cards: 15px;
+}
+
+/* Setting accent color variable */
+.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
+.countIndicator {
+    background: var(--main-accent-color) !important;
+}
+.emby-checkbox: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 {
+    border-color: var(--main-accent-color) !important;
+}
+.button-link:not(.itemDetailPage .button-link),
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.emby-tab-button:hover,
+.metadataSidebarIcon {
+    color: var(--main-accent-color) !important;
+}
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        color: var(--main-accent-color) !important;
+        background-color: var(--secondary-accent-color) !important;
+    }
+}
+
+/* Increase size of Jellyfin logo */
+.layout-desktop .pageTitleWithLogo {
+    margin-left: 10px !important;
+    height: 40px !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;
+    /* Move drawer behind header */
+    z-index: 998 !important;
+}
+/* Lower drawer buttons */
+.layout-desktop .mainDrawer-scrollContainer {
+    margin-top: 95px !important;
+}
+.layout-mobile .mainDrawer-scrollContainer {
+    margin-top: 15px !important;
+}
+/* Shift content to the right */
+.layout-desktop .libraryPage:not(#editItemMetadataPage) {
+    margin-left: 250px !important;
+}
+/* Fix for Jellyfin Media Player */
+.quickConnectSettingsContainer {
+    margin-left: 250px !important;
+}
+/* Hide transition on page load */
+.layout-desktop .touch-menu-la.transition {
+    transition: none !important;
+}
+/* Hide hamburger button */
+.layout-desktop .mainDrawerButton {
+    display: none !important;
+}
+/* Fix for dashboard leaking out of the sections */
+.dashboardColumn {
+    flex-shrink: inherit;
+}
+/* Fix for dashboard drawer button height */
+.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
+    padding-top: 0 !important;
+}
+/* Hide home button */
+.layout-desktop .headerHomeButton {
+    display: none !important;
+}
+.layout-desktop .dashboardDocument .headerHomeButton {
+    display: block !important;
+}
+/* Fix for video player and login page */
+.layout-desktop .hide-scroll .mainDrawer,
+.layout-desktop .hideMainDrawer .mainDrawer {
+    left: -320px !important;
+}
+/* Fix for scroll menus on home page */
+.emby-scroller {
+    margin-right: -2% !important;
+}
+/* Fix for collection items misalignment */
+.layout-desktop .collectionItems .collectionItemsContainer {
+    padding-left: 0% !important;
+}
+
+
+
+/* Rounded cards */
+.cardContent,
+.cardPadder,
+.cardOverlayContainer,
+.blurhash-canvas,
+.dialog,
+.itemSelectionPanel {
+    border-radius: var(--rounded-cards) !important;
+}
+/* Rounded selection menu */
+.itemSelectionPanel {
+    border: 2px solid var(--main-accent-color) !important;
+}
+.itemSelectionPanel .checkboxOutline {
+    margin: 7px !important;
+}
+
+
+
+/* Floating progress bar */
+.innerCardFooter {
+    border-radius: var(--rounded-cards) !important;
+    width: 100px !important;
+    margin-left: 5px !important;
+    margin-bottom: 5px !important;
+    padding: 5px !important;
+    bottom: 0% !important;
+    background: rgba(0,0,0,0.5) !important;
+}
+.fullInnerCardFooter {
+    bottom: 5% !important;
+    width: 90% !important;
+    margin: auto !important;
+    border-radius: 100px !important;
+    padding: 0px !important;
+}
+.itemProgressBar {
+    height: 10px !important;
+    background: var(--main-background-transparent) !important;
+    backdrop-filter: blur(2px) !important;
+}
+.innerCardFooterClear {
+    background-color: none !important;
+}
+.innerCardFooter .cardText {
+    padding: 0 0 0 10px !important
+}
+.itemProgressBarForeground {
+    border-radius: 100px !important;
+    background: var(--main-accent-color) !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(--main-accent-color) !important;
+}
+
+/* Modified background color */
+.dialog,
+html {
+    background-color: var(--main-background-color) !important;
+}
+
+
+/* Transparent header bar */
+.skinHeader {
+    background-color: transparent !important;
+}
+.layout-desktop .skinHeader,
+.layout-tv .skinHeader {
+    padding-top: 1.5em !important;
+}
+.layout-tv .skinHeader {
+    padding-bottom: 10px !important;
+}
+/* Rounded header buttons */
+.headerTabs,
+.headerRight {
+    background-color: var(--main-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(50px) !important;
+}
+.upNextContainer {
+    border-radius: var(--rounded-cards) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.toastVisible {
+    border-radius: 30px !important;
+    background-color: var(--main-background-transparent) !important;
+}
+.sliderBubble {
+    border-radius: var(--rounded-cards) !important;
+    background-color: var(--secondary-background-transparent) !important;
+    backdrop-filter: blur(10px) !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(--main-accent-color) !important;
+}
+.mdl-slider::-moz-range-thumb {
+    background: rgba(0,0,0,0) !important;
+}
+.mdl-slider-background-upper {
+    display: none !important;
+}
+.iconOsdProgressInner {
+    background: var(--main-accent-color) !important;
+}
+
+/* Support for Jellyscrub plugin */
+.chapterThumbContainer {
+    background: none !important;
+    border-radius: var(--rounded-cards) !important;
+}
+.chapterThumb {
+    border-radius: var(--rounded-cards) !important;
+    margin-bottom: 40px !important;
+}
+.chapterThumbTextContainer {
+    background: none !important;
+}
+.chapterThumbText {
+    text-align: center !important;
+}
+.chapterThumbText-dim {
+    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(--main-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-left: 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(--main-accent-color) !important;
+    border-radius: 100px !important;
+}
+/* Re-align active devices in dashboard */
+.activeDevices.itemsContainer {
+    margin: 0px !important;
+}
+
+
+
+/* Metadata editor fixes */
+.editPageSidebar {
+    margin-left: 250px !important;
+    width: 20% !important;
+}
+.layout-desktop #editItemMetadataPage {
+    margin-left: 215px !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(--main-background-transparent) !important;
+}
+.jstree-children {
+    margin-left: -10px !important;
+}
+#editItemMetadataPage .btnHeaderSave {
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+    height: 40px !important;
+    color: white !important;
+}
+
+
+
+/* Remove show/movie image on details page */
+.layout-desktop .detailImageContainer {
+    display: none !important;
+}
+
+/* Re-position content on details page */
+.layout-desktop .detailSection {
+    margin-right: 0 !important;
+}
+.layout-desktop .detailPageContent {
+    padding-left: 4% !important;
+}
+
+/* Re-position logo */
+.layout-desktop .detailLogo,
+.layout-tv .detailLogo {
+    right: 0 !important;
+    left: 4% !important;
+    top: 14vh !important;
+}
+
+/* Transparent ribbon bar */
+.detailRibbon {
+    background: transparent !important;
+}
+
+/* Add card around top-right buttons */
+.mainDetailButtons {
+    background: var(--main-background-transparent) !important;
+    border-radius: 100px !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+/* Add card around groups section */
+.layout-desktop .detailsGroupItem {
+    background: var(--secondary-background-color) !important;
+    padding: 10px 20px !important;
+    border-radius: 100px !important;
+    width: fit-content !important;
+    max-width: max-content !important;
+    display: flex;
+    gap: 1em;
+}
+
+/* Fix for group section labels */
+.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
+    min-width: 75px;
+    flex-basis: unset;
+    margin: unset;
+}
+
+/* Alternative mobile group section card */
+.layout-mobile .itemDetailsGroup {
+    background: var(--secondary-background-color) !important;
+    padding: 15px 20px 5px 20px !important;
+    border-radius: var(--rounded-cards) !important;
+}
+
+/* Add card around description */
+.layout-desktop .detailSectionContent {
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
+    padding: 40px 20px 10px 20px !important;
+    margin-top: 50px !important;
+}
+.layout-mobile .detailSectionContent {
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
+    padding: 10px 20px !important;
+}
+
+/* Add card around track selection */
+.trackSelections {
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
+    padding: 10px 20px !important;
+    margin-top: 20px !important;
+}
+
+/* Fix for track select dropdowns */
+.trackSelections .selectContainer .detailTrackSelect {
+    padding: 0 10px;
+}
+
+/* Re-position title */
+.layout-desktop .infoWrapper {
+    margin-top: 245px !important;
+}
+.layout-desktop .detailPagePrimaryContainer {
+    padding-left: 4% !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 track selection box */
+.detailSection {
+    display: -webkit-box;
+    display: -moz-box;
+    display: box;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    box-orient: vertical;
+}
+.detailSection .detailSectionContent {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    box-ordinal-group: 1;
+}
+.detailSection .recordingFields {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    box-ordinal-group: 2;
+}
+.detailSection .trackSelections {
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    box-ordinal-group: 3;
+}
+.detailSection .itemDetailsGroup {
+    -webkit-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    box-ordinal-group: 4;
+}
+/* Move episode title */
+.layout-desktop .nameContainer {
+    display: -webkit-box;
+    display: -moz-box;
+    display: box;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    box-orient: horizontal;
+}
+.layout-desktop .nameContainer .parentName {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    box-ordinal-group: 1;
+}
+.layout-desktop .nameContainer .itemName {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    box-ordinal-group: 2;
+    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(--main-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;
+}
+/* Repositioned record button */
+.recordingFields {
+    margin: 5px 0 -7px 0 !important;
+}
+.recordingButton {
+    height: 40px !important;
+}
+.recordingIcon {
+    color: red !important;
+}
+/* Remove overlapping text */
+.itemMiscInfo.itemMiscInfo-secondary {
+    margin-left: 65px !important;
+}
+
+
+
+/* Music Player */
+.layout-desktop .appfooter {
+    margin-left: 250px !important;
+}
+.layout-desktop .appfooter .nowPlayingBarInfoContainer {
+    margin-left: 10px !important;
+}
+.layout-desktop .volumeOsd {
+    border-radius: var(--rounded-cards) !important;
+    background: var(--secondary-background-transparent) !important;
+}
+.layout-desktop .nameContainer .musicParentName {
+    margin-top: 18px !important;
+    margin-right: 22px !important;
+}
+.layout-desktop .appfooter .nowPlayingBar {
+    margin-top: 20px !important;
+}
+.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
+    top: -15px !important;
+}
+
+
+
+/* Fix for scaling issues */
+@media (width: 1600px) {
+    .layout-desktop .headerRight {
+        margin-bottom: 0 !important;
+    }
+    .layout-desktop .emby-button-foreground {
+        top: -4px !important;
+    }
+}
+@media (max-width: 1599px) {
+    .layout-desktop .pageTitleWithLogo {
+        margin-left: 25px !important;
+    }
+    .layout-desktop .headerTabs {
+        margin-top: -65px !important;
+    }
+    .layout-desktop .headerRight {
+        margin-right: 15px !important;
+    }
+    .layout-desktop .sectionTabs {
+        width: auto !important;
+        align-self: center !important;
+    }
+    .layout-desktop .emby-button-foreground {
+        top: -2px !important;
+    }
+}
+
+
+
+/* Fixes for TV Layout */
+.layout-tv .sectionTabs {
+    width: auto !important;
+}
+.layout-tv .headerLeft {
+    padding: 5px !important;
+}
+
+
+
+/* Login page */
+.layout-desktop #loginPage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
+    background: var(--secondary-background-color) !important;
+    width: 400px !important;
+    border-radius: 25px !important;
+    padding: 50px !important;
+}
+.layout-desktop #loginPage .manualLoginForm .btnCancel {
+    position: absolute !important;
+    background: none !important;
+    width: 100px !important;
+    margin-left: -10px !important;
+    margin-top: 70px !important;
+    text-align: left !important;
+}
+.layout-desktop #loginPage .visualLoginForm {
+    position: relative !important;
+    background: var(--secondary-background-color) !important;
+    z-index: 1000 !important;
+}
+.layout-desktop #loginPage .btnForgotPassword {
+    background: none !important;
+    font-weight: normal !important;
+    width: 150px !important;
+    text-align: right !important;
+    position: absolute !important;
+    margin-left: 255px !important;
+    margin-top: -195px !important;
+    font-size: smaller !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+    z-index: 1 !important;
+}
+.layout-desktop #loginPage .disclaimerContainer {
+    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 */
+.layout-desktop .dialog {
+    padding: 0px 10px 10px 10px !important;
+}

CSS/css-scyfin/theme-coral.css

@@ -0,0 +1,4 @@
+:root {
+    --main-accent-color: #EA7070;
+    --secondary-accent-color: rgba(234, 112, 112, 0.2);
+}

CSS/css-scyfin/theme-seafoam.css

@@ -0,0 +1,4 @@
+:root {
+    --main-accent-color: #6D9887;
+    --secondary-accent-color: rgba(109, 152, 135, 0.2);
+}

CSS/css-scyfin/theme-snow.css

@@ -0,0 +1,10 @@
+:root {
+    --main-accent-color: #E8ECEF;
+    --secondary-accent-color: rgba(232, 236, 239, 0.2);
+}
+
+.layout-desktop .button-submit,
+.layout-desktop .checkboxIcon,
+.layout-desktop .countIndicator {
+    color: var(--secondary-background-color) !important;
+}

CSS/disable-static-drawer.css

@@ -1,118 +0,0 @@
-/* Reset size of Jellyfin logo */
-.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;
-    z-index: 1099 !important;
-    border-top-right-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 */
-.layout-desktop .mainDrawer-scrollContainer {
-    margin-top: 15px !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 body:not(.hideMainDrawer) .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;
-}
-
-/* Re-enable home button */
-.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
-    display: block !important;
-}
-.layout-desktop body:not(.hideMainDrawer) .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 body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
-    padding: 2px !important;
-    top: -3px !important;
-    background-color: var(--primary-background-transparent) !important;
-    border-radius: 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;
-    -webkit-flex-grow: 0 !important;
-}
-.headerRight {
-    position: absolute !important;
-    right: 12px !important;
-}
-
-/* Music Player */
-.layout-desktop .appfooter {
-    margin-left: 0px !important;
-}

CSS/rounded-cards.css

@@ -0,0 +1,8 @@
+/* Rounded cards */
+.cardContent,
+.cardPadder,
+.cardOverlayContainer,
+.blurhash-canvas,
+.dialog {
+    border-radius: 15px !important;
+}

CSS/rounded-drawer-buttons.css

@@ -0,0 +1,20 @@
+/* Rounded buttons */
+.navMenuOption,
+.navMenuOption:hover,
+.navMenuOption-selected {
+    border-radius: 100px !important;
+    width: 85% !important;
+    margin: auto !important;
+
+    /* Modify button height (optional)
+    height: 45px !important;
+    */
+}
+
+/* Center content vertically and shift to the left */
+.navMenuOptionIcon,
+.navMenuOptionText {
+    position: inherit !important;
+    left: -7% !important;
+    margin-top: 0 !important;
+}

CSS/static-left-drawer.css

@@ -0,0 +1,37 @@
+/* Static left drawer */
+.layout-desktop .mainDrawer {
+    transform: none !important;
+    left: 0 !important;
+    top: 65px !important;
+    width: 250px !important;
+}
+
+/* Shift content to the right */
+.layout-desktop .libraryPage {
+    margin-left: 225px !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 height */
+.layout-desktop .dashboardDocument .mainDrawer {
+    top: 0px !important;
+}
+
+/* Re-center header buttons */
+.layout-desktop .headerTabs {
+    margin-left: 250px !important;
+}
+/* Fix for video player and login page */
+.layout-desktop .hide-scroll .mainDrawer,
+.layout-desktop .hideMainDrawer .mainDrawer {
+    left: -320px !important;
+}

CSS/theme-coral.css

@@ -1,7 +0,0 @@
-: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);
-    --secondary-accent-color: rgba(234, 112, 112, 0.2);
-}

CSS/theme-oled.css

@@ -1,71 +0,0 @@
-/* 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,7 +0,0 @@
-: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);
-    --secondary-accent-color: #93D7B620;
-}

CSS/theme-snow.css

@@ -1,24 +0,0 @@
-: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);
-    --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;
-}

CSS/transparent-header.css

@@ -0,0 +1,79 @@
+/* Transparent header bar */
+.skinHeader {
+    background-color: transparent !important;
+}
+
+/* Rounded header buttons */
+.headerTabs,
+.headerRight {
+    background-color:rgba(35, 35, 35, 0.5) !important;
+    border-radius: 50px !important;
+    backdrop-filter: blur(50px) !important;
+}
+
+/* Lower header and add padding to right buttons */
+.layout-desktop .headerRight {
+    padding: 5px !important;
+}
+
+/* Header size */
+.layout-desktop .headerTabs {
+    height: 52px !important;
+    top: 1px !important;
+}
+.layout-mobile .headerTabs {
+    height: 45px !important;
+}
+
+/* Center text */
+.emby-button-foreground {
+    top: -6px !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;
+}
+
+/* Fix for scaling issues */
+@media (width: 1600px) {
+    .layout-desktop .headerRight {
+        margin-bottom: 0 !important;
+    }
+    .layout-desktop .headerTabs {
+        top: -7px !important;
+    }
+}
+@media (max-width: 1600px) {
+    .layout-desktop .emby-button-foreground {
+        top: -1px !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;
+    }
+}
+@media (max-width: 100em) {
+    .withSectionTabs .headerTop {
+        padding-bottom: 1em !important;
+    }
+}

README.md

@@ -1,58 +1,60 @@
 <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 (plus a backdrops supported version)**
 
 ---
 
-### **Scyfin Base Theme**
+### [Go to installation](#installation)
-```
-@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/login.png" alt="login" width="100%"/>
 
 ---
 
-### **Options (Add these below the base theme)**
+### **Scyfin Complete Theme**
-### Disable static left drawer 
+
-```
+<img src="./images/scyfin/scyfin1.png" alt="scyfin1" width="100%"/>
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
+<img src="./images/scyfin/scyfin2.png" alt="scyfin2" width="100%"/>
-```
+<img src="./images/scyfin/scyfin3.jpg" alt="scyfin3" width="100%"/>
+<img src="./images/scyfin/scyfin4.png" alt="scyfin4" width="100%"/>
+<img src="./images/scyfin/scyfin5.png" alt="scyfin5" width="100%"/>
+
+`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/scyfin-theme.css');`
+
+### Options (Add these below the full theme)
+- Disable static left drawer 
+    - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/disable-static-drawer.css');`
+- Themes:
+    - Seafoam
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-seafoam.css');`
+    - Coral
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-coral.css');`
+    - Snow
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-snow.css');`
 
 ---
 
-### **Themes:**
+### **Scyfin Complete Theme - Backdrops Supported**
-### 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
+**Note -** 
-```
+* Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
+* Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
-```
-<img src="./images/coral.png" alt="coral-theme" width="40%"/>
 
-### Snow
+<img src="./images/scyfin/scyfin-backdrop1.jpg" alt="scyfin-backdrop1" width="100%"/>
-```
+<img src="./images/scyfin/scyfin-backdrop2.png" alt="scyfin-backdrop2" width="100%"/>
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
+<img src="./images/scyfin/scyfin-backdrop3.jpg" alt="scyfin-backdrop3" width="100%"/>
-```
-<img src="./images/snow.png" alt="snow-theme" width="40%"/>
 
-### OLED
+`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/scyfin-theme-backdrop.css');`
-```
+
-@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');
+### Options (Add these below the full theme)
-```
+- Disable static left drawer (BACKDROP VERSION) 
-<img src="./images/homepage-oled.png" alt="homepage-oled" width="90%"/>
+    - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/disable-static-drawer-backdrop.css');`
-<img src="./images/details-oled.png" alt="details-oled" width="90%"/>
+- Themes:
+    - Seafoam
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-seafoam.css');`
+    - Coral
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-coral.css');`
+    - Snow
+        - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.2.0/CSS/css-scyfin/theme-snow.css');`
 
 ---
 
@@ -63,13 +65,15 @@
 **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
+* Near the bottom, under "Custom CSS code", paste the `@import url` for the theme you want
+    * 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-server-base.png" alt="install-server-base" width="80%"/>
+    * <img src="./images/install.png" alt="install" width="80%"/>
-* Optional - Paste the `@import url` for any options / themes you may want
+* Optional - Paste the `@import url` for any options you want
     * Example:
-    * <img src="./images/install-server-options.png" alt="install-server-options" width="80%"/>
+    * <img src="./images/install2.png" alt="install2" width="80%"/>
 * Click "Save"
 
 ---
@@ -78,12 +82,15 @@
 * 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 base Scyfin theme
+* Near the middle, under "Custom CSS code", paste the `@import url` for the theme you want
     * 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/install-client-base.png" alt="install-client-base" width="80%"/>
+    * <img src="./images/install3.png" alt="install3" width="80%"/>
-* Optional - Paste the `@import url` for any options / themes you may want
+* Optional - Paste the `@import url` for any options you want
     * Example:
-    * <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
+    * <img src="./images/install4.png" alt="install4" width="80%"/>
 * Click "Save"
+
+---