polish: pure-black bg + search bar fix + variant E nav glow + My Media hide

Grey #101010 stripe at bottom of pages: jellyfin-web theme.css:44-50
sets .backgroundContainer + html to #101010, neither Cineplex nor
prior overlay overrode it. Added rule forcing #000 across html, body,
.backgroundContainer, .skinBody, .mainAnimatedPages, .pageContainer,
#reactRoot under body.arrflix-themed.

Search input: stock cyan focus ring (#00a4dc, theme.css:262-272)
swapped for borderless slab + 2px red bottom on focus + soft red
box-shadow halo. Cineplex/Netflix-faithful.

Movies/Series nav: variant E "cinematic glow" picked from preview.
Active state = red text + text-shadow halo + font-weight 700. JS
hash matcher toggles .arrflix-nav.active when location.hash matches
#/movies.html or #/tv.html (and short forms). hashchange listener +
existing setInterval keep state in sync.

My Media row: .homePage .homeSectionsContainer .verticalSection.section0
hidden — matches prod which had it hidden via different mechanism.

Snapshot at snapshots/2026-05-09-v6-stable/index.html bumped to
md5 2c8f5d5f7c99611fa93d15c34fbe35d1; same as prod and dev.
This commit is contained in:
s8n 2026-05-09 21:47:00 +01:00
parent 92e2426734
commit e9d209da73
3 changed files with 51 additions and 3 deletions

View file

@ -42,14 +42,25 @@ CSS = (
"body.arrflix-themed .skinHeader .headerLeft > h3.pageTitle:not(.pageTitleWithLogo){display:none!important}\n" "body.arrflix-themed .skinHeader .headerLeft > h3.pageTitle:not(.pageTitleWithLogo){display:none!important}\n"
"body.arrflix-themed .skinHeader .headerCastButton,body.arrflix-themed .skinHeader .headerSyncButton{display:none!important}\n" "body.arrflix-themed .skinHeader .headerCastButton,body.arrflix-themed .skinHeader .headerSyncButton{display:none!important}\n"
"body.arrflix-themed .headerTabs.sectionTabs{display:none!important}\n" "body.arrflix-themed .headerTabs.sectionTabs{display:none!important}\n"
"/* Hide the 'My Media' library row on home page (first vertical section, .section0). Continue Watching=section1, Continue Listening=section2, Continue Reading=section3, Next Up=section5, Recently Added=section6 — leave those untouched. */\n"
"body.arrflix-themed .homePage .homeSectionsContainer .verticalSection.section0{display:none!important}\n"
"/* Hide entire header during video playback */\n" "/* Hide entire header during video playback */\n"
"body.arrflix-video-active:not(:has(#loginPage:not(.hide))) .skinHeader,body.arrflix-video-active .arrflix-headerLogo,body.arrflix-video-active .arrflix-nav{display:none!important}\n" "body.arrflix-video-active:not(:has(#loginPage:not(.hide))) .skinHeader,body.arrflix-video-active .arrflix-headerLogo,body.arrflix-video-active .arrflix-nav{display:none!important}\n"
".arrflix-headerLogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:38px;" ".arrflix-headerLogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:38px;"
"background:center/contain no-repeat url('" + wordmark_url + "');" "background:center/contain no-repeat url('" + wordmark_url + "');"
"z-index:1;display:block;text-indent:-9999px;overflow:hidden}\n" "z-index:1;display:block;text-indent:-9999px;overflow:hidden}\n"
".arrflix-headerLogo:hover{filter:brightness(1.15)}\n" ".arrflix-headerLogo:hover{filter:brightness(1.15)}\n"
".arrflix-nav{text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:0 .9em;color:#fff!important;text-decoration:none;display:inline-flex;align-items:center;height:100%;font-size:.85em}\n" ".arrflix-nav{text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:0 .9em;color:#fff!important;text-decoration:none;display:inline-flex;align-items:center;height:100%;font-size:.85em;transition:color .18s ease,text-shadow .18s ease,font-weight .18s ease}\n"
".arrflix-nav:hover{color:#E50914!important}\n" ".arrflix-nav:hover{color:#E50914!important}\n"
".arrflix-nav.active{color:#E50914!important;font-weight:700;text-shadow:0 0 12px rgba(229,9,20,0.55),0 0 24px rgba(229,9,20,0.25)}\n"
"/* Pure-black background: kill the #101010 stripe that bleeds at page bottom (jellyfin-web/themes/dark/theme.css:44-50 .backgroundContainer + html) */\n"
"html,body.arrflix-themed,body.arrflix-themed .backgroundContainer,body.arrflix-themed .skinBody,body.arrflix-themed .mainAnimatedPage,body.arrflix-themed .mainAnimatedPages,body.arrflix-themed .pageContainer,body.arrflix-themed #reactRoot{background-color:#000!important}\n"
"body.arrflix-themed .backgroundContainer.withBackdrop{background-color:rgba(0,0,0,.86)!important}\n"
"/* Search input: replace stock cyan focus ring (jellyfin-web/themes/dark/theme.css:262-272) with a borderless slab + red underline on focus, true to the Cineplex/Netflix accent */\n"
"body.arrflix-themed .searchFields .emby-input,body.arrflix-themed input.searchfields-txtSearch,body.arrflix-themed #searchTextInput{background:#141414!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:2px!important;color:#fff!important;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;padding:.55em .8em!important}\n"
"body.arrflix-themed .searchFields .emby-input::placeholder,body.arrflix-themed input.searchfields-txtSearch::placeholder,body.arrflix-themed #searchTextInput::placeholder{color:rgba(255,255,255,.4);letter-spacing:.02em}\n"
"body.arrflix-themed .searchFields .emby-input:hover,body.arrflix-themed input.searchfields-txtSearch:hover,body.arrflix-themed #searchTextInput:hover{background:#1a1a1a!important}\n"
"body.arrflix-themed .searchFields .emby-input:focus,body.arrflix-themed input.searchfields-txtSearch:focus,body.arrflix-themed #searchTextInput:focus{background:#1a1a1a!important;border:0!important;border-bottom:2px solid #E50914!important;box-shadow:0 1px 0 0 rgba(229,9,20,.35),0 0 14px -2px rgba(229,9,20,.35)!important;outline:none!important}\n"
) )
JS = """ JS = """
@ -106,6 +117,11 @@ JS = """
var right=top.querySelector('.headerRight'); var right=top.querySelector('.headerRight');
top.insertBefore(a, right || null); top.insertBefore(a, right || null);
} }
var hash=(location.hash||'').toLowerCase();
var movieMatch=(hash==='#/movies.html'||hash==='#/movies');
var seriesMatch=(hash==='#/tv.html'||hash==='#/tv');
Array.prototype.forEach.call(document.querySelectorAll('[data-arrflix-nav=\"movies\"]'),function(n){ n.classList.toggle('active',movieMatch); });
Array.prototype.forEach.call(document.querySelectorAll('[data-arrflix-nav=\"series\"]'),function(n){ n.classList.toggle('active',seriesMatch); });
} }
function start(){ function start(){
relayoutHeader(); relayoutHeader();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long