/* ================================================================ GalSol — Tooltips | tooltip.css Replaces the browser's native `title` bubble everywhere. Pair with tooltip.js, which moves each element's `title` into `data-tip` so the native one never renders. position:fixed on is the point: the collapsed sidebar's nav has to scroll, so it cannot be overflow:visible, and the CSS ::after tooltips it used to draw were clipped by it. A fixed layer is never clipped by an ancestor. Load AFTER the page's own CSS and BEFORE theme-light.css. ================================================================ */ :root { --tip-bg: rgba(10, 15, 26, .97); --tip-text: #e8eef7; --tip-dim: #8ea3bd; --tip-border: rgba(255, 255, 255, .13); --tip-shadow: 0 12px 34px rgba(0, 0, 0, .46); --tip-kbd-bg: rgba(255, 255, 255, .08); } :root[data-theme="light"] { --tip-bg: #101826; --tip-text: #f1f5f9; --tip-dim: #a6b6cc; --tip-border: rgba(255, 255, 255, .10); --tip-shadow: 0 12px 34px rgba(15, 23, 42, .28); --tip-kbd-bg: rgba(255, 255, 255, .12); } .gs-tip { position: fixed; z-index: 2147483000; /* above every modal, rail and overlay in the app */ display: flex; align-items: center; gap: 9px; max-width: 280px; padding: 7px 11px; border-radius: 9px; background: var(--tip-bg); border: 1px solid var(--tip-border); box-shadow: var(--tip-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--tip-text); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: .1px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px) scale(.97); transition: opacity .14s ease, transform .14s ease; } .gs-tip.in { opacity: 1; transform: none; } /* Longer copy is allowed to wrap rather than run off the screen. */ .gs-tip.wrap { white-space: normal; } .gs-tip-label { min-width: 0; } /* Shortcut hint, e.g. Ctrl ⇧ H */ /* `display: inline-flex` beats the UA rule for [hidden], so without this the chip still painted — an empty rounded pill floating after the label. */ .gs-tip-kbd[hidden] { display: none !important; } .gs-tip-kbd { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; background: var(--tip-kbd-bg); border: 1px solid var(--tip-border); color: var(--tip-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } /* Arrow. Rotated square, positioned by tooltip.js via the side class. */ .gs-tip::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--tip-bg); border: 1px solid var(--tip-border); transform: rotate(45deg); } .gs-tip.side-right::after { left: -5px; top: 50%; margin-top: -4px; border-right: 0; border-bottom: 0; } .gs-tip.side-left::after { right: -5px; top: 50%; margin-top: -4px; border-left: 0; border-top: 0; } .gs-tip.side-top::after { bottom: -5px; left: 50%; margin-left: -4px; border-left: 0; border-top: 0; } .gs-tip.side-bottom::after { top: -5px; left: 50%; margin-left: -4px; border-right: 0; border-bottom: 0; } /* When the arrow would fall outside a tooltip that got clamped sideways, tooltip.js drops it rather than leaving it pointing at nothing. */ .gs-tip.no-arrow::after { display: none; } @media (prefers-reduced-motion: reduce) { .gs-tip { transition: none; } } /* The sidebar drew its own ::after label when collapsed. One tooltip system, not two — tooltip.js handles this now and is never clipped. */ .sidebar.collapsed .nav-item::after { display: none !important; }