html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Bug 6733: gemeinsame Ebene fuer dauerhaft sichtbare/bedienbare UI-Elemente (Feedback-Button, Blazor-Fehlerbanner), die ueber jedem MudBlazor-Overlay (Dialog, Popover, Snackbar, Tooltip, AppBar, Drawer -- Variablen --mud-zindex-*, von MudThemeProvider zur Laufzeit gesetzt) sowie dem eigenen LoadingOverlay (ZIndex 1450) liegen muessen. Bewusst ein fester, sehr hoher Wert statt eines aus den einzelnen --mud-zindex-*-Variablen berechneten Werts: so bleibt die Garantie auch gegenueber einer kuenftigen MudBlazor-Version bestehen, die eine bislang unbekannte, zusaetzliche Overlay-Ebene mit einem noch hoeheren Wert einfuehrt. Deutlich unterhalb der in feedback-capture.js verwendeten Werte (ab 2147483000) fuer die eigene Bildschirmauswahl-Ebene der Feedback-Erfassung, die waehrend der Erfassung ueber dem Feedback-Button selbst liegen muss. */ :root { --ec-zindex-always-on-top: 2000000000; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Login-Seite (Login.razor / LoginLayout.razor) -- bewusst ohne MudBlazor-Komponenten, siehe Kommentar in Login.razor zur statisch gerenderten Form. */ .ec-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #EEF2F7; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .ec-login-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(13, 79, 140, 0.12); padding: 2.5rem 2.5rem 2rem; width: 380px; max-width: 92vw; } .ec-login-title { color: #0D4F8C; font-size: 1.4rem; font-weight: 700; margin: 0; } .ec-login-subtitle { color: #8A95A3; font-size: 0.8rem; margin: 0.2rem 0 1.6rem; } .ec-login-label { display: block; font-size: 0.75rem; font-weight: 600; color: #8A95A3; text-transform: uppercase; letter-spacing: .04em; margin: 0.9rem 0 0.3rem; } .ec-login-input { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #CBD2DC; border-radius: 4px; font-size: 0.95rem; box-sizing: border-box; } .ec-login-input:focus { outline: none; border-color: #0078FF; box-shadow: 0 0 0 2px rgba(0, 120, 255, 0.15); } .ec-login-password-wrapper { position: relative; } .ec-login-password-wrapper .ec-login-input { padding-right: 2.4rem; } .ec-login-password-toggle { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0.3rem; color: #8A95A3; cursor: pointer; border-radius: 4px; } .ec-login-password-toggle:hover { color: #0D4F8C; } .ec-login-password-toggle:focus-visible { outline: 2px solid #0078FF; outline-offset: 2px; } .ec-login-button { width: 100%; margin-top: 1.4rem; padding: 0.65rem; background: #0D4F8C; color: #fff; border: none; border-radius: 4px; font-size: 0.95rem; font-weight: 600; cursor: pointer; } .ec-login-button:hover { background: #0078FF; } .ec-login-error { background: #FDEDEC; color: #C0392B; border: 1px solid #F1948A; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 0.6rem; } /* User Story 6564, ADR 6564-D: Meldung ueber die automatisch abgelaufene Sitzung -- optisch von .ec-login-error unterscheidbar (Akzentbalken links), da beide gleichzeitig sichtbar sein koennen (fehlgeschlagene Neuanmeldung nach abgelaufener Sitzung). */ .ec-login-session-expired { background: #FDEDEC; color: #C0392B; border: 1px solid #F1948A; border-left: 4px solid #C0392B; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 0.6rem; } .ec-login-hint { margin-top: 1.4rem; font-size: 0.72rem; color: #8A95A3; line-height: 1.4; } /* User Story 7926, ADR 7926-E E4: Seite "Neues Passwort vergeben" in der Optik der Anmeldeseite -- Seitentitel, Hinweis auf die Neusetzung, Meldung am Feld als Live-Region, Hilfetext unter den Feldern und "Abmelden" als Verweisschaltflaeche. Nur Farbwerte der bestehenden Anmeldeoptik. */ .ec-login-heading { color: #0D4F8C; font-size: 1.1rem; font-weight: 700; margin: 0 0 0.9rem; } .ec-login-info { display: flex; align-items: flex-start; gap: 0.55rem; background: rgba(0, 120, 255, 0.06); color: #0D4F8C; border: 1px solid #CBD2DC; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.4; margin-bottom: 0.6rem; } /* Bug 7953: das Symbol steht links neben dem Text, auf Hoehe der ersten Zeile (Umsetzungsvorschlag der Seite "Neues Passwort vergeben"). */ .ec-login-hinweissymbol { flex: 0 0 auto; margin-top: 1px; } /* User Story 7927 (ADR 7927-D D6/D7): Erfolgsmeldung der Anmeldeoptik mit Haekchen links, als Gegenstueck zum Hinweis. */ .ec-login-success { display: flex; align-items: flex-start; gap: 0.55rem; background: #EAF6EC; color: #1E6B32; border: 1px solid #B7DDBF; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.4; margin-bottom: 0.6rem; } /* User Story 7927 (ADR 7927-D D6): Link "Passwort vergessen?" rechtsbuendig unter dem Passwortfeld. */ .ec-login-forgot { display: block; width: fit-content; margin: 0.4rem 0 0 auto; color: #0078FF; font-size: 0.8rem; text-decoration: none; border-radius: 4px; } /* Textverweise der Anmeldeoptik ("Zurueck zur Anmeldung", "Neuen Link anfordern") in derselben Darstellung wie die Link-Schaltflaeche. */ .ec-login-link { color: #0078FF; font-size: 0.85rem; text-decoration: none; padding: 0.2rem 0.4rem; border-radius: 4px; } .ec-login-forgot:hover, .ec-login-link:hover { text-decoration: underline; } .ec-login-forgot:focus-visible, .ec-login-link:focus-visible { outline: 2px solid #0078FF; outline-offset: 2px; } .ec-login-field-error { color: #C0392B; font-size: 0.78rem; margin-top: 0.3rem; } .ec-login-helper { font-size: 0.72rem; color: #8A95A3; line-height: 1.4; margin: 0.5rem 0 0; } .ec-login-secondary { margin-top: 0.9rem; text-align: center; } .ec-login-link-button { background: transparent; border: none; padding: 0.2rem 0.4rem; color: #0078FF; font-size: 0.85rem; cursor: pointer; border-radius: 4px; } .ec-login-link-button:hover { text-decoration: underline; } .ec-login-link-button:focus-visible { outline: 2px solid #0078FF; outline-offset: 2px; } /* Issue 6636 (ADR 6636-A/B): MudDrawer bezieht seine feste Positionierung ueber einen Kaskadenwert, den MudLayout bereitstellt. Kaskadenwerte ueberschreiten keine Rendermode-Grenze -- seit Issue 6553 liegt die Schublade als eigene interaktive Insel (AppDrawer.razor), die aeussere MudLayout aus MainLayout.razor erreicht sie nicht mehr. Die Insel traegt deshalb eine eigene MudLayout-Huelle (.ec-drawer-host-layout) ausschliesslich als Traeger dieses Kaskadenwerts; die fest positionierte Schublade liegt ohnehin nicht im Fluss, deshalb Rahmen auf 0 Hoehe/Breite. */ .ec-drawer-host-layout { height: 0; width: 0; overflow: visible; } /* Issue 6636 (ADR 6636-B, abgeloest: ADR 6576-E): der Inhaltsversatz folgt den im Betrieb aktualisierten Klassen der inneren Huelle (.ec-drawer-host-layout) statt der beim Vorab-Rendern eingefrorenen Klasse an der aeusseren Huelle -- die aufhebende Medienabfrage aus ADR 6576-E ist damit gegenstandslos geworden und entfaellt. .ec-drawer-host-layout ist ein Geschwisterelement von .mud-main-content (beide Kinder der aeusseren MudLayout aus MainLayout.razor), daher der allgemeine Geschwisterselektor (~). Ab 600 px Versatz um die Breite des schmalen Streifens -- die Schublade ueberlagert dort im geoeffneten Zustand als temporaeres Element, ohne den Inhalt zu verdraengen. Ab 960 px (Andock-Breakpoint der Bibliothek fuer Variant.Mini) zusaetzlich Versatz um die volle Breite, solange die Schublade geoeffnet ist -- die hoehere Selektor-Spezifitaet (drei statt zwei Klassen) sorgt dafuer, dass diese Regel die erste ueberschreibt, ohne dass eine Reihenfolge im Stylesheet vorausgesetzt werden muss. Unterhalb 600 px greift keine der beiden Regeln -- die Schublade belegt dort keine Inhaltsbreite (unveraendert gueltige Zusage aus ADR 6576-E). */ @media (min-width: 600px) { .ec-drawer-host-layout ~ .mud-main-content { margin-left: var(--mud-drawer-width-mini-left); } } @media (min-width: 960px) { .ec-drawer-host-layout.mud-drawer-open-mini-md-left ~ .mud-main-content { margin-left: var(--mud-drawer-width-left); } } /* Issue 6620: bei geoeffneter Navigationsschublade soll unterhalb 600px die volle Bildschirmhoehe genutzt werden. MudBlazor berechnet die Hoehe der fixierten (ClipMode.Always, Variant.Mini) Schublade als Prozentsatz ihres Containing-Blocks -- bei einem position:fixed-Element ist das die grosse, statische Ansichtsfensterhoehe, die nicht auf die von mobilen Browsern dynamisch ein-/ausgeblendete Adressleiste reagiert. dvh (dynamic viewport height -- dieselbe Einheit, die MudBlazor selbst bereits fuer den Dialog-Rahmen verwendet, siehe MudBlazor.min.css) verfolgt die tatsaechlich sichtbare Hoehe fortlaufend, sodass die Schublade auf einem realen Mobilgeraet bis zum tatsaechlichen unteren Bildschirmrand reicht statt vorzeitig zu enden. Zwei getrennte Regeln je Ausrichtung, da die Basisregel den oberen Versatz (Aussparung der Kopfleiste, ADR 6576-D) je nach Ausrichtung unterschiedlich berechnet -- hier unveraendert uebernommen, nur 100% durch 100dvh ersetzt. ClipMode/Variant selbst bleiben unangetastet (ADR 6576-D/E), es aendert sich ausschliesslich die Hoeheneinheit. */ @media (max-width: 599px) and (orientation: portrait) { .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always { height: calc(100dvh - (var(--mud-appbar-height) - var(--mud-appbar-height) / 8)); } } @media (max-width: 599px) and (orientation: landscape) { .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always { height: calc(100dvh - (var(--mud-appbar-height) - var(--mud-appbar-height) / 4)); } } /* Issue 6640 (ADR 6640-A/B): die Bibliotheksregel, die eine Schublade unterhalb ihres Breakpoints ausblendet, schliesst die Mini-Variante ausdruecklich aus (:not(.mud-drawer-mini)) -- der geschlossene 56px breite Symbolstreifen bliebe unterhalb 600px stehen und ueberlagert dort die linken 56px des Inhalts, der laut ADR 6576-E ab 0px beginnt. Ersetzt genau den Breitenwert des geschlossenen Mini-Zustands durch 0, statt eine eigene Ausblendregel nachzubauen -- der Breiten-Uebergang der Bibliothek bleibt dadurch beim Oeffnen/Schliessen erhalten (nur anderer Startwert), lediglich der Schlagschatten wird zusaetzlich unterdrueckt, da ein Element ohne Breite ihn sonst weiterhin wirft. Ab 600px unveraendert 56px breit. Variant.Mini, ClipMode.Always und Breakpoint bleiben unangetastet. */ @media (max-width: 599px) { .ec-drawer-host-layout .mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed { width: 0; box-shadow: none; } } /* Issue 6576 (ADR 6576-H): der fest positionierte Feedback-Ausloeser (FeedbackLauncher.razor) ist unterhalb 600 px nicht wegscrollbar und wuerde ohne diesen Freiraum die letzte Zeile eines Inhalts dauerhaft verdecken. Hoehe der runden Variante (MudFab ohne Label, Size.Large, 56px Durchmesser laut MudBlazor-Vorgabe) zuzueglich ihres Abstands vom Rand (24px). */ @media (max-width: 599px) { .mud-main-content { padding-bottom: 80px; } } /* Issue 7086 (ADR 7086-B): seit dem Wechsel des Feedback-Ausloesers auf die linke untere Ecke ueberlagert er die Navigationsschublade (.mud-drawer, eigener Bildlaufbereich mit overflow-y:auto laut MudBlazor). Ohne diesen Freiraum koennte ein Navigationseintrag am Ende der Liste dauerhaft unter dem Knopf liegen und nicht mehr freigescrollt werden. Derselbe Wert und derselbe Mechanismus wie bei ADR 6576-H oben, hier aber in allen Breitenbereichen noetig, weil die Schublade ab 600 px dauerhaft und darunter im geoeffneten Zustand sichtbar ist. */ .ec-drawer-host-layout .mud-drawer { padding-bottom: 80px; } /* Issue "Tooltips/Abstaende eingeklappte Schublade": MudBlazor blendet im eingeklappten Mini-Zustand (.mud-drawer--closed.mud-drawer-mini) zwar die Textbeschriftung eines MudNavLink aus (siehe MudBlazor.min.css, Selektor .mud-nav-link .mud-icon-root:first-child+ .mud-nav-link-text), nicht aber das eigene Auf-/Zuklapp-Pfeilsymbol einer MudNavGroup (.mud-nav-link-expand-icon) -- gemessen per Playwright: dieses zweite Icon bleibt sichtbar und ragt bei 56px Schubladenbreite 8px ueber den rechten Rand hinaus, wodurch der Abstand des Kategorie-Icons zum rechten Rand kleiner wirkt als zum linken. Dieselbe Bedingung wie bei der Bibliotheksregel fuer die Textbeschriftung, nur auf das Pfeilsymbol angewendet. */ .mud-drawer--closed.mud-drawer-mini .mud-nav-link-expand-icon { display: none; } /* Issue "Tooltips/Abstaende eingeklappte Schublade": im eingeklappten (Icon-only) Zustand fehlt ohne diese Regel jede Beschriftung -- HauptNavigation.razor traegt dafuer je Eintrag ein data-tooltip-Attribut (kein zusaetzliches Wrapper-Element, siehe dortiger Kommentar zu den per Playwright ermittelten tatsaechlichen Zielelementen .mud-nav-item/.mud-nav-group). Aktiv unter derselben Bedingung, unter der die Bibliothek selbst die Textbeschriftung ausblendet (.mud-drawer--closed.mud-drawer-mini) -- im aufgeklappten Zustand ist der Text ohnehin sichtbar, ein zusaetzlicher Tooltip waere dort nur stoerend. Farbe/Abstand/Rundung/Schichtung uebernehmen dieselben CSS-Variablen wie MudBlazors eigene MudTooltip-Komponente (siehe MudBlazor.min.css, .mud-tooltip/.mud-tooltip-default), damit sich der Tooltip optisch nicht vom Rest der Bibliothek unterscheidet. */ .mud-drawer--closed.mud-drawer-mini [data-tooltip] { position: relative; } .mud-drawer--closed.mud-drawer-mini [data-tooltip]:hover::after, .mud-drawer--closed.mud-drawer-mini [data-tooltip]:focus-visible::after { content: attr(data-tooltip); position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 8px; padding: 4px 8px; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-gray-darker); color: var(--mud-palette-dark-text); font-weight: 500; font-size: 12px; line-height: 1.4em; white-space: nowrap; z-index: var(--mud-zindex-tooltip); pointer-events: none; } /* Bug 6600 (ADR 6576-A/G): Flexbox-min-content-Problem, zwei getrennte Ursachen. Wrap="Wrap.Wrap" auf einer MudStack Row laesst den Container selbst umbrechen, loest aber weder davon ab: (1) Flex-Items haben einen impliziten min-width:auto, der das Schrumpfen unterhalb der eigenen Inhaltsbreite verhindert -- min-width:0 hebt das auf. (2) Selbst mit min-width:0 kann ein einzelnes zusammenhaengendes, bindestrichloses Wort (typisch bei langen deutschen Komposita, z. B. "Inbetriebnahmebegleitung") an keiner Stelle umbrechen, weil white-space:normal nur an Wortgrenzen (Leerzeichen) umbricht -- overflow-wrap erlaubt zusaetzlich den Umbruch mitten im Wort, wenn keine andere Umbruchstelle existiert. Nachgewiesen per Playwright-Diagnose (E2ETests, Bug 6600): document.documentElement.scrollWidth blieb nach min-width:0 allein unveraendert bei 410px trotz keines einzelnen Elements mit getBoundingClientRect().right > clientWidth -- ein Indiz auf ueberlaufenden, nicht umbrechenden Inhalt statt auf ein zu breites Element selbst. Gezielt auf Text-/Titel-Elemente mit potenziell langem, nutzergesteuertem Inhalt innerhalb einer umbrechenden MudStack Row anzuwenden, nicht auf jedes Flex-Item pauschal. */ .ec-stack-fluid-text { min-width: 0; overflow-wrap: break-word; } /* Issue 6655: Status-Kennzeichnungen (MudChip, Variant.Filled) stellten Erfolg/Warnung/Fehler bislang mit gesaettigtem Hintergrund und hellem Text dar -- die visuelle Referenz zeigt die Pille umgekehrt, mit hellem Pastellgrund und gesaettigtem Text in derselben Statusfarbe (siehe Design-Vorgaben, Abschnitt "Varianten der Bausteine"). Zentral ueber die von MudBlazor selbst erzeugten Chip-Klassen ueberschrieben statt an jeder der ueber 40 Aufrufstellen einzeln, damit jede aktuelle wie kuenftige Statuskennzeichnung automatisch die Pastellpille erhaelt. Bewusst nicht ueber PaletteLight in EcTheme.cs geloest, da Success/Warning/Error dort weiterhin die gesaettigten Werte fuer Buttons, Alerts und Icons liefern muessen -- nur die Chip-Darstellung soll sich aendern. Pastell-/Textwerte fuer Erfolg direkt aus der Referenz (#D4EDDA/#1A6B35); Warnung/Fehler aus der bereits im Prototyp vorhandenen Pastellpalette uebernommen (Abschnitt "Weitere Statusfarben": Kuerzel "of" bzw. "ab"), da dort dieselben Statusfarben (--am/--rd) bereits als Text auf einem hellen Grund verwendet werden. Die Hover-/Fokus-Zustaende klickbarer Kennzeichnungen (z. B. AmpelChip mit gesetztem Klick-Callback) werden mit abgesetzten, aber weiterhin hellen Tonstufen ueberschrieben, sonst wuerde MudBlazors eigene, gesaettigte Standard-Hoverfarbe kurz aufblitzen. */ .mud-chip-filled.mud-chip-color-success { background-color: #D4EDDA; color: #1A6B35; } .mud-chip-filled.mud-chip-color-warning { background-color: #FEF9EC; color: #856404; } .mud-chip-filled.mud-chip-color-error { background-color: #FDEDEC; color: #C0392B; } .mud-chip-filled.mud-chip-color-success.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-success.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-success.mud-clickable:active:not(.mud-disabled) { background-color: #C3E6CB; } .mud-chip-filled.mud-chip-color-warning.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-warning.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-warning.mud-clickable:active:not(.mud-disabled) { background-color: #FCF0C8; } /* Issue 6686: der obige Override deckte nur die drei Statusfarbrollen success/warning/error ab. Von den 46 MudChip im Bestand verwenden fuenf weitere Farbrollen -- default, info, primary, secondary, tertiary --, die weiterhin als gesaettigte Flaeche mit hellem Text erschienen, obwohl dieselbe Pastellpille verbindlich fuer jede Kennzeichnung gilt (Design-Vorgaben, Abschnitt "Varianten der Bausteine"). Hintergrund-/Textwerte je Farbrolle direkt aus bereits vorhandenen, fuer diese Farbfamilie gewaehlten Tonstufen des Prototyps uebernommen statt neu erfunden: primary aus dem outline-Button-Muster (#E8F0FC/#0D4F8C, Design-Vorgaben Abschnitt "Komponentenmuster"), secondary/info aus der Statusfarbe "ei" (Eingereicht, #EBF5FB/#1A5276) und tertiary aus der Statusfarbe "int" (Intern, #F3E5F5/#6B3FA0) -- beide aus dem Abschnitt "Weitere Statusfarben". Secondary und Info liefern in EcTheme.cs denselben Palettenwert (#0078FF) und damit bewusst dieselbe Pastelldarstellung. default hat keine eigene Statusfarbe im Prototyp; verwendet deshalb die neutralen Theme-Grundwerte Background/#EEF2F7 und TextPrimary/#1A2B4A -- dieselbe Kombination, die MudBlazor ohne Farbrolle ohnehin naeherungsweise liefert, hier aber ausdruecklich statt implizit gesetzt (siehe Design-Vorgaben: Vorgabewerte werden nicht der Bibliothek ueberlassen, auch wenn sie zufaellig uebereinstimmen). Alle vier Kombinationen liegen rechnerisch zwischen 5,4:1 und 12,6:1 und damit klar oberhalb der WCAG-AA-Normaltext-Schwelle von 4,5:1 (SC 1.4.3), ebenso die vier Hover-/Fokus-/Active-Zustaende (4,97:1 bis 11,2:1). */ .mud-chip-filled.mud-chip-color-default { background-color: #EEF2F7; color: #1A2B4A; } .mud-chip-filled.mud-chip-color-info { background-color: #EBF5FB; color: #1A5276; } .mud-chip-filled.mud-chip-color-secondary { background-color: #EBF5FB; color: #1A5276; } .mud-chip-filled.mud-chip-color-primary { background-color: #E8F0FC; color: #0D4F8C; } .mud-chip-filled.mud-chip-color-tertiary { background-color: #F3E5F5; color: #6B3FA0; } .mud-chip-filled.mud-chip-color-default.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-default.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-default.mud-clickable:active:not(.mud-disabled) { background-color: #E0E5EC; } .mud-chip-filled.mud-chip-color-info.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-info.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-info.mud-clickable:active:not(.mud-disabled) { background-color: #D3E9F5; } .mud-chip-filled.mud-chip-color-secondary.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-secondary.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-secondary.mud-clickable:active:not(.mud-disabled) { background-color: #D3E9F5; } .mud-chip-filled.mud-chip-color-primary.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-primary.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-primary.mud-clickable:active:not(.mud-disabled) { background-color: #D2E1F7; } .mud-chip-filled.mud-chip-color-tertiary.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-tertiary.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-tertiary.mud-clickable:active:not(.mud-disabled) { background-color: #E9D6EC; } /* Bug 6664: der Hintergrund #F8D7DA unterschreitet mit der Basis-Textfarbe #C0392B (identisch zum Ruhezustand) rechnerisch nur 4,07:1 und damit die WCAG-AA-Normaltext-Schwelle von 4,5:1 (SC 1.4.3) -- Erfolg (4,85:1) und Warnung (4,82:1) sind bei gleichem Muster unauffaellig, nur die Fehlerfarbe liegt zu nah an ihrem eigenen Hintergrund. Der Hintergrund bleibt unveraendert (Pastell-Charakter, gleiches Muster wie bei Erfolg/Warnung), stattdessen wird ausschliesslich fuer diese drei Pseudo-Zustaende ein abgedunkelter Textton verwendet, der weiterhin klar als die Fehlerfarbe erkennbar ist (rechnerisch 4,74:1 gegen #F8D7DA). */ .mud-chip-filled.mud-chip-color-error.mud-clickable:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-error.mud-clickable:focus-visible:not(.mud-disabled), .mud-chip-filled.mud-chip-color-error.mud-clickable:active:not(.mud-disabled) { background-color: #F8D7DA; color: #AD3527; } /* Issue 6656: Kategorie-Kopfzeilen der Navigationsschublade (MudNavGroup, siehe NavigationsKatalog.cs: Planung, Reporting, Vertrieb, Administration) bekommen einen etwas dunkleren Hintergrund als direkte Eintraege ohne Untermenue, zur visuellen Unterscheidung "hat Untermenue" vs. "direkter Link". Selektor gezielt ueber den direkten Kind-Kombinator (>): die eigene Kopfzeile einer MudNavGroup ist selbst ein .mud-nav-link und direktes Kind von .mud-nav-group, waehrend die untergeordneten Eintraege ueber einen zusaetzlichen, nicht direkten Zwischencontainer eingehaengt sind (per Playwright-DOM-Inspektion verifiziert) -- so bleiben nur die Kopfzeilen betroffen, nicht deren Untereintraege. Dieselbe Regel gilt unveraendert im eingeklappten Mini-Zustand, da .mud-nav-group dort unveraendert das Wurzelelement bleibt (siehe Kommentare zu Tooltip/Abstand oben). Farbe: die im Theme bereits vorhandene Background-Abstufung (EcTheme.cs, dezent dunkler als die weisse Surface-Flaeche der Schublade) statt eines hartcodierten Hex-Werts. Der bestehende aktive/ausgewaehlte Zustand bleibt unberuehrt: MudNavGroup-Kopfzeilen haben keine eigene Route (kein Href im Katalog), die Bibliothek setzt .active deshalb nie auf ihnen. */ .mud-nav-group > .mud-nav-link { background-color: var(--mud-palette-background); } /* User Story 6683, ADR 6683-A C: Endzustand-Zeilen der Sales-Pipeline-Liste (keine erlaubte Folgephase) bekommen einen abgesetzten Zeilenhintergrund statt reduzierter Deckopazitaet -- Deckopazitaet wirkt multiplikativ auf jeden Vordergrund und gefaehrdet damit den von AC1 geforderten WCAG-AA-Kontrast. Zeilenbezogen ueber RowClassFunc vergeben (SalesPipelinePage.razor), nicht je Zelle. #E4E7EB gegen die im Theme hinterlegte Textfarbe TextPrimary (#1A2B4A, EcTheme.cs) berechnet: Kontrastverhaeltnis rund 11,4:1, deutlich ueber der WCAG-AA-Normaltext-Schwelle von 4,5:1 (SC 1.4.3). Wirkt ausschliesslich ueber diese eine Klasse -- keine allgemeine Regel fuer Tabellenzeilen, keine Textfarben-Aenderung. Story 6680 hat parallel eine aehnliche, ansichtsneutrale Klasse .ec-row-final-state eingefuehrt (unten), die laut ihrem eigenen Kommentar auf eine spaetere Konsolidierung mit dieser Klasse abzielt -- hier bewusst NICHT vorgezogen, da diese Klasse bereits gegen die freigegebene Architektur-Wiki-Seite dieser Story (ADR 6683-A C) getestet und freigegeben ist; die Konsolidierung ist als eigener Querschnittsbefund zu behandeln. */ .ec-opportunity-endzustand-row { background-color: #E4E7EB; } /* User Story 6680 (ADR 6680-B/C, geteilt mit Story 6683/ADR 6683-A): Zeile in einem fachlichen Endzustand (keine weiteren Statusuebergaenge mehr moeglich) -- abgesetzter Zeilenhintergrund statt reduzierter Deckkraft, damit Betrag/Entscheidung der Zeile weiterhin ohne Kontrastverlust lesbar bleiben; die Status-Pille selbst behaelt ihre zentral festgelegte Farbe unveraendert. Bewusst ansichtsneutral benannt (kein "claim-"/"opportunity-"-Praefix, ADR 019: kein Umlaut im Klassennamen), damit sowohl die Claims-Uebersicht als auch die Sales-Pipeline dieselbe Regel nutzen koennen statt sie je Ansicht ein zweites Mal anzulegen. Farbwert ueber die bestehende MudBlazor-Palette-Variable (kein neuer Hex-Wert), einmalig gegen die Palette kontrastgeprueft statt je Zellinhalt. Der Zustand "Zeiger ueber der Zeile" (MudTable Hover="true") darf die Kennzeichnung nicht ueberdecken (ADR 6680-B D) -- deshalb die zweite Regel mit derselben Selektorkette wie die Bibliotheks-eigene Hover-Regel, aber um die eigene Klasse ergaenzt (hoehere Spezifitaet, kein !important noetig). ADR 6680-C: trifft diese Klasse mit der Sprungziel-Hervorhebung aus User Story 6318 zusammen, behaelt Letztere den Vorrang beim Zeilenhintergrund (eigener inline-Style, ueberdeckt beide Regeln hier bereits durch die hoehere Spezifitaet von Inline-Styles). */ .ec-row-final-state { background-color: var(--mud-palette-background-gray); } .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.ec-row-final-state:hover { background-color: var(--mud-palette-background-gray); } /* Issue 6684: MudButton mit Variant.Filled wirft in der Bibliothek (MudBlazor.min.css, Selektor .mud-button-filled samt :hover/:focus-visible/:active) im Ruhe- wie im Hover-/Active-Zustand einen Schlagschatten -- unabhaengig davon, ob der Parameter DropShadow an der einzelnen Aufrufstelle angegeben ist, da der Schatten unbedingt (nicht ueber eine eigene, per Parameter umschaltbare Klasse) in dieser Basisregel deklariert ist. Zentral ueber dieselben, von MudBlazor selbst erzeugten Klassen ueberschrieben statt an den 40 betroffenen und jeder kuenftigen Aufrufstelle einzeln DropShadow="false" zu setzen -- gleiches Muster wie die Pastellpille aus Issue 6655 oben. Deckt sich mit der Design-Vorgabe "kein schattenbasiertes Design", die fuer Flaechen bereits in Issue 6652 auf Rahmen statt Schatten umgestellt wurde; Schaltflaechen selbst tragen laut Vorgabe ohnehin keinen eigenen Rahmen (Vollton- bzw. zurueckhaltende Flaeche), daher hier reines Entfernen des Schattens ohne Rahmenersatz. Der deaktivierte Zustand (.mud-button-filled:disabled) deklariert in der Bibliothek bereits box-shadow:none und bleibt unangetastet. */ .mud-button-filled, .mud-button-filled:hover, .mud-button-filled:focus-visible, .mud-button-filled:active { box-shadow: none; } /* User Story 7082 (ADR 7082-A bis 7082-D): gemeinsame Grundlage fuer bildschirmhohe Tabellen mit eigener vertikaler Scrollbar -- gilt fuer Wochenmatrix und Tagesansicht gleichermassen und ist zugleich die Grundlage, auf der Story 7081 (einheitliches Tabellendesign) aufsetzt. Bewusst hier statt in einer bauteilgebundenen .razor.css: die Regel muss auch das von MudTable selbst erzeugte Markup der Tagesansicht (.mud-table, .mud-table-container) erreichen -- eine bauteilgebundene Formatvorlage trifft dieses Markup lautlos nicht. */ /* ADR 7082-A: Seitenwurzel als Flex-Spalte fester Hoehe -- die dynamische Ansichtsfensterhoehe abzueglich der Kopfleistenhoehe (--mud-appbar-height, von MudThemeProvider gesetzt) und der senkrechten Raender des Inhaltsbehaelters (MudContainer Class="my-4" in MainLayout.razor, 16px oben + 16px unten = 2rem). Unterhalb 600px zusaetzlich der dort bestehende untere Freiraum des Inhaltsbereichs (ADR 6576-H, 80px fuer den fest positionierten Feedback-Ausloeser). Kein JavaScript, keine Groessenbeobachtung -- alles oberhalb der Tabelle (Werkzeugleiste, Hinweise, Legende) bleibt ein gewoehnliches, nicht schrumpfendes Flex-Element, die Resthoehe fuer die Tabelle ergibt sich aus dem Flex-Ausgleich. */ .ec-scrollbereich-seite { display: flex; flex-direction: column; height: calc(100dvh - var(--mud-appbar-height) - 2rem); /* ADR 7082-B: Mindesthoehe als Rueckfallebene -- unterhalb dieser Schwelle scrollt wieder die Seite, damit der Tabellenbereich nicht auf wenige Pixel zusammengedrueckt wird (AC5). Eine gewaehlte Gestaltungsgroesse, keine Herleitung: reicht fuer Kopfzeile plus einige Zeilen. */ min-height: 320px; } @media (max-width: 599px) { .ec-scrollbereich-seite { height: calc(100dvh - var(--mud-appbar-height) - 2rem - 80px); } } /* ADR 7082-B: Bildlaufbereich -- schrumpfendes, nicht wachsendes Flex-Element (AC1 und AC3 mit derselben Regel: bei wenigen Zeilen bleibt die Inhaltshoehe erhalten, erst bei mehr Inhalt als Resthoehe greift die Begrenzung). min-height:0 hebt die implizite Mindesthoehe eines Flex-Elements auf, sonst waechst die Seitenwurzel ueber ihre feste Hoehe hinaus und die Seite scrollt doch wieder. In der Wochenmatrix ist dieselbe Klasse zugleich der scrollende Behaelter (.wl-matrix-scroll, eigenes Markup); in der Tagesansicht sitzt dazwischen noch der von MudTable erzeugte Aussenbehaelter (.mud-table, ueber MudTable.Class hierher markiert) -- er wird darueber selbst zur Flex-Spalte und gibt das eigentliche Scrollen an sein Kind .mud-table-container weiter (ADR 7082-C, ueber MudTable.ContainerClass="ec-scrollbereich-innen" markiert, siehe unten). */ .ec-scrollbereich-aussen { flex: 0 1 auto; min-height: 0; overflow: auto; } .mud-table.ec-scrollbereich-aussen { /* Das tatsaechliche Scrollen fuehrt hier .mud-table-container (.ec-scrollbereich-innen); die feststehende Kopfzeile (FixedHeader) ist an diesen Behaelter gebunden (ADR 7082-C) -- ein zweiter Bildlauf auf .mud-table selbst wuerde sie davon entkoppeln. */ display: flex; flex-direction: column; overflow: visible; } .ec-scrollbereich-innen { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Issue 7303, ADR 7301-B/ADR 7301-C: dieselbe Rollenverteilung fuer das Rasterbauteil. Das Wurzelelement des Rasters heisst .mud-data-grid statt .mud-table, traegt aber denselben inneren Bildlaufbehaelter (.mud-table-container) und dieselbe an ihn gebundene feststehende Kopfzeile. Ohne diese Regel uebernaehme das Rasterwurzelelement selbst den Bildlauf (overflow aus .ec-scrollbereich-aussen), womit die Kopfzeile vom tatsaechlich bewegten Behaelter entkoppelt waere -- genau der Fehlfall, den ADR 7301-D D fuer einen zusaetzlichen aeusseren Behaelter beschreibt. Das Rasterbauteil kennt keinen eigenen Klassenparameter fuer seinen Bildlaufbehaelter, deshalb wird dieser ueber die von der Bibliothek erzeugte Klasse angesprochen statt ueber einen gesetzten Marker. */ .mud-data-grid.ec-scrollbereich-aussen { display: flex; flex-direction: column; overflow: visible; } .mud-data-grid.ec-scrollbereich-aussen > .mud-table-container { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Issue 7303, ADR 7301-C A/C2: fuellende Auspraegung des Bildlaufbereichs -- Zusatzmerkmal neben dem gemeinsamen, gebildet als Verbundselektor aus beiden Merkmalen statt ueber die Stelle in der Datei (ADR 7301-C C2). Der Bereich behaelt seine Hoehe unabhaengig von der Zeilenzahl, darunter bleibt Leerflaeche; Bedienelemente unterhalb der Tabelle sitzen dadurch immer an derselben Stelle. Die bereits bestehenden, schrumpfenden Ansichten bleiben unberuehrt, da sie das Zusatzmerkmal nicht tragen. Die Mindesthoehe als Rueckfallebene fuer kleine Ansichtsfenster bleibt bewusst ausserhalb dieses Merkmals: sie ist eine gewaehlte Gestaltungsgroesse, die von der Zeilenhoehe der jeweiligen Ansicht abhaengt, und wird deshalb je Ansicht mit benanntem Grund gesetzt (ADR 7301-C C, ADR 7283-C E). */ .ec-scrollbereich-aussen.ec-scrollbereich-fuellend { flex: 1 1 auto; } /* User Story 7283, ADR 7283-C E in Verbindung mit ADR 7301-C C: ansichtseigene Mindesthoehe der Feedback-Uebersicht -- bewusst hier statt am gemeinsamen Zusatzmerkmal, weil sie von der Zeilenhoehe genau dieser Ansicht abhaengt. Der benannte Grund fuer den hoeheren Wert: die Zeilen dieser Uebersicht sind durch Dringlichkeitskennzeichnung, Bildkennzeichnung, Aktionsmenue und mehrzeilige Zustellfehlertexte deutlich hoeher als die der uebrigen Ansichten, und ueber dem Tabellenbereich steht neben der Ueberschrift eine Filterleiste mit acht Bedienelementen, die auf schmalen Bildschirmen mehrzeilig umbricht. Greift die Mindesthoehe, ueberzieht der Abschnitt den sichtbaren Bereich und die Seite scrollt; das ist hier unschaedlich, da auf Seitenebene kein Ueberlauf unterdrueckt wird (ADR 7283-B B, ADR 7301-B E). */ .ec-scrollbereich-fuellend.ec-feedback-uebersicht { min-height: 300px; } /* Bug 7350: liegt die Blaetterleiste innerhalb der Tabellenflaeche -- also als Geschwister des Bildlaufbehaelters unterhalb desselben Wurzelelements --, ist sie ein weiteres Kind der Spalte, die aus dem Bildlaufbereich entsteht. Ohne diese Regel duerfte sie schrumpfen (Flex-Vorgabewert fuer die Schrumpfbarkeit ist 1) und wuerde bei knapper Hoehe gestaucht, waehrend der Bildlaufbehaelter daneben weiter waechst; sichtbar war das als teilweise abgeschnittene, nicht erreichbare Leiste. Sie behaelt deshalb ihre Inhaltshoehe und beteiligt sich weder am Wachsen noch am Schrumpfen -- die Resthoehe fuer den Bildlaufbehaelter ergibt sich daraus von selbst. Gilt fuer beide Tabellenbauteile, damit die Zusicherung unabhaengig davon traegt, welches eine Ansicht verwendet. */ .mud-table.ec-scrollbereich-aussen > .mud-table-pagination, .mud-data-grid.ec-scrollbereich-aussen > .mud-table-pagination { flex: 0 0 auto; } /* User Story 7081 (ADR 7081-A bis 7081-D): gemeinsame Gestaltungsmerkmale fuer die Tabellen von Wochenmatrix und Tagesansicht -- benannt nach ihrer Rolle (Kopfzellengrund/-schrift, Zellrahmen, Zellpolsterung, Grund der ersten Spalte, Wochenendkennzeichnung Kopf-/Datenzelle), nicht nach Farbwert oder Ansicht (ADR 7081-A D). Bewusst hier statt in einer bauteilgebundenen .razor.css: dieselbe Begruendung wie beim Bildlaufbereich aus Story 7082 -- die Merkmale muessen auch das von MudTable selbst erzeugte Markup der Tagesansicht (MudTh/MudTd) erreichen, das eine bauteilgebundene Formatvorlage lautlos nicht trifft. Kein gemeinsames Tabellenbauteil (ADR 7081-A B): die Wochenmatrix bleibt eine eigene Tabelle (ADR 5825-F), die Tagesansicht bleibt eine MudTable -- beide beziehen die Werte ueber diese Merkmale statt sie auszuschreiben (ADR 7081-A C), Wochenmatrix.razor.css fuehrt dieselben Custom Properties. */ :root { /* ADR 7081-B A: aus der Themenrolle Primary (EcTheme.cs, #0D4F8C) statt eines ausgeschriebenen Werts -- dieselbe, fuer die Wochenmatrix bereits gepruefte Kombination (NFR Barrierefreiheit). */ --ec-tabelle-kopf-grund: var(--mud-palette-primary); --ec-tabelle-kopf-schrift: var(--mud-palette-primary-text); /* ADR 7081-B B: ein Wert fuer den Zellrahmen in beiden Ansichten -- die Themenrolle LinesDefault (EcTheme.cs, #CBD2DC), nicht die von MudBlazor intern gefuehrte Tabellen-Variable (--mud-palette-table-lines), die einen eigenen, unabhaengigen Bibliothekswert traegt. */ --ec-tabelle-rahmen: var(--mud-palette-lines-default); --ec-tabelle-erste-spalte-grund: var(--mud-palette-surface); /* ADR 7081-B A/C: abgesetzte, dunklere Toenung derselben Marineblau-Familie wie die Kopfzellenrolle -- Wert unveraendert aus dem Basisdaten-Prototyp uebernommen (rTag(), Wochenend-Kopfzelle: background:#1A3A5C). Keine Themenrolle bildet diesen abgesetzten Zustand ab, deshalb als eigenes Merkmal benannt statt in EcTheme.cs aufgenommen (nur diese zwei Ansichten fuehren ihn). */ --ec-tabelle-wochenende-kopf-grund: #1A3A5C; /* ADR 7081-B A/C: unveraenderter neutraler Grauton der Wochenend-Datenzelle -- entspricht bereits dem Prototyp (rTag()) und bleibt inhaltlich unveraendert, wird hier lediglich als Merkmal benannt statt an mehreren Stellen ausgeschrieben zu bleiben. */ --ec-tabelle-wochenende-zelle-grund: #F0F0F0; /* ADR 7081-D A: aus der Wochenmatrix-Datenzelle (.wl-cell) uebernommen -- einzige, gemeinsam verwendete Zellpolsterung (AC2), auch fuer die Kopfzeile der Tagesansicht (siehe unten); die eigenen, davon abweichenden Kopf-/Zeilenbeschriftungs-Polsterungen der Wochenmatrix betreffen ausschliesslich ihre eigene Tabelle und bleiben unangetastet (ADR 7081-A C). */ --ec-tabelle-zelle-polsterung: 2px 4px; /* ADR 7322-B: Masse der gestapelten Darstellung auf schmalen Anzeigen -- als benannte Merkmale neben den uebrigen Tabellenmerkmalen statt als Zahlen im Regeltext (AC4). Sie wirken ausschliesslich unterhalb der Umbruchschwelle; der breite, tabellarische Zustand bezieht seine Werte unveraendert aus den Merkmalen darueber. */ /* Breite der Beschriftungsspalte: fester Anteil mit unterer und oberer Schranke (ADR 7322-B). Ein reiner Anteil liesse die Spalte auf breiteren Anzeigen unnoetig wachsen, eine feste Laenge liesse dem Wert auf einem 360-px-Geraet zu wenig Platz. Bewusst eine einzige Laengenangabe (clamp) statt minmax(): minmax() bemaesse die Spur am Inhalt und fiele damit je Zelle anders aus -- die gemeinsame Fluchtlinie ueber alle Zeilen entstuende gerade nicht (AC2). Der Anteil bezieht sich auf die Zellbreite, die fuer alle Zellen einer Tabelle gleich ist (.mud-table-root fuehrt width:100%). */ --ec-tabelle-stapel-beschriftung-breite: clamp(6rem, 30%, 11rem); --ec-tabelle-stapel-spalten-abstand: 12px; /* Enger als der Bibliothekswert des dichten Zustands (6px 16px): ein Datensatz belegt gestapelt so viele Zeilen, wie er Spalten hat -- die Hoehe je Zeile ist der Hebel. Die waagerechte Polsterung bleibt beim Bibliothekswert. */ --ec-tabelle-stapel-zelle-polsterung: 4px 16px; --ec-tabelle-stapel-feldlinie: 1px; --ec-tabelle-stapel-satzgrenze: 2px; /* ADR 7322-B: Satzgrenze aus der Themenrolle Primary -- dieselbe Rolle, die im breiten Zustand die Kopfzeile fuellt. Der gestapelte Zustand bekommt damit das Gliederungsmerkmal zurueck, das ihm mit der ausgeblendeten Kopfzeile verlorengeht. Die duenne Feldlinie bezieht ihre Farbe aus dem bereits vorhandenen Merkmal --ec-tabelle-rahmen (ADR 7081-B B). */ --ec-tabelle-stapel-satzgrenze-farbe: var(--mud-palette-primary); } /* ADR 7081-C A (korrigiert durch Bug 7143): Zellrahmen und Zellpolsterung fuer alle Zellen der Tagesansicht (Kopf- wie Datenzellen) -- ueber .ec-scrollbereich-innen (ADR 7082-C, bereits auf dem Bildlaufbehaelter der Tagesansicht gesetzt) statt eines zusaetzlichen neuen Markers. Der urspruengliche Selektor (0-2-0) wurde von MudBlazor.min.css' eigener Regel ".mud-table-dense * .mud-table-row .mud-table-cell" (0-3-0, aktiv weil Dense="true" gesetzt ist) uebertrumpft -- bei ungleicher Spezifitaet ist die Ladereihenfolge wirkungslos, siehe Bug 7143. Deshalb hier ueber den zusaetzlichen, tatsaechlich auf demselben Wurzelelement vorhandenen Anker .mud-table-dense (compound mit .ec-scrollbereich-aussen) auf 0-4-0 angehoben. Eingegrenzt durch Issue 7303: der Bildlaufbereich allein ist kein Erkennungsmerkmal DIESER Ansicht -- er ist die gemeinsame Schicht, die laut ADR 7301-B A jede bildschirmhohe Tabelle verwendet. Ohne Eingrenzung uebernaehme jede weitere solche Ansicht diese Zellpolsterung und Rahmenfarbe ungewollt mit, sobald sie ebenfalls dicht dargestellt wird (aufgefallen bei der Umstellung der Meeting-Protokolle). :has() prueft deshalb zusaetzlich auf die Kopfzeilenkennzeichnung, die ausschliesslich diese Ansicht setzt und auf die sich die Kopfzeilenregel darunter ohnehin schon stuetzt; die Spezifitaet steigt dadurch auf 0-5-0 und bleibt damit weiterhin ueber der konkurrierenden Bibliotheksregel. */ .mud-table-dense.ec-scrollbereich-aussen:has(.ec-tabelle-kopfzeile) .ec-scrollbereich-innen .mud-table-cell { padding: var(--ec-tabelle-zelle-polsterung); border-bottom-color: var(--ec-tabelle-rahmen); } /* ADR 7081-C A (korrigiert durch Bug 7143): Kopfzeilengestaltung der Tagesansicht wird ueber den dafuer vorgesehenen Klassenparameter des Bausteins (MudTable.HeaderClass) gesetzt statt ueber Style-Zeichenketten je Zelle. Der urspruengliche Selektor ".ec-tabelle-kopfzeile .mud-table-cell" (0-2-0) wurde faelschlich als gleich spezifisch wie MudBlazor.min.css' Kopfzeilenregeln eingeschaetzt und sollte allein durch die spaetere Ladeposition (App.razor) gewinnen. Tatsaechlich sind die konkurrierenden Regeln hoeher spezifisch: ".mud-table-root .mud-table-head .mud-table-cell" (0-3-0, Schriftfarbe) sowie ".mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell" (0-4-0, Hintergrund, aktiv weil FixedHeader="true" gesetzt ist) -- bei hoeherer Spezifitaet ist die Ladereihenfolge wirkungslos (Bug 7143). Deshalb hier ueber die zusaetzlichen, tatsaechlich auf dem Wurzelelement vorhandenen Anker .mud-table-sticky-header (compound mit .ec-scrollbereich-aussen) sowie .ec-scrollbereich-innen auf 0-5-0 angehoben -- schlaegt beide konkurrierenden Regeln eindeutig, unabhaengig von der Ladereihenfolge. */ .mud-table-sticky-header.ec-scrollbereich-aussen .ec-scrollbereich-innen .ec-tabelle-kopfzeile .mud-table-cell { background-color: var(--ec-tabelle-kopf-grund); color: var(--ec-tabelle-kopf-schrift); } /* ADR 7081-C A (korrigiert durch Bug 7143): abweichende Kennzeichnung einzelner Kopf-/Datenzellen ueber deren eigenen Klassenparameter (MudTh/MudTd.Class) -- eine Klasse hoehere Spezifitaet (0-6-0) als die Kopfzeilenregel oben (0-5-0), damit die Wochenend-Toenung der Kopfzelle sie gezielt ueberschreibt, und zugleich weiterhin ueber der konkurrierenden MudBlazor-Hintergrundregel (0-4-0) liegt. */ .mud-table-sticky-header.ec-scrollbereich-aussen .ec-scrollbereich-innen .ec-tabelle-kopfzeile .mud-table-cell.ec-tabelle-wochenende-kopf { background-color: var(--ec-tabelle-wochenende-kopf-grund); } .mud-table-cell.ec-tabelle-wochenende-zelle { background-color: var(--ec-tabelle-wochenende-zelle-grund); } /* ADR 7081-C E: die erste Spalte (Mitarbeiter) der Tagesansicht erhaelt den gemeinsamen Grundton, nicht jedoch das Fixierungsverhalten der Wochenmatrix -- das bleibt deren eigene, bereits begruendete Mechanik (ADR 6682-A bis F). Ausschliesslich auf der Datenzelle gesetzt, nicht auf der Kopfzelle -- deren Kopfzelle bleibt wie alle anderen Kopfzellen marineblau (Prototyp-Vorbild .wt th.fx). */ .mud-table-cell.ec-tabelle-erste-spalte { background-color: var(--ec-tabelle-erste-spalte-grund); } /* User Story 7307, ADR 7307-F F3/F4: die Tagesansicht kennzeichnet den an einem Tag angesetzten Betrag mit denselben Stufen wie die Wochenmatrix. Die Toenungen stehen deshalb hier als gemeinsame Merkmale und nicht ein zweites Mal ausgeschrieben -- dasselbe Vorgehen wie bei den uebrigen gemeinsamen Tabellenmerkmalen (ADR 7081-A C). Die Werte sind unveraendert die der Wochenmatrix (Wochenmatrix.razor.css, .wl-status-*), die sie seither von hier bezieht. Die Stufe ist nicht allein ueber diese Toenung erkennbar: das Textkuerzel steht im Zellinhalt, der ausgeschriebene Status im zugaenglichen Namen, die Aufloesung in der Legende (F4). */ :root { --ec-status-rot-grund: #FDEDED; --ec-status-rot-schrift: #C0392B; --ec-status-gelb-grund: #FEF6E0; --ec-status-gelb-schrift: #7A5E00; --ec-status-gruen-grund: #EAF6EF; --ec-status-gruen-schrift: #0F6E56; --ec-status-neutral-grund: #F4F6F9; --ec-status-neutral-schrift: #5B6675; } .ec-status-rot { background-color: var(--ec-status-rot-grund); color: var(--ec-status-rot-schrift); } .ec-status-gelb { background-color: var(--ec-status-gelb-grund); color: var(--ec-status-gelb-schrift); } .ec-status-gruen { background-color: var(--ec-status-gruen-grund); color: var(--ec-status-gruen-schrift); } .ec-status-neutral { background-color: var(--ec-status-neutral-grund); color: var(--ec-status-neutral-schrift); } /* Die Tagesangabe steht unterhalb der Projektkuerzel derselben Zelle (Umsetzungsvorschlag der User Story 7307) und traegt die Toenung ihrer Stufe. Eigene Zeile statt eines weiteren Kuerzels daneben: sie gilt fuer den Tag als Ganzes, nicht fuer ein einzelnes Projekt. */ .ec-tagesbetrag { display: block; margin-top: 2px; border-radius: 3px; padding: 1px 2px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } /* AC11: die geltende Tagesobergrenze steht einmal je Zeile unter dem Namen, zurueckgenommen gesetzt -- sie ist Bezugswert, nicht Zeilenbeschriftung. */ .ec-tagesobergrenze { font-size: 0.7rem; font-weight: 400; color: var(--ec-status-neutral-schrift); } /* Issue 7322 (ADR 7322-A bis 7322-C): Bauform der gestapelten Zeile auf schmalen Anzeigen. Unterhalb der Umbruchschwelle blendet die Bibliothek die Kopfzeile aus und macht aus jeder Datenzelle eine eigene Zeile aus Beschriftung und Wert. Ihre ausgelieferte Formatvorlage legt diese Zelle als Flex-Behaelter mit justify-content:space-between aus -- Beschriftung am linken, Wert am rechten Rand. Bei 768 px Anzeigebreite liegen dadurch mehrere hundert Pixel Leerflaeche zwischen einer Beschriftung und dem Wert, der zu ihr gehoert; zwischen den Feldern eines Datensatzes verlaeuft keine Linie. Der Datensatz liest sich als lose Karte statt als Tabelle. ADR 7322-A: die Bauform steht an genau EINER Stelle und wirkt von dort auf jede Tabelle, die ueberhaupt stapelt. Kein Klassen- oder Formatvorlagen-Parameter je Aufrufstelle -- eine an sechsunddreissig Stellen zu wiederholende Angabe wird an einigen vergessen, eine Regel, die aus der von der Bibliothek selbst gesetzten Klasse .mud-sm-table folgt, kann nicht vergessen werden. Der Anwendungsbereich begrenzt sich dadurch selbst: eine Tabelle mit Breakpoint.None stapelt nicht und bleibt unberuehrt. ADR 7322-C B -- die Spezifitaet ist Bedingung, nicht Vorsorge: die konkurrierende Bibliotheksregel ".mud-sm-table.mud-table-dense .mud-table-cell" (0-3-0) traegt die Polsterung des gestapelten Zustands und ist an allen Tabellen aktiv, da alle Dense fuehren; die Regel fuer die Satzgrenze (".mud-sm-table .mud-table-row .mud-table-cell:last-child") liegt bei 0-4-0. Bei ungleicher Spezifitaet ist die spaetere Ladeposition von app.css wirkungslos -- dieselbe Lage, an der Bug 7143 bereits einmal gescheitert ist. Deshalb hier ueber die zusaetzlichen, tatsaechlich vorhandenen Anker .mud-table-root und .mud-table-body auf 0-6-0 angehoben. Die Bindung an .mud-table-body haelt die Regeln zugleich vom Kopf- und Fussbereich fern (im gestapelten Zustand ohnehin ausgeblendet); die Blaetterleiste liegt ausserhalb der Tabelle und bleibt unberuehrt (AC7). */ @media (max-width: 960px) { /* ADR 7322-B: zweispaltiges Raster statt Flex mit Randverteilung. Alle Zellen einer Tabelle haben dieselbe Breite, der Anteil ergibt damit ueberall denselben Wert -- Beschriftungen und Werte aller Zeilen beginnen an derselben Stelle (AC2). minmax(0, 1fr) statt 1fr, damit ein langer Wert die Spalte umbricht statt die Tabelle zu verbreitern. ADR 7322-C D: von der Bibliothek im gestapelten Zustand ausgeblendete Zellen (.mud-table-cell-hide fuehrt visibility:collapse, height/padding/margin 0) werden ausgenommen, damit ihnen Polsterung und Linie nicht wieder zugewiesen werden. Im Bestand trifft das keinen Fall -- die Ausnahme steht, weil ihr Fehlen erst beim erstmaligen Einsatz des zugehoerigen Parameters auffiele, und dann als schwer auffindbarer Darstellungsfehler. */ .mud-sm-table .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(.mud-table-cell-hide) { display: grid; grid-template-columns: var(--ec-tabelle-stapel-beschriftung-breite) minmax(0, 1fr); column-gap: var(--ec-tabelle-stapel-spalten-abstand); justify-content: start; padding: var(--ec-tabelle-stapel-zelle-polsterung); border-bottom: var(--ec-tabelle-stapel-feldlinie) solid var(--ec-tabelle-rahmen); } /* Der Abstand zwischen Beschriftung und Wert kommt jetzt aus dem Spaltenabstand des Rasters. Die zusaetzliche rechte Polsterung, die die Bibliothek der Beschriftung mitgibt, wuerde sich zu ihm addieren und die Beschriftungsspalte von innen verengen. ADR 7969-B B5: die Beschriftungsspalte hat eine feste Breite. Ein einzelnes langes Wort (etwa "Softwarekompetenzen" bei 480 px) ist breiter als sie und ragte ohne Umbruch ueber den Spaltenabstand in die Wertspalte; ein kurzer Wert darunter war vollstaendig verdeckt, die Zelle wirkte leer. Die Beschriftung bricht deshalb notfalls innerhalb des Wortes um, Beschriftungen und Werte aller Zeilen beginnen weiterhin an derselben Stelle. */ .mud-sm-table .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(.mud-table-cell-hide)::before { padding-right: 0; padding-inline-end: 0; overflow-wrap: anywhere; } /* ADR 7322-B: Satzgrenze -- doppelt so stark wie die Feldlinie und in der Primaerrolle, damit sie neben dem Feldraster erkennbar bleibt (AC3). Die Bibliothek setzt hier ihre eigene 1-px-Linie (0-4-0); diese Regel liegt bei 0-7-0 und schlaegt zugleich die Feldlinie oben. */ .mud-sm-table .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(.mud-table-cell-hide):last-child { border-bottom: var(--ec-tabelle-stapel-satzgrenze) solid var(--ec-tabelle-stapel-satzgrenze-farbe); } /* Eine Zelle, die sich ueber mehrere Spalten erstreckt, ist kein Paar aus Beschriftung und Wert, sondern traegt einen Block (Gruppenkopf einer gruppierten Tabelle, aufgeklappter Detailbereich einer Zeile). Ein zweispaltiges Raster wuerde diesen Block auf den Rest der Zellbreite einschnueren -- gerade auf schmalen Anzeigen, wo er den meisten Platz braucht. Deshalb eine Spalte ueber die volle Breite: die Beschriftung steht dann als eigene Zeile ueber dem Block statt neben ihm. Betrifft ausschliesslich das Raster; Polsterung, Feldlinie und Satzgrenze bleiben dieselben. */ .mud-sm-table .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(.mud-table-cell-hide)[colspan] { grid-template-columns: minmax(0, 1fr); } } /* Issue 7091, ADR 7091-B: Zustandsabstufung der Registerkarten-Reiter auf gefuellter Kopfzeile -- haengt an der von MudBlazor selbst erzeugten Klasse .mud-tabs-tabbar-primary (nicht an der allgemeinen .mud-tabs-tabbar), damit eine Kopfzeile in einer anderen Farbrolle unberuehrt bleibt. Die Fuellung selbst liefert die Bibliothek (Parameter Color="Color.Primary", ADR 7091-A) -- hier wird ausschliesslich die auf gefuelltem Grund fehlende Abstufung zwischen inaktivem, ueberfahrenem/fokussiertem und aktivem Reiter ergaenzt. */ .mud-tabs-tabbar-primary .mud-tab { color: rgba(255, 255, 255, 0.72); } .mud-tabs-tabbar-primary .mud-tab:hover, .mud-tabs-tabbar-primary .mud-tab:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.07); } .mud-tabs-tabbar-primary .mud-tab.mud-tab-active { background-color: rgba(255, 255, 255, 0.07); } /* ADR 7091-B, E: sichtbarer Fokusrahmen auf der neuen dunklen Flaeche -- der bisher wirksame Indikator war nicht dafuer ausgelegt. */ .mud-tabs-tabbar-primary .mud-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } /* ADR 7091-B, D: Unterstrich des aktiven Reiters in einem aufgehellten Ton der Interaktionsfarbe -- entspricht keiner Palettenrolle, die naechstliegenden Rollen erreichen auf der Kopfzeilenflaeche nicht die geforderten 3:1 (Kontrastnachweis siehe Wiki-Architekturseite zu Issue 7091). */ .mud-tabs-tabbar-primary .mud-tab-slider { background-color: #4DA3FF; } /* Issue 7129, ADR 7129-A bis 7129-C: sichtbarer Zwischenraum zwischen der Kopfzeile eines Registerkarten-Bausteins und seinem Panelbereich. Der Abstand gehoert dem Behaelter, der beide anordnet, und nicht einem seiner Teile: .mud-tabs ist ein Flex-Behaelter mit genau zwei Kindern (Kopfzeile, Panelbereich), dessen Hauptachse die Lage der Kopfzeile abbildet. Als Zwischenraum gesetzt wirkt der Abstand deshalb in der jeweils richtigen Richtung, ohne Fallunterscheidung nach der Lage und ohne Sonderregel fuer die Bauformen mit umgekehrter oder senkrechter Achse (ADR 7129-A). Bewusst an der allgemeinen Klasse .mud-tabs und nicht an der Farbrolle .mud-tabs-tabbar-primary, an der die Zustandsabstufung der Reiter haengt (ADR 7091-B): der Abstand ist eine Eigenschaft des Bausteins, nicht seiner Fuellung -- eine anders eingefaerbte Kopfzeile braucht ihn genauso. Weil die Angabe hier und an keiner Aufrufstelle steht, ist sie fuer jede Registerkarte derselben Seite und fuer jede Verwendung zwangslaeufig dieselbe, auch fuer eine kuenftig hinzukommende (ADR 7129-B). 16 px ist die vierte Stufe der Abstandsskala, die im Bestand bereits den Rasterabstand zwischen Karten und die Innenpolsterung des Panelbereichs traegt. Feste Laenge statt eigener Variable, der Wert hat genau einen Verwender (ADR 7129-C). Die Innenpolsterung der Panelbereiche bleibt unveraendert (ADR 7129-D). */ .mud-tabs { gap: 16px; } /* Issue 7208, ADR 7208-A bis 7208-D: app-weite Kennzeichnung nicht editierbarer Formularfelder. Ein Formularfeld, das aus irgendeinem Grund nicht bearbeitet werden kann, wird deaktiviert dargestellt -- der reine Schreibschutz entfaellt als Mittel der Kennzeichnung, weil MudBlazor fuer Text-, Zahlen-, Datums- und Zeitfelder dafuer keine einzige Gestaltungsregel liefert und bei Auswahlfeldern, Kontrollkaestchen, Optionsfeldern und Schaltern nur den Mauszeiger aendert. Der von der Bibliothek gelieferte deaktivierte Zustand wird dabei bewusst NICHT unveraendert uebernommen: sein Werttext (--mud-palette-text-disabled, auf Weiss #9E9E9E) erreicht nur 2,68:1 und liegt unter der Schwelle 4,5:1 fuer Normaltext, die dieses Projekt seit Bug 6664 einhaelt. Die Aussage traegt deshalb die Flaeche, nicht die Unlesbarkeit des Werts. Hebel ist bewusst diese Datei und nicht die Palette in EcTheme.cs: TextDisabled/ActionDisabled wirkten auch auf deaktivierte Schaltflaechen und Bedienelemente, deren Darstellung unveraendert bleibt. Die Aufrufstellen setzen ausschliesslich den Zustandsschalter, keine Gestaltung. */ :root { --ec-nicht-editierbar-flaeche: #EEF2F7; --ec-nicht-editierbar-text: #5B6880; --ec-nicht-editierbar-rahmen: #CBD2DC; /* Schloss-Symbol als zweiter, nicht farblicher Kanal (ADR 7208-C). Identisch mit dem im Bestand bereits eingefuehrten Zeichen (Icons.Material.Filled.Lock, ADR 6680-E), hier als Flaechenbild eingebunden und damit fuer Vorlesewerkzeuge nicht gesondert angeboten -- den Zustand traegt bereits das native disabled-Merkmal, eine zweite Ansage waere eine Wiederholung. */ --ec-nicht-editierbar-schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235B6880'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); } /* ADR 7208-B: Flaeche traegt die Aussage, Werttext auf 5,00:1 angehoben (gegenueber 12,6:1 im Ruhezustand sichtbar gedaempft und zugleich sicher lesbar). */ .mud-input.mud-disabled { background-color: var(--ec-nicht-editierbar-flaeche); border-radius: var(--mud-default-borderradius); color: var(--ec-nicht-editierbar-text); } /* Die gefuellte Variante legt sonst einen schwarzen Schleier darueber -- dieselbe Flaeche wie bei allen anderen Varianten, damit es nur eine Bauform gibt. */ .mud-input.mud-input-filled.mud-disabled { background-color: var(--ec-nicht-editierbar-flaeche); } /* Beschriftung, Hilfetext und Bedienzeichen am Feld sind bedeutungstragend und unterliegen derselben Kontrastschwelle wie der Werttext. */ .mud-input.mud-disabled > .mud-input-adornment, .mud-input.mud-disabled > .mud-input-adornment .mud-icon-root, .mud-input.mud-disabled > .mud-input-adornment .mud-button-root, .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled, .mud-input-helper-text.mud-disabled { color: var(--ec-nicht-editierbar-text); } /* Der Rahmen bleibt durchgezogen und in der Rahmenfarbe des Ruhezustands: ein gedaempfter oder gepunkteter Rahmen liest sich als Defekt, genau der Eindruck, den die Kennzeichnung vermeiden soll. Die Unterscheidung leisten Flaeche, Textton und Symbol. */ .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border { border-color: var(--ec-nicht-editierbar-rahmen); border-style: solid; } .mud-input.mud-input-underline.mud-disabled::before, .mud-input.mud-input-filled.mud-input-underline.mud-disabled::before { border-bottom-style: solid; border-bottom-color: var(--ec-nicht-editierbar-rahmen); } /* ADR 7208-C A/B: das Schloss steht immer am rechten Feldende. Als letztes Flex-Element des Eingabefeldes gesetzt, damit es hinter einem vorhandenen Bedienzeichen (Aufklapp-Pfeil, Kalendersymbol, Leeren-Schaltflaeche) steht und dieses weder ueberdeckt noch verdraengt. */ .mud-input.mud-disabled::after { content: ""; flex: 0 0 auto; align-self: center; width: 18px; height: 18px; margin-inline-start: 8px; background-image: var(--ec-nicht-editierbar-schloss); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } /* Ohne eigenes Bedienzeichen traegt das Feld keinen rechten Innenabstand -- das Schloss laege sonst am Rahmen an. Mit Bedienzeichen liefert die Bibliothek denselben Abstand bereits. */ .mud-input.mud-disabled:not(.mud-input-adorned-end) { padding-inline-end: 14px; } /* Issue 7933: die ungeschrumpfte Beschriftung eines umrandeten Datums- oder Zeitfeldes endet vor dessen Bedienzeichen. Die Bibliothek begrenzt sie nur auf die Feldbreite (100% - 14px), dadurch laeuft eine lange Beschriftung in schmalen Spalten unter das Kalendersymbol. Die Kuerzung selbst (Auslassungspunkte) liefert weiterhin die Bibliothek; hier wird nur die Breite um das Bedienzeichen verringert: Innenabstand rechts 14px plus Symbol 24px, das Beschriftungsfeld endet damit an der linken Symbolkante. Mit Schloss (nicht editierbar, ADR 7208-C) zusaetzlich dessen Abstand 8px und Breite 18px. Geschrumpfte oder fokussierte Beschriftungen bleiben unberuehrt und erscheinen vollstaendig; der zugaengliche Name aendert sich nicht, da nur die Darstellung gekuerzt wird. */ .mud-picker .mud-input.mud-input-outlined.mud-input-adorned-end:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-outlined { max-width: calc(100% - 14px - 38px); } .mud-picker .mud-input.mud-input-outlined.mud-input-adorned-end.mud-disabled:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-outlined { max-width: calc(100% - 14px - 38px - 26px); } /* ADR 7208-C D: Kontrollkaestchen, Schalter und Optionsfelder haben innerhalb des Bedienelements keinen Platz fuer ein Symbol. Bei ihnen setzt derselbe Kanal am Beschriftungstext an: gleicher Textton (5,62:1 auf weisser Oberflaeche, da diese Bausteine keine gedaempfte Flaeche tragen) und dasselbe Schloss-Zeichen unmittelbar hinter dem Text. Die Bibliothek daempft hier bereits, aber auf denselben zu schwachen Wert wie beim Eingabefeld. */ .mud-checkbox.mud-disabled, .mud-checkbox.mud-disabled *, .mud-checkbox .mud-disabled:hover *, .mud-checkbox .mud-disabled:focus-visible *, .mud-checkbox .mud-disabled:active *, .mud-radio.mud-disabled, .mud-radio.mud-disabled *, .mud-radio.mud-disabled > .mud-radio-content, .mud-radio .mud-disabled:hover *, .mud-radio .mud-disabled:focus-visible *, .mud-radio .mud-disabled:active *, .mud-switch.mud-disabled { color: var(--ec-nicht-editierbar-text); } /* Der Schalter fuehrt seine Daempfung mit !important und blendet seine Bahn auf 12 % Deckkraft herunter -- damit waere die Zustandsanzeige (ein/aus) kaum noch ablesbar. Form und Zustandsanzeige bleiben deshalb unveraendert, nur der Farbton wird gedaempft. */ .mud-switch-base.mud-switch-disabled { color: var(--ec-nicht-editierbar-text) !important; } .mud-switch-base.mud-switch-disabled + .mud-switch-track { background-color: var(--ec-nicht-editierbar-text); opacity: .48 !important; } .mud-switch-base.mud-switch-disabled.mud-checked + .mud-switch-track { opacity: .5 !important; } /* Das Schloss steht hinter der Beschriftung, nicht davor: die Leserichtung ist dieselbe wie am Eingabefeld (Bedienelement, Beschriftung, Schloss), und ein vorangestelltes Zeichen laese sich als Teil des Bedienelements. Dass die Schloesser mehrerer untereinander stehender Kontrollkaestchen dadurch nicht buendig untereinander stehen, ist bewusst in Kauf genommen -- das Zeichen gehoert zur Beschriftung, nicht zu einer Spalte. */ label.mud-checkbox.mud-disabled > .mud-typography::after, label.mud-radio.mud-disabled > .mud-typography::after, label.mud-switch.mud-disabled > .mud-typography::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-inline-start: 6px; vertical-align: text-bottom; background-image: var(--ec-nicht-editierbar-schloss); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } /* User Story 7432, ADR 7432-B B3: ein Zugang, der erst nach Erfuellen einer fachlichen Bedingung ausloesbar wird, bleibt sichtbar und wird gesperrt dargestellt. Der gestrichelte Rahmen ist neben dem Schloss-Symbol an der Stelle des sonst gefuehrten Symbols das zweite, nicht farbliche Merkmal der Sperre -- ohne ihn haenge die Unterscheidung allein an der Daempfung, also an der Farbe. Bewusst hier und nicht an der Fundstelle: dieselbe Bauform tragen die Projektuebersicht und die Projectbook-Ansicht, und beide sollen denselben Sachverhalt gleich darstellen. Die Aufrufstellen setzen nur die Klasse, keine Gestaltung. Abgrenzung zu ADR 7208-B: dort ist ein gestrichelter Rahmen fuer nicht editierbare Formularfelder ausdruecklich verworfen, weil er sich am Eingabefeld als Defekt liest. An einer Schaltflaeche, deren Beschriftung eine Handlung ankuendigt, sagt dieselbe Strichelung das Gegenteil aus: die Handlung ist vorgesehen, aber noch nicht verfuegbar. MudBlazor setzt Text- und Rahmenfarbe des gesperrten Zustands mit !important auf --mud-palette-action-disabled(-background); dieselben Toene erreichen nur 2,68:1 und liegen unter der seit Bug 6664 eingehaltenen Schwelle. Der Grund der Sperre muss aber lesbar bleiben, deshalb dieselben beiden Wertmarken wie bei den Formularfeldern (ADR 7208) -- und aus demselben Grund ebenfalls mit !important, sonst bliebe die Bibliotheksregel wirksam. */ .mud-button-root.ec-zugang-gesperrt:disabled { border-style: dashed; border-color: var(--ec-nicht-editierbar-text) !important; color: var(--ec-nicht-editierbar-text) !important; } /* Issue 7703, ADR 7703-D: Verweisdarstellung der Schaltflaechen-Bauform. Ein Bedienelement, dessen Zieladresse fehlen kann, wird nach ADR 7703-A als MudButton gebaut -- der Baustein erzeugt ohne Href ein