/* ══════════════════════════════════════════════════════════════ Control: ZTooltip — Reusable Tooltip Pattern ══════════════════════════════════════════════════════════════ Bubble wird vom JS-Singleton (ZTooltip) in angehängt und über data-state="visible" eingeblendet. API + Markup-Beispiele: siehe ui_catalog.html, Tab "Controls". ══════════════════════════════════════════════════════════════ */ :root { --z-tooltip-max-width: 280px; --z-tooltip-arrow: 6px; --z-tooltip-offset: 8px; /* Light-Mode: gedämpft-dunkle Bubble auf hellem Hintergrund. Etwas heller als slate-800 — weniger "blockig", besser lesbar. */ --z-tooltip-bg: #475569; /* slate-600 */ --z-tooltip-text: #f8fafc; /* slate-50 */ --z-tooltip-text-muted: rgba(248,250,252,0.78); --z-tooltip-border: rgba(255,255,255,0.10); --z-tooltip-divider: rgba(255,255,255,0.20); --z-tooltip-kbd-bg: rgba(255,255,255,0.14); --z-tooltip-kbd-border: rgba(255,255,255,0.24); --z-tooltip-shadow: 0 6px 18px rgba(15,23,42,0.18), 0 2px 4px rgba(15,23,42,0.10); } [data-theme="dark"] { /* Dark-Mode: helle, deutlich abgehobene Bubble — nicht "noch dunkler". Hebt sich von --z-bg-card (sehr dunkles Card-BG) sichtbar ab. */ --z-tooltip-bg: hsla(190, 32%, 32%, 1); --z-tooltip-text: hsla(190, 20%, 96%, 1); --z-tooltip-text-muted: hsla(190, 14%, 82%, 1); --z-tooltip-border: hsla(190, 30%, 44%, 1); --z-tooltip-divider: hsla(190, 25%, 48%, 1); --z-tooltip-kbd-bg: hsla(190, 40%, 22%, 1); --z-tooltip-kbd-border: hsla(190, 30%, 44%, 1); --z-tooltip-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.40); } .z-tooltip { position: fixed; top: 0; left: 0; z-index: 10000; width: max-content; max-width: var(--z-tooltip-max-width); padding: 0.5rem 0.65rem; background: var(--z-tooltip-bg); color: var(--z-tooltip-text); border: 1px solid var(--z-tooltip-border); border-radius: 0.375rem; box-shadow: var(--z-tooltip-shadow); font-size: 0.75rem; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease, transform 120ms ease; } .z-tooltip[data-state="visible"] { opacity: 1; transform: translateY(0); } /* ── Sub-Slots ───────────────────────────────────────────────── */ .z-tooltip__body { color: var(--z-tooltip-text); } .z-tooltip__body strong { font-weight: 600; color: var(--z-tooltip-text); display: block; margin-bottom: 0.2rem; } .z-tooltip__body p { margin: 0.25rem 0 0; color: var(--z-tooltip-text-muted); } .z-tooltip__body p:first-child { margin-top: 0; } .z-tooltip__body img, .z-tooltip__body svg { display: block; max-width: 100%; height: auto; margin-top: 0.4rem; border-radius: 0.25rem; } .z-tooltip__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; background: var(--z-tooltip-kbd-bg); color: var(--z-tooltip-text); padding: 0.05rem 0.3rem; border-radius: 0.2rem; } /* ── Shortcut-Badge ──────────────────────────────────────────── */ .z-tooltip__shortcut { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--z-tooltip-divider); font-size: 0.8125rem; color: var(--z-tooltip-text-muted); } .z-tooltip__shortcut kbd, .z-tooltip__body kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.625rem; padding: 0 0.45rem; background: var(--z-tooltip-kbd-bg); border: 1px solid var(--z-tooltip-kbd-border); border-radius: 0.3125rem; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18); /* System-UI bevorzugt — Apple-Glyphs ⇧⌘⌥⌃ werden in San Francisco deutlich voller/breiter gerendert als in monospace-Fonts. */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: 0.8125rem; font-weight: 600; color: var(--z-tooltip-text); line-height: 1; } /* Modifier-Tasten (Shift, Cmd, Alt, Ctrl, Win) bekommen einen Tick mehr Größe und etwas Extra-Breite, damit die Symbole nicht in der Pille verschwinden. JS markiert sie via `is-modifier` (siehe tooltip.js). */ .z-tooltip__shortcut kbd.is-modifier, .z-tooltip__body kbd.is-modifier { min-width: 1.75rem; font-size: 0.9375rem; padding: 0 0.4rem; } /* ── Pfeil ───────────────────────────────────────────────────── */ .z-tooltip::after { content: ""; position: absolute; width: 0; height: 0; border: var(--z-tooltip-arrow) solid transparent; } .z-tooltip[data-placement="top"]::after { bottom: calc(var(--z-tooltip-arrow) * -2 + 1px); left: 50%; transform: translateX(-50%); border-top-color: var(--z-tooltip-bg); border-bottom: 0; } .z-tooltip[data-placement="bottom"]::after { top: calc(var(--z-tooltip-arrow) * -2 + 1px); left: 50%; transform: translateX(-50%); border-bottom-color: var(--z-tooltip-bg); border-top: 0; } .z-tooltip[data-placement="left"]::after { right: calc(var(--z-tooltip-arrow) * -2 + 1px); top: 50%; transform: translateY(-50%); border-left-color: var(--z-tooltip-bg); border-right: 0; } .z-tooltip[data-placement="right"]::after { left: calc(var(--z-tooltip-arrow) * -2 + 1px); top: 50%; transform: translateY(-50%); border-right-color: var(--z-tooltip-bg); border-left: 0; } /* ── Disabled-Look am Trigger (optional vom Konsumenten) ─────── */ .z-tooltip-trigger--disabled { color: var(--z-text-muted); filter: grayscale(1); } .z-tooltip-trigger--disabled > span { opacity: 0.45; }