/* Datenlicht: versteckt Grafana-11-Chrome die trotz ?kiosk sichtbar bleibt.
Bekannter Regressions-Bug: github.com/grafana/grafana/issues/96627
Mounted unter /public/datenlicht.css, injiziert via index.html-Patch im Startup. */
/* Theme-Tokens: generiert aus tokens/ via Style Dictionary.
Quelle: tokens/*.tokens.json (W3C DTCG 2025.10).
Regenerieren: npm run build:tokens
Chrome-Overrides (Login, Nav, Panel-Masking) bleiben unten in dieser Datei. */
@import './datenlicht.tokens.css';
/* ===================================================================
TYPOGRAFIE: Inter Variable self-hosted
-------------------------------------------------------------------
Gesamte Datenlicht-UI nutzt Inter (Rasmus Andersson). Variable Font
liefert alle Weights 100-900 in einer Datei → 1 HTTP-Request statt 9.
Self-hosted unter /fonts/ (Caddy liefert aus /srv/www/fonts/) — keine
Google-Fonts-Leaks, Privacy-first.
font-display: swap: Text erscheint sofort in system-ui, wird nach
Inter-Load sanft ausgetauscht (vermeidet FOIT/unsichtbarer Text).
Das format('woff2-variations')-Hint sagt dem Browser, dass es eine
Variable-Font ist; moderne Browser (2021+) verstehen das. Alte
Browser fallen auf format('woff2') zurueck und kriegen ebenfalls
die Variable-Datei — verhalten sich dann wie Regular 400.
=================================================================== */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
url('/fonts/InterVariable-Italic.woff2') format('woff2');
}
/* Global: Inter erzwingen — Grafana setzt seine Default-Font auf viele
Elemente direkt, deshalb muessen wir mit hoher Spezifitaet dagegen
schreiben. html-Regel + attribute-Selektor auf allen UI-Elementen.
Tabular-Nums standardmaessig fuer Tabellen + Stat-Values, damit
KPI-Spalten sauber ausgerichtet bleiben. */
html,
body,
button,
input,
select,
textarea,
[class*="react-grid"],
[class*="css-"] {
font-family: var(--dl-font-sans);
}
table,
[role="table"],
[role="cell"],
[role="columnheader"],
[data-testid*="stat-panel"] [class*="value"],
[class*="big-value"],
[class*="BigValue"] {
font-variant-numeric: var(--dl-numeric-tabular);
font-feature-settings: "tnum", "cv11", "ss01";
}
/* Wordmark-Utility: jede Stelle die "DATENLICHT" gross-schreibt, nutzt
dieselbe Typo. Light + gesperrte Buchstaben = technisch-nuechterner
Ton ("Messgeraete-Beschriftung"). Drei Varianten:
- Default: fuer E-Mail-Header, Login, kleinere Kontexte (300 / +3px)
- --hero: fuer Landing-Hero-H1 (Thin 200 / +8px / gross)
- --inline: fuer Fliesstext-Erwaehnungen in Artikeln (Regular / +1px)
Logotype unterscheidet sich vom Wordmark durch Mixed Case + Bold —
fuer Nav und kompakte Marken-Auftritte ("Datenlicht" statt "DATENLICHT"). */
.dl-wordmark {
font-family: var(--dl-font-sans);
font-weight: var(--dl-weight-light);
letter-spacing: var(--dl-tracking-wordmark);
text-transform: uppercase;
}
.dl-wordmark--hero {
font-weight: 200;
letter-spacing: 8px;
}
.dl-wordmark--inline {
font-weight: var(--dl-weight-regular);
letter-spacing: var(--dl-tracking-wide);
text-transform: uppercase;
}
.dl-logotype {
font-family: var(--dl-font-sans);
font-weight: var(--dl-weight-extrabold);
letter-spacing: var(--dl-tracking-tight);
}
/* ===================================================================
LOGIN-SEITE: Background-Bild deaktivieren
---------------------------------------------------------------
Grafana setzt den Login-Hintergrund per CSS auf public/img/g8_login_dark.svg.
Unser Logo steht bereits prominent in der Login-Box — ein zweites im
Hintergrund wirkt wie ein Fehler ("etwas scheint durch"). Pseudo-Element
komplett ausblenden, Hintergrund bleibt in der Grafana-eigenen dunklen
Flaechenfarbe.
=================================================================== */
[class^="css-"]:has(> .login-content-box)::before,
[class*="css-"]:has(.login-content-box)::before {
display: none !important;
}
/* ===================================================================
LOGIN-SEITE: Footer entfremden
---------------------------------------------------------------
Grafana-Login-Footer enthaelt Links zu grafana.com (Doku, Support,
Community, Open Source). Die werden versteckt, die Grafana-Version
am Ende bleibt stehen (Credit bleibt — wir verbergen Grafana nicht).
Die Datenlicht-Ersatz-Links werden per JS im index.html injiziert.
=================================================================== */
footer a[href*="grafana.com/docs"],
footer a[href*="grafana.com/products"],
footer a[href*="community.grafana.com"],
footer a[href*="grafana.com/oss"] { display: none !important; }
/* Die -Parents zusammen mit dem Icon ausblenden (CSS :has wird seit 2023
von allen modernen Browsern unterstuetzt — reicht fuer den Login-Screen). */
footer ul li:has(> a[href*="grafana.com/docs"]),
footer ul li:has(> a[href*="grafana.com/products"]),
footer ul li:has(> a[href*="community.grafana.com"]),
footer ul li:has(> a[href*="grafana.com/oss"]) { display: none !important; }
/* Versionseintrag dezenter machen — hebt sich nicht mehr von den
Datenlicht-Eigen-Links ab, bleibt aber sichtbar als Credit. */
footer a[href*="github.com/grafana/grafana"] {
opacity: 0.7;
font-size: 11px;
}
/* Zusaetzliche Datenlicht-Links (werden per JS als