/* rahmen.css – was der App-Rahmen und die Ebenen von ICT-Inventar über Dashboard-Style hinaus brauchen. Den Rahmen selbst bringt Dashboard-Style (components/shell.css, page.css, sheet.css, dialog.css, toast.css, tooltip.css): ein getönter Grund, darauf ohne Linien und Schatten die Kopfzeile (.ds-topbar, 64 px) und links die Navigation (.ds-drawer, 256 px), rechts EINE weisse Tafel (.ds-panel > main.ds-view) mit 20 px Radius oben, die als einziges Element rollt. ┌ Kopf: [≡ ≤900] ICT.INVENTAR ········ ( (A) Name/E-Mail │ Abmelden ) ┐ │ Schublade │ ╭── .ds-panel > main.ds-view#tafel ──────────────────╮ │ │ Gruppen, │ │ .ds-content > .ds-page#inhalt (max. 1280, Abstand 20)│ │ │ 48-px- │ │ Seitenkopf · Karten · Kacheln · Tabellen … │ │ │ Pillen │ │ [Speicherleiste .ds-savebar] │ │ └───────────┴─╰───────────────────────────────────────────────────────╯─┘ Hier steht nur, was es nur bei ICT gibt (Wortmarke, Zustände der Seite, Gerüst der Detailseiten) und die wenigen Abweichungen vom Rahmen von Dashboard-Style, je mit Grund. Konto-Kapsel, Zurück-Eintrag und Zähler der Schublade, Seitenkopf mit Zurück-Link und Aktionen, Dialog mit Körper, Seitenblatt mit Unterzeile und Fuss, Speicherleiste und Meldungen bringt Dashboard-Style 2.0 selbst. Dashboard-Style liegt in @layer ds.*; diese Datei ist ungelagert und gewinnt darum immer – sie überschreibt nur, was ICT wirklich anders will. Die Seitenübergänge zwischen den HTML-Seiten bringt Dashboard-Style selbst: vendor/dashboard-style/css/optional/view-transitions.css (in jeder Seite nach ds.css verlinkt) schaltet sie ein und benennt Tafel, Rahmen und feste Schublade; die alte Ansicht geht kurz, die neue blendet ein und wächst, Kopf und Schublade bleiben stehen. Inhalt: 1. Kopf: Wortmarke 2. Tafel: Tabellenansichten, Zustände 3. Seitenkopf (umgebrochene Text-Knöpfe in den Aktionen) 4. Gerüst der Detailseiten (.fenster-bereich) 5. Kontrastmodus und Druck Regeln wie in bausteine.css: nur Tokens, keine @keyframes (die Namen ds-fade-in, ds-lift-in … stehen in vendor/dashboard-style/css/motion.css). Gebaut und gesteuert wird alles von rahmen.js (Rahmen, UI.dialog, UI.bestaetigen, UI.blatt, UI.meldung, UI.tipp, UI.speicherleiste). */ /* ================================================================== 1. Kopf: Wortmarke Die Konto-Kapsel (.ds-account--capsule), Zurück-Eintrag und Zähler der Schublade (.ds-drawer__back, .ds-drawer__count) bringt Dashboard-Style. ================================================================== */ /* Die Wortmarke ist eine Marke nur aus dem Namen (.ds-brand > .ds-brand__name): mit Schublade setzt Dashboard-Style sie über die linke KANTE der Navigationssinnbilder (die Achse --ds-drawer-icon-axis minus das halbe 20-px-Sinnbild), auf dieselbe Linie wie die Gruppentitel. Ohne Schublade (Neu-Formulare, data-drawer-hidden) rückte sie auf 24 px; hier bleibt sie, wo sie mit Schublade steht, damit beim Wechsel Liste → «Neuer …» der Kopf nicht rückt. Nur das Polster; Abweichung, STYLEGUIDE.md Abschnitt 5. */ @media (min-width: 901px) { .ds-app--drawer[data-drawer-hidden] > .ds-topbar { padding-left: max(calc(var(--ds-drawer-icon-axis) - 10px), env(safe-area-inset-left)); } } /* Wortmarke «ICT.INVENTAR» statt Logo und Produktname: Versalien wie im Logo von Campus Sursee, Archivo breit (thema.css), der Punkt im Campus-Grün. Grösse und Zeilenhöhe der Titelrolle (22/28) wie .ds-brand__name; auf dem Telefon die Rolle des Lesetexts. */ .wortmarke { font: var(--ds-font-title); font-family: var(--schrift-marke); font-stretch: 112%; font-weight: var(--gewicht-marke); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ds-text); white-space: nowrap; } /* Beim harten Laden bleibt sie unsichtbar, bis Archivo da ist (höchstens 300 ms, rahmen.js): in der Ersatzschrift ist sie schmaler und spränge sonst sichtbar in ihre Breite. Ihr Platz bleibt (visibility). */ .wortmarke[data-schrift-wartet] { visibility: hidden; } /* Der Punkt ist wie im Logo ein satter Kreis auf der Grundlinie, als Fläche gezeichnet. Das «.» bleibt im Text (Vorlesen, Kopieren), ist aber unsichtbar. */ .wortmarke-punkt { display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0.08em 0 -0.04em; border-radius: var(--ds-radius-action); background: var(--campus-gruen); color: transparent; overflow: hidden; vertical-align: baseline; } @media (max-width: 600px) { .wortmarke { font: var(--ds-font-reading); font-family: var(--schrift-marke); font-stretch: 112%; font-weight: var(--gewicht-marke); } } /* ================================================================== 2. Tafel: Tabellenansichten, Zustände ================================================================== */ /* Ein einzelner Knopf im Bereich behält seine Breite (wie in .ds-page). */ .fenster-bereich > .ds-btn { justify-self: start; } /* Tabellenansichten (Rahmen.fest: .ds-view--fill von Dashboard-Style): bei genug Platz rollt die Tafel nicht, und die sichtbare Ansicht, das letzte Kind der Bahn, füllt den Rest. Sie ist eine Spalte im Seitenrhythmus (Seitenkopf, Werkzeugleiste, Chips), deren Liste (.ds-table-wrap--fill) den Rest nimmt und selbst rollt. Darunter rollt die Tafel, und Dashboard-Style begrenzt die Liste. */ @media (min-width: 601px) and (min-height: 720px) { .ds-view--fill .ansicht { display: flex; flex-direction: column; gap: var(--ds-space-5); min-width: 0; min-height: 0; } } /* Zustände der Seite: solange geladen wird oder ein Fehler steht, ist der Seiteninhalt aus dem Bild (nicht aus dem DOM, die Seite baut weiter); sichtbar bleiben nur der Vorführ-Hinweis und der Zustandsblock. Das Attribut steht schon im HTML, damit vor dem ersten Skript nichts Halbfertiges aufblitzt. */ .ds-page[data-zustand="laden"] > :not(.bahn-vorfuehrung, .bahn-zustand), .ds-page[data-zustand="fehler"] > :not(.bahn-vorfuehrung, .bahn-zustand), .ds-page[data-zustand="ende"] > :not(.bahn-vorfuehrung, .bahn-zustand) { display: none; } .bahn-zustand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); min-width: 0; } .bahn-zustand:empty { display: none; } /* Das Skelett samt Fortschrittszeile (.ds-skeleton__note) erscheint verzögert (Dashboard-Style, --ds-delay-loader); der Ladebalken steht davor in .ds-content. */ .zustand-laden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); } /* ================================================================== 3. Seitenkopf (UI.seitenkopf: .ds-page-head mit __back, __row, __text, __status und __actions von Dashboard-Style) ================================================================== */ /* Kopfaktionen sind Text-Knöpfe (STYLEGUIDE.md Abschnitt 4). Dashboard- Style hängt das Polster des letzten in den Rand und, auf schmaler Bahn (die Aktionen links unter dem Titel), das des ersten. Bricht die Reihe dort um (Client: «Ins Lager legen», «Archivieren», «Löschen …»), stünde der erste Knopf der zweiten Zeile 12 px hinter dem Titel. Darum hängt hier jeder Text-Knopf sein Polster links hinaus, und die Lücke gleicht das aus: der erste JEDER Zeile fluchtet mit dem Titel. Nur Ränder und die Lücke (Anordnung); Abweichung, STYLEGUIDE.md Abschnitt 5. */ @container ds-content (max-width: 600px) { .ds-page-head__actions:has(> .ds-btn--text:last-child) { column-gap: calc(var(--ds-space-2) + var(--ds-space-3)); } .ds-page-head__actions > .ds-btn--text { margin-left: calc(-1 * var(--ds-space-3)); } } /* ================================================================== 4. Gerüst der Detailseiten Der Bereich, den fenster.js je nach Navigation füllt: Karten im Seitenrhythmus untereinander. ================================================================== */ .fenster-bereich { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); align-content: start; min-width: 0; } .fenster-bereich:empty { display: none; } /* ================================================================== 5. Kontrastmodus und Druck ================================================================== */ /* Kontrastmodus: den aktiven Eintrag der Schublade zeichnet Dashboard-Style als Auswahl (SelectedItem). */ @media (forced-colors: active) { .wortmarke-punkt { forced-color-adjust: none; background: CanvasText; } } /* Gedruckt wird nur der Inhalt: Dashboard-Style blendet den Rahmen, die Speicherleiste und die Aktionen im Seitenkopf aus, und die seitenfüllende Liste läuft über alle Seiten statt nur ihren Ausschnitt. */