Improve Home Screen configuration and add functionality to hide the mobile Category Home rail on scroll

This commit is contained in:
HighImKevin
2026-09-25 05:09:33 -04:00
parent f8bce09895
commit 281514aae3
6 changed files with 413 additions and 211 deletions
+41 -77
View File
@@ -6,10 +6,6 @@
gap: 1rem;
}
.snowverlay {
display: none;
}
.homePage [data-section-id] h2.sectionTitle,
.homePage [data-section-id] .sectionTitleTextButton > .material-icons {
margin-bottom: 0 !important;
@@ -243,24 +239,6 @@ div#discovery-loading-indicator:not(.show)::after {
font-size: 1.5rem !important;
line-height: 1.8rem !important;
}
/* .homeSectionsContainer [data-section-id*="thematic-"] .card[data-type="Folder"] .cardText {
display: none;
}
[data-card-format="Square"] [data-type="Person"] .cardScalable,
[data-card-format="Square"] [data-type="Actor"] .cardScalable,
[data-card-format="Square"] [data-type="Writer"] .cardScalable,
[data-card-format="Square"] [data-type="Director"] .cardScalable {
border-radius: 50% !important;
overflow: hidden;
}
[data-card-format="Square"] [data-type="Actor"] .cardText {
display: flex;
justify-content: center;
} */
.section0:not([data-page]),
.section1:not([data-page]),
.section2:not([data-page]),
@@ -270,33 +248,7 @@ div#discovery-loading-indicator:not(.show)::after {
.section6:not([data-page]),
.section7:not([data-page]),
.section8:not([data-page]),
.section9:not([data-page]),
.homeSectionsContainer:has([data-page], [data-section-id])
> :is(
.section0:not([data-page]),
.section1:not([data-page]),
.section2:not([data-page]),
.section3:not([data-page]),
.section4:not([data-page]),
.section5:not([data-page]),
.section6:not([data-page]),
.section7:not([data-page]),
.section8:not([data-page]),
.section9:not([data-page])
),
.homeSectionsContainer[data-sections-rendered="true"]
> :is(
.section0:not([data-page]),
.section1:not([data-page]),
.section2:not([data-page]),
.section3:not([data-page]),
.section4:not([data-page]),
.section5:not([data-page]),
.section6:not([data-page]),
.section7:not([data-page]),
.section8:not([data-page]),
.section9:not([data-page])
) {
.section9:not([data-page]) {
display: none !important;
}
@@ -318,30 +270,27 @@ div#discovery-loading-indicator:not(.show)::after {
display: none;
}
body:not(:has(#slides-container)) .homeSectionsContainer .section9 + .custom-scroller-container {
margin-top: 1em;
body[data-seasonal-background="true"]:has(.homePage:not(.hide))
#reactRoot:has(.homePage:not(.hide) #homeTab.is-active)
> .backdropContainer
.backdropImage {
background: none !important;
}
/* .pageTabContent:has(.kefinHomeSectionsContainer[data-kefin-home-screen]) .homeSectionsContainer:not([data-kefin-home-screen]) {
display: none !important;
body[data-seasonal-background="true"]:has(.homePage:not(.hide))
#reactRoot:has(.homePage:not(.hide) #homeTab.is-active)
> .backgroundContainer::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0%;
background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85)), var(--seasonal-background-image);
background-position: center;
background-size: cover;
}
body[data-seasonal-background="true"]:has(.homePage:not(.hide)) #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0%;
background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85)), var(--seasonal-background-image);
background-position: center;
background-size: cover;
}
body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
display: block;
} */
.homePage[data-discovery-ready] div#discovery-loading-indicator:not(.show) {
min-height: 50px;
}
@@ -402,10 +351,18 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
.kefin-home-chrome:focus-within {
opacity: 1;
}
.kefin-home-chrome[hidden],
#kefin-home-category-rail[hidden] {
.kefin-home-chrome.hide,
#kefin-home-category-rail.hide,
#kefin-home-category-rail.hide .kefin-home-category-rail {
display: none !important;
}
/* Hide home chrome off-home via root page key (no :has; JMP-safe) */
html:not([data-active-page="home"]) #kefin-home-category-rail,
html:not([data-active-page="home"]) #kefin-home-create-section-btn {
display: none !important;
}
.kefin-home-chrome button,
#kefin-home-category-rail button {
pointer-events: auto;
@@ -477,6 +434,14 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: none !important;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
#kefin-home-category-rail.is-scroll-hidden .kefin-home-category-rail {
transform: translateY(100%);
pointer-events: none;
opacity: 0;
}
.kefin-home-create-section,
#kefin-home-create-section-btn {
@@ -491,11 +456,6 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
margin-left: auto !important;
}
body:not(:has(.homePage:not(.hide) #homeTab.is-active)) div#kefin-home-category-rail,
body:not(:has(.homePage:not(.hide) #homeTab.is-active)) div#kefin-home-create-section-btn {
display: none;
}
@media (min-width: 900px) {
#kefin-home-category-rail .kefin-home-category-rail,
#kefin-home-category-rail .kefin-home-category-rail::before {
@@ -531,8 +491,12 @@ body:not(:has(#slides-container)):has(.MuiBox-root) .homeSectionsContainer:has([
height: auto !important;
}
body:has(.kefin-home-category-btn.is-active[data-category-id="discovery"]) .sections.homeSectionsContainer::before {
.sections.homeSectionsContainer[data-category="discovery"]::before {
content: "Discover Something To Watch";
padding-left: max(env(safe-area-inset-left), 3.3%);
font-size: 1.5rem;
}
html:not([data-active-page="home"]) .snowverlay {
display: none;
}