mirror of
https://github.com/ranaldsgift/KefinTweaks.git
synced 2026-11-05 15:52:47 +01:00
Fix performance regressions on the home screen due to :has() css selectors
This commit is contained in:
HighImKevin
+71
-89
@@ -2274,87 +2274,6 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-scroller-container:has(.itemsContainer[data-layout="grid"]) .emby-scrollbuttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.emby-scroller-container:has(.emby-scrollbuttons-button:not(.hide)) .section-controls-more {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layout-mobile .emby-scroller-container:has(.overflowPortraitCard:nth-child(4)) button.show-all-button,
|
||||
.layout-mobile .emby-scroller-container:has(.overflowPortraitCard:nth-child(4)) .section-controls-more,
|
||||
.layout-mobile .emby-scroller-container:has(.overflowBackdropCard:nth-child(3)) button.show-all-button,
|
||||
.layout-mobile .emby-scroller-container:has(.overflowBackdropCard:nth-child(3)) .section-controls-more {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.spotlight-section .spotlight-item:has(.spotlight-background-layer-center) .spotlight-background-layer {
|
||||
width: 37.5%;
|
||||
}
|
||||
|
||||
.emby-scroller-container .emby-scrollbuttons:has([data-direction="right"]:disabled):has([data-direction="left"]:disabled) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spotlight-truncated-list:has(.spotlight-truncated-list-tooltip) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.emby-scroller-container:has(.itemsContainer[data-layout="grid"]) .emby-scrollbuttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:has(.spotlight-section[data-layout="Borderless"]) .homeSectionsContainer > *:not(.spotlight-section) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.spotlight-section[data-size="full"] .spotlight-truncated-list.itemDetailsGroup:has(> .detailsGroupItem),
|
||||
.spotlight-section[data-size="full"] .spotlight-truncated-list.sectionTabs:has(> .emby-tab-button) {
|
||||
font-size: large;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.spotlight-section .itemDetailsGroup:has(.detailsGroupItem:not(.hide)),
|
||||
.spotlight-section .sectionTabs:not(.spotlight-section-title):has(.emby-tab-button:not(.hide)) {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
width: initial !important;
|
||||
min-width: initial !important;
|
||||
}
|
||||
|
||||
.spotlight-section:not(.hide) span.emby-tab-button.emby-tab-button-active:not(:has(a)) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section .spotlight-section-title.sectionTabs:has(.emby-tab-button:not(.hide)) {
|
||||
justify-self: center;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section .spotlight-section-title.sectionTabs:has(.emby-tab-button:not(.hide)) > * {
|
||||
display: block !important;
|
||||
padding: 0.25em 0.5em !important;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section[data-hide-section-name="true"] .spotlight-section-title,
|
||||
.layout-mobile .spotlight-section[data-hide-section-name="true"] .spotlight-section-title.sectionTabs,
|
||||
.spotlight-section[data-hide-section-name="true"] .spotlight-section-title.sectionTabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.emby-scroller-container:has(.emby-scrollbuttons-button:not(.hide)) button.show-all-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout-mobile .emby-scroller-container:has(.overflowPortraitCard:nth-child(4)) button.show-all-button,
|
||||
.layout-mobile .emby-scroller-container:has(.overflowBackdropCard:nth-child(3)) button.show-all-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Section-level card title presentation */
|
||||
.verticalSection .cardText,
|
||||
.emby-scroller-container .cardText {
|
||||
@@ -4017,10 +3936,6 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
[data-border-style="profile"] .card .cardTextStack:has(.cardText:nth-child(2):last-child) .cardText-first {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
[data-border="profile"] .card .cardText-first a,
|
||||
[data-border-style="profile"] .card .cardText-first a {
|
||||
color: inherit !important;
|
||||
@@ -4119,10 +4034,6 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.custom-scroller-container .emby-scrollbuttons:has(:first-child[disabled]):has(:last-child[disabled]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.missingIndicator,
|
||||
.unairedIndicator {
|
||||
background: #c33;
|
||||
@@ -4140,3 +4051,74 @@ html.sleekfin-main-ui .emby-scroller-container[data-section-id="liveTv-channels"
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.emby-scroller-container[data-layout="grid"] .emby-scrollbuttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.spotlight-section .spotlight-item:has(.spotlight-background-layer-center) .spotlight-background-layer {
|
||||
width: 37.5%;
|
||||
}
|
||||
|
||||
.emby-scroller-container .emby-scrollbuttons:has([data-direction="right"]:disabled):has([data-direction="left"]:disabled) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spotlight-truncated-list:has(.spotlight-truncated-list-tooltip) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.emby-scroller-container[data-layout="grid"] .emby-scrollbuttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.spotlight-section[data-size="full"] .spotlight-truncated-list.itemDetailsGroup:has(> .detailsGroupItem),
|
||||
.spotlight-section[data-size="full"] .spotlight-truncated-list.sectionTabs:has(> .emby-tab-button) {
|
||||
font-size: large;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.spotlight-section .itemDetailsGroup:has(.detailsGroupItem:not(.hide)),
|
||||
.spotlight-section .sectionTabs:not(.spotlight-section-title):has(.emby-tab-button:not(.hide)) {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
width: initial !important;
|
||||
min-width: initial !important;
|
||||
}
|
||||
|
||||
.spotlight-section:not(.hide) span.emby-tab-button.emby-tab-button-active:not(:has(a)) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section .spotlight-section-title.sectionTabs:has(.emby-tab-button:not(.hide)) {
|
||||
justify-self: center;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section .spotlight-section-title.sectionTabs:has(.emby-tab-button:not(.hide)) > * {
|
||||
display: block !important;
|
||||
padding: 0.25em 0.5em !important;
|
||||
}
|
||||
|
||||
.emby-scroller-container[data-border-style="profile"] .card .cardTextStack:has(.cardText:nth-child(2):last-child) .cardText-first {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.layout-mobile .spotlight-section[data-hide-section-name="true"] .spotlight-section-title,
|
||||
.layout-mobile .spotlight-section[data-hide-section-name="true"] .spotlight-section-title.sectionTabs,
|
||||
.spotlight-section[data-hide-section-name="true"] .spotlight-section-title.sectionTabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.spotlight-section {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spotlight-section .spotlight-section-title-container,
|
||||
.spotlight-section .spotlight-nav-container,
|
||||
.spotlight-section .spotlight-overlay * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
+39
-34
@@ -270,27 +270,6 @@ div#discovery-loading-indicator:not(.show)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body[data-seasonal-background="true"]:has(.homePage:not(.hide))
|
||||
#reactRoot:has(.homePage:not(.hide) #homeTab.is-active)
|
||||
> .backdropContainer
|
||||
.backdropImage {
|
||||
background: 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;
|
||||
}
|
||||
|
||||
.homePage[data-discovery-ready] div#discovery-loading-indicator:not(.show) {
|
||||
min-height: 50px;
|
||||
}
|
||||
@@ -307,16 +286,6 @@ body[data-seasonal-background="true"]:has(.homePage:not(.hide))
|
||||
}
|
||||
}
|
||||
|
||||
.homeSectionsContainer:not(:has([data-page]), :has([data-section-id])):not([data-sections-rendered])::after {
|
||||
content: "Customize your Home Screen from your User Settings > Home in the top right corner.";
|
||||
text-align: center;
|
||||
margin: 3em auto;
|
||||
display: block;
|
||||
animation: fadeInDelayed 0.1s linear 3s forwards;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[data-section-id="browse-by-studio"] .card {
|
||||
width: 8vw !important;
|
||||
}
|
||||
@@ -550,9 +519,6 @@ html:not([data-active-page="home"]) #kefin-home-create-section-btn {
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -573,3 +539,42 @@ html:not([data-active-page="home"]) .snowverlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
main.MuiBox-root .homeSectionsContainer[data-sections-rendered] {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
html[data-active-page="home"] body[data-seasonal-background="true"] .backdropContainer .backdropImage {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
html[data-active-page="home"]
|
||||
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;
|
||||
}
|
||||
|
||||
.homeSectionsContainer:has(> .verticalSection.section0:empty):has(> .verticalSection.section1:empty):has(
|
||||
> .verticalSection.section2:empty
|
||||
):has(> .verticalSection.section3:empty):has(> .verticalSection.section4:empty):has(> .verticalSection.section5:empty):has(
|
||||
> .verticalSection.section6:empty
|
||||
):has(> .verticalSection.section7:empty):has(> .verticalSection.section8:empty):has(> .verticalSection.section9:empty):not(
|
||||
:has(> .section9 ~ :not(.discovery-loading-indicator))
|
||||
)::after {
|
||||
content: "Customize your Home Screen from your User Settings > Home in the top right corner.";
|
||||
text-align: center;
|
||||
margin: 3em auto;
|
||||
display: block;
|
||||
animation: fadeInDelayed 0.1s linear 1s forwards;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user