/* VectorOneBase Admin-Zentrale (App) Gestaltung auf den Tokens des VectorOneBase Designbaukastens. Das Gerüst (Kopf, Zwei-Spalten-Bild, mobile Icon-Leiste, Zahnrad-Panel) gehört dem Seitentyp ka-portal-page; die Marke folgt dem data-realm-Vertrag (, Referenz im Paket-README). Hier bleiben nur das Marken-Profil und die Inhalte der Ansichten. */ /* --- Marken-Profil (Anthrazit, Referenzwerte des data-realm-Vertrags) -------- */ [data-realm='admin'] { /* Seitentypen des Baukastens (Einstieg): Kachel-Füllung + Hintergrund-Glow. */ --entry-hero-background: radial-gradient(55rem 26rem at 50% -12%, color-mix(in oklab, #4b5563 22%, transparent), transparent 70%); --ka-color-brand-fill-quiet: color-mix(in oklab, #4b5563 9%, transparent); --ka-color-brand-fill-normal: color-mix(in oklab, #4b5563 14%, transparent); --ka-color-brand-fill-loud: #374151; --ka-color-brand-border-quiet: color-mix(in oklab, #4b5563 28%, transparent); --ka-color-brand-border-normal: #9ca3af; --ka-color-brand-border-loud: #4b5563; --ka-color-brand-on-quiet: #374151; --ka-color-brand-on-normal: #1f2937; --ka-color-brand-on-loud: #f9fafb; } .ka-dark[data-realm='admin'] { --ka-color-brand-fill-quiet: color-mix(in oklab, #6b7280 18%, transparent); --ka-color-brand-fill-normal: color-mix(in oklab, #6b7280 26%, transparent); --ka-color-brand-fill-loud: #4b5563; --ka-color-brand-border-quiet: color-mix(in oklab, #9ca3af 35%, transparent); --ka-color-brand-border-normal: #6b7280; --ka-color-brand-border-loud: #9ca3af; --ka-color-brand-on-quiet: #d1d5db; --ka-color-brand-on-normal: #e5e7eb; --ka-color-brand-on-loud: #f9fafb; } * { box-sizing: border-box; } body { margin: 0; background: var(--ka-color-surface-lowered); color: var(--ka-color-text-normal); font-family: var(--ka-font-family-body); } /* Inline-Icons: aus der eingebetteten System-Library des Baukastens (ka-icon); die Größe folgt der Schriftgröße des Elements. */ .icon { font-size: 1.25rem; flex: none; } /* --- Ansichten (Inhalt der ka-portal-page) ----------------------------------- */ /* Ansichts-Container (Standard): stapelt die Karten jeder Ansicht mit Abstand — Ansichten liefern Karten direkt, ohne eigenen Stapel-Rahmen (DESIGN-REGELN §16.13); verschachtelte Stapel nutzen weiter .view. */ #ansicht-ziel { display: flex; flex-direction: column; gap: 1.25rem; } .view { display: flex; flex-direction: column; gap: 1.25rem; } .view h1 { margin: 0; font-family: var(--ka-font-family-heading); font-size: var(--ka-font-size-2xl); color: var(--ka-color-text-normal); } .view h1:focus { outline: none; } /* Menü-Beschriftungen der ka-portal-page: auf kleinen Ansichten zeigt die Leiste unten nur die Icons (Konvention des Seitentyps). */ @media (max-width: 70rem) { .menue-label { display: none; } } /* Zusatzzeile im Zahnrad-Panel (settings-Slot): Produkt-Version. */ .panel-extra { display: flex; flex-direction: column; gap: 0.5rem; } .panel-extra-version { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-2xs); } /* --- Übersicht: Kennzahlen + Schnellzugriff ------------------------------------ */ /* Der Wrapper hält Kennzahlen und ggf. den Fehler-Callout mit dem üblichen Karten-Abstand (statt bündig an den Kennzahlen zu kleben). */ #kennzahlen { display: flex; flex-direction: column; gap: 1.25rem; } .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; } .kpi { background: var(--ka-color-surface-default); border: 1px solid var(--ka-color-surface-border); border-radius: var(--ka-border-radius-l, 0.75rem); padding: 1.25rem; } .kpi ka-statistic::part(value) { display: flex; } .kpi ka-tag { align-self: flex-start; } .rollen-tags { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; } .zugaenge { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .zugaenge a { color: var(--ka-color-text-link); } /* --- Formulare / Aktionen ------------------------------------------------------- */ form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .abfrage-form { align-items: flex-end; } .abfrage-form ka-button { margin-bottom: 0.1rem; } .filter-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .aktions-raster { margin-bottom: 0.25rem; } #a-operation { width: 18rem; } .panel-hinweis { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); margin: 1rem 0 0; } /* --- Konto-Seite (ka-account-page; Konto-Standard) ---------------------------- */ /* Zeilen-Gitter (dt/dd) und Aktions-/Gerätezeilen: derselbe Aufbau wie in den Produkt-Apps (gleiche Klassennamen, gleiche Regeln) — Konto-Seiten aller Produkte sehen gleich aus (Konto-Standard). */ .konto-gitter { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; } .konto-zeile { display: flex; gap: 0.75rem; align-items: baseline; min-width: 0; } .konto-zeile dt { flex: none; width: 7.5rem; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .konto-zeile dd { margin: 0; min-width: 0; overflow-wrap: break-word; } .konto-hinweis { margin: 0.25rem 0 0; color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .aktion-liste { display: flex; flex-direction: column; margin-top: 0.25rem; } .aktion-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; flex-wrap: wrap; } .aktion-zeile + .aktion-zeile { border-top: 1px solid var(--ka-color-surface-border); } .aktion-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .aktion-titel { font-weight: var(--ka-font-weight-semibold); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .aktion-beschreibung { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .geraet-liste { display: flex; flex-direction: column; gap: 0.85rem; margin: 0.85rem 0; } .geraet-zeile { display: flex; align-items: center; gap: 0.75rem; } .geraet-zeile .icon { font-size: 1.4rem; color: var(--ka-color-text-quiet); } #geraete-werkzeuge { margin-top: 0.25rem; } /* --- Ladezustand / Meldungen -------------------------------------------------------- */ .lade-block { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 0; color: var(--ka-color-text-quiet); } .visually-note { color: var(--ka-color-text-quiet); font-size: var(--ka-font-size-s); } .retry-knopf { margin-top: 1rem; } .meldung { margin: 0.25rem 0; } .meldung:empty { display: none; } /* --- Responsive (Inhaltsbedarf) --------------------------------------------- */ @media (max-width: 56rem) { .filter-zeile { grid-template-columns: 1fr; } }