doc 04 §3e: ElegantFin migration with ARRFLIX recolor
Migrated active CSS theme from Cineplex v1.0.6 to ElegantFin v25.12.31 with Netflix-red #E50914 accent overrides over ElegantFin's default Jellyseerr-blue/violet palette. ARRFLIX wordmark logo preserved on both .adminDrawerLogo img and .pageTitleWithLogo selectors (split-rule form). Eight accent variables overridden at :root: --uiAccentColor, --activeColor (+Alpha), --osdSeekBarPlayedColor, --checkboxCheckedBgColor, --highlightOutlineColor, --btnSubmitColor, --btnSubmitBorderColor. All prior custom blocks preserved verbatim: cast/crew hide, Quick Connect hide, header-icon hide (§3c), white slider thumbs (§3d), pure-black bg (§3d), Settings drawer hide, count badge hide, ARRFLIX logo override. LoginDisclaimer + SplashscreenEnabled untouched. POST → 204; GET /Branding/Configuration confirms no Cineplex import, ElegantFin pinned to v25.12.31, all overrides intact. Smoke test on https://arrflix.s8n.ru/ → HTTP 302 (baseline). No container restart. Restructured §1: Cineplex content moved to §1 'Previous themes' subsection (#### Why Cineplex won, #### Tradeoffs, #### What it looked like, #### Theme history) with the new ElegantFin+recolor stack as the canonical current theme. Snapshot tag for rollback: snapshot-2026-05-08-pre-elegantfin
This commit is contained in:
parent
ba64be7fa3
commit
404dc114b4
1 changed files with 157 additions and 9 deletions
|
|
@ -19,7 +19,13 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
|
|||
|
||||
---
|
||||
|
||||
## 1. Theme decision: Cineplex v1.0.6 (Netflix-faithful)
|
||||
## 1. Theme decision: ElegantFin v25.12.31 + ARRFLIX recolor (current)
|
||||
|
||||
**As of 2026-05-08 (later in the day), the active theme is ElegantFin
|
||||
v25.12.31 with the Netflix-red `#E50914` accent recolored over the
|
||||
default Jellyseerr-blue/violet palette and the ARRFLIX wordmark logo
|
||||
preserved.** See §3e for the migration details and §1.x ("Previous
|
||||
themes") below for the Cineplex history that preceded it.
|
||||
|
||||
### Candidates surveyed (2026-05-08)
|
||||
|
||||
|
|
@ -34,7 +40,18 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
|
|||
| zombB / NetfliFin / Finetwo | mostly fork-style replacement of jellyfin-web | varies | varies | n/a | requires image swap or JS injector | DQ — violates "pure CSS, no image swap, no plugins" constraint |
|
||||
| Ultrachromic (CTalvio) | community CSS | "selectively maintained" | varies | 6/10 — accent-tunable but no Netflix preset | unknown | not Netflix enough |
|
||||
|
||||
### Why Cineplex won
|
||||
### Previous themes
|
||||
|
||||
The two sub-sections below ("Why Cineplex won", "Tradeoffs", "What it
|
||||
looks like", "Theme history") are kept verbatim from when Cineplex was
|
||||
the active theme (earlier on 2026-05-08, before the ElegantFin migration
|
||||
documented in §3e). They remain useful as the reasoning trail for the
|
||||
final brand brief — Netflix-faithful was the goal, Cineplex was the
|
||||
purest expression of that, and the current ElegantFin + recolor stack
|
||||
is a deliberate tradeoff toward "more polished browsing UI" while
|
||||
keeping the Netflix-red accent.
|
||||
|
||||
#### Why Cineplex won (historical)
|
||||
|
||||
1. **It is actually Netflix.** The CSS literally embeds Netflix Sans
|
||||
(`https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/...`) and
|
||||
|
|
@ -62,7 +79,7 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
|
|||
6. **Cast/crew hide rule still appended** at the bottom of `CustomCss`,
|
||||
exactly as before.
|
||||
|
||||
### Tradeoffs (honest list)
|
||||
#### Tradeoffs (honest list, Cineplex era)
|
||||
|
||||
- **License: none.** Cineplex doesn't declare one. CSS is generally
|
||||
permissive in practice (you redistribute by `@import`, not by copying)
|
||||
|
|
@ -79,7 +96,7 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
|
|||
- **Theme footer.** Cineplex doesn't add a brand stamp, so users see no
|
||||
"Cineplex" tag — cleaner than ElegantFin's footer label was.
|
||||
|
||||
### What it looks like (live, post-apply)
|
||||
#### What Cineplex looked like (live, post-apply)
|
||||
|
||||
- **Background:** `#181818` (Finity base) — Netflix-black.
|
||||
- **Accent:** `#E50914` (canonical Netflix red) on focus rings, progress
|
||||
|
|
@ -92,16 +109,18 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
|
|||
netflix.com's sign-in page.
|
||||
- **No theme-brand footer label** any more.
|
||||
|
||||
### Theme history
|
||||
#### Theme history
|
||||
|
||||
| Date | Theme | Version | Why changed |
|
||||
|---|---|---|---|
|
||||
| 2026-05-08 (earlier today) | ElegantFin | v25.12.31 | Initial Jellyfin theming pass. Picked for activity + safety (most actively maintained CSS in the ecosystem). |
|
||||
| 2026-05-08 (this entry) | **Cineplex** | **v1.0.6** | Owner asked for the most Netflix-faithful theme available. ElegantFin's Jellyseerr aesthetic (blue-grey, no red) is too far from Netflix; Cineplex is purpose-built for this look and explicitly targets the 10.10 series we're on. JellyFlix (the genre's elder) is halted. |
|
||||
| 2026-05-08 (mid-day) | **Cineplex** | **v1.0.6** | Owner asked for the most Netflix-faithful theme available. ElegantFin's Jellyseerr aesthetic (blue-grey, no red) is too far from Netflix; Cineplex is purpose-built for this look and explicitly targets the 10.10 series we're on. JellyFlix (the genre's elder) is halted. |
|
||||
| 2026-05-08 (later, current) | **ElegantFin + ARRFLIX recolor** | **v25.12.31** + `#E50914` accent overrides | Owner liked Cineplex's Netflix accent but preferred ElegantFin's polished browsing UI. Best of both: ElegantFin's layout/typography + ARRFLIX brand red overrides. Snapshot tag for rollback: `snapshot-2026-05-08-pre-elegantfin`. See §3e. |
|
||||
|
||||
If we ever roll back to ElegantFin, the previous `@import` was
|
||||
`https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@v25.12.31/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css`.
|
||||
The previous incarnation of this doc lives in git history.
|
||||
Rollback paths:
|
||||
- To Cineplex (Netflix-faithful): apply `snapshots/2026-05-08-pre-elegantfin/branding.json` per `snapshots/2026-05-08-pre-elegantfin/RESTORE.md`.
|
||||
- To plain ElegantFin (no recolor): see §6b.
|
||||
- To vanilla Jellyfin: see §6b.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -374,6 +393,135 @@ hide, ARRFLIX logo override, Quick Connect hide, Settings drawer hide,
|
|||
header icon hide) preserved verbatim. Same race rule applies — this is
|
||||
the last branding POST in the sequence.
|
||||
|
||||
### 3e. ElegantFin migration with ARRFLIX recolor (2026-05-08, current)
|
||||
|
||||
Later on 2026-05-08, the active theme was migrated **from Cineplex to
|
||||
ElegantFin v25.12.31** while preserving the ARRFLIX brand: Netflix-red
|
||||
`#E50914` accent overrides over ElegantFin's default Jellyseerr-blue/
|
||||
violet palette, plus the existing ARRFLIX wordmark logo. The owner had
|
||||
seen the demo at <https://lscambo13.github.io/ElegantFin/>, liked
|
||||
ElegantFin's polished browsing UI more than Cineplex's purer Netflix
|
||||
fidelity, and asked for the swap with the brand colour kept intact.
|
||||
|
||||
**Snapshot tag for rollback (committed and pushed before any change):**
|
||||
`snapshot-2026-05-08-pre-elegantfin`. Captures `branding.json`,
|
||||
`index.html`, `docker-compose.yml`, all per-user `displayprefs-*.json`,
|
||||
`users.json`, `libraries.json`, plus `RESTORE.md` with three concrete
|
||||
rollback commands. Located at `snapshots/2026-05-08-pre-elegantfin/`.
|
||||
|
||||
**ElegantFin tag pinned: `v25.12.31`** (latest tag at migration time;
|
||||
list resolved via `git ls-remote --tags https://github.com/lscambo13/ElegantFin.git`).
|
||||
jsDelivr serves tagged refs immutably with year-long cache TTL — same
|
||||
no-surprise-update guarantee we had on `cineplex@v1.0.6`. To opt into
|
||||
upstream churn, edit the URL to `@main`; to pin a different tag, edit
|
||||
the version segment.
|
||||
|
||||
**ElegantFin import:**
|
||||
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@v25.12.31/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
|
||||
```
|
||||
|
||||
**Accent variables overridden (ARRFLIX recolor block).** ElegantFin
|
||||
declares its accent palette through CSS custom properties at `:root`.
|
||||
Eight variables were identified by grepping the minified theme for
|
||||
`--[a-z]*` definitions and inspecting their default values; all eight
|
||||
are remapped to `#E50914` (or its `rgba()` form for alpha variants):
|
||||
|
||||
| Variable | ElegantFin default | ARRFLIX value | What it controls |
|
||||
|---|---|---|---|
|
||||
| `--uiAccentColor` | `rgb(117 111 226)` (violet) | `#E50914` | Primary UI accent — most surfaces |
|
||||
| `--activeColor` | `rgb(119,91,244)` (violet) | `#E50914` | Active / focused state highlights |
|
||||
| `--activeColorAlpha` | `rgba(119,91,244,.9)` | `rgba(229, 9, 20, 0.9)` | Same with alpha — hover overlays |
|
||||
| `--osdSeekBarPlayedColor` | `var(--textColor)` (white) | `#E50914` | Played portion of the video scrubber |
|
||||
| `--checkboxCheckedBgColor` | `rgb(79,70,229)` (indigo) | `#E50914` | Checked checkboxes (settings, lib pickers) |
|
||||
| `--highlightOutlineColor` | `rgb(37,99,235)` (blue) | `#E50914` | Focus / highlight outlines on cards |
|
||||
| `--btnSubmitColor` | `rgb(61,54,178)` (indigo) | `#E50914` | "Submit" button background |
|
||||
| `--btnSubmitBorderColor` | `rgb(117 111 226)` (violet) | `#E50914` | "Submit" button border |
|
||||
|
||||
Override block:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--uiAccentColor: #E50914 !important;
|
||||
--activeColor: #E50914 !important;
|
||||
--activeColorAlpha: rgba(229, 9, 20, 0.9) !important;
|
||||
--osdSeekBarPlayedColor: #E50914 !important;
|
||||
--checkboxCheckedBgColor: #E50914 !important;
|
||||
--highlightOutlineColor: #E50914 !important;
|
||||
--btnSubmitColor: #E50914 !important;
|
||||
--btnSubmitBorderColor: #E50914 !important;
|
||||
}
|
||||
```
|
||||
|
||||
Variables deliberately NOT changed:
|
||||
- `--osdSeekBarThumbColor: white` — kept the explicit white-thumb rule
|
||||
from §3d (white thumbs read as a neutral position indicator, not as
|
||||
brand colour). The slider-thumb override in this doc's §3d still
|
||||
applies.
|
||||
- `--drawerColor`, `--headerColor` — kept ElegantFin's translucent
|
||||
blur over its dark-blue surface; these are structural, not accent.
|
||||
- `--borderColor`, `--textColor` — typography / structure, not accent.
|
||||
|
||||
**Logo selectors used.** ElegantFin does NOT define rules for the two
|
||||
ARRFLIX logo selectors (verified by grepping the minified theme for
|
||||
`adminDrawerLogo` and `pageTitleWithLogo` — zero matches), so the same
|
||||
override skeleton from §3a/§3b is re-applied verbatim against the
|
||||
ElegantFin base:
|
||||
|
||||
```css
|
||||
.adminDrawerLogo img {
|
||||
/* <img> in admin sidebar drawer — content: replaces src */
|
||||
content: url("data:image/png;base64,<...ARRFLIX wordmark...>") !important;
|
||||
}
|
||||
.pageTitleWithLogo {
|
||||
/* <div> masthead on dashboard + login — bg image only, no content: */
|
||||
background-image: url("data:image/png;base64,<...ARRFLIX wordmark...>") !important;
|
||||
}
|
||||
```
|
||||
|
||||
The data-URL bytes are byte-for-byte identical to the Cineplex-era
|
||||
override (extracted from the snapshot's `branding.json` and re-inlined
|
||||
into the new `CustomCss` payload). Both selectors are still split-rule
|
||||
form (per the §3a/§3b lesson — never combine `content:` and
|
||||
`background-image:` on the same selector).
|
||||
|
||||
**Preserved blocks** (every custom rule from the Cineplex era was
|
||||
re-applied on top of ElegantFin):
|
||||
- `#castCollapsible, #guestCastCollapsible { display: none }` — cast/crew sections hidden
|
||||
- `.btnQuick { display: none }` — Quick Connect login button hidden
|
||||
- `.headerSyncButton`, `.headerCastButton`, `.headerUserButton` — top-right header icons hidden (§3c)
|
||||
- `.MuiSlider-thumb` + variants — white scrubber/volume thumbs (§3d)
|
||||
- `:root { --primary-background-color: #000000; --background-color: #000000; }` and the wrapper-element rules — pure black bg (§3d)
|
||||
- `mypreferencesmenu` selectors — Settings drawer entry hidden
|
||||
- `.countIndicator { display: none }` — unwatched-episode count badges hidden
|
||||
- `.adminDrawerLogo img` / `.pageTitleWithLogo` — ARRFLIX wordmark override
|
||||
- `LoginDisclaimer` — `"Welcome to ARRFLIX - Private invite only service"` preserved
|
||||
- `SplashscreenEnabled: true` — preserved
|
||||
|
||||
**Verification (executed 2026-05-08):**
|
||||
- POST to `/System/Configuration/branding` → HTTP 204
|
||||
- GET on `/Branding/Configuration` → no Cineplex `@import`, ElegantFin
|
||||
`@import` present and pinned to `v25.12.31`, ARRFLIX logo data URL
|
||||
intact on both selectors, all preserved blocks intact, all eight
|
||||
accent variable overrides present
|
||||
- HEAD on `https://arrflix.s8n.ru/` → HTTP 302 (Traefik redirect to
|
||||
`web/`, baseline behaviour — proxy still serving)
|
||||
|
||||
**Operational notes:**
|
||||
- The bind-mounted `/web/index.html` was NOT touched (sibling work owns
|
||||
that file via the index-patcher). All visual changes ride on
|
||||
`CustomCss` via the public `/Branding/Configuration` consumer + the
|
||||
authenticated `/System/Configuration/branding` writer.
|
||||
- No container restart, no `docker compose` action, no Traefik change.
|
||||
- Same race rule from §3b applies — the branding POST in this migration
|
||||
was the **last** POST in the sequence.
|
||||
|
||||
**Rollback** — see `snapshots/2026-05-08-pre-elegantfin/RESTORE.md`,
|
||||
or in one shot: `git checkout snapshot-2026-05-08-pre-elegantfin --
|
||||
snapshots/2026-05-08-pre-elegantfin/branding.json` then POST it back
|
||||
to `/System/Configuration/branding`.
|
||||
|
||||
---
|
||||
|
||||
## 4. Multi-user UX prep
|
||||
|
|
|
|||
Loading…
Reference in a new issue