) liefert den App-Hintergrund und das App-Scrolling ohne sichtbaren Balken (gescrollt wird normal weiter — wichtig auch für den Handy-Ausschnitt der Mitarbeiteransicht). Neue Employee-Seiten setzen nur diese Klasse; app.css bleibt unangetastet. html/body sind aus scoped CSS nicht erreichbar, daher :has hier global. */ .employee-app-page { background: #f5f5f7; } html:has(.employee-app-page) { scrollbar-width: none; } html:has(.employee-app-page)::-webkit-scrollbar { display: none; } /* Profilbilder: An allen Avatar-Stellen wird bei gesetztem Bild ein mit derselben CSS-Klasse wie der Initialen-Span gerendert (Größe/Radius kommen aus der jeweiligen Klasse). Global hier, weil die Stellen über viele scoped-CSS-Dateien verteilt sind. */ img[src^="/api/user-avatar/"] { object-fit: cover; padding: 0; } /* ========== Rich-Text-Inhalte (.rtc) ========== Gemeinsame Styles für HTML aus dem RichTextEditor — genutzt von der Editor-Fläche selbst (RichTextEditor: class="rte-area rtc") und allen Anzeige-Stellen (RichTextView: Schwarzes Brett, Termin-Notizen). Global statt scoped, weil der Inhalt zur Laufzeit als MarkupString/ contenteditable entsteht und Blazor-Scope-Attribute dort nicht greifen. Erlaubte Tags: siehe RichTextSanitizer (Services/Infrastructure). */ .rtc { font-size: 14px; line-height: 1.55; color: #16181c; overflow-wrap: anywhere; } .rtc > :first-child { margin-top: 0; } .rtc > :last-child { margin-bottom: 0; } .rtc h1 { margin: 8px 0 4px; font-size: 18px; font-weight: 800; color: #16181c; line-height: 1.25; } .rtc h2 { margin: 8px 0 4px; font-size: 16px; font-weight: 800; color: #16181c; line-height: 1.3; } .rtc h3 { margin: 7px 0 3px; font-size: 14px; font-weight: 800; color: #16181c; } .rtc p { margin: 5px 0; } .rtc ul, .rtc ol { margin: 5px 0; padding-left: 22px; } .rtc li { margin: 2px 0; } .rtc strong, .rtc b { font-weight: 800; color: #16181c; } .rtc a { color: #16181c; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .rtc blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid #d1d1d6; color: #6c7077; } .rtc hr { margin: 12px 0; border: 0; border-top: 2px solid #c7c7cc; border-radius: 999px; } /* Checkliste: ul[data-checklist] > li[data-checked] — Kästchen als ::before/::after, Toggle passiert per JS (Editor bzw. RichTextView). */ .rtc ul[data-checklist] { list-style: none; padding-left: 2px; } .rtc ul[data-checklist] li { position: relative; padding-left: 27px; margin: 4px 0; } .rtc ul[data-checklist] li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border: 2px solid #c7c7cc; border-radius: 6px; background: #fff; box-sizing: border-box; } .rtc ul[data-checklist] li[data-checked="true"]::before { background: #16181c; border-color: #16181c; } .rtc ul[data-checklist] li[data-checked="true"]::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .rtc ul[data-checklist] li[data-checked="true"] { color: #80858d; text-decoration: line-through; } /* Abhakbare Anzeige (RichTextView mit Toggle): Kästchen als klickbar markieren. */ .rtc--togglable ul[data-checklist] li::before, .rtc--togglable ul[data-checklist] li::after { cursor: pointer; } /* Tabellen */ .rtc table { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: 13.5px; } .rtc th, .rtc td { border: 1px solid #e4e4e7; padding: 6px 9px; text-align: left; vertical-align: top; min-width: 34px; } .rtc th { background: #f5f5f7; font-weight: 800; color: #16181c; } /* Hinweis-Boxen (div[data-callout="info|warnung|wichtig"]) */ .rtc div[data-callout] { margin: 8px 0; padding: 8px 12px 9px 13px; border: 1px solid #e4e4e7; border-left: 4px solid #16181c; border-radius: 10px; background: #fafafa; } .rtc div[data-callout]::before { content: "Info"; display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6c7077; } .rtc div[data-callout="warnung"] { border-left-color: #d97706; background: #fdf8ef; border-color: #f0e2c8; } .rtc div[data-callout="warnung"]::before { content: "Warnung"; color: #b45309; } .rtc div[data-callout="wichtig"] { border-left-color: #e2483b; background: #fdf1f0; border-color: #f3d2ce; } .rtc div[data-callout="wichtig"]::before { content: "Wichtig"; color: #c2372c; } /* Mitarbeiter-Erwähnung (span[data-mention]) */ .rtc span[data-mention] { display: inline-block; padding: 0 8px; border-radius: 999px; background: #efeff1; color: #16181c; font-weight: 700; font-size: .92em; line-height: 1.5; white-space: nowrap; } /* Checklisten-Fortschritt: Label („x von y erledigt · z %") + Mini-Balken über der Liste. data-progress/--rtc-done werden per JS gesetzt (Editor bzw. RichTextView). @property macht die Variable animierbar → der Balken morpht statt zu springen (Browser ohne @property-Support springen einfach — kein Schaden). */ @property --rtc-done { syntax: ''; inherits: true; initial-value: 0%; } .rtc ul[data-checklist][data-progress]::before { content: attr(data-progress); display: block; margin: 0 0 6px; padding-bottom: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #80858d; background: linear-gradient(to right, #16181c var(--rtc-done, 0%), #e4e4e7 var(--rtc-done, 0%)) left bottom / 140px 3px no-repeat; transition: --rtc-done .45s cubic-bezier(.66, 0, .18, 1); } /* Frisch gerendertes DOM: Wert ohne Übergang setzen (RichTextView.decorate), sonst baut sich der Balken nach jedem Speichern sichtbar von 0 % neu auf. */ .rtc ul[data-checklist].rtc-notrans::before { transition: none; } /* Rich-Text-Inhalte auf Touch-Geräten (iOS/iPadOS) */ .rtc--togglable ul[data-checklist] li { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (pointer: coarse) { /* Größeres Tipp-Ziel fürs Abhaken */ .rtc ul[data-checklist] li { padding-left: 30px; min-height: 22px; } .rtc ul[data-checklist] li::before { width: 20px; height: 20px; top: 0; } .rtc ul[data-checklist] li[data-checked="true"]::after { left: 7px; top: 3px; width: 6px; height: 11px; } } /* Breite Tabellen auf schmalen Screens horizontal scrollen statt das Layout zu sprengen. */ @media (max-width: 640px) { .rtc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }