mirror of
https://github.com/loof2736/scyfin.git
synced 2025-11-03 16:08:53 +01:00
Added backdrop compatible version
This commit is contained in:
loof2736
parent
499eb8f8aa
commit
c1707b1f0a
247
CSS/css-scyfin/scyfin-theme-backdrop.css
Normal file
247
CSS/css-scyfin/scyfin-theme-backdrop.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user