Fix backdrop detection for Jellyfin Media Player

This commit is contained in:
loof2736 2024-06-09 22:37:22 -04:00
parent f0d53f0a0c
commit 0f962980d4
2 changed files with 52 additions and 19 deletions

View File

@ -4,21 +4,29 @@
width: 100px !important; width: 100px !important;
margin: 0 1em 0 .5em !important; margin: 0 1em 0 .5em !important;
} }
[dir="ltr"] .pageTitle {
margin: 0 1em 0 .5em !important;
}
/* Un-static left drawer */ /* Un-static left drawer */
.layout-desktop .mainDrawer:not(.dashboardDocument) { .layout-desktop .mainDrawer:not(.dashboardDocument) {
left: -320px !important; left: -320px !important;
z-index: 1099 !important; z-index: 1099 !important;
border-radius: var(--rounded-cards) !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) { .layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer:not(.dashboardDocument) {
width: 275px !important; width: 275px !important;
background-color: var(--primary-background-transparent) !important; background-color: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important; backdrop-filter: blur(var(--blur)) !important;
} }
.layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer:not(.dashboardDocument) { @supports not selector(:has(*)) {
background: var(--secondary-background-color) !important; .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
backdrop-filter: none !important; background: var(--secondary-background-color) !important;
backdrop-filter: none !important;
}
} }
/* Lower drawer buttons */ /* Lower drawer buttons */
@ -80,7 +88,17 @@
top: -3px !important; top: -3px !important;
background-color: var(--primary-background-transparent) !important; background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important; border-radius: 50px !important;
backdrop-filter: blur(50px) !important; backdrop-filter: blur(var(--blur)) !important;
}
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop .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 { .headerLeft {
flex-grow: 0 !important; flex-grow: 0 !important;

View File

@ -739,23 +739,23 @@ html,
.layout-desktop .detailPagePrimaryContent { .layout-desktop .detailPagePrimaryContent {
padding-left: 20.4vw !important; padding-left: 20.4vw !important;
} }
.layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent { /* Padding for 2:3 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent {
min-height: 29vw !important; min-height: 29vw !important;
} }
/* Check for :has support (screw JMP) */ /* Padding for 1:1 posters */
@supports selector(:has(*)) { .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
/* Padding for 2:3 posters */ min-height: 20vw !important;
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent { }
/* Padding for 16:9 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent {
min-height: 12vw !important;
}
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent {
min-height: 29vw !important; min-height: 29vw !important;
} }
/* Padding for 1:1 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
min-height: 20vw !important;
}
/* Padding for 16:9 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent {
min-height: 12vw !important;
}
} }
/* Move track selection box */ /* Move track selection box */
@ -1014,12 +1014,27 @@ html,
} }
/* Transparent drawer */ /* Transparent drawer */
.layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer { .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: linear-gradient(to right, #10101090, transparent) !important; background: linear-gradient(to right, #10101090, transparent) !important;
} }
.layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer { .layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer {
background: var(--secondary-background-color) !important; background: var(--secondary-background-color) !important;
} }
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: transparent !important;
}
#itemDetailPage.noBackdropTransparency::after {
position: fixed;
content: "";
top: 0;
left: 0;
height: 100%;
width: 250px;
background: var(--secondary-background-color);
}
}
/* Blur buttons */ /* Blur buttons */
.layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected { .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected {