Fix cases where Home Screen wouldn't correctly render

This commit is contained in:
HighImKevin
2026-09-22 17:41:48 -04:00
parent 8f987dae0e
commit a9012dd9b0
16 changed files with 721 additions and 296 deletions
+66 -38
View File
@@ -164,22 +164,6 @@ div#discovery-loading-indicator:not(.show)::after {
}
}
/* Hide next up section if next up if KefinTweaks next up section is present */
/* .homeSectionsContainer:has([data-section-id="nextUp"]) > div:nth-child(-n+10):has(a[href*="nextup"]) {
display: none;
} */
/* Hide continue watching section if continue watching if KefinTweaks continue watching section is present */
/* .homeSectionsContainer:has([data-section-id="continueWatching"]) > div:nth-child(-n+10):has([data-positionticks][data-mediatype="Video"]) {
display: none;
} */
/* Hide recently added section if recently added if KefinTweaks recently added section is present */
/* .homeSectionsContainer:has([data-section-id*="recently-added"]) > div:nth-child(-n+10):has(a[href*="movies&tab=1"]),
.homeSectionsContainer:has([data-section-id*="recently-added"]) > div:nth-child(-n+10):has(a[href*="tv&tab=1"]),
.homeSectionsContainer:has([data-section-id*="recently-added"]) > div:nth-child(-n+10):has(a[href*="music&tab=1"])
{
display: none;
} */
/* Hide scroll buttons on mobile using Jellyfin's layout classes */
.layout-mobile .emby-scrollbuttons,
.layout-tv .emby-scrollbuttons {
@@ -427,8 +411,11 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
pointer-events: auto;
}
.kefin-home-create-section {
left: max(0.75rem, env(safe-area-inset-left));
bottom: max(0.75rem, env(safe-area-inset-bottom));
left: 0;
bottom: 0.25em;
}
.kefin-home-create-section-btn {
padding: 0.25em;
}
.kefin-home-create-section-btn .material-icons {
font-size: 1.75rem;
@@ -441,27 +428,22 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
}
/* Inner visual bar — keep our layout over skinHeader / MuiAppBar positioning */
#kefin-home-category-rail .kefin-home-category-rail {
position: fixed;
z-index: 12;
top: max(4.5rem, calc(env(safe-area-inset-top) + 4.5rem));
left: max(0.5rem, env(safe-area-inset-left));
right: auto;
bottom: auto;
width: auto;
height: auto;
max-width: none;
display: flex;
flex-direction: column;
.kefin-home-category-rail {
--AppBar-background: var(--jf-palette-AppBar-defaultBg);
--AppBar-color: var(--jf-palette-text-primary);
background-color: var(--jf-palette-AppBar-darkBg, var(--AppBar-background));
color: var(--jf-palette-AppBar-darkColor, var(--AppBar-color));
z-index: 10;
gap: 0.25rem;
border-radius: 999px;
box-shadow: 1px 1px 2px 0 #fff !important;
transform: none;
pointer-events: none;
pointer-events: auto;
display: flex;
}
#kefin-home-category-rail .kefin-home-category-rail:hover,
#kefin-home-category-rail .kefin-home-category-rail:focus-within {
opacity: 1;
background: #0f0f0f !important;
border-radius: 0 25px 25px 0;
box-shadow: 1px 0px 5px -1px black;
}
.kefin-home-category-btn {
opacity: 0.75;
@@ -473,6 +455,7 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
}
.kefin-home-category-btn .material-icons {
font-size: 1.35rem;
top: unset !important;
}
@media (max-width: 899px) {
@@ -486,15 +469,18 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
align-items: center;
gap: 0.15rem;
padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) !important;
box-shadow: 1px 1px 1px 1px #fff !important;
border-radius: 0;
opacity: 1;
pointer-events: auto;
margin: 0 !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: none !important;
}
.kefin-home-create-section {
bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
.kefin-home-create-section,
#kefin-home-create-section-btn {
display: none !important;
}
.homePage:not(.hide) {
padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
@@ -502,9 +488,51 @@ body[data-seasonal-animations="true"]:has(.homePage:not(.hide)) .snowverlay {
}
.kefin-section-more-toggle {
margin-left: auto;
margin-left: auto !important;
}
body:not(:has(.homePage:not(.hide))) div#kefin-home-category-rail {
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 {
background: none !important;
background-color: transparent !important;
}
#kefin-home-category-rail .kefin-home-category-rail {
position: fixed !important;
z-index: 10;
top: 50vh !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
max-width: none !important;
flex-direction: column !important;
transform: translateY(-50%);
overflow: visible !important;
padding: 5px 0 !important;
margin: 0 !important;
backdrop-filter: none;
border: none !important;
display: grid !important;
grid-auto-rows: 1fr;
}
}
body:not(:has(#slides-container)):has(.MuiBox-root) .homeSectionsContainer:has([data-section-id]) {
margin-top: 3rem;
}
#kefin-home-category-rail .kefin-home-category-rail {
height: auto !important;
}
body:has(.kefin-home-category-btn.is-active[data-category-id="discovery"]) .sections.homeSectionsContainer::before {
content: "Discover Something To Watch";
padding-left: max(env(safe-area-inset-left), 3.3%);
font-size: 1.5rem;
}