/* Gaston.Cloud.Ui — AppSwitcher (9-Punkte-Menue). Komplett unter .app-switcher gescoped; Theming ueber --asw-* Custom Properties mit Dark-Defaults ("Midnight Console"). Hosts mit Light-Theme (GastonOneStatus) ueberschreiben die Variablen in ihrer eigenen app.css. */ .app-switcher { --asw-surface: #363944; --asw-surface-2: #2f323d; --asw-border: #474b58; --asw-text: #e8e9ec; --asw-muted: #a0a4af; --asw-accent: #c793c3; --asw-accent-deep: #7d4b76; --asw-shadow: rgba(0, 0, 0, 0.45); position: relative; display: inline-flex; align-self: center; } /* Light-Theme: alle Hosts stempeln data-theme auf (theme-init.js bzw. ThemeToggle in GastonOneStatus); ohne Attribut entscheidet das OS. */ :root[data-theme="light"] .app-switcher { --asw-surface: #ffffff; --asw-surface-2: #f4f4f7; --asw-border: #d6d8e0; --asw-text: #2b2e3a; --asw-muted: #6a6f7d; --asw-shadow: rgba(30, 32, 44, 0.18); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .app-switcher { --asw-surface: #ffffff; --asw-surface-2: #f4f4f7; --asw-border: #d6d8e0; --asw-text: #2b2e3a; --asw-muted: #6a6f7d; --asw-shadow: rgba(30, 32, 44, 0.18); } } /* ---- Trigger (9 Punkte) ---- */ .app-switcher > .asw-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: currentColor; opacity: 0.85; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .app-switcher > .asw-trigger::-webkit-details-marker, .app-switcher > .asw-trigger::marker { display: none; content: ""; } .app-switcher > .asw-trigger:hover { opacity: 1; background: color-mix(in srgb, var(--asw-accent) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--asw-accent) 35%, transparent), 0 0 14px color-mix(in srgb, var(--asw-accent) 25%, transparent); } .app-switcher > .asw-trigger:focus-visible { outline: 2px solid var(--asw-accent); outline-offset: 2px; } .app-switcher[open] > .asw-trigger { opacity: 1; background: color-mix(in srgb, var(--asw-accent) 24%, transparent); transform: rotate(45deg); } /* ---- Panel ---- */ .app-switcher > .asw-panel { position: absolute; top: calc(100% + 10px); right: -4px; z-index: 2200; min-width: 300px; padding: 6px; border-radius: 16px; border: 1px solid var(--asw-border); background: linear-gradient(180deg, var(--asw-surface) 0%, var(--asw-surface-2) 100%); box-shadow: 0 14px 38px var(--asw-shadow), 0 2px 8px var(--asw-shadow); overflow: hidden; } /* Pflaume-Lichtkante am oberen Rand */ .app-switcher > .asw-panel::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--asw-accent), transparent); opacity: 0.7; } .app-switcher[open] > .asw-panel { animation: asw-pop 0.18s ease-out; } @keyframes asw-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .app-switcher[open] > .asw-panel { animation: none; } .app-switcher > .asw-trigger, .app-switcher .asw-tile { transition: none; } } /* ---- Kopfzeile ---- */ .app-switcher .asw-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 8px; } .app-switcher .asw-brand { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; color: var(--asw-text); } .app-switcher .asw-brand-dot { color: var(--asw-accent); } .app-switcher .asw-head-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--asw-muted); } /* ---- Kachel-Grid ---- */ .app-switcher .asw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px; } .app-switcher .asw-tile { --asw-tile-accent: var(--asw-accent); position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px 11px; border-radius: 12px; text-decoration: none; color: var(--asw-text); transition: background-color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease; } .app-switcher .asw-tile:hover { background: color-mix(in srgb, var(--asw-tile-accent) 14%, transparent); transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asw-tile-accent) 30%, transparent); } .app-switcher .asw-tile:focus-visible { outline: 2px solid var(--asw-tile-accent); outline-offset: -2px; } .app-switcher .asw-tile-icon { display: inline-flex; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px var(--asw-shadow); } .app-switcher .asw-tile-icon img { display: block; width: 28px; height: 28px; } .app-switcher .asw-tile-label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; color: var(--asw-muted); transition: color 0.13s ease; } .app-switcher .asw-tile:hover .asw-tile-label { color: var(--asw-text); } /* App-Akzentbalken unter jeder Kachel (Wiedererkennung, da mehrere Apps dasselbe Favicon teilen) */ .app-switcher .asw-tile::after { content: ""; position: absolute; bottom: 5px; width: 16px; height: 2px; border-radius: 1px; background: var(--asw-tile-accent); opacity: 0.55; transition: width 0.15s ease, opacity 0.15s ease; } .app-switcher .asw-tile:hover::after { width: 28px; opacity: 1; } /* ---- Aktuelle App ---- */ .app-switcher .asw-current { background: color-mix(in srgb, var(--asw-tile-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asw-tile-accent) 45%, transparent); } .app-switcher .asw-current .asw-tile-label { color: var(--asw-text); font-weight: 600; } .app-switcher .asw-current::after { width: 28px; opacity: 1; }