s8n/legacy-arrflix
s8n/legacy-arrflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

selector v4 hairline ring + reconcile prod drift + skin alt v2

Browse source 
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.
This commit is contained in:
s8n 2026-05-10 00:28:50 +01:00
parent 7ce1539ea7
commit 755088e7fc
4 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
bin/inject-middle-theme.py
View file

@ -183,6 +183,31 @@ body.arrflix-themed.arrflix-video-active video.htmlvideoplayer{
background-image:none!important; 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) ------------------------- */ /* --- SEARCH INPUT (cyan ring → red underline) ------------------------- */
/* Stock Jellyfin theme.css:262-272 sets blue focus ring (#00a4dc). /* Stock Jellyfin theme.css:262-272 sets blue focus ring (#00a4dc).
* Replace with borderless slab + red bottom border + soft red glow. * Replace with borderless slab + red bottom border + soft red glow.

71
snapshots/2026-05-09-v6-stable/index.html
View file

File diff suppressed because one or more lines are too long

25
web-overrides/index.html
View file

@ -438,6 +438,31 @@ body.arrflix-themed.arrflix-video-active video.htmlvideoplayer{
background-image:none!important; 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) ------------------------- */ /* --- SEARCH INPUT (cyan ring → red underline) ------------------------- */
/* Stock Jellyfin theme.css:262-272 sets blue focus ring (#00a4dc). /* Stock Jellyfin theme.css:262-272 sets blue focus ring (#00a4dc).
* Replace with borderless slab + red bottom border + soft red glow. * Replace with borderless slab + red bottom border + soft red glow.

26
web-overrides/skins/selector-variant-02-red-underline.css Normal file
View file

@ -0,0 +1,26 @@
/* ARRFLIX skin variant — selector dropdown highlight: "Red underline"
*
* Alt design for the audio/subtitle dropdown selected-row highlight (and any
* other actionSheet/listItem picker). Currently NOT applied — variant 04
* "Hairline ring" is the active design (see bin/inject-middle-theme.py).
*
* Saved for future skin/swap option per owner request 2026-05-10.
*
* Drop into the CSS string in bin/inject-middle-theme.py to swap. Replace the
* current variant-04 block at the end of the CSS section.
*
* Look: faint red wash + 2px red bottom border + soft red glow. Mirrors our
* search-input focus treatment for visual consistency.
*/
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 {
background: rgba(229, 9, 20, 0.04) !important;
color: #fff !important;
border-bottom: 2px solid #E50914 !important;
box-shadow: 0 1px 0 rgba(229, 9, 20, 0.35);
outline: none !important;
}