From b193368394d330689f7d3259c8ce4b3dd2d1bd0c Mon Sep 17 00:00:00 2001 From: HighImKevin Date: Mon, 5 Oct 2026 21:24:51 -0400 Subject: [PATCH] Add an additional header overlay when seasonal backgrounds are enabled for Halloween --- scripts/homeScreen.css | 60 +++++++++++++++++++ .../global/seasonalBackgroundHide.css | 24 +++++++- 2 files changed, 82 insertions(+), 2 deletions(-) diff --git a/scripts/homeScreen.css b/scripts/homeScreen.css index fb85c75..372657d 100644 --- a/scripts/homeScreen.css +++ b/scripts/homeScreen.css @@ -611,4 +611,64 @@ html[data-active-page="home"] body[data-seasonal-background="true"] #reactRoot > .sections.homeSectionsContainer:not([data-category="none"]) { margin-top: 0 !important; +} + +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop { + box-shadow: 0 3px 12px rgba(180, 0, 0, 0.7) !important; + border-bottom: 2px solid #8b0000; +} +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop { + position: relative; +} + +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root::after, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 14px; + pointer-events: none; + z-index: 9998; + background-color: #8b0000; + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} + +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root::before, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0.88; + background-image: + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + radial-gradient(ellipse at center, #990000 0%, #990000 50%, transparent 65%), + radial-gradient(circle, #7a0000 0%, #7a0000 55%, transparent 60%), + radial-gradient(ellipse at center, #550000 0%, #550000 50%, transparent 65%), + radial-gradient(circle, #8b0000 0%, #8b0000 55%, transparent 60%), + radial-gradient(circle, #7a0000 0%, #7a0000 55%, transparent 60%); + background-repeat: no-repeat !important; + background-size: + 54px 40px, + 36px 48px, + 58px 58px, + 120px 30px, 90px 38px, + 10px 6px, 6px 6px, 12px 7px, 5px 5px, 8px 8px; + background-position: + 7% 2px, 31% 8px, 68% -4px, + 15% 16px, 82% 6px, + 21% 4px, 44% 20px, 52% 6px, 76% 24px, 94% 10px; } \ No newline at end of file diff --git a/skins/optional/global/seasonalBackgroundHide.css b/skins/optional/global/seasonalBackgroundHide.css index 277d100..5482803 100644 --- a/skins/optional/global/seasonalBackgroundHide.css +++ b/skins/optional/global/seasonalBackgroundHide.css @@ -1,4 +1,3 @@ -// Hide seasonal background images /* Hide seasonal background images */ html[data-active-page="home"] body[data-seasonal-background="true"] .backdropContainer .backdropImage { background: initial !important; @@ -7,4 +6,25 @@ html[data-active-page="home"] body[data-seasonal-background="true"] #reactRoot > display: none !important; content: none !important; background: none !important; -} \ No newline at end of file +} + +/* Hide seasonal Halloween header decorations (modern + legacy) */ +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop { + box-shadow: none !important; + border-bottom: none !important; +} + +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root::before, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] header.MuiAppBar-root::after, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop::before, +html[data-active-page="home"] [data-seasonal-theme="seasonal-halloween"][data-seasonal-background="true"] .skinHeader:not(.osdHeader) .headerTop::after { + display: none !important; + content: none !important; + background: none !important; + background-image: none !important; + -webkit-mask-image: none !important; + mask-image: none !important; + height: 0 !important; + opacity: 0 !important; +}