/* VULCAN: eigener Anmeldeschirm fuer GLPI. Liegt bewusst ausserhalb von /var/www/glpi — eine Aktualisierung fasst es nicht an. Getroffen wird ausschliesslich `body.welcome-anonymous`, also die nicht angemeldete Seite. Angemeldete Ansichten bleiben unberuehrt. */ :root { /* Alles, was am Aussehen der Anmeldekarte zu drehen ist, steht HIER — je eine Zahl. Wer spaeter etwas aendern will, muss den Rest der Datei nicht lesen. */ --vulcan-karte-breite: 34rem; /* Tablers Vorgabe fuer .container-tight: 30rem, das Plugin will sogar 60rem. Unter ~32rem wird die Beschriftung "Login mit Microsoft Entra (Xinion IT)" abgeschnitten. */ --vulcan-karte-hoehe: 0rem; /* 0 = so hoch wie der Inhalt. Groesser gesetzt entsteht unten eine tote Flaeche. */ --vulcan-karte-luft: 2.75rem; /* Luft oben und unten im Inhalt */ --vulcan-karte-deckkraft: .20; /* Karte: 1 = deckend, 0 = unsichtbar. .20 = 80 % durchsichtig (CIO 17.09.2026) */ --vulcan-schleier: .22; /* dunkler Schleier ueber dem Bild, 0 = keiner */ --vulcan-unschaerfe: 18px; --vulcan-feld-hoehe: 2.9rem; /* Hoehe der Eingabefelder und Schaltflaechen */ --vulcan-feld-abstand: 1.5rem; /* Abstand zwischen den Feldern */ --vulcan-karte-links: 12vw; /* Abstand vom linken Rand. `auto` = mittig */ --vulcan-karte-oben: 13vh; /* wie tief die Karte auf dem Schirm sitzt */ --vulcan-logo-gruen: #13A036; /* AUS DEM HINTERGRUNDBILD ausgemessen, nicht geschaetzt: kraeftigster Volltonanteil des Firmenlogos (268 Punkte). */ --vulcan-logo-gruen-dunkel: #0E7A29; --vulcan-knopf-breite: 100%; /* 100% = ueber die ganze Karte, sonst z.B. 16rem */ --vulcan-begruessung-groesse: 1.4rem; /* Schriftgroesse der Begruessung */ --vulcan-sso-knopf-breite: 100%; /* gleiche Masse wie der Anmelde-Knopf */ --vulcan-logo-breite: 17rem; /* Breite des Xinion-Logos ueber der Karte */ } body.welcome-anonymous { background: linear-gradient(rgba(0, 0, 0, var(--vulcan-schleier)), rgba(0, 0, 0, var(--vulcan-schleier))), url("/custom/login-hintergrund.jpeg") center / cover no-repeat fixed; } /* Wo der Browser es versteht, das deutlich kleinere WebP — sonst bleibt es beim JPEG. Nur background-image wird ueberschrieben, Ausschnitt und Verhalten stehen schon oben. */ @supports (background-image: image-set(url("x.webp") type("image/webp"))) { body.welcome-anonymous { background-image: linear-gradient(rgba(0, 0, 0, var(--vulcan-schleier)), rgba(0, 0, 0, var(--vulcan-schleier))), image-set(url("/custom/login-hintergrund.webp") type("image/webp"), url("/custom/login-hintergrund.jpeg") type("image/jpeg")); } } /* Das SSO-Plugin setzt die Breite EINGEBETTET: style="max-width: 60rem" direkt am Behaelter, damit seine zwei Anmeldewege nebeneinander passen. Ein eingebetteter Stil schlaegt jede Stilvorlage — deshalb blieb die Breite hier wirkungslos, bis auf `!important`. Das ist einer der wenigen Faelle, in denen es die richtige Wahl ist: anders kommt man an einen eingebetteten Stil nicht heran. */ body.welcome-anonymous .container-tight { max-width: var(--vulcan-karte-breite) !important; } /* Die Karte nach links ruecken, damit sie vor der ruhigen Glasfront steht und das Firmenlogo im Hintergrund frei bleibt. NUR auf breiten Bildschirmen: auf einem Telefon ist links kein Platz, dort bleibt sie mittig — sonst klebte sie am Rand und der Hintergrund waere ohnehin nicht zu sehen. */ /* Die Karte tiefer setzen. Der Elternbehaelter zentriert senkrecht (justify-content-center), ein Abstand oben verschiebt sie also als Ganzes nach unten — anders als ein Abstand am Seitenkoerper, der nichts bewirkt. */ body.welcome-anonymous .container-tight { margin-block-start: var(--vulcan-karte-oben); } @media (min-width: 62rem) { body.welcome-anonymous .container-tight { margin-inline-start: var(--vulcan-karte-links); margin-inline-end: auto; } } /* Die Karte: durchscheinend mit Unschaerfe dahinter. Die Grundfarbe kommt aus Tablers eigener Variablen — hell 249,250,251, dunkel 17,24,39. Damit bleibt die Karte in BEIDEN Darstellungen stimmig, statt starr weiss zu sein. */ body.welcome-anonymous .main-content-card { background-color: rgba(var(--tblr-body-bg-rgb, 255, 255, 255), var(--vulcan-karte-deckkraft)); -webkit-backdrop-filter: blur(var(--vulcan-unschaerfe)) saturate(140%); backdrop-filter: blur(var(--vulcan-unschaerfe)) saturate(140%); border: 1px solid rgba(255, 255, 255, .30); box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .5); } /* Kann der Browser keine Unschaerfe hinter Elementen, wuerde die Karte nur blass und schwer lesbar wirken. Dann lieber deckend. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.welcome-anonymous .main-content-card { background-color: rgba(var(--tblr-body-bg-rgb, 255, 255, 255), .95); } } /* Hoehe. Eine FESTE Hoehe waere hier ein Fehler: bei einem kleinen Fenster stuende der Inhalt ueber den Rand hinaus und man kaeme an die Anmeldeschaltflaeche nicht mehr heran. Darum eine MINDESThoehe mit Deckel — auf grossen Bildschirmen die gewuenschten 40rem, auf kleinen hoechstens 80 % der Fensterhoehe. Der Inhalt steht mittig darin. */ body.welcome-anonymous .main-content-card { min-height: min(var(--vulcan-karte-hoehe), 80vh); display: flex; flex-direction: column; justify-content: center; } /* Das Anmeldefeld selbst auf die Hoehe der Karte bringen. Ohne das sitzt es als kleiner Klumpen in der Mitte einer hohen Karte — die Karte ist dann hoch, der Login nicht. Der Inhalt bekommt den freien Platz und verteilt sich darin. */ body.welcome-anonymous .main-content-card .card-body { padding-block: var(--vulcan-karte-luft); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } /* Felder und Schaltflaechen hoeher, Abstaende groesser. Bootstraps Abstandsklassen tragen selbst `!important` — eine Ueberschreibung ohne kaeme nicht an. */ body.welcome-anonymous .main-content-card .form-control, body.welcome-anonymous .main-content-card .form-select, body.welcome-anonymous .main-content-card .btn { min-height: var(--vulcan-feld-hoehe); } /* Der Anmelde-Knopf fuellt die Karte (GLPI setzt dafuer `w-100`). */ body.welcome-anonymous .main-content-card .btn-primary { width: var(--vulcan-knopf-breite); box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; } /* Der SSO-Knopf dagegen auf seine Inhaltsbreite, mittig. Sein Behaelter ist ein `d-grid` und streckt sein Kind sonst genauso auf die volle Breite — beide Knoepfe waeren dann gleich gross, obwohl der eine der Hauptweg ist und der andere der zweite. `justify-self` ist hier das richtige Mittel: es wirkt IM Raster, `margin: auto` wuerde mit der Streckung streiten. */ body.welcome-anonymous .singlesignon-login-buttons { justify-items: center; } body.welcome-anonymous .singlesignon-login-buttons > a, body.welcome-anonymous .singlesignon-login-buttons > button { width: var(--vulcan-sso-knopf-breite); min-height: var(--vulcan-feld-hoehe); /* dieselbe Hoehe wie "Anmelden" */ max-width: 100%; box-sizing: border-box; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; /* Weiss, damit er sich vom gruenen Hauptknopf absetzt, ohne zurueckzutreten. */ background: #fff; color: #111827; border: 1px solid rgba(17, 24, 39, .15); box-shadow: none; /* Das Plugin setzt border-radius: 12px, der gruene Knopf nimmt Tablers eigene Rundung. Gleiche Masse heisst auch gleiche Ecken — also dieselbe Quelle. */ border-radius: var(--tblr-border-radius, .25rem); } body.welcome-anonymous .singlesignon-login-buttons > a:hover, body.welcome-anonymous .singlesignon-login-buttons > a:focus { background: #f3f4f6; color: #111827; border-color: rgba(17, 24, 39, .28); } body.welcome-anonymous .main-content-card .mb-3, body.welcome-anonymous .main-content-card .mb-4 { margin-bottom: var(--vulcan-feld-abstand) !important; } /* GLPI legt ueber dem Anmeldefeld einen card-header an, der LEER bleibt — nachgemessen: 0 Zeichen. Mit Luft obendrauf ergab das eine Luecke von knapp 3rem, in der nichts steht. Genau das war die Hoehe, die "nicht passte". Leere Kopfzeilen fallen weg. */ body.welcome-anonymous .main-content-card > .card-header:empty { display: none; } /* Die gefuellte Kopfzeile (bringt das SSO-Plugin mit) behaelt ihren Platz, aber ohne Trennstrich — bei einer durchscheinenden Karte wirkt der wie ein Strich im Nichts. */ body.welcome-anonymous .main-content-card .card-header { border-bottom: 0; } /* Das Anmeldefeld sitzt in einer schmalen Spalte (col-md-5). In einer Karte, die ohnehin schon schmal ist, wirkt das verloren — es soll die Karte ausfuellen. */ body.welcome-anonymous .main-content-card .col-md-5 { flex: 0 0 auto; width: 100%; max-width: 100%; } /* Das GLPI-Logo ueber der Karte ausblenden (CIO 17.09.2026). Bewusst `display: none` und nicht `visibility: hidden` — sonst bliebe die Luecke stehen und die Karte saesse zu tief. Soll hier spaeter ein eigenes Logo hin, ist das die Stelle dafuer: die Regel loeschen und stattdessen `background-image` auf .glpi-logo setzen. */ /* Das Plugin legt um den Login einen EIGENEN, fast deckenden Kasten (background: linear-gradient(..., rgba(255,255,255,.95), ...)). Zusammen mit unserer durchscheinenden Karte ergab das zwei Kaesten ineinander — einen milchigen aussen und einen weissen innen. Der innere wird durchsichtig, damit nur EINE Karte zu sehen ist. */ body.welcome-anonymous .singlesignon-login { background: transparent; border: 0; /* durchsichtig allein reicht nicht — der RAHMEN zeichnet den inneren Kasten weiterhin nach */ padding-inline: 0; } /* Das Plugin schneidet zu lange Beschriftungen ab (overflow: hidden + Auslassungspunkte). Lieber umbrechen als verstuemmeln: "Login mit Microsoft Entra (Xin..." sagt niemandem etwas. Zweite Sicherung, falls die Karte doch einmal schmaler gestellt wird. */ body.welcome-anonymous .singlesignon-login a, body.welcome-anonymous .singlesignon-login button, body.welcome-anonymous .singlesignon-login span { overflow: visible; text-overflow: clip; white-space: normal; } body.welcome-anonymous .singlesignon-auth-section, body.welcome-anonymous .singlesignon-auth-stack { background: transparent; } /* Gedaempfte Texte sind vor einem bewegten Foto kaum zu lesen. Etwas mehr Kontrast, und ein zarter Schatten hebt sie vom Hintergrund ab. */ body.welcome-anonymous .main-content-card .text-muted, body.welcome-anonymous .main-content-card .form-hint, body.welcome-anonymous .main-content-card small { color: rgba(17, 24, 39, .78) !important; } body.welcome-anonymous .main-content-card { text-shadow: 0 1px 2px rgba(255, 255, 255, .45); } /* Benutzername und Kennwort dauerhaft zeigen (CIO 17.09.2026). Das Plugin blendet den klassischen Teil EINGEBETTET aus (style="display:none") und laesst ihn erst ueber den Verweis "GLPI-Anmeldeformular verwenden" erscheinen. Gegen einen eingebetteten Stil hilft nur `!important`. */ body.welcome-anonymous [data-sso-pane="classic"], body.welcome-anonymous [data-sso-pane="oauth"] { /* BEIDE Haelften, nicht nur die klassische. Welche das Modul ausblendet, haengt am Merkzettel im Browser: kein Merkzettel / „oauth" -> die KLASSISCHE wird versteckt „classic" -> die SSO-Haelfte wird versteckt Anfangs stand hier nur die klassische. Dadurch sah der Schirm bei jedem, der schon einmal das Anmeldeformular gewaehlt hatte, ohne Microsoft-Knopf aus — und bei mir richtig, weil mein Pruefbrowser keinen Merkzettel hatte. Gegen den eingebetteten Stil hilft nur `!important`. */ display: block !important; } /* Der Umschalter wird damit wirkungslos — ein Knopf, der nichts mehr bewirkt, verwirrt mehr als er nuetzt. Stattdessen eine Trennlinie zwischen den beiden Anmeldewegen. */ body.welcome-anonymous .singlesignon-login-classic { display: none; } body.welcome-anonymous [data-sso-pane="classic"] { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(17, 24, 39, .18); } /* Reihenfolge: erst Benutzername und Kennwort, danach der Weg ueber Entra. Die beiden Abschnitte liegen als Geschwister im selben Stapel — mit `order` laesst sich das umdrehen, ohne die Vorlage anzufassen. */ body.welcome-anonymous .singlesignon-auth-stack { display: flex; flex-direction: column; } body.welcome-anonymous [data-sso-pane="classic"] { order: 1; } body.welcome-anonymous [data-sso-pane="oauth"] { order: 2; } /* Die Trennlinie gehoert jetzt ueber den SSO-Teil, nicht mehr ueber den klassischen. */ body.welcome-anonymous [data-sso-pane="classic"] { margin-top: 0; padding-top: 0; border-top: 0; } /* WARUM DER SSO-KNOPF BREITER WAR ALS "ANMELDEN" Das Plugin legt den klassischen Teil in ein eigenes Kaestchen: .singlesignon-auth-section--classic { padding: 1rem 1rem 0.95rem; border: 1px; background: ... } Der SSO-Teil hat das nicht. Damit ist der SSO-Knopf genau diese 2rem Innenluft breiter — und die beiden Knoepfe koennen nie gleich aussehen, solange das Kaestchen steht. Es wird entfernt statt nachgebaut: im Glas-Design zeichnet es nur einen zweiten Rahmen in die Karte und trennt die Knoepfe, die zusammengehoeren. !important, weil dieselbe Regel bei schmalen Schirmen ein zweites Mal kommt (padding: 0.9rem 0.8rem 0.85rem) und sonst gewinnt. */ body.welcome-anonymous [data-sso-pane="classic"] { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } /* Der Entra-Knopf soll DIREKT unter "Anmelden" sitzen — also weder Trennlinie noch Ueberschrift noch grosser Abstand dazwischen. Nur der uebliche Zeilenabstand. */ body.welcome-anonymous [data-sso-pane="oauth"] { margin-top: .75rem; padding-top: 0; border-top: 0; } body.welcome-anonymous .singlesignon-login-title { display: none; } body.welcome-anonymous .singlesignon-login { padding-block: 0; } /* Schaltflaechen in der Hausfarbe. Das Plugin faerbt ueber --sso-accent, GLPI ueber .btn-primary — beide Wege bedienen, sonst bleibt eine Haelfte blau. */ body.welcome-anonymous .singlesignon-login, body.welcome-anonymous .main-content-card { --sso-accent: var(--vulcan-logo-gruen); } body.welcome-anonymous .main-content-card .btn-primary { background-color: var(--vulcan-logo-gruen); border-color: var(--vulcan-logo-gruen); color: #fff; } body.welcome-anonymous .main-content-card .btn-primary:hover, body.welcome-anonymous .main-content-card .btn-primary:focus, body.welcome-anonymous .main-content-card .btn-primary:active { background-color: var(--vulcan-logo-gruen-dunkel); border-color: var(--vulcan-logo-gruen-dunkel); } body.welcome-anonymous .main-content-card .form-check-input:checked { background-color: var(--vulcan-logo-gruen); border-color: var(--vulcan-logo-gruen); } body.welcome-anonymous .main-content-card a { color: var(--vulcan-logo-gruen-dunkel); } /* Die eigene Begruessung: zweizeilig, mittig, etwas ruhiger gesetzt als die Vorgabe-Ueberschrift — sie ist laenger und soll nicht erschlagen. */ body.welcome-anonymous .vulcan-begruessung { text-align: center; font-size: var(--vulcan-begruessung-groesse); line-height: 1.35; font-weight: 600; margin-bottom: .75rem; /* KEIN `text-wrap: balance` mehr: die Umbrueche sind jetzt gesetzt, und ein automatischer Ausgleich wuerde dagegen arbeiten. */ } /* DAS LOGO — seit 17.09. das Xinion-Logo statt des GLPI-Logos. Die Datei selbst und die Variable --glpi-logo-dark-login setzt die Palette (sd01_palette_xinion.py); der Anmeldeschirm traegt bereits data-glpi-theme="xinion", darum greift sie hier mit. Hier steht nur, wie gross das Logo sein soll. ACHTUNG, das ist kein Hintergrundbild: GLPI setzt auf der Anmeldeseite `content: var(--logo)` (css/includes/_base.scss). Der Platzhalter wird damit zu einem ERSETZTEN Element, wie ein . GLPI gibt ihm fest 200x110 — bei einem Logo im Verhaeltnis 3,5:1 hiesse das: in die Breite gezogen. Darum Hoehe `auto` und zusaetzlich `object-fit: contain` als Netz, falls eine kuenftige GLPI-Fassung die Hoehe woanders erzwingt. */ /* CIO 17.09.2026: auf dem Anmeldeschirm bleibt das Logo WEG — der Hintergrund traegt die Marke bereits, ein Logo darueber waere doppelt gemoppelt. In der Oberflaeche nach der Anmeldung bleibt es (das setzt die Palette, nicht diese Datei). `display: none` und nicht `visibility: hidden`: sonst bliebe die Luecke stehen und die Karte saesse zu tief. Soll es zurueck, ist `block` die einzige Aenderung — die Masse darunter stimmen dann noch. */ body.welcome-anonymous .glpi-logo { display: none; width: var(--vulcan-logo-breite); height: auto; max-width: 80%; object-fit: contain; margin-inline: auto; margin-block-end: 1.5rem; } /* --- Der Inhalt sass nicht mittig in der Karte (CIO 18.09.2026) --- Gemessen am Lichtbild: Karte 207..719, Inhalt 210..680 — rechts blieb ein Streifen von rund 40 Bildpunkten stehen. Ursache sind die negativen Aussenraender, mit denen Bootstrap seine Zeilen baut, plus die Spaltenbreite col-md-5. Beides zusammen ergibt einen Versatz, der wie ein Zeichenfehler aussieht und keiner ist. */ body.welcome-anonymous .main-content-card .row { margin-left: 0 !important; margin-right: 0 !important; } body.welcome-anonymous .main-content-card .col-md-5 { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.welcome-anonymous .main-content-card > .card-body { padding: 2rem !important; } /* --- Gemeinsame Masse aller vier Anmeldeschirme --- Erzeugt aus infra/vulcan/anmeldeschirm/gemeinsam.py. Wer hier etwas aendert, aendert es fuer GLPI, NetBox, Zabbix und Wazuh zugleich — genau dafuer ist es da. */ :root { --vulcan-karte-breite: 512px; --vulcan-karte-links: 12vw; --vulcan-karte-oben: 18vh; --vulcan-karte-deckkraft: .20; --vulcan-unschaerfe: 18px; --vulcan-feld-hoehe: 46px; --vulcan-logo-gruen: #13A036; --vulcan-logo-gruen-dunkel: #0E7A29; --vulcan-dunkel: #1A1A2E; --vulcan-abstand-titel: 1.5rem; --vulcan-abstand-gruppe: 1rem; --vulcan-abstand-label: .35rem; --vulcan-schrift-label: 14px; } /* --- Gleiche Stelle auf allen vier Schirmen (gemeinsam.py) --- Fest am Fenster statt im Fluss des Rahmenwerks: nur so ist die Lage unabhaengig von den Aussenabstaenden, die Tabler, Zabbix und EUI jeweils mitbringen. */ body.welcome-anonymous .main-content-card { position: fixed !important; left: var(--vulcan-karte-links) !important; top: var(--vulcan-karte-oben) !important; right: auto !important; bottom: auto !important; /* OHNE DIESE ZEILE SIND SIE WIEDER VERSCHIEDEN BREIT. Zabbix rechnet die Innenabstaende ZUR Breite dazu (content-box): aus 32rem wurden gemessene 598 statt 512 Bildpunkte, waehrend GLPI und NetBox stimmten. Gleiche Angabe, anderes Ergebnis — genau die Falle, die dieses Modul aufloesen soll. */ box-sizing: border-box !important; width: var(--vulcan-karte-breite) !important; max-width: 92vw !important; /* Hoeher als das Fenster darf sie nicht werden — sonst waere der Anmelde-Knopf unerreichbar, und zwar ohne sichtbaren Hinweis. */ max-height: 84vh; overflow-y: auto; margin: 0 !important; } /* Kleine oder niedrige Schirme: zurueck in den normalen Fluss. */ @media (max-width: 992px), (max-height: 544px) { body.welcome-anonymous .main-content-card { position: static !important; max-height: none; margin: 6vh auto 0 !important; /* NICHT `width: 92vw`. Das war bis zum 21.09.2026 hier der Fehler, und er zeigte sich erst auf schmalen Fenstern — also genau dort, wo dieser Block ueberhaupt greift. `vw` misst das FENSTER, nicht den Platz, den die Karte hat. Ihr Elternteil bringt aber Innenabstaende mit (bei GLPI rund 60 Bildpunkte je Seite). 92vw ist dann BREITER als der Kasten, in dem die Karte sitzt: die automatischen Seitenraender fallen auf 0, die Karte klebt links am Innenrand und laeuft rechts aus dem Fenster heraus. Gemessen bei 620 px auf GLPI UND NetBox. `width: auto` fuellt den Elternkasten exakt aus — unabhaengig davon, welche Abstaende das jeweilige Rahmenwerk mitbringt. Genau dieselbe Falle wie bei `rem` und den Aussenabstaenden weiter oben, nur eine Einheit weiter. */ width: auto !important; max-width: 92vw !important; } } /* --- Gleiche Feldhoehen auf allen Schirmen (gemeinsam.py) --- */ body.welcome-anonymous .singlesignon-classic-title { margin-bottom: var(--vulcan-abstand-titel) !important; /* AUSGLEICH JE SCHIRM, GEMESSEN — nicht geschaetzt. Eine feste Hoehe fuer den Begruessungsblock war der erste Versuch und ging schief: der Selektor trifft je nach Anwendung ZWEI Elemente (Titel und Unterzeile), die sich dann beide auf die Hoehe aufblasen. Der Abstand wuchs statt zu stimmen — Wazuh rutschte von 401 auf 436. Deshalb hier ein ausgewiesener Ausgleich pro Schirm. Er steht im Aufruf, ist aus dem Lichtbild gemessen und beim naechsten Mal nachmessbar: gemessen wird die Oberkante des ersten Eingabefeldes, Ziel sind 402. */ padding-top: 28px !important; } body.welcome-anonymous .main-content-card .mb-3, body.welcome-anonymous .main-content-card .mb-4 { margin-bottom: var(--vulcan-abstand-gruppe) !important; margin-top: 0 !important; } body.welcome-anonymous .main-content-card .form-label { margin-bottom: var(--vulcan-abstand-label) !important; font-size: var(--vulcan-schrift-label) !important; font-weight: 600; display: block; } /* --- Gleiche Schrift auf allen Schirmen (gemeinsam.py) --- */ body.welcome-anonymous .main-content-card, /* SYMBOLE AUSNEHMEN. Zeichen wie das Schloss im SSO-Knopf kommen aus einer Symbolschrift (Tabler `ti`, Material `mdi`, FontAwesome `fa`). Wer die Schriftfamilie mit `*` ueber alles legt, ersetzt auch deren Schrift — und dann stehen dort leere Kaestchen. Genau das war nach dem ersten Lauf bei GLPI zu sehen. */ body.welcome-anonymous .main-content-card *:not(i):not([class*="ti-"]):not([class*="mdi"]):not([class*="fa-"]):not([class*="icon"]) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } body.welcome-anonymous .vulcan-begruessung { font-size: 22px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: center !important; } body.welcome-anonymous .main-content-card input, body.welcome-anonymous .main-content-card input::placeholder { font-size: 15px !important; } body.welcome-anonymous .main-content-card .btn { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* --- Anmeldung ueber Microsoft: auf allen Schirmen gleich (gemeinsam.py) --- */ body.welcome-anonymous a.singlesignon-login-button { background: #FFFFFF !important; background-image: none !important; color: var(--vulcan-dunkel) !important; /* OHNE DIESE ZEILE BLEIBT DIE BESCHRIFTUNG WEISS. `-webkit-text-fill-color` uebersteuert `color` beim Zeichnen des Textes. Die Wazuh-Vorlage setzt fuer ihren gruenen Anmelde-Knopf .login-wrapper .btn-login, .login-wrapper .btn-login * { color: #fff !important; -webkit-text-fill-color: #fff !important; } Am 21.09.2026 habe ich dreimal an `color` gedreht und dreimal ein Lichtbild mit Zeichen und ohne Wort bekommen — weil gar nicht `color` entschieden hat. Wer eine Farbe setzt und nichts sieht, prueft ERST, ob eine andere Eigenschaft das Zeichnen an sich gezogen hat. */ -webkit-text-fill-color: var(--vulcan-dunkel) !important; border: 1px solid rgba(26, 26, 46, .18) !important; box-shadow: none !important; font-weight: 600 !important; font-size: var(--vulcan-schrift-knopf, 15px) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: var(--vulcan-feld-hoehe) !important; text-decoration: none !important; } body.welcome-anonymous a.singlesignon-login-button:hover, body.welcome-anonymous a.singlesignon-login-button:focus { background: #F5F6F8 !important; color: var(--vulcan-dunkel) !important; } /* Die Farbe muss auch die Kinder treffen. Wazuh (EUI) faerbt den Text NICHT am Knopf, sondern an einer inneren Huelle (.euiButton__text) — nach dem Wechsel auf weissen Grund stand die Beschriftung dort weiss auf weiss und war schlicht verschwunden. Am 21.09.2026 im Lichtbild gesehen: ein Knopf mit Zeichen und ohne Wort. */ body.welcome-anonymous a.singlesignon-login-button *, body.welcome-anonymous a.singlesignon-login-button *:hover { color: var(--vulcan-dunkel) !important; -webkit-text-fill-color: var(--vulcan-dunkel) !important; background: transparent !important; } /* Das Zeichen: eingebettetes Bild statt Symbolschrift — siehe Begruendung oben. */ body.welcome-anonymous .singlesignon-login-visual::before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjRjI1MDIyIi8+PHJlY3QgeD0iMTMiIHk9IjEiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzdGQkEwMCIvPjxyZWN0IHg9IjEiIHk9IjEzIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiMwMEE0RUYiLz48cmVjdCB4PSIxMyIgeT0iMTMiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI0ZGQjkwMCIvPjwvc3ZnPg==") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } /* Traegt ein eigenes Element das Zeichen, dann ohne dessen Schmuck: GLPI legt hinter das Symbol einen blassen Kreis, der hinter dem Microsoft-Zeichen wie ein zweiter, kleiner Knopf aussieht. */ body.welcome-anonymous .singlesignon-login-visual { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; } /* Mitgeliefertes Symbol weg — es sagt etwas anderes als der Knopf tut. Bei GLPI war es ein SCHLOSS, bei NetBox das Zeichen einer Symbolschrift. */ body.welcome-anonymous .singlesignon-login-visual i, body.welcome-anonymous .singlesignon-login-arrow { display: none !important; } body.welcome-anonymous a.copyright, body.welcome-anonymous a.copyright:hover, body.welcome-anonymous a.copyright:focus { color: #F2F4F7 !important; /* nicht das Xinion-Gruen der Palette */ text-decoration: none !important; font-size: 12px !important; opacity: .85; /* Der Hintergrund ist ein Lichtbild und je Stelle verschieden hell. Ein schmaler dunkler Traeger macht den Vermerk auf JEDEM Untergrund lesbar — heller Text allein reicht nicht, sobald die Stelle darunter hell ist. */ background: rgba(26, 26, 46, .55); padding: 3px 10px; border-radius: 10px; } body.welcome-anonymous .text-muted:has(> a.copyright) { margin-top: 1.25rem !important; }