diff --git a/docs/04-theming-and-users.md b/docs/04-theming-and-users.md index 78ced66..6018d9d 100644 --- a/docs/04-theming-and-users.md +++ b/docs/04-theming-and-users.md @@ -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 , 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 { + /* in admin sidebar drawer — content: replaces src */ + content: url("data:image/png;base64,<...ARRFLIX wordmark...>") !important; +} +.pageTitleWithLogo { + /*
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