/* --------------------------------------------------------------------------- #3101 W7b (Facelift): cTrans-Status-/Validierungs-Badges auf das CI3-System --------------------------------------------------------------------------- Bezug: - Guideline Abschnitt 5 "Statussystem" (7 Kategorien, Badge = Icon + Text, 12 px Inter Semibold, Padding 4/10, Icon 16 px in der icon-Farbe) - Guideline Abschnitt 6 (Icon-Zuordnung; Submenge: status-sprite.svg, Pfad unten) und 4a/4b (Token-Werte inkl. Dunkelmodus) - UI-Regelwerk CI3 (Status nur ueber die 7 Kategorien, Icon immer, Farbe nie das einzige Merkmal; nie Signal-Orange, nie Markengruen) - Guideline 9 (Migration: Bootstrap-Statusfarben -> catkin-Status-Tokens) Aufbau Markup (Badge mit Icon und Text): Text Kategorien: --neu | --offen | --in-arbeit | --unterwegs | --erledigt | --achtung | --gesperrt Farben: --catkin-status--bg/-fg/-icon aus tokens.css (beide Modi ueber light-dark(); kein eigener Dunkelwert hier). Regeln: - .ct-status wird IMMER zusammen mit der Bootstrap-Klasse .badge gesetzt (Spezifitaet .badge.ct-status); .badge liefert die Grundform, .ct-status die CI-Farbwelt. Die Bootstrap-Textfarbe (text-light/-dark) entfaellt. - Icon: auf /css/icons/status/status-sprite.svg (absolute Pfade, da die Pages in unterschiedlichen Tiefen liegen). Der Sprite ist eine dokumentierte Submenge des CI-Sprites (Marketing/CI/icons/ status-sprite.svg); Ergaenzung = Symbol dorthin kopieren (kein neues Zeichen erfinden, CI3). - Kachel-Variante (kachel.css): nicht Teil von W7b (keine Stelle im Bestand braucht sie; Kandidat Schritt 3, PROGRESS.md W7b Inventar). - .ct-validation--ok/--nok: Validierungsanzeige der js-validation-Labels. Das JS setzt dort per .html() nur TEXT; das Icon kommt deshalb per CSS ::before (Maske, Data-URI des CI-Zeichens Haken bzw. Warndreieck). Die Klassen js-validation-ok/nok bleiben unveraendert (JS-Hooks). --------------------------------------------------------------------------- */ .badge.ct-status, .ct-status { --ct-status-bg: var(--catkin-status-neu-bg); --ct-status-fg: var(--catkin-status-neu-fg); --ct-status-icon: var(--catkin-status-neu-icon); display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25rem 0.625rem; /* Guideline 5: 4/10 px */ border-radius: var(--catkin-radius-full); font-size: 12px; /* CI8: kleinste Schrift 12 px */ font-weight: var(--catkin-font-weight-semibold); /* Guideline 5: 12 px Inter Semibold */ line-height: 1.3333; white-space: nowrap; /* wie .badge (Bootstrap): Zeilenhoehe der Zelle bleibt stabil */ background-color: var(--ct-status-bg); color: var(--ct-status-fg); } .badge.ct-status > svg, .ct-status > svg { width: 16px; /* Guideline 5: Badge-Icon 16 px */ height: 16px; flex: none; color: var(--ct-status-icon); } /* Kategorie-Zuordnung (Tokens aus tokens.css, beide Modi inklusive). #3101 N7 (Befund Merge 1): Die Grundregel oben traegt zwei Klassen (.badge.ct-status) und setzte die Variablen auf "Neu"; mit nur einer Klasse verlor die Kategorie gegen sie, und alle Abzeichen zeigten die neutrale Flaeche. Die Kategorie-Selektoren haben deshalb ebenfalls zwei Klassen (.ct-status.ct-status--) und stehen nach der Grundregel: gleiche Spezifitaet, die spaetere Regel gewinnt. */ .ct-status.ct-status--neu { --ct-status-bg: var(--catkin-status-neu-bg); --ct-status-fg: var(--catkin-status-neu-fg); --ct-status-icon: var(--catkin-status-neu-icon); } .ct-status.ct-status--offen { --ct-status-bg: var(--catkin-status-offen-bg); --ct-status-fg: var(--catkin-status-offen-fg); --ct-status-icon: var(--catkin-status-offen-icon); } .ct-status.ct-status--in-arbeit { --ct-status-bg: var(--catkin-status-in-arbeit-bg); --ct-status-fg: var(--catkin-status-in-arbeit-fg); --ct-status-icon: var(--catkin-status-in-arbeit-icon); } .ct-status.ct-status--unterwegs { --ct-status-bg: var(--catkin-status-unterwegs-bg); --ct-status-fg: var(--catkin-status-unterwegs-fg); --ct-status-icon: var(--catkin-status-unterwegs-icon); } .ct-status.ct-status--erledigt { --ct-status-bg: var(--catkin-status-erledigt-bg); --ct-status-fg: var(--catkin-status-erledigt-fg); --ct-status-icon: var(--catkin-status-erledigt-icon); } .ct-status.ct-status--achtung { --ct-status-bg: var(--catkin-status-achtung-bg); --ct-status-fg: var(--catkin-status-achtung-fg); --ct-status-icon: var(--catkin-status-achtung-icon); } .ct-status.ct-status--gesperrt { --ct-status-bg: var(--catkin-status-gesperrt-bg); --ct-status-fg: var(--catkin-status-gesperrt-fg); --ct-status-icon: var(--catkin-status-gesperrt-icon); } /* Wartungs-Banner im Footer (Navigation_Saas/_Footer.cshtml): die dort vorhandenen py-2/px-3-Utilities duerfen den Badge-Padding-Override wieder anheben (Bestandsmaass, CI19-Hinweisleiste). */ .badge.ct-status.py-2.px-3 { padding: 0.5rem 1rem; } /* --------------------------------------------------------------------------- Validierungsanzeige (js-validation-ok/nok): JS laedt reinen Text per .html() in das Label; das Icon steht als ::before (Maske = CI-Zeichen). - ok = nur Haekchen im Feld mit Tooltip (FIX-12), die Marke ist visuell verborgen - nok = Warndreieck (CI: status-geaendert; Platzhalter "Fehlerhaft" nach CI12(b), bis ein eigenes Icon in der Guideline steht), Kategorie Achtung --------------------------------------------------------------------------- */ .badge.ct-status.js-validation-nok::before { content: ""; width: 16px; height: 16px; flex: none; background-color: var(--ct-status-icon); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; } /* #3101 FIX-12: Erfolg der Pruefung nur als Haekchen im Feld (is-valid) mit Tooltip (ct-validierung.js, K1.3/K7.3). Die Marke bleibt als visuell verborgener Beschreibungstext im DOM (aria-describedby des Felds), nimmt keinen Platz ein; Fehler (-nok) bleiben sichtbar. */ .badge.ct-status.js-validation-ok { position: absolute; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .badge.ct-status.js-validation-nok::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.9 17.4a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.1' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.9 17.4a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.1' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); } /* #3101 N7: "Gesperrt" ist die gefuellte Pille (Guideline 5, Tabelle 4a: Icon in der Textfarbe) - die Fuellung ist zugleich die icon-Rolle, das Zeichen war darauf unsichtbar. */ .badge.ct-status.ct-status--gesperrt > svg { color: var(--ct-status-fg); } /* #3101 N7: Hinweis neben einem Wert (Befund-Stufe "Hinweis", Kategorie Neu): nur das Zeichen (Ring nach CI12 (g), bis die Guideline ein Befund-Icon liefert), Tooltip und aria-label tragen die Aussage (CI3). Quadratisch, gleich hoch wie die Statuspille. */ .badge.ct-status.ct-status--hinweis { padding: 0.25rem; margin-inline-start: 0.25rem; vertical-align: middle; } /* --------------------------------------------------------------------------- #3101 Nachzug CI3: Statuskacheln statt Bestands-PNG (Guideline 6.0; Zuordnung Helpers/StatusKachel.cs, Browser ctStatusKachel aus _StatusKachelScripts). Kachel selbst = kachel.css; hier nur der Abstand in Zellen und Kartenkoepfen (vorher margin-left am Bild) und der Hinweis "Neue Nachrichten" mit Anzahl. --------------------------------------------------------------------------- */ .ct-statuskachel { margin-inline: var(--catkin-space-3xs); } h3 > .ct-statuskachel:first-child, h4 > .ct-statuskachel:first-child { margin-inline-start: 0; } .ct-nachricht-neu { display: inline-flex; align-items: center; gap: var(--catkin-space-3xs); vertical-align: middle; } .ct-nachricht-neu__zahl { font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-text); }