/* ui-shell.css * Companion styles for ui-shell.js — only what's awkward in pure Tailwind. * Brand: emerald-500 primary, dark via .dark on , Inter, tabular-nums. */ /* ----------------------------- kbd chip ----------------------------- */ .ui-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.4rem; padding: 0 0.4rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 11px; font-weight: 600; color: #52525b; /* zinc-600 */ background: #f4f4f5; /* zinc-100 */ border: 1px solid #e4e4e7; /* zinc-200 */ border-bottom-width: 2px; border-radius: 6px; line-height: 1; white-space: nowrap; user-select: none; vertical-align: middle; } .dark .ui-kbd { color: #d4d4d8; /* zinc-300 */ background: #18181b; /* zinc-900 */ border-color: #27272a; /* zinc-800 */ } .ui-kbd-plus { display: inline-block; padding: 0 0.2rem; font-size: 10px; color: #a1a1aa; /* zinc-400 */ } .ui-kbd-then { display: inline-block; padding: 0 0.4rem; font-size: 10px; font-style: italic; color: #a1a1aa; } /* ----------------------------- slide-over ----------------------------- */ /* Smooth easing matches design spec: cubic-bezier(0.16, 1, 0.3, 1) over 200ms */ .ui-slideover-panel { transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .ui-slideover-backdrop { transition: opacity 150ms ease; } /* ----------------------------- command palette ----------------------------- */ .ui-palette-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(16 185 129 / 0.4); /* emerald-500/40 */ } #ui-shell-palette [data-role="input"]::placeholder { font-feature-settings: "tnum"; } /* Backdrop blur fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(4px)) { #ui-shell-palette [data-role="backdrop"], #ui-shell-kbd-sheet [data-role="backdrop"] { background-color: rgba(0, 0, 0, 0.5); } } /* ----------------------------- toast ----------------------------- */ @keyframes uiToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ui-toast-enter { animation: uiToastIn 150ms ease; } /* ----------------------------- focus rings (palette items) ----------------------------- */ .ui-palette-item[aria-selected="true"] { position: relative; } .ui-palette-item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #10b981; /* emerald-500 */ border-radius: 0 2px 2px 0; } /* ----------------------------- reduced motion ----------------------------- */ @media (prefers-reduced-motion: reduce) { .ui-slideover-panel, .ui-slideover-backdrop, .ui-toast-enter { transition: none !important; animation: none !important; } }