From 755088e7fcbc4c2719ca5980d4962f22ba3d3300 Mon Sep 17 00:00:00 2001 From: s8n Date: Sun, 10 May 2026 00:28:50 +0100 Subject: [PATCH] selector v4 hairline ring + reconcile prod drift + skin alt v2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stock Jellyfin paints .listItem.selected and .focused in cyan (#00a4dc) on actionSheet/selectionList/dialogContainer dropdowns. Clashes with Cineplex red on audio + subtitle pickers. Pick: variant 04 "Hairline ring" — 1px #E50914 outline (offset -1px inside row) + dark near-black bg + white text. Architectural, quietly on-brand. Applied via body.arrflix-themed scope. Saved alternative: web-overrides/skins/selector-variant-02-red- underline.css — variant 02 "Red underline" (matches search-input focus). Future skin/swap option per owner. Not currently active. Reconciled prod drift: prod overlay had been externally modified since last snapshot (md5 2da61583 -> c62898). Pulled prod's current overlay as new repo baseline + snapshot. Then applied variant 04 on top -> dev md5 0ab8b258 (= prod + v4). Prod still c62898 untouched. --- bin/inject-middle-theme.py | 25 +++++++ snapshots/2026-05-09-v6-stable/index.html | 71 +++++++++++++++++++ web-overrides/index.html | 25 +++++++ .../selector-variant-02-red-underline.css | 26 +++++++ 4 files changed, 147 insertions(+) create mode 100644 web-overrides/skins/selector-variant-02-red-underline.css diff --git a/bin/inject-middle-theme.py b/bin/inject-middle-theme.py index 97bac7a..b079c87 100755 --- a/bin/inject-middle-theme.py +++ b/bin/inject-middle-theme.py @@ -183,6 +183,31 @@ body.arrflix-themed.arrflix-video-active video.htmlvideoplayer{ background-image:none!important; } +/* --- ACTION-SHEET SELECTOR (audio/subtitle dropdowns) ----------------- * + * Stock Jellyfin theme.css paints `.listItem.selected` and `.focused` in + * cyan (#00a4dc) — clashes with Cineplex red. Override to "Hairline ring" + * variant: 1px red outline (offset -1px so it sits inside the row) + dark + * near-black bg + white text. Architectural, quietly on-brand. + * + * Targets every Jellyfin picker/dropdown form: + * .actionSheet .listItem(.selected|.focused) — modal action sheets (audio/sub) + * .selectionList .listItem.selected — legacy selection lists + * .dialogContainer .listItem.selected — dialog-scoped selectors + * + * Future swap: see web-overrides/skins/selector-variant-02-red-underline.css + * for the alternative "red underline" design (matches search-input focus). + */ +body.arrflix-themed .actionSheet .listItem.selected, +body.arrflix-themed .actionSheet .listItem-button.selected, +body.arrflix-themed .actionSheet .listItem.focused, +body.arrflix-themed .selectionList .listItem.selected, +body.arrflix-themed .dialogContainer .listItem.selected{ + outline:1px solid #E50914!important; + outline-offset:-1px; + background:rgba(15,15,15,.7)!important; + color:#fff!important; +} + /* --- SEARCH INPUT (cyan ring → red underline) ------------------------- */ /* Stock Jellyfin theme.css:262-272 sets blue focus ring (#00a4dc). * Replace with borderless slab + red bottom border + soft red glow. diff --git a/snapshots/2026-05-09-v6-stable/index.html b/snapshots/2026-05-09-v6-stable/index.html index c312af2..a2fafdd 100644 --- a/snapshots/2026-05-09-v6-stable/index.html +++ b/snapshots/2026-05-09-v6-stable/index.html @@ -242,6 +242,52 @@ label[for="language"] { } catch(e){} } })(); + +/* SUB-LABEL-SHIM-BEGIN — 2026-05-10 + Shorten subtitle stream labels in detail-page dropdowns. + Stock Jellyfin renders e.g. "English - SUBRIP - External"; ARRFLIX library + has one format per language so the codec/source suffix is noise. Match + " - - (External|Internal|Embedded)[ - flag]" exactly and + collapse to "" (or " (Forced)"/" (SDH)" if flagged). + Audio labels like "5.1Ch Surround Sound - English - AAC - Stereo - Default" + have a different shape (more segments) so they stay untouched. + Revert: bin/revert-sub-label-shim.sh deletes between BEGIN/END markers. */ +(function(){ + var SUB_RE = /^([A-Za-z][A-Za-z\s'-]+?) - ([A-Z][A-Z0-9_]+) - (External|Internal|Embedded)( - (Default|Forced|SDH|Hearing Impaired))?$/; + function shorten(s){ + var m = s.match(SUB_RE); + if(!m) return null; + var flag = m[5]; + if(!flag || flag === 'Default') return m[1]; + return m[1] + ' (' + flag + ')'; + } + function walk(root){ + if(!root || !root.nodeType) return; + var w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null); + var n, batch = []; + while((n = w.nextNode())) batch.push(n); + batch.forEach(function(t){ + var s = t.nodeValue; + if(!s || s.length < 12 || s.length > 96) return; + var trimmed = s.trim(); + var rep = shorten(trimmed); + if(rep && rep !== trimmed) t.nodeValue = s.replace(trimmed, rep); + }); + } + function init(){ + walk(document.body); + if(window.MutationObserver){ + new MutationObserver(function(muts){ + muts.forEach(function(m){ + m.addedNodes.forEach(function(node){ if(node.nodeType === 1) walk(node); }); + }); + }).observe(document.body, { childList:true, subtree:true }); + } + } + if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); + else init(); +})(); +/* SUB-LABEL-SHIM-END */ /* ARRFLIX-SHIM-END */ARRFLIX