Scarriffle/Flaro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9622da0284653a6186488639943b4bcfa96520d3
Flaro/web/jellyfin-theme/flaro.css
T
ScarriffleandClaude Opus 5 a7cf6c5def Halo heisst ab hier Flaro — die Marke stand im Weg 
Der Upload zu App Store Connect scheiterte am Namen. „Halo" ist eine
eingetragene Marke von Microsoft; im App Store heisst zwar keine App exakt
so, aber reservierte und markenrechtlich belegte Namen tauchen in keiner
Suche auf. Der einzige verlässliche Test war die Eingabe dort, und die ging
daneben.

**Der Name wurde diesmal vorher geprüft.** Zwanzig Kandidaten gegen den
deutschen und amerikanischen App Store, auf exakte Treffer und auf ähnliche
Namen. „Kavo" wäre dieselbe Wand gewesen — exakt belegt in beiden Stores, in
Deutschland von KaVo Dental GmbH. „Flare" ist mit 42 ähnlichen Apps je Store
der am dichtesten besetzte Name der ganzen Runde. **Flaro** ist in beiden
frei und liest sich als eigenes Wort, nicht als Flare mit Tippfehler.

Das bleibt eine Store-Suche und keine Markenrecherche — reservierte Namen
ohne veröffentlichte App sieht sie nicht. Aber es ist mehr Prüfung, als beim
letzten Mal stattfand.

---

2160 Textvorkommen in 273 Dateien, 49 Pfade. Betroffen ist diesmal auch der
Server: `Flaro.Api`, `Flaro.Core`, `Flaro.Data`, `Flaro.Media`,
`Flaro.Metadata`, `FlaroContext`, `FlaroPaths`, `flaro.db`, die Variablen
`FLARO_DATA`, `FLARO_CACHE`, `FLARO_TRANSCODE`, `FLARO_WRITE_SIDECARS`, und
das Image.

**Vor dem Ersetzen geprüft**, ob „halo" irgendwo als Teil eines anderen
Wortes steckt — und ob es im TMDB-Token vorkommt. Tat es nicht; ein blindes
Ersetzen hätte den sonst zerlegt.

`docs/superpowers/specs/` bleibt wie beim letzten Mal unangetastet: datierte
Entwurfsdokumente sind ein Protokoll getroffener Entscheidungen. Das
Server-Dokument hat stattdessen einen Nachtrag bekommen, damit es niemanden
in die Irre führt.

**Die Bundle-ID wandert mit**, zum zweiten Mal an einem Tag:
`com.scarriffleservices.flaro`. Wer die vorige Fassung installiert hat, hat
jetzt zwei Karteileichen auf dem Gerät — beide löschen, dann ist Ruhe.

308 Server-Tests grün, 368 im Swift-Paket, null Warnungen. iOS und tvOS
bauen, das Image baut, und ein frischer Container läuft durch Einrichtung
und Anmeldung.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-10-03 19:38:27 +02:00

335 lines
11 KiB
CSS
Raw Blame History

/* ============================================================================
Flaro für Jellyfin Web
----------------------------------------------------------------------------
Bringt Jellyfins Weboberfläche auf die Farben, Schrift und Formen der
Flaro-App. Es ist ein Kleid, kein Umbau: die Oberfläche bleibt Jellyfins,
sie sieht nur anders aus.
EINBAUEN
Jellyfin-Dashboard → Allgemein → „Benutzerdefiniertes CSS“ — alles hier
hineinkopieren, speichern, Seite neu laden. Gilt serverweit für alle
Browser, also auch auf Windows. Wieder loswerden: Feld leeren.
AUFGEBAUT AUF MESSUNG, NICHT AUF VERMUTUNG
Die Variablennamen und Klassen stammen aus einer laufenden Jellyfin-
Instanz (Stand 09/2026), nicht aus dem Gedächtnis. Der größte Teil der
Wirkung entsteht dadurch, dass Jellyfins **eigene** Farbvariablen
umgebogen werden — das hält das Ganze kurz und überlebt Updates besser
als eine Sammlung einzeln überschriebener Regeln.
========================================================================= */
:root {
/* ---- Die Akzentfarbe -----------------------------------------------
Zum Wechseln nur diese eine Zeile ändern. Die Palette der App:
Ember #E5484D · Tangerine #F76B15 · Amber #FFB224 · Lime #99D52A
Mint #3DD68C · Teal #12A594 · Sky #52A9FF · Indigo #7C77E8
Orchid #C04AC9 · Rose #F76190
Voreingestellt ist Orchid — die Farbe, die auf dem iPad eingestellt
ist. Die App selbst kommt ab Werk mit Mint. */
--flaro-accent: #C04AC9;
/* ---- Die Flächen der App, von hinten nach vorn ---------------------- */
--flaro-canvas: #0B0B0D; /* Seitenhintergrund */
--flaro-surface: #141417; /* Karten, Kopfbereiche */
--flaro-elevated: #1D1D21; /* Blätter, Menüs */
--flaro-placeholder: #26262B; /* Platzhalter, gedrückte Zustände */
--flaro-text: #F5F5F7;
--flaro-text-secondary: #A0A0A8;
--flaro-text-muted: #6E6E76;
--flaro-destructive: #E5484D;
--flaro-separator: rgba(255, 255, 255, 0.10);
/* ---- Formen --------------------------------------------------------- */
--flaro-radius-card: 8px;
--flaro-radius-control: 10px;
--flaro-radius-sheet: 16px;
--flaro-radius-panel: 22px; /* die schwebende Leiste */
/* ---- Schrift --------------------------------------------------------
Der größte einzelne Hebel. Jellyfin liefert Noto Sans aus; die
Systemschrift macht aus derselben Seite sofort eine, die auf den
Rechner gehört — SF auf Mac und iPhone, Segoe UI Variable auf
Windows 11. */
--flaro-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI Variable Text", "Segoe UI", system-ui,
Roboto, "Helvetica Neue", sans-serif;
/* ---- Jellyfins eigene Variablen umbiegen ---------------------------
Hier entsteht der Großteil der Wirkung: Jellyfin baut auf einer
MUI-Palette auf, und wer die verstellt, verstellt alles, was darauf
aufsetzt — inklusive Bauteilen, die dieses CSS gar nicht kennt. */
--jf-palette-background-default: var(--flaro-canvas);
--jf-palette-background-defaultChannel: 11 11 13;
--jf-palette-background-paper: var(--flaro-surface);
--jf-palette-background-paperChannel: 20 20 23;
--jf-palette-primary-main: var(--flaro-accent);
--jf-palette-primary-dark: var(--flaro-accent);
--jf-palette-primary-light: var(--flaro-accent);
--jf-palette-secondary-main: var(--flaro-accent);
--jf-palette-secondary-dark: var(--flaro-accent);
--jf-palette-secondary-light: var(--flaro-accent);
/* Schrift auf dem Akzent: hell, weil die Palette der App durchweg
kräftige Farben hat. Bei einem hellen Akzent (Amber, Lime) hier auf
#101013 stellen, sonst verschwindet die Beschriftung. */
--jf-palette-primary-contrastText: #FFFFFF;
--jf-palette-secondary-contrastText: #FFFFFF;
--jf-palette-text-primary: var(--flaro-text);
--jf-palette-text-secondary: var(--flaro-text-secondary);
--jf-palette-text-disabled: var(--flaro-text-muted);
--jf-palette-text-icon: var(--flaro-text-secondary);
--jf-palette-divider: var(--flaro-separator);
--jf-palette-error-main: var(--flaro-destructive);
--jf-palette-error-dark: #B4373B;
--jf-palette-error-light: #EC6E72;
--jf-palette-action-hover: rgba(255, 255, 255, 0.06);
--jf-palette-action-selected: rgba(255, 255, 255, 0.12);
--jf-palette-action-disabled: var(--flaro-text-muted);
/* Die Kopfleiste trägt die Insel — sie selbst bleibt durchsichtig. */
--jf-palette-AppBar-defaultBg: transparent;
--jf-palette-AppBar-darkBg: transparent;
--jf-card-borderRadius: var(--flaro-radius-card);
--jf-shape-borderRadius: var(--flaro-radius-control);
}
/* ---- Grundfläche und Schrift --------------------------------------------
`html` bekommt seinen Hintergrund bei Jellyfin unmittelbar gesetzt und
nicht über die Palette — deshalb steht er hier noch einmal ausdrücklich. */
html {
background-color: var(--flaro-canvas) !important;
font-family: var(--flaro-font) !important;
color: var(--flaro-text);
}
body,
button,
input,
select,
textarea,
.emby-button,
.emby-input,
.emby-select,
.cardText,
.sectionTitle {
font-family: var(--flaro-font) !important;
}
.backgroundContainer,
.mainAnimatedPage {
background-color: var(--flaro-canvas) !important;
}
/* ---- Die Kopfleiste als schwebende Insel --------------------------------
Das Merkmal der App: die Navigation ist eine Fläche mit Abstand ringsum,
nicht ein Balken, der am Rand klebt. Der Inhalt läuft dahinter durch.
`backdrop-filter` ist der Kern — und der Grund, warum es auf Safari und
Chrome überzeugender aussieht als auf älteren Firefox-Fassungen. Wo er
fehlt, bleibt eine schlicht gefüllte Fläche; unschön ist das nicht. */
.skinHeader {
background: rgba(20, 20, 23, 0.72) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--flaro-separator);
border-radius: var(--flaro-radius-panel);
margin: 10px 12px 0;
width: calc(100% - 24px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.skinHeader-withBackground {
background: rgba(20, 20, 23, 0.72) !important;
}
/* ---- Die Seitenleiste ---------------------------------------------------- */
.mainDrawer {
background-color: var(--flaro-surface) !important;
border-right: 1px solid var(--flaro-separator);
}
.navMenuOption {
border-radius: var(--flaro-radius-control);
margin: 2px 8px;
}
.navMenuOption-selected {
background: var(--flaro-elevated) !important;
color: var(--flaro-accent) !important;
}
/* ---- Karten -------------------------------------------------------------
Die Poster sind das, was man auf einer Startseite hauptsächlich sieht;
ihre Rundung bestimmt den Eindruck stärker als jede Farbe. Acht Punkt,
wie in der App. */
.cardImageContainer,
.cardContent,
.cardScalable,
.cardOverlayContainer {
border-radius: var(--flaro-radius-card) !important;
}
.cardBox {
margin: 0.5em !important;
}
.cardText {
color: var(--flaro-text);
}
.cardText-secondary {
color: var(--flaro-text-secondary);
}
.defaultCardBackground,
.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5 {
background-color: var(--flaro-placeholder) !important;
}
/* Der Fortschrittsbalken auf angefangenen Titeln — in der App trägt er den
Akzent, und er ist dünner als Jellyfins Voreinstellung. */
.itemProgressBarForeground {
background-color: var(--flaro-accent) !important;
}
.itemProgressBar {
height: 3px !important;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.18) !important;
}
/* ---- Knöpfe -------------------------------------------------------------- */
.emby-button,
.button-flat,
.detailButton {
border-radius: var(--flaro-radius-control) !important;
font-family: var(--flaro-font) !important;
}
.emby-button.raised {
background: var(--flaro-elevated);
color: var(--flaro-text);
}
.emby-button.raised.button-submit,
.button-submit {
background: var(--flaro-accent) !important;
color: #FFFFFF !important;
}
/* Die Kapselform der App für die Hauptknöpfe einer Detailseite. */
.detailPagePrimaryContainer .emby-button,
.mainDetailButtons .emby-button {
border-radius: 999px !important;
}
/* ---- Eingabefelder ------------------------------------------------------- */
.emby-input,
.emby-select,
.emby-textarea {
background-color: var(--flaro-elevated) !important;
border: 1px solid var(--flaro-separator) !important;
border-radius: var(--flaro-radius-control) !important;
color: var(--flaro-text) !important;
}
.emby-input:focus,
.emby-select:focus {
border-color: var(--flaro-accent) !important;
outline: none;
}
.inputLabel,
.selectLabel,
.fieldDescription {
color: var(--flaro-text-secondary) !important;
}
/* ---- Blätter, Menüs, Dialoge --------------------------------------------- */
.dialog,
.formDialog,
.actionSheet,
.paper-icon-button-light + .actionSheet {
background-color: var(--flaro-elevated) !important;
border-radius: var(--flaro-radius-sheet) !important;
border: 1px solid var(--flaro-separator);
}
.actionSheetMenuItem:hover,
.listItem:hover {
background-color: var(--jf-palette-action-hover) !important;
}
/* ---- Detailseite --------------------------------------------------------- */
.detailPagePrimaryContainer,
.detailPageSecondaryContainer,
.detailRibbon {
background: transparent !important;
}
.detailSectionContent,
.detailTableBodyCell {
color: var(--flaro-text-secondary);
}
/* Das Hintergrundbild soll nach unten in die Seitenfarbe auslaufen, statt an
einer Kante aufzuhören — dieselbe Verlaufsidee wie im Aufmacher der App. */
.itemBackdrop {
-webkit-mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 45%,
rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 45%,
rgba(0, 0, 0, 0) 100%);
}
/* ---- Überschriften ------------------------------------------------------- */
.sectionTitle {
color: var(--flaro-text) !important;
font-weight: 600;
letter-spacing: -0.01em;
}
/* ---- Trennlinien und Kleinkram ------------------------------------------- */
.listItem-border,
.detailTableBodyCell,
hr {
border-color: var(--flaro-separator) !important;
}
::selection {
background: var(--flaro-accent);
color: #FFFFFF;
}
/* Die Bildlaufleisten dunkel halten — eine helle Leiste am Rand ist das
Erste, was eine sonst dunkle Seite verrät. */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
}
Reference in New Issue View Git Blame Copy Permalink