/* ── LibreDesk · Adwaita-Bausteine ─────────────────────────────────────────── Gemeinsame Bausteine für alle eigenen Oberflächen (Portal, Roost, PM, Startseiten). Ersatz für Bootstrap-Komponenten (Entscheidung HKS, 21.10.2026: Bootstrap ganz ablösen). Regeln: DESIGN.md. Braucht vorher: ld-adwaita.css (Tokens --ld-*). Kein Framework, keine Abhängigkeit von Portal-Namen. Verhalten (Menü, Dialog, Toast) liefert ld-adwaita.js. Auslieferung: Caddy unter /_ld/design/ auf jedem Host, das Portal zusätzlich unter /brand/. Musterseite mit allen Bausteinen: Portal › /gestaltung (nur Verwalter). Namen: Vorsatz ld-, Zustände als zweite Klasse (.ld-button.suggested), wie die Stilklassen in libadwaita. ───────────────────────────────────────────────────────────────────────── */ /* ── Schrift: Stilklassen wie libadwaita ───────────────────────────────── Auf die Grundgröße bezogen statt aufs Elternelement, sonst schrumpft ein .heading in einer .caption mit. */ .large-title { font-size: calc(var(--ld-font-size) * 3); font-weight: 800; line-height: 1.2; } .title-1 { font-size: calc(var(--ld-font-size) * 1.81); font-weight: 800; line-height: 1.2; } .title-2 { font-size: calc(var(--ld-font-size) * 1.36); font-weight: 800; line-height: 1.25; } .title-3 { font-size: calc(var(--ld-font-size) * 1.36); font-weight: 700; line-height: 1.25; } .title-4 { font-size: calc(var(--ld-font-size) * 1.18); font-weight: 700; line-height: 1.3; } .heading { font-size: var(--ld-font-size); font-weight: 700; } .body { font-size: var(--ld-font-size); font-weight: 400; line-height: var(--ld-line-height); } .caption-heading { font-size: calc(var(--ld-font-size) * .82); font-weight: 700; line-height: var(--ld-line-height); } .caption { font-size: calc(var(--ld-font-size) * .82); line-height: var(--ld-line-height); } .numeric { font-variant-numeric: tabular-nums; } .monospace { font-family: var(--ld-monospace-font-family); } /* ── GNOME-Symbole ─────────────────────────────────────────────────────── SVGs aus dem Adwaita Icon Theme unter /_ld/icons/ (assets/brand/icons). Die Dateien haben eine feste Füllfarbe, deshalb als Maske in der Schriftfarbe: Neues Symbol: assets/brand/icons/README.md. */ .ld-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: -.125em; background-color: currentColor; -webkit-mask: var(--ld-icon) center / contain no-repeat; mask: var(--ld-icon) center / contain no-repeat; } /* ⚠️ „Erzwungene Farben" (Windows-Kontrast) ersetzt jede Hintergrundfarbe. Ohne diese Regel wären die Symbole unsichtbar. */ @media (forced-colors: active) { .ld-icon { forced-color-adjust: none; background-color: CanvasText; } } .ld-icon-application-rss { --ld-icon: url(/_ld/icons/application-rss+xml-symbolic.svg); } .ld-icon-avatar-default { --ld-icon: url(/_ld/icons/avatar-default-symbolic.svg); } .ld-icon-checkbox-checked { --ld-icon: url(/_ld/icons/checkbox-checked-symbolic.svg); } .ld-icon-dialog-error { --ld-icon: url(/_ld/icons/dialog-error-symbolic.svg); } .ld-icon-dialog-information { --ld-icon: url(/_ld/icons/dialog-information-symbolic.svg); } .ld-icon-mail-unread { --ld-icon: url(/_ld/icons/mail-unread-symbolic.svg); } .ld-icon-list-drag-handle { --ld-icon: url(/_ld/icons/list-drag-handle-symbolic.svg); } .ld-icon-go-up { --ld-icon: url(/_ld/icons/go-up-symbolic.svg); } .ld-icon-go-down { --ld-icon: url(/_ld/icons/go-down-symbolic.svg); } .ld-icon-zoom-fit-best { --ld-icon: url(/_ld/icons/zoom-fit-best-symbolic.svg); } .ld-icon-zoom-in { --ld-icon: url(/_ld/icons/zoom-in-symbolic.svg); } .ld-icon-zoom-out { --ld-icon: url(/_ld/icons/zoom-out-symbolic.svg); } .ld-icon-accessories-dictionary { --ld-icon: url(/_ld/icons/accessories-dictionary-symbolic.svg); } .ld-icon-action-unavailable { --ld-icon: url(/_ld/icons/action-unavailable-symbolic.svg); } .ld-icon-application-x-addon { --ld-icon: url(/_ld/icons/application-x-addon-symbolic.svg); } .ld-icon-application-x-executable { --ld-icon: url(/_ld/icons/application-x-executable-symbolic.svg); } .ld-icon-applications-graphics { --ld-icon: url(/_ld/icons/applications-graphics-symbolic.svg); } .ld-icon-audio-headphones { --ld-icon: url(/_ld/icons/audio-headphones-symbolic.svg); } .ld-icon-audio-x-generic { --ld-icon: url(/_ld/icons/audio-x-generic-symbolic.svg); } .ld-icon-auth-fingerprint { --ld-icon: url(/_ld/icons/auth-fingerprint-symbolic.svg); } .ld-icon-computer { --ld-icon: url(/_ld/icons/computer-symbolic.svg); } .ld-icon-drive-harddisk { --ld-icon: url(/_ld/icons/drive-harddisk-symbolic.svg); } .ld-icon-drive-multidisk { --ld-icon: url(/_ld/icons/drive-multidisk-symbolic.svg); } .ld-icon-edit-clear { --ld-icon: url(/_ld/icons/edit-clear-symbolic.svg); } .ld-icon-find-location { --ld-icon: url(/_ld/icons/find-location-symbolic.svg); } .ld-icon-format-justify-center { --ld-icon: url(/_ld/icons/format-justify-center-symbolic.svg); } .ld-icon-format-justify-left { --ld-icon: url(/_ld/icons/format-justify-left-symbolic.svg); } .ld-icon-format-justify-right { --ld-icon: url(/_ld/icons/format-justify-right-symbolic.svg); } .ld-icon-format-text-bold { --ld-icon: url(/_ld/icons/format-text-bold-symbolic.svg); } .ld-icon-list-remove { --ld-icon: url(/_ld/icons/list-remove-symbolic.svg); } .ld-icon-mail-read { --ld-icon: url(/_ld/icons/mail-read-symbolic.svg); } .ld-icon-media-playback-pause { --ld-icon: url(/_ld/icons/media-playback-pause-symbolic.svg); } .ld-icon-media-playback-start { --ld-icon: url(/_ld/icons/media-playback-start-symbolic.svg); } .ld-icon-media-playback-stop { --ld-icon: url(/_ld/icons/media-playback-stop-symbolic.svg); } .ld-icon-media-record { --ld-icon: url(/_ld/icons/media-record-symbolic.svg); } .ld-icon-network-server { --ld-icon: url(/_ld/icons/network-server-symbolic.svg); } .ld-icon-network-wired { --ld-icon: url(/_ld/icons/network-wired-symbolic.svg); } .ld-icon-network-wireless { --ld-icon: url(/_ld/icons/network-wireless-symbolic.svg); } .ld-icon-package-x-generic { --ld-icon: url(/_ld/icons/package-x-generic-symbolic.svg); } .ld-icon-power-profile-performance { --ld-icon: url(/_ld/icons/power-profile-performance-symbolic.svg); } .ld-icon-printer { --ld-icon: url(/_ld/icons/printer-symbolic.svg); } .ld-icon-security-medium { --ld-icon: url(/_ld/icons/security-medium-symbolic.svg); } .ld-icon-software-update-available { --ld-icon: url(/_ld/icons/software-update-available-symbolic.svg); } .ld-icon-system-log-out-rtl { --ld-icon: url(/_ld/icons/system-log-out-rtl-symbolic.svg); } .ld-icon-system-log-out { --ld-icon: url(/_ld/icons/system-log-out-symbolic.svg); } .ld-icon-system-shutdown { --ld-icon: url(/_ld/icons/system-shutdown-symbolic.svg); } .ld-icon-text-x-generic { --ld-icon: url(/_ld/icons/text-x-generic-symbolic.svg); } .ld-icon-utilities-terminal { --ld-icon: url(/_ld/icons/utilities-terminal-symbolic.svg); } .ld-icon-video-display { --ld-icon: url(/_ld/icons/video-display-symbolic.svg); } .ld-icon-view-conceal { --ld-icon: url(/_ld/icons/view-conceal-symbolic.svg); } .ld-icon-weather-few-clouds { --ld-icon: url(/_ld/icons/weather-few-clouds-symbolic.svg); } .ld-icon-weather-fog { --ld-icon: url(/_ld/icons/weather-fog-symbolic.svg); } .ld-icon-weather-showers-scattered { --ld-icon: url(/_ld/icons/weather-showers-scattered-symbolic.svg); } .ld-icon-weather-showers { --ld-icon: url(/_ld/icons/weather-showers-symbolic.svg); } .ld-icon-weather-snow { --ld-icon: url(/_ld/icons/weather-snow-symbolic.svg); } .ld-icon-weather-storm { --ld-icon: url(/_ld/icons/weather-storm-symbolic.svg); } .ld-icon-x-office-presentation { --ld-icon: url(/_ld/icons/x-office-presentation-symbolic.svg); } .ld-icon-preferences-system-time { --ld-icon: url(/_ld/icons/preferences-system-time-symbolic.svg); } .ld-icon-media-playlist-repeat { --ld-icon: url(/_ld/icons/media-playlist-repeat-symbolic.svg); } .ld-icon-folder-new { --ld-icon: url(/_ld/icons/folder-new-symbolic.svg); } .ld-icon-edit-undo { --ld-icon: url(/_ld/icons/edit-undo-symbolic.svg); } .ld-icon-document-save { --ld-icon: url(/_ld/icons/document-save-symbolic.svg); } .ld-icon-document-save-as { --ld-icon: url(/_ld/icons/document-save-as-symbolic.svg); } .ld-icon-edit-redo { --ld-icon: url(/_ld/icons/edit-redo-symbolic.svg); } .ld-icon-document-print { --ld-icon: url(/_ld/icons/document-print-symbolic.svg); } .ld-icon-object-rotate-left { --ld-icon: url(/_ld/icons/object-rotate-left-symbolic.svg); } .ld-icon-object-rotate-right { --ld-icon: url(/_ld/icons/object-rotate-right-symbolic.svg); } .ld-icon-go-top { --ld-icon: url(/_ld/icons/go-top-symbolic.svg); } .ld-icon-go-bottom { --ld-icon: url(/_ld/icons/go-bottom-symbolic.svg); } .ld-icon-edit-cut { --ld-icon: url(/_ld/icons/edit-cut-symbolic.svg); } /* Eigene Symbole im Adwaita-Stil, wo GNOME keines hat (assets/brand/icons/README.md) */ .ld-icon-anfuegen { --ld-icon: url(/_ld/icons/anfuegen-symbolic.svg); } .ld-icon-ersetzen { --ld-icon: url(/_ld/icons/ersetzen-symbolic.svg); } .ld-icon-groesse { --ld-icon: url(/_ld/icons/groesse-symbolic.svg); } .ld-icon-kuerzel { --ld-icon: url(/_ld/icons/kuerzel-symbolic.svg); } .ld-icon-mehrseitig { --ld-icon: url(/_ld/icons/mehrseitig-symbolic.svg); } .ld-icon-schwaerzen { --ld-icon: url(/_ld/icons/schwaerzen-symbolic.svg); } .ld-icon-unterschrift { --ld-icon: url(/_ld/icons/unterschrift-symbolic.svg); } .ld-icon-verkleinern { --ld-icon: url(/_ld/icons/verkleinern-symbolic.svg); } .ld-icon-wasserzeichen { --ld-icon: url(/_ld/icons/wasserzeichen-symbolic.svg); } .ld-icon-zur-unterschrift { --ld-icon: url(/_ld/icons/zur-unterschrift-symbolic.svg); } .ld-icon-zuschneiden { --ld-icon: url(/_ld/icons/zuschneiden-symbolic.svg); } .ld-icon-changes-allow { --ld-icon: url(/_ld/icons/changes-allow-symbolic.svg); } .ld-icon-camera-web { --ld-icon: url(/_ld/icons/camera-web-symbolic.svg); } .ld-icon-airplane-mode { --ld-icon: url(/_ld/icons/airplane-mode-symbolic.svg); } .ld-icon-web-browser { --ld-icon: url(/_ld/icons/web-browser-symbolic.svg); } .ld-icon-weather-overcast { --ld-icon: url(/_ld/icons/weather-overcast-symbolic.svg); } .ld-icon-preferences-desktop-locale { --ld-icon: url(/_ld/icons/preferences-desktop-locale-symbolic.svg); } .ld-icon-object-flip-horizontal { --ld-icon: url(/_ld/icons/object-flip-horizontal-symbolic.svg); } .ld-icon-non-starred { --ld-icon: url(/_ld/icons/non-starred-symbolic.svg); } .ld-icon-mark-location { --ld-icon: url(/_ld/icons/mark-location-symbolic.svg); } .ld-icon-mail-send { --ld-icon: url(/_ld/icons/mail-send-symbolic.svg); } .ld-icon-image-x-generic { --ld-icon: url(/_ld/icons/image-x-generic-symbolic.svg); } .ld-icon-folder-download { --ld-icon: url(/_ld/icons/folder-download-symbolic.svg); } .ld-icon-emoji-people { --ld-icon: url(/_ld/icons/emoji-people-symbolic.svg); } .ld-icon-emoji-nature { --ld-icon: url(/_ld/icons/emoji-nature-symbolic.svg); } .ld-icon-emoji-flags { --ld-icon: url(/_ld/icons/emoji-flags-symbolic.svg); } .ld-icon-emoji-activities { --ld-icon: url(/_ld/icons/emoji-activities-symbolic.svg); } .ld-icon-document-send { --ld-icon: url(/_ld/icons/document-send-symbolic.svg); } .ld-icon-document-open-recent { --ld-icon: url(/_ld/icons/document-open-recent-symbolic.svg); } .ld-icon-document-new { --ld-icon: url(/_ld/icons/document-new-symbolic.svg); } .ld-icon-dialog-question { --ld-icon: url(/_ld/icons/dialog-question-symbolic.svg); } .ld-icon-content-loading { --ld-icon: url(/_ld/icons/content-loading-symbolic.svg); } .ld-icon-contact-new { --ld-icon: url(/_ld/icons/contact-new-symbolic.svg); } .ld-icon-chat-message-new { --ld-icon: url(/_ld/icons/chat-message-new-symbolic.svg); } .ld-icon-changes-prevent { --ld-icon: url(/_ld/icons/changes-prevent-symbolic.svg); } .ld-icon-camera-photo { --ld-icon: url(/_ld/icons/camera-photo-symbolic.svg); } .ld-icon-bookmark-new { --ld-icon: url(/_ld/icons/bookmark-new-symbolic.svg); } .ld-icon-alarm { --ld-icon: url(/_ld/icons/alarm-symbolic.svg); } .ld-icon-view-reveal { --ld-icon: url(/_ld/icons/view-reveal-symbolic.svg); } .ld-icon-mail-attachment { --ld-icon: url(/_ld/icons/mail-attachment-symbolic.svg); } .ld-icon-sidebar-show { --ld-icon: url(/_ld/icons/sidebar-show-symbolic.svg); } .ld-icon-insert-link { --ld-icon: url(/_ld/icons/insert-link-symbolic.svg); } .ld-icon-adw-external-link { --ld-icon: url(/_ld/icons/adw-external-link-symbolic.svg); } .ld-icon-view-fullscreen { --ld-icon: url(/_ld/icons/view-fullscreen-symbolic.svg); } .ld-icon-view-restore { --ld-icon: url(/_ld/icons/view-restore-symbolic.svg); } .ld-icon-dialog-password { --ld-icon: url(/_ld/icons/dialog-password-symbolic.svg); } .ld-icon-dialog-warning { --ld-icon: url(/_ld/icons/dialog-warning-symbolic.svg); } .ld-icon-document-edit { --ld-icon: url(/_ld/icons/document-edit-symbolic.svg); } .ld-icon-edit-copy { --ld-icon: url(/_ld/icons/edit-copy-symbolic.svg); } .ld-icon-edit-find { --ld-icon: url(/_ld/icons/edit-find-symbolic.svg); } .ld-icon-emblem-system { --ld-icon: url(/_ld/icons/emblem-system-symbolic.svg); } .ld-icon-folder { --ld-icon: url(/_ld/icons/folder-symbolic.svg); } .ld-icon-folder-open { --ld-icon: url(/_ld/icons/folder-open-symbolic.svg); } .ld-icon-folder-publicshare { --ld-icon: url(/_ld/icons/folder-publicshare-symbolic.svg); } .ld-icon-go-next { --ld-icon: url(/_ld/icons/go-next-symbolic.svg); } .ld-icon-go-previous { --ld-icon: url(/_ld/icons/go-previous-symbolic.svg); } .ld-icon-list-add { --ld-icon: url(/_ld/icons/list-add-symbolic.svg); } .ld-icon-network-offline { --ld-icon: url(/_ld/icons/network-offline-symbolic.svg); } .ld-icon-network-workgroup { --ld-icon: url(/_ld/icons/network-workgroup-symbolic.svg); } .ld-icon-object-select { --ld-icon: url(/_ld/icons/object-select-symbolic.svg); } .ld-icon-open-menu { --ld-icon: url(/_ld/icons/open-menu-symbolic.svg); } .ld-icon-pan-down { --ld-icon: url(/_ld/icons/pan-down-symbolic.svg); } .ld-icon-phone { --ld-icon: url(/_ld/icons/phone-symbolic.svg); } .ld-icon-preferences-desktop-appearance { --ld-icon: url(/_ld/icons/preferences-desktop-appearance-symbolic.svg); } .ld-icon-preferences-system-notifications { --ld-icon: url(/_ld/icons/preferences-system-notifications-symbolic.svg); } .ld-icon-security-high { --ld-icon: url(/_ld/icons/security-high-symbolic.svg); } .ld-icon-send-to { --ld-icon: url(/_ld/icons/send-to-symbolic.svg); } .ld-icon-starred { --ld-icon: url(/_ld/icons/starred-symbolic.svg); } .ld-icon-system-search { --ld-icon: url(/_ld/icons/system-search-symbolic.svg); } .ld-icon-system-users { --ld-icon: url(/_ld/icons/system-users-symbolic.svg); } .ld-icon-text-editor { --ld-icon: url(/_ld/icons/text-editor-symbolic.svg); } .ld-icon-user-trash { --ld-icon: url(/_ld/icons/user-trash-symbolic.svg); } .ld-icon-view-app-grid { --ld-icon: url(/_ld/icons/view-app-grid-symbolic.svg); } .ld-icon-view-dual { --ld-icon: url(/_ld/icons/view-dual-symbolic.svg); } .ld-icon-view-grid { --ld-icon: url(/_ld/icons/view-grid-symbolic.svg); } .ld-icon-view-pin { --ld-icon: url(/_ld/icons/view-pin-symbolic.svg); } .ld-icon-view-list { --ld-icon: url(/_ld/icons/view-list-symbolic.svg); } .ld-icon-view-list-bullet { --ld-icon: url(/_ld/icons/view-list-bullet-symbolic.svg); } .ld-icon-view-more { --ld-icon: url(/_ld/icons/view-more-symbolic.svg); } .ld-icon-view-refresh { --ld-icon: url(/_ld/icons/view-refresh-symbolic.svg); } .ld-icon-view-sort-ascending { --ld-icon: url(/_ld/icons/view-sort-ascending-symbolic.svg); } .ld-icon-nautilus-search-filters { --ld-icon: url(/_ld/icons/nautilus-search-filters-symbolic.svg); } .ld-icon-weather-clear { --ld-icon: url(/_ld/icons/weather-clear-symbolic.svg); } .ld-icon-weather-clear-night { --ld-icon: url(/_ld/icons/weather-clear-night-symbolic.svg); } .ld-icon-window-close { --ld-icon: url(/_ld/icons/window-close-symbolic.svg); } .ld-icon-x-office-address-book { --ld-icon: url(/_ld/icons/x-office-address-book-symbolic.svg); } .ld-icon-x-office-calendar { --ld-icon: url(/_ld/icons/x-office-calendar-symbolic.svg); } .ld-icon-x-office-document { --ld-icon: url(/_ld/icons/x-office-document-symbolic.svg); } .ld-icon.large { width: 32px; height: 32px; } .ld-icon.status { width: 128px; height: 128px; } /* Fokusring für alle Bausteine: 2 px Akzent, halb deckend, nur per Tastatur */ .ld-button:focus-visible, .ld-row.activatable:focus-visible, .ld-entry:focus-visible, .ld-switch:focus-visible, .ld-toggle-group > button:focus-visible, .ld-toggle-group > a:focus-visible, .ld-menu-item:focus-visible { outline: var(--ld-focus-ring-width) solid color-mix(in srgb, var(--ld-accent-color) 50%, transparent); outline-offset: var(--ld-focus-ring-offset); } /* ── Knöpfe (GtkButton) ────────────────────────────────────────────────── Zusätze: .suggested (Akzent, einer je Ansicht), .destructive (Rot, einer je Ansicht), .flat (ohne Grund), .pill (Statusseite), .icon (nur Symbol, 34 × 34, braucht title und aria-label), .circular. */ .ld-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ld-space-2); min-height: var(--ld-button-min-height); padding: 5px 17px; border: none; border-radius: var(--ld-radius-button); background-color: color-mix(in srgb, currentColor var(--ld-button-mix), transparent); color: inherit; font: inherit; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--ld-duration) var(--ld-ease); } .ld-button:hover { background-color: color-mix(in srgb, currentColor var(--ld-button-hover-mix), transparent); color: inherit; } .ld-button:active { background-color: color-mix(in srgb, currentColor var(--ld-button-active-mix), transparent); } .ld-button:disabled, .ld-button[aria-disabled="true"] { opacity: var(--ld-disabled-opacity); cursor: default; pointer-events: none; } .ld-button.flat { background-color: transparent; } .ld-button.flat:hover { background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); } .ld-button.flat:active { background-color: color-mix(in srgb, currentColor var(--ld-active-mix), transparent); } .ld-button.suggested, .ld-button.destructive { color: var(--ld-accent-fg-color); } .ld-button.suggested { background-color: var(--ld-accent-bg-color); } .ld-button.suggested:hover { background-color: color-mix(in srgb, var(--ld-accent-bg-color), var(--ld-accent-fg-color) 10%); color: var(--ld-accent-fg-color); } .ld-button.suggested:active { background-color: color-mix(in srgb, var(--ld-accent-bg-color), rgb(0 0 6) 20%); } .ld-button.destructive { background-color: var(--ld-destructive-bg-color); color: var(--ld-destructive-fg-color); } .ld-button.destructive:hover { background-color: color-mix(in srgb, var(--ld-destructive-bg-color), var(--ld-destructive-fg-color) 10%); color: var(--ld-destructive-fg-color); } .ld-button.destructive:active { background-color: color-mix(in srgb, var(--ld-destructive-bg-color), rgb(0 0 6) 20%); } /* Flach mit farbiger Schrift, wie .flat.destructive-action in libadwaita */ .ld-button.flat.suggested { background-color: transparent; color: var(--ld-accent-color); } .ld-button.flat.destructive { background-color: transparent; color: var(--ld-destructive-color); } .ld-button.pill { border-radius: var(--ld-radius-pill); padding: 10px 32px; } .ld-button.icon { width: var(--ld-button-min-height); padding: 0; } .ld-button.circular { border-radius: 50%; width: var(--ld-button-min-height); padding: 0; } /* ── Kopfleiste (AdwHeaderBar) ───────────────────────────────────────────
…
Titel
…
Knöpfe darin: .ld-button.flat.icon. Das Portal ergänzt seine eigenen Teile (Benutzerknopf, Bereiche-Menü) in style.css. */ .ld-headerbar { height: var(--ld-headerbar-height); background-color: var(--ld-headerbar-bg-color); color: var(--ld-headerbar-fg-color); border-bottom: 1px solid var(--ld-headerbar-shade-color); position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; padding: 0 var(--ld-space-2); gap: var(--ld-space-1); } .ld-headerbar-start, .ld-headerbar-end { display: flex; align-items: center; gap: var(--ld-space-1); flex: 1; } .ld-headerbar-end { justify-content: flex-end; } .ld-headerbar-title { flex: 2; min-width: 0; text-align: center; font-size: var(--ld-font-size); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Inhaltsbreite (AdwClamp) ────────────────────────────────────────────── */ .ld-clamp { max-width: var(--ld-clamp-width); margin-inline: auto; padding: var(--ld-space-5) var(--ld-space-3); } .ld-clamp.wide { max-width: var(--ld-clamp-wide); } /* ── Gerahmte Liste (AdwPreferencesGroup, boxed-list) ────────────────────

Konto

Optionale Erklärung

… .ld-row …
Überschrift ÜBER dem Rahmen, fett, keine Versalien (DESIGN.md). */ .ld-group + .ld-group { margin-top: var(--ld-space-5); } .ld-group-header { margin: 0 0 var(--ld-space-3); display: flex; flex-direction: column; gap: 2px; } .ld-group-title { font-size: var(--ld-font-size); font-weight: 700; margin: 0; } .ld-group-description { font-size: calc(var(--ld-font-size) * .82); line-height: var(--ld-line-height); opacity: var(--ld-dim-opacity); margin: 0; } .ld-boxed-list { background-color: var(--ld-card-bg-color); color: var(--ld-card-fg-color); border-radius: var(--ld-radius-card); box-shadow: var(--ld-card-shadow); overflow: hidden; } /* ── Zeile (AdwActionRow) ────────────────────────────────────────────────
…Symbol…
Titel
Untertitel
…Schalter, Wert oder ein flacher Knopf…
Ganze Zeile klickbar: oder … */ .ld-toggle-group { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--ld-radius-button); background-color: color-mix(in srgb, currentColor var(--ld-button-mix), transparent); } .ld-toggle-group > button, .ld-toggle-group > a { border: none; background: none; color: inherit; font: inherit; font-weight: 700; padding: 3px 12px; min-height: 28px; border-radius: 6px; cursor: pointer; } .ld-toggle-group > a { display: inline-flex; align-items: center; gap: var(--ld-space-1); text-decoration: none; } .ld-toggle-group > button:hover, .ld-toggle-group > a:hover { background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); color: inherit; text-decoration: none; } .ld-toggle-group > a[aria-current="page"], .ld-toggle-group > button[aria-selected="true"], .ld-toggle-group > button[aria-pressed="true"], .ld-toggle-group > button[aria-checked="true"] { background-color: var(--ld-active-toggle-bg-color, var(--ld-card-bg-color)); color: inherit; box-shadow: 0 1px 3px rgb(0 0 6 / 15%); } /* ── Statusseite für leere Zustände und Fehler (AdwStatusPage) ──────────

Keine Aufgaben

Lege die erste an.

Text sagt, was hierher gehört und wie man anfängt. Keine Witze, keine Emojis. */ .ld-statuspage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ld-space-3); padding: var(--ld-space-7) var(--ld-space-3); } .ld-statuspage > .ld-icon { opacity: var(--ld-dim-opacity); margin-bottom: var(--ld-space-3); } .ld-statuspage.compact > .ld-icon { width: 64px; height: 64px; } .ld-statuspage-title { font-size: calc(var(--ld-font-size) * 1.81); font-weight: 800; line-height: 1.2; margin: 0; } .ld-statuspage.compact .ld-statuspage-title { font-size: calc(var(--ld-font-size) * 1.36); } .ld-statuspage-description { max-width: 36ch; margin: 0; line-height: var(--ld-line-height); opacity: var(--ld-dim-opacity); } .ld-statuspage > .ld-button { margin-top: var(--ld-space-3); } /* ── Banner für dauerhafte Zustände (AdwBanner) ─────────────────────────
Keine Verbindung
*/ .ld-banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--ld-space-3); padding: 6px var(--ld-space-3); min-height: 46px; text-align: center; background-color: color-mix(in srgb, var(--ld-accent-bg-color) 30%, var(--ld-window-bg-color)); } .ld-banner.warning { background-color: color-mix(in srgb, var(--ld-warning-bg-color) 30%, var(--ld-window-bg-color)); } .ld-banner.error { background-color: color-mix(in srgb, var(--ld-error-bg-color) 30%, var(--ld-window-bg-color)); } /* ── Kreisel (AdwSpinner) ────────────────────────────────────────────────── */ .ld-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor; animation: ld-drehen 1s linear infinite; flex-shrink: 0; } .ld-spinner.large { width: 32px; height: 32px; border-width: 3px; } @keyframes ld-drehen { to { transform: rotate(360deg); } } /* ── Fortschritt (GtkProgressBar) ────────────────────────────────────────
.pulse = Dauer unbekannt (läuft hin und her), .error = gescheitert. */ .ld-progress { position: relative; height: 6px; border-radius: 6px; overflow: hidden; background-color: color-mix(in srgb, currentColor 15%, transparent); } .ld-progress > span { display: block; height: 100%; border-radius: inherit; background-color: var(--ld-accent-bg-color); transition: width var(--ld-duration) var(--ld-ease); } .ld-progress.pulse > span { width: 25% !important; animation: ld-pulsieren 1.4s ease-in-out infinite alternate; } .ld-progress.error > span { background-color: var(--ld-error-bg-color); } @keyframes ld-pulsieren { from { margin-left: 0; } to { margin-left: 75%; } } /* ── Menü (Popover mit GtkPopoverMenu) ───────────────────────────────────
Öffnen, Platzieren und Tastatur: ld-adwaita.js. */ .ld-menu { margin: 0; inset: auto; min-width: 180px; max-width: min(320px, calc(100vw - 16px)); padding: var(--ld-space-2); border: none; border-radius: var(--ld-radius-popover); background-color: var(--ld-popover-bg-color); color: var(--ld-popover-fg-color); box-shadow: var(--ld-popover-shadow); } .ld-menu:popover-open { display: flex; flex-direction: column; } .ld-menu-item { display: flex; align-items: center; gap: var(--ld-space-3); min-height: 32px; padding: 0 12px; border: none; border-radius: var(--ld-radius-button); background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; } .ld-menu-item:hover, .ld-menu-item:focus { background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); color: inherit; outline: none; } .ld-menu-item:active { background-color: color-mix(in srgb, currentColor var(--ld-active-mix), transparent); } .ld-menu-item.destructive { color: var(--ld-destructive-color); } .ld-menu-item:disabled { opacity: var(--ld-disabled-opacity); cursor: default; } /* Auswahl im Menü (role="menuitemradio"): Haken rechts beim gewählten Eintrag */ .ld-menu-item[role="menuitemradio"]::after { content: ""; width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; } .ld-menu-item[role="menuitemradio"][aria-checked="true"]::after { background-color: currentColor; -webkit-mask: url(/_ld/icons/object-select-symbolic.svg) center / contain no-repeat; mask: url(/_ld/icons/object-select-symbolic.svg) center / contain no-repeat; } /* Hinweiszeile ohne Funktion (z. B. Mailadresse oben im Benutzermenü) */ .ld-menu-text { padding: 4px 12px 6px; font-size: calc(var(--ld-font-size) * .82); opacity: var(--ld-dim-opacity); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ld-menu-separator { border: none; border-top: 1px solid var(--ld-border-color); margin: var(--ld-space-1) 0; } /* ── Dialoge (AdwDialog, AdwAlertDialog) ──────────────────────────────── Natives : Fokus, Esc und Hintergrund bringt der Browser mit. mit .ld-dialog-header (Titel, Schließen), .ld-dialog-body und optional .ld-dialog-footer. Rückfrage: ldAlert in ld-adwaita.js baut .ld-dialog.ld-alert-dialog. */ .ld-dialog { width: min(560px, calc(100vw - 2 * var(--ld-space-3))); max-height: calc(100vh - 2 * var(--ld-space-5)); padding: 0; border: none; border-radius: var(--ld-radius-popover); background-color: var(--ld-dialog-bg-color); color: var(--ld-dialog-fg-color); box-shadow: var(--ld-dialog-shadow); overflow: auto; } .ld-dialog::backdrop { background-color: var(--ld-backdrop-color); } /* Der Dialog selbst bekommt den Fokus, wenn darin noch nichts bedienbar ist (laufender Vorgang). Ein Rahmen um das ganze Fenster wäre kein GNOME. */ .ld-dialog:focus, .ld-dialog:focus-visible { outline: none; } .ld-dialog.wide { width: min(1000px, calc(100vw - 2 * var(--ld-space-3))); } .ld-dialog-header { display: flex; align-items: center; gap: var(--ld-space-2); min-height: var(--ld-headerbar-height); padding: 0 var(--ld-space-2) 0 var(--ld-space-3); position: sticky; top: 0; background-color: inherit; } .ld-dialog-title { flex: 1; text-align: center; font-weight: 700; margin: 0; font-size: var(--ld-font-size); } /* Titel mit Untertitel (AdwWindowTitle):

Titel…

Untertitel farbig: .success / .error / .warning */ .ld-dialog-subtitle { display: block; font-weight: 400; font-size: calc(var(--ld-font-size) * .82); opacity: var(--ld-dim-opacity); } .ld-dialog-subtitle:empty { display: none; } .ld-dialog-subtitle.success { color: var(--ld-success-color); opacity: 1; } .ld-dialog-subtitle.error { color: var(--ld-error-color); opacity: 1; } .ld-dialog-subtitle.warning { color: var(--ld-warning-color); opacity: 1; } .ld-dialog-body { padding: var(--ld-space-3) var(--ld-space-5) var(--ld-space-5); } .ld-dialog-footer { display: flex; justify-content: flex-end; gap: var(--ld-space-3); padding: 0 var(--ld-space-5) var(--ld-space-5); } .ld-dialog.ld-alert-dialog { width: min(360px, calc(100vw - 2 * var(--ld-space-3))); border-radius: var(--ld-radius-alert); text-align: center; } .ld-alert-body { padding: 32px var(--ld-space-5) var(--ld-space-5); display: flex; flex-direction: column; gap: var(--ld-space-3); } .ld-alert-heading { font-size: calc(var(--ld-font-size) * 1.36); font-weight: 800; margin: 0; } .ld-alert-text { margin: 0; line-height: var(--ld-line-height); white-space: pre-line; overflow-wrap: anywhere; } .ld-alert-entry { text-align: start; width: 100%; } /* Knöpfe nebeneinander, Abbrechen links, Aktion rechts, Radius 12 */ /* Passen die Knöpfe nicht nebeneinander, rutschen sie untereinander (wie AdwAlertDialog). Vorher ragte „Import rückgängig machen“ aus dem Kasten. */ .ld-alert-actions { display: flex; flex-wrap: wrap; gap: var(--ld-space-3); padding: 0 var(--ld-space-5) var(--ld-space-5); } .ld-alert-actions > .ld-button { flex: 1 1 0; min-width: max-content; border-radius: var(--ld-radius-card); min-height: 44px; } /* Auf schmalen Bildschirmen als Blatt von unten (wie libadwaita) */ @media (max-width: 400px) { .ld-dialog:not(.ld-alert-dialog) { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--ld-radius-popover) var(--ld-radius-popover) 0 0; } } /* ── Avatar (AdwAvatar) ─────────────────────────────────────────────────
HK
, N = ldAvatarFarbe(name) aus ld-adwaita.js (wie libadwaita: g_str_hash(name) % 14 + 1). Farben aus libadwaita 1.10, Ressource /org/gnome/Adwaita/styles/gtk.css. */ .ld-avatar[class] { border: none; font-weight: 700; } .ld-avatar.ld-avatar-1 { background: linear-gradient(#83b6ec, #337fdc); color: #cfe1f5; } .ld-avatar.ld-avatar-2 { background: linear-gradient(#7ad9f1, #0f9ac8); color: #caeaf2; } .ld-avatar.ld-avatar-3 { background: linear-gradient(#8de6b1, #29ae74); color: #cef8d8; } .ld-avatar.ld-avatar-4 { background: linear-gradient(#b5e98a, #6ab85b); color: #e6f9d7; } .ld-avatar.ld-avatar-5 { background: linear-gradient(#f8e359, #d29d09); color: #f9f4e1; } .ld-avatar.ld-avatar-6 { background: linear-gradient(#ffcb62, #d68400); color: #ffead1; } .ld-avatar.ld-avatar-7 { background: linear-gradient(#ffa95a, #ed5b00); color: #ffe5c5; } .ld-avatar.ld-avatar-8 { background: linear-gradient(#f78773, #e62d42); color: #f8d2ce; } .ld-avatar.ld-avatar-9 { background: linear-gradient(#e973ab, #e33b6a); color: #fac7de; } .ld-avatar.ld-avatar-10 { background: linear-gradient(#cb78d4, #9945b5); color: #e7c2e8; } .ld-avatar.ld-avatar-11 { background: linear-gradient(#9e91e8, #7a59ca); color: #d5d2f5; } .ld-avatar.ld-avatar-12 { background: linear-gradient(#e3cf9c, #b08952); color: #f2eade; } .ld-avatar.ld-avatar-13 { background: linear-gradient(#be916d, #785336); color: #e5d6ca; } .ld-avatar.ld-avatar-14 { background: linear-gradient(#c0bfbc, #6e6d71); color: #d8d7d3; } /* ── Toast (AdwToast) ──────────────────────────────────────────────────── Unten mittig, neutral, Pille, höchstens ein Knopf. ldToast() in ld-adwaita.js baut ihn. Keine Farben je Meldungstyp (DESIGN.md). */ /* Der Host ist ein popover="manual" (ld-adwaita.js): so liegt er in der obersten Ebene und bleibt über offenen -Fenstern sichtbar. Die Vorgaben des Browsers für Popover (Rahmen, Rand, Mitte) sind zurückgesetzt. */ .ld-toast-host[popover] { /* ⚠️ Nicht `inset: auto`: Die Regel ist spezifischer als .ld-toast-host und setzte left/bottom mit zurück, der Toast lag oben links außerhalb (22.10.2026). */ top: auto; right: auto; left: 50%; bottom: var(--ld-space-5); margin: 0; padding: 0; border: none; background: none; overflow: visible; color: inherit; } .ld-toast-host:not(:popover-open)[popover] { display: none; } .ld-toast-host { position: fixed; left: 50%; bottom: var(--ld-space-5); transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: var(--ld-space-2); width: max-content; max-width: calc(100vw - 2 * var(--ld-space-3)); pointer-events: none; } .ld-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--ld-space-3); min-height: 42px; max-width: 100%; padding: 6px 6px 6px 18px; border-radius: var(--ld-radius-pill); background-color: var(--ld-toast-bg-color); color: var(--ld-toast-fg-color); box-shadow: var(--ld-toast-shadow); animation: ld-toast-rein var(--ld-duration) var(--ld-ease) both; } .ld-toast-text { padding-block: 4px; } .ld-toast:not(:has(.ld-button)) { padding-right: 18px; } .ld-toast .ld-button { color: var(--ld-toast-fg-color); min-height: 30px; padding: 3px 14px; } .ld-toast .ld-button.icon { width: 30px; border-radius: 50%; padding: 0; } .ld-toast.raus { animation: ld-toast-raus var(--ld-duration) var(--ld-ease) both; } @keyframes ld-toast-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes ld-toast-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .ld-toast, .ld-toast.raus, .ld-switch::before, .ld-spinner { animation-duration: 1ms; transition-duration: 1ms; } .ld-progress.pulse > span { animation-duration: 4s; } .ld-spinner { animation: ld-drehen 2s linear infinite; } } /* ── Hinweis an Symbolknöpfen (DESIGN.md › Symbole, Regel „Symbol oder Wort“) ──