/* ============================================================ NO PIXELS - Stil-Bruecke zu den eigenen Plugins ------------------------------------------------------------ League OS, Sectorum, Tischreservierung und die uebrigen Plugins bringen ihre Ausgabe als Kurzbefehl mit - ohne Vorlagen, die ein Theme ueberschreiben koennte. Sie bringen aber etwas Besseres mit: eigene Design-Variablen, 142 an der Zahl. Genau die werden hier auf die Theme-Werte gesetzt. Damit erbt die gesamte Plugin-Ausgabe Flaechen, Raender und Schriftfarben des Themes, ohne dass eine einzige Plugin-Datei angefasst wird - und ohne hunderte einzelne Regeln nachzubauen. Die Plugins bleiben dabei unveraendert und aktualisierbar. Wird diese Datei entfernt, sehen sie wieder aus wie zuvor. GILT NUR AUF DEN EINSTIEGSSEITEN. Die tiefen Arbeitsseiten - Hex-Karte, Battle-Log, Turnierbaum - behalten ihre eigene Gestaltung: dort ist die Farbe oft Traeger von Bedeutung (Fraktionen, Zustaende), und ein Umfaerben wuerde Information zerstoeren. ============================================================ */ .npt-plugin-einstieg { /* ---------- League OS ---------- */ --np-loa-bg: var(--np-bg); --np-loa-bg-soft: var(--np-bg-deep); --np-loa-bg-card: var(--np-flaeche); --np-loa-bg-card-hi: var(--np-flaeche-hoch); --np-loa-bg-elev: var(--np-flaeche-hoch); --np-loa-bg-input: var(--np-bg-deep); --np-loa-card-bg: var(--np-flaeche); --np-loa-border: var(--np-rand); --np-loa-border-soft: var(--np-rand); --np-loa-border-hi: var(--np-rand-hell); --np-loa-card-border: var(--np-rand); --np-loa-fg: var(--np-text); --np-loa-fg-dim: var(--np-text-dim); --np-loa-fg-soft: var(--np-text-dim); --np-loa-muted: var(--np-text-leise); --np-loa-faint: var(--np-text-leise); --np-loa-gold: var(--np-gold); /* * --np-loa-teal wird im Plugin doppelt genutzt: 66x als Schrift- * farbe auf dunklem Grund und 12x als Flaeche unter weisser * Schrift. Beides zugleich kann eine Farbe nicht: als Schrift * muss sie hell sein, als Flaeche dunkel. * * Der Wert richtet sich deshalb nach der haeufigeren Nutzung - * Schrift, 5,0:1. Die wenigen Flaechen werden weiter unten * einzeln auf --np-knopf gesetzt. */ --np-loa-teal: var(--np-akzent-text); /* * "dark" meint im Plugin den gedrueckten Zustand - gedacht fuer * einen hellen Hintergrund. Auf dunklem Grund kehrt sich das um: * dort muss der Ton HELLER werden, sonst faellt er ins Schwarze. * #0f766e kaeme auf den Wiki-Kacheln nur auf 2,8:1. */ --np-loa-teal-dark: var(--np-akzent-text); --np-loa-teal-darker: var(--np-accent-2); --np-loa-primary: var(--np-knopf); --np-loa-frame-bg: var(--np-bg-deep); --np-loa-frame-fg: var(--np-text); --np-loa-frame-muted: var(--np-text-leise); --np-loa-font-sans: var(--np-font); --np-loa-font-display: var(--np-font); /* ---------- Tischreservierung ---------- */ --np-tr-bg: var(--np-bg); --np-tr-card: var(--np-flaeche); --np-tr-card-bg: var(--np-flaeche); --np-tr-card-soft: var(--np-flaeche-hoch); --np-tr-border: var(--np-rand); --np-tr-card-border: var(--np-rand); --np-tr-fg: var(--np-text); --np-tr-muted: var(--np-text-leise); --np-tr-primary: var(--np-knopf); --np-tr-accent: var(--np-gold); --np-qa-bg: var(--np-flaeche); --np-qa-bg-soft: var(--np-flaeche-hoch); --np-qa-fg: var(--np-text); --np-qa-muted: var(--np-text-leise); --np-qa-border: var(--np-rand); --np-qa-gold: var(--np-gold); /* ---------- Sectorum ---------- */ --np-sec-bg: var(--np-bg); --np-sec-bg-dark: var(--np-bg-deep); --np-sec-card: var(--np-flaeche); --np-sec-border: var(--np-rand); --np-sec-fg: var(--np-text); --np-sec-muted: var(--np-text-leise); --np-sec-primary: var(--np-knopf); /* * --np-sec-faction und --np-sec-accent bleiben bewusst stehen: * ueber sie faerben sich die Fraktionen. Wer sie vereinheitlicht, * nimmt der Seite die Unterscheidung. */ } /* ------------------------------------------------------------ Doppelte Navigation ------------------------------------------------------------ League OS bringt auf schmalen Schirmen eine eigene App-Huelle mit: Kopfzeile oben, Reiter unten, Aktionsknopf. Auf einer Seite mit Theme-Kopf steht damit zweierlei uebereinander. Die Huelle wird hier NICHT entfernt - sie ist der Weg zu Match melden, Liga und Login. Sie wird nur einsortiert: die Kopfzeile scrollt mit weg, die uebrigen Teile liegen unter dem Theme-Kopf, und die untere Reiterleiste bekommt Platz, damit sie nichts verdeckt. Wer sie ganz abschalten moechte, findet den Schalter unter Design > Anpassen > No Pixels > Plugin-Seiten. ------------------------------------------------------------ */ /* * Die Plugin-Kopfzeile ist das erste Element im Dokument und klebt * mit position:sticky oben - genau wie der Theme-Kopf. Beide zusammen * belegen dauerhaft 231 Pixel Bildschirmhoehe. * * Sie wird deshalb in den normalen Fluss zurueckgestellt: sie scrollt * mit weg, oben klebt nur noch der Theme-Kopf. Ihre Schaltflaechen * bleiben erreichbar, man scrollt nur wieder nach oben. */ .npt-plugin-einstieg .np-loa-m-header { position: static !important; z-index: 900 !important; } .npt-plugin-einstieg .np-loa-m-tabs, .npt-plugin-einstieg .np-loa-m-fab { z-index: 899 !important; } /* Die untere Reiterleiste liegt fest ueber dem Inhalt. Ohne Platz darunter verdeckt sie die letzten Zeilen jeder Seite. */ @media (max-width: 860px) { body.npt-plugin-einstieg { padding-bottom: 76px; } } /* Schalter aus dem Customizer: Huelle ganz ausblenden. */ .npt-plugin-einstieg.npt-ohne-app-huelle .np-loa-m-header, .npt-plugin-einstieg.npt-ohne-app-huelle .np-loa-m-tabs, .npt-plugin-einstieg.npt-ohne-app-huelle .np-loa-m-fab { display: none !important; } .npt-plugin-einstieg.npt-ohne-app-huelle { padding-bottom: 0; } /* ------------------------------------------------------------ Flaechen, die weisse Schrift tragen ------------------------------------------------------------ Siehe Anmerkung zu --np-loa-teal weiter oben: dort steht jetzt der helle Schriftton. Diese wenigen Stellen nutzen die Farbe als Flaeche unter weisser Schrift und brauchen deshalb den satten Knopfton - auf dem hellen kaeme weisse Schrift nur auf 4,1:1. ------------------------------------------------------------ */ .npt-plugin-einstieg .np-loa-btn-primary, .npt-plugin-einstieg .np-loa-btn.is-primary, .npt-plugin-einstieg .np-loa-profile-tabs .np-loa-tab.is-active, .npt-plugin-einstieg .np-loa-compare-stat-fill.is-a { background: var(--np-knopf); } .npt-plugin-einstieg .np-loa-btn-primary:hover, .npt-plugin-einstieg .np-loa-btn.is-primary:hover { background: var(--np-knopf-hover); } /* ------------------------------------------------------------ Anschluss an den Seitenkopf ------------------------------------------------------------ */ /* Die Plugin-Ausgabe bringt oft einen eigenen Rahmen mit eigenem Aussenabstand mit. Nach dem Seitenkopf doppelt sich das. */ .npt-plugin-einstieg .npt-inhalt > .np-loa-page-frame, .npt-plugin-einstieg .npt-inhalt > .np-loa-frame-grid, .npt-plugin-einstieg .npt-inhalt > .np-sec-wrap { margin-top: 0; } /* ------------------------------------------------------------ Wiki-Kacheln ------------------------------------------------------------ Die Kacheln liegen auf rgba(13,148,136,.18) - einem aufgehellten Gruen. Die Akzentfarbe als Schrift kommt darauf nur auf 3,96:1. Titel und Untertext bekommen deshalb die normalen Textfarben: auf der Kachel erreichen sie 9,7:1 und 6,4:1. Der Untertext wurde zusaetzlich per opacity:.72 gedaempft. Das senkt den Kontrast unsichtbar mit - deshalb wird hier ueber die FARBE gedaempft und die Opazitaet zurueckgenommen. Das Ergebnis sieht gleich aus und ist messbar. ------------------------------------------------------------ */ .npt-plugin-einstieg .np-loa-wiki-tile-title { color: var(--np-text); } .npt-plugin-einstieg .np-loa-wiki-tile-teaser { color: var(--np-text-dim); opacity: 1; }