/* * Globale Design-Tokens für die Mängel-Stammdaten-Verwaltung. * Alle komponentenspezifischen Styles liegen in den jeweiligen .razor.css-Dateien. */ :root { /* Ebenen-Akzentfarben (siehe Spec §6.3) */ --ms-color-medikamentenart: #5B6CFF; /* Indigo */ --ms-color-page: #10A37F; /* Teal */ --ms-color-maengelart: #F59E0B; /* Amber */ --ms-color-mangel: #64748B; /* Slate */ /* Tree */ --ms-tree-connector: rgba(0, 0, 0, 0.08); --ms-tree-hover-bg: rgba(91, 108, 255, 0.06); --ms-tree-selected-bg: rgba(91, 108, 255, 0.10); --ms-tree-selected-bar: var(--ms-color-medikamentenart); --ms-tree-indent: 20px; --ms-tree-row-gap: 8px; --ms-tree-row-height: 32px; /* für Sort-Animation */ /* Action-Pills Default-Hintergrund (immer sichtbar, dezent) */ --ms-action-default-bg: rgba(0, 0, 0, 0.04); /* Layout */ --ms-page-padding: 24px; --ms-section-gap: 32px; --ms-detail-padding-x: 40px; --ms-detail-padding-y: 32px; /* Typografie */ --ms-font-size-page-title: 24px; --ms-font-size-tree-name: 14px; --ms-font-size-type-badge: 10px; --ms-font-size-form-label: 12px; --ms-font-size-form-input: 15px; --ms-font-size-audit: 12px; /* Animation-Easing */ --ms-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Focus-Ring */ --ms-focus-ring-color: var(--ms-color-medikamentenart); /* Hover-Pills für Action-Buttons, pro Ebene */ --ms-action-hover-medikamentenart: rgba( 91, 108, 255, 0.12); --ms-action-hover-page: rgba( 16, 163, 127, 0.12); --ms-action-hover-maengelart: rgba(245, 158, 11, 0.12); --ms-action-hover-mangel: rgba(100, 116, 139, 0.15); /* Status-Pillen (Aktiv/Inaktiv) */ --ms-status-pill-aktiv-bg: rgba( 16, 163, 127, 0.15); --ms-status-pill-aktiv-fg: var(--ms-color-page); --ms-status-pill-inaktiv-bg: rgba(100, 116, 139, 0.15); --ms-status-pill-inaktiv-fg: var(--ms-color-mangel); /* Form-Divider (Audit-Footer-Trennlinie) */ --ms-form-divider: rgba(0, 0, 0, 0.08); } /* Dark-Mode-Tokens (Radzen aktiviert via attribute auf bzw. ) */ .rz-theme-dark, [data-theme='dark'] { --ms-tree-connector: rgba(255, 255, 255, 0.12); --ms-tree-hover-bg: rgba(91, 108, 255, 0.10); --ms-tree-selected-bg: rgba(91, 108, 255, 0.18); --ms-action-default-bg: rgba(255, 255, 255, 0.06); --ms-action-hover-medikamentenart: rgba( 91, 108, 255, 0.22); --ms-action-hover-page: rgba( 16, 163, 127, 0.22); --ms-action-hover-maengelart: rgba(245, 158, 11, 0.22); --ms-action-hover-mangel: rgba(148, 163, 184, 0.22); --ms-status-pill-aktiv-bg: rgba( 16, 163, 127, 0.25); --ms-status-pill-inaktiv-bg: rgba(148, 163, 184, 0.25); --ms-form-divider: rgba(255, 255, 255, 0.12); } /* ────────────────────────────────────────────────────────────────── Globaler Button-Reset für alle Mängel-Stammdaten-Buttons (kompensiert Browser-/Bootstrap-Defaults, die scoped CSS nicht erreicht). ────────────────────────────────────────────────────────────────── */ .ms-btn-reset { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ms-btn-reset:disabled { cursor: not-allowed; opacity: 0.4; } .ms-btn-reset:focus { outline: none; } .ms-btn-reset:focus-visible { outline: 2px solid var(--ms-focus-ring-color); outline-offset: 2px; border-radius: 4px; } /* ────────────────────────────────────────────────────────────────── Status-Pille (Aktiv / Inaktiv) — wird in allen 4 Forms verwendet. ────────────────────────────────────────────────────────────────── */ .ms-status-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .ms-status-pill--aktiv { background: var(--ms-status-pill-aktiv-bg); color: var(--ms-status-pill-aktiv-fg); } .ms-status-pill--inaktiv { background: var(--ms-status-pill-inaktiv-bg); color: var(--ms-status-pill-inaktiv-fg); } /* ────────────────────────────────────────────────────────────────── Form-Layout — global, damit alle 4 Forms (Medikamentenart, Page, Mängelart, Mangel) dieselben Styles bekommen. Bisher waren diese scoped in MedikamentenartForm.razor.css und griffen nur dort. ────────────────────────────────────────────────────────────────── */ .ms-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; padding: 32px 40px; } .ms-form-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ms-form-fields { display: flex; flex-direction: column; gap: 16px; } .ms-field { display: flex; flex-direction: column; gap: 6px; } .ms-field-label { font-size: var(--ms-font-size-form-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rz-text-secondary-color, #444); } .ms-field-aktiv-row { display: flex; align-items: center; gap: 10px; } .ms-form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; }