From c1707b1f0a56c860b1fbe469629e3d74e4a5f39e Mon Sep 17 00:00:00 2001 From: loof2736 Date: Fri, 11 Nov 2022 08:09:26 -0500 Subject: [PATCH] Added backdrop compatible version --- CSS/css-scyfin/scyfin-theme-backdrop.css | 247 +++++++++++++++++++++++ CSS/css-scyfin/scyfin-theme.css | 2 +- 2 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 CSS/css-scyfin/scyfin-theme-backdrop.css diff --git a/CSS/css-scyfin/scyfin-theme-backdrop.css b/CSS/css-scyfin/scyfin-theme-backdrop.css new file mode 100644 index 0000000..f6ad17f --- /dev/null +++ b/CSS/css-scyfin/scyfin-theme-backdrop.css @@ -0,0 +1,247 @@ +/* Increase size of Jellyfin logo */ +.layout-desktop .pageTitleWithLogo { + margin-left: 15px !important; + height: 40px !important; + margin-top: 5px !important; +} + + + +/* Static left drawer */ +.layout-desktop .mainDrawer { + transform: none !important; + 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(#quickConnectPreferencesPage) { + 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 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; +} + + + +/* Rounded cards */ +.cardContent, +.cardPadder, +.cardOverlayContainer, +.blurhash-canvas, +.dialog { + border-radius: 10px !important; +} + + + +/* Floating progress bar */ +.innerCardFooter { + bottom: 5% !important; + width: 90% !important; + margin: auto !important; + border-radius: 100px !important; +} +.itemProgressBar { + height: 8px !important; +} +.innerCardFooterClear { + background-color: black !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; +} + + + +/* Custom button color */ +.navMenuOption-selected { + background: rgba(33, 149, 243, 0.2) !important; + color: rgb(33, 149, 243) !important; + backdrop-filter: blur(50px) !important; +} + + + +/* Transparent header bar */ +.skinHeader { + background-color: transparent !important; +} +.layout-desktop .skinHeader { + padding-top: 1.5em !important; +} +/* Rounded header buttons */ +.headerTabs, +.headerRight { + background-color:rgba(35, 35, 35, 0.5) !important; + border-radius: 50px !important; + backdrop-filter: blur(50px) !important; +} +.layout-desktop .headerTabs, +.layout-desktop .headerRight { + margin-left: 250px !important; + margin-bottom: 10px !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; +} +/* Move left header back up */ +.layout-desktop .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; +} + + + +/* Settings and dashboard modifications */ +.emby-input, +.emby-textarea, +.paperList, +.listItem:hover, +.subtitleappearance-preview { + border-radius: 15px !important; +} +.button-submit, +.emby-select, +.checkboxOutline, +.btnRefresh, +#btnShutdown { + border-radius: 100px !important; +} +.raised:not(.button-submit, .btnRefresh, #btnShutdown) { + background: transparent !important; + font-weight: normal !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 { + padding-left: 15px !important; +} +/* Rounded dashboard cards */ +.cardBox { + border-radius: 15px !important; +} +/* Removed ugliness of Networking section in dashboard */ +.dashboardHostingForm .verticalSection { + border-radius: 15px !important; + border-color: #3B3B3B !important; + padding: 10px 35px !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; + } +} \ No newline at end of file diff --git a/CSS/css-scyfin/scyfin-theme.css b/CSS/css-scyfin/scyfin-theme.css index 81934b3..7eb50cb 100644 --- a/CSS/css-scyfin/scyfin-theme.css +++ b/CSS/css-scyfin/scyfin-theme.css @@ -16,7 +16,7 @@ /* Modified background color */ background-color: #181818 !important; /* Added border to right side */ - border-right: 1px solid #3B3B3B; + border-right: 1px solid #3B3B3B !important; /* Move drawer behind header */ z-index: 998 !important; }