/* ==========================================================================
KanzleiDesk Design Tokens
Zentrale Stelle für Farben/Radien/Schatten - Seiten und Komponenten sollen
diese Variablen referenzieren statt eigene Hex-Werte zu hart zu codieren.
========================================================================== */
:root {
--kd-green: #47b067;
--kd-green-dark: #3a9457;
--kd-green-light: #e8f6ec;
--kd-petrol: #1a4d5c;
--kd-petrol-light: #2c6e82;
--kd-petrol-lighter: #e5eef0;
--kd-bg: #f8f9fa;
--kd-surface: #ffffff;
--kd-border: #e2e6ea;
--kd-text: #212529;
--kd-text-muted: #6c757d;
--kd-radius-sm: 0.4rem;
--kd-radius: 0.6rem;
--kd-radius-lg: 0.9rem;
--kd-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
--kd-shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.16);
--kd-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Akzentfarbe (Einstellungen.razor): eigene Indirektionsebene statt direkt --kd-green zu verwenden, damit
das Sidebar-Gradient (siehe MainLayout.razor.css, nutzt --kd-green/--kd-petrol direkt) unverändert bleibt,
während Buttons/Fokus/Tabellen-Hover im Inhaltsbereich live umschaltbar sind. --kd-accent-light wird per
color-mix() aus --kd-accent berechnet, dadurch passt es sich automatisch auch an das Dark-Theme an, ohne
dass pro Farbe+Theme ein eigener Hell-Ton gespeichert werden müsste. */
--kd-accent: var(--kd-green);
--kd-accent-dark: var(--kd-green-dark);
/* --kd-accent-light (14%) bleibt bewusst subtil - für persistente, flächige Einfärbungen (eigene Chat-
Bubbles, "Heute"-Spalte im Kalender), wo ein kräftigerer Ton stören würde. Für tatsächliches Hover-/
Active-Feedback auf Klickelementen (Tabellenzeilen, Cards, Listeneinträge) reichte 14% auf hellem/weißem
Untergrund nicht für sichtbaren Kontrast - dafür --kd-accent-hover (22%) und --kd-accent-active (30%). */
--kd-accent-light: color-mix(in srgb, var(--kd-accent) 14%, var(--kd-surface));
--kd-accent-hover: color-mix(in srgb, var(--kd-accent) 22%, var(--kd-surface));
--kd-accent-active: color-mix(in srgb, var(--kd-accent) 30%, var(--kd-surface));
}
/* Dunkles Design (Einstellungen.razor -> wwwroot/js/theme.js setzt data-theme="dark" auf ). Nur die
Kern-Tokens werden hier überschrieben - alle Regeln, die bereits var(--kd-*) verwenden, passen sich dadurch
automatisch an. Zusätzlich setzt theme.js auch Bootstraps eigenes data-bs-theme="dark", wodurch Tabellen/
Formulare/Cards/Modals von Bootstrap selbst mitgestylt werden (bootstrap.min.css bringt das bereits mit). */
:root[data-theme="dark"] {
--kd-bg: #1a1f24;
--kd-surface: #2a3038;
--kd-border: #3d454f;
--kd-text: #e8eaed;
--kd-text-muted: #9aa4ad;
}
/* Textgröße (Einstellungen.razor): skaliert die rem-Basis - da Bootstrap fast durchgängig mit rem arbeitet,
wirkt sich das global auf die gesamte Anwendung aus, ohne jede Komponente einzeln anzupassen. */
html[data-textsize="gross"] {
font-size: 18.5px;
}
html[data-textsize="klein"] {
font-size: 15px;
}
html, body {
font-family: var(--kd-font);
color: var(--kd-text);
}
body {
background-color: var(--kd-bg);
}
h1, h2, h3, h4, h5 {
font-weight: 700;
color: var(--kd-text);
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
.text-muted, small {
color: var(--kd-text-muted) !important;
}
a, .btn-link {
color: var(--kd-petrol-light);
}
a:hover, .btn-link:hover {
color: var(--kd-petrol);
}
/* ---- Buttons ---- */
.btn {
border-radius: var(--kd-radius-sm);
font-weight: 500;
}
.btn-primary,
.btn-success {
color: #fff;
background-color: var(--kd-accent);
border-color: var(--kd-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: var(--kd-accent-dark) !important;
border-color: var(--kd-accent-dark) !important;
}
.btn-outline-primary {
color: var(--kd-accent);
border-color: var(--kd-accent);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
background-color: var(--kd-accent) !important;
border-color: var(--kd-accent) !important;
}
.btn-outline-secondary:hover {
background-color: var(--kd-petrol-light);
border-color: var(--kd-petrol-light);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kd-accent) 25%, transparent);
}
/* ---- Formulare ---- */
.form-control, .form-select {
border: 1px solid var(--kd-border);
border-radius: var(--kd-radius-sm);
background-color: var(--kd-surface);
color: var(--kd-text);
}
.form-control:focus, .form-select:focus {
border-color: var(--kd-accent);
}
label, .form-label {
font-weight: 600;
font-size: 0.85rem;
color: var(--kd-text);
}
/* ---- Cards ---- */
.card {
border: 1px solid var(--kd-border);
border-radius: var(--kd-radius);
box-shadow: var(--kd-shadow);
}
/* ---- Tabellen ---- */
.table {
color: var(--kd-text);
}
.table thead th {
background-color: color-mix(in srgb, var(--kd-text) 5%, var(--kd-surface));
color: var(--kd-text);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 2px solid var(--kd-border);
font-weight: 700;
}
.table td, .table th {
vertical-align: middle;
padding: 0.7rem 1rem;
border-color: var(--kd-border);
}
.table tbody tr {
color: var(--kd-text);
}
/* WICHTIG: Hover/Active auf den ZELLEN (> *), nicht auf selbst. Bootstrap 5.3 setzt über
".table>:not(caption)>*>*{background-color:var(--bs-table-bg)}" ein eigenes, deckendes background-color
direkt auf jede | / | - das übermalt vollständig jede background-color, die man stattdessen auf das
|
setzt (per Pixel-Vergleich in CDP bestätigt: computed style auf
war korrekt, der tatsächlich
gemalte Pixel blieb aber unverändert weiß). ".table tbody tr:hover > *" hat mit Spezifität (0,2,2) mehr
Gewicht als Bootstraps (0,1,1) und gewinnt dadurch unabhängig von der Reihenfolge im Stylesheet - "> *"
deckt sowohl | als auch ein eventuelles | in tbody ab, spiegelt Bootstraps eigenes Muster. */
.table tbody tr > * {
transition: background-color 0.15s ease;
}
.table tbody tr:hover > * {
background-color: var(--kd-accent-hover);
}
.table tbody tr:active > * {
background-color: var(--kd-accent-active);
}
/* ---- Klickbare Cards (Dashboard-Kacheln, Mitarbeiter-Grid, Mein-Profil-Karte, ...) ---- */
.kd-card-clickable {
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.kd-card-clickable:hover {
background-color: var(--kd-accent-hover);
}
.kd-card-clickable:active {
background-color: var(--kd-accent-active);
}
/* ---- Umschaltbare Überschriften (Notizen/Verlauf/Dateien, erledigte Tickets/Historie, ...) ---- */
/* Sichtbarer Rahmen/Hintergrund schon im Ruhezustand (nicht erst bei :hover) - reiner Text mit ▼/▲ gab keinen
erkennbaren Hinweis, dass die Überschrift klickbar ist, bevor man mit der Maus darüberfährt. */
.kd-toggle-heading {
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0.4rem 0.75rem;
border: 1px solid var(--kd-border);
border-radius: var(--kd-radius-sm);
background-color: var(--kd-bg);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kd-toggle-heading:hover {
background-color: var(--kd-accent-hover);
border-color: var(--kd-accent);
}
.kd-toggle-heading:active {
background-color: var(--kd-accent-active);
}
/* ---- Trefferlisten (MandantSuche/MitarbeiterSuche) - überschreibt Bootstraps eigenen .list-group-item-action-
Hover mit den Design-Tokens, gleiche Farbsprache wie Tabellenzeilen/Cards. */
.list-group-item-action {
transition: background-color 0.15s ease;
}
.list-group-item-action:hover, .list-group-item-action:focus {
background-color: var(--kd-accent-hover);
color: var(--kd-text);
}
.list-group-item-action:active {
background-color: var(--kd-accent-active);
}
/* ---- Badges ---- */
.badge {
border-radius: 999px;
padding: 0.35em 0.75em;
font-weight: 600;
}
.badge.bg-secondary {
background-color: var(--kd-petrol-light) !important;
}
/* ---- Alerts ---- */
.alert {
border-radius: var(--kd-radius);
border: none;
}
.alert-success { background-color: var(--kd-green-light); color: #276b3f; }
.alert-danger { background-color: #fdecea; color: #9c2b26; }
.alert-warning { background-color: #fff6e5; color: #8a6100; }
/* Alert-Farben sind bewusst NICHT an --kd-accent gekoppelt (anders als Buttons/Fokus/Tabellen-Hover): Erfolg/
Fehler/Warnung sind feste Statusfarben, unabhängig von der gewählten Akzentfarbe. Im Dark-Theme werden nur
die konkreten Hell-Töne gegen dunklere, noch ausreichend kontrastreiche Varianten getauscht. */
:root[data-theme="dark"] .alert-success { background-color: #1d3a27; color: #8fd6a6; }
:root[data-theme="dark"] .alert-danger { background-color: #3a1f1e; color: #f0a8a4; }
:root[data-theme="dark"] .alert-warning { background-color: #3a2f14; color: #f0cd7a; }
.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-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
background-color: var(--kd-bg);
}
.login-logo {
display: block;
width: 100%;
max-width: 300px;
height: auto;
margin: 0 auto 2rem;
}
.login-container {
max-width: 380px;
width: 100%;
margin: 0 auto;
padding: 2.5rem;
background: var(--kd-surface);
border: none;
border-radius: var(--kd-radius-lg);
box-shadow: var(--kd-shadow-lg);
}
.login-container h1, .login-container h3 {
text-align: center;
}
.login-container h3 {
margin-bottom: 1.5rem;
}
.ticket-modal-overlay {
position: fixed;
inset: 0;
background: rgba(16, 24, 40, 0.55);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2rem 1rem;
overflow-y: auto;
z-index: 1050;
animation: kd-overlay-in 0.15s ease-out;
}
.ticket-modal-content {
background: var(--kd-surface);
border-radius: var(--kd-radius-lg);
box-shadow: var(--kd-shadow-lg);
/* 1100px statt vormals 900px - Platz für die 3. Spalte (Ticket Verlauf/Übersicht) im Kopfbereich,
siehe TicketDetailModal.razor .ticket-modal-dreispaltig. */
max-width: 1100px;
width: 100%;
padding: 1.5rem;
position: relative;
animation: kd-modal-in 0.15s ease-out;
}
.ticket-modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: transparent;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
/* Wiederverwendbar für alle weiteren Overlay/Modal-Paare der App (Board-Status-Dialog, Kalender-Verschieben-Dialog,
Anruf-Simulation, ...), damit nicht jede Seite ihre eigene Animation definieren muss. */
.board-modal-overlay, .kalender-modal-overlay, .anruf-sim-overlay, .confirm-dialog-overlay {
animation: kd-overlay-in 0.15s ease-out;
}
.board-modal-content, .kalender-modal-content, .anruf-sim-dialog, .confirm-dialog-content {
box-shadow: var(--kd-shadow-lg);
animation: kd-modal-in 0.15s ease-out;
}
@keyframes kd-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes kd-modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
} |