/* ============================================================ COMMAND PALETTE (⌘/Ctrl + K) ------------------------------------------------------------ A site-wide quick launcher. Markup is injected by public/script/default/command-palette.js and appended to , so it lives OUTSIDE #main and survives SPA swaps. Styling reuses the design tokens declared in public/style/default/menu.css (--accent, --surface, --glass, --radius-*, --shadow-*, --font-ui …). Those tokens are defined on :root there and are global, so they're available here too. ============================================================ */ /* ---------- Discoverability triggers (nav + sidebar) -------- */ .nav-cmdk { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 9px; font-family: var(--font-ui, sans-serif); font-size: 12.5px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); background: var(--glass, rgba(255, 255, 255, 0.04)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-sm, 8px); cursor: pointer; transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s), color var(--transition, 0.2s); } .nav-cmdk:hover { background: var(--glass-hover, rgba(255, 255, 255, 0.08)); border-color: var(--accent, #5b8af7); color: var(--text, #e8e8ec); } .nav-cmdk .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Discreet icon-only variant used in the desktop nav bar (right side, next to the account chip / login). No label or kbd — just the glass. */ .nav-cmdk-icon { width: 32px; padding: 0; gap: 0; justify-content: center; background: transparent; border-color: transparent; } .nav-cmdk-icon:hover { background: var(--glass-hover, rgba(255, 255, 255, 0.08)); border-color: var(--glass-border, rgba(255, 255, 255, 0.07)); } .nav-cmdk-icon .icon { width: 17px; height: 17px; } .sidebar-cmdk kbd { font-family: var(--font-ui, sans-serif); font-size: 10.5px; line-height: 1; padding: 3px 5px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-xs, 4px); white-space: nowrap; } .sidebar-cmdk { justify-content: flex-start; } .sidebar-cmdk kbd { margin-left: auto; } /* ---------- Overlay root ----------------------------------- */ #cmdk { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: center; align-items: flex-start; font-family: var(--font-ui, sans-serif); } #cmdk[hidden] { display: none; } #cmdk .cmdk-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%); } /* ---------- Dialog ----------------------------------------- */ #cmdk .cmdk-dialog { position: relative; width: min(640px, calc(100vw - 32px)); margin-top: 12vh; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface, #131317); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.7)); color: var(--text, #e8e8ec); } /* ---------- Search input row ------------------------------- */ #cmdk .cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); } #cmdk .cmdk-search-icon { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: var(--text-muted, rgba(232, 232, 236, 0.45)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #cmdk .cmdk-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text, #e8e8ec); font-family: inherit; font-size: 16px; /* 16px avoids iOS zoom-on-focus */ line-height: 1.4; } #cmdk .cmdk-input::placeholder { color: var(--text-dim, rgba(232, 232, 236, 0.25)); } #cmdk .cmdk-esc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 10.5px; padding: 3px 6px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-xs, 4px); cursor: pointer; transition: background var(--transition, 0.2s), color var(--transition, 0.2s), border-color var(--transition, 0.2s); } #cmdk .cmdk-esc:hover { background: var(--glass-hover, rgba(255, 255, 255, 0.08)); border-color: var(--accent, #5b8af7); color: var(--text, #e8e8ec); } #cmdk .cmdk-esc-x { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Results --------------------------------------- */ #cmdk .cmdk-results { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--glass-border, rgba(255, 255, 255, 0.07)) transparent; } #cmdk .cmdk-results::-webkit-scrollbar { width: 9px; } #cmdk .cmdk-results::-webkit-scrollbar-thumb { background: var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } #cmdk .cmdk-group-label { padding: 10px 12px 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim, rgba(232, 232, 236, 0.25)); } #cmdk .cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm, 8px); cursor: pointer; scroll-margin: 8px; } #cmdk .cmdk-item[aria-selected="true"] { background: var(--accent-subtle, rgba(91, 138, 247, 0.10)); box-shadow: inset 0 0 0 1px var(--accent-glow, rgba(91, 138, 247, 0.18)); } #cmdk .cmdk-item-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm, 8px); background: var(--glass, rgba(255, 255, 255, 0.04)); color: var(--text-muted, rgba(232, 232, 236, 0.45)); } #cmdk .cmdk-item[aria-selected="true"] .cmdk-item-icon { color: var(--accent, #5b8af7); } #cmdk .cmdk-item-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Person avatar (image or colored initial) */ #cmdk .cmdk-avatar { font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; background: var(--accent, #5b8af7); overflow: hidden; } #cmdk .cmdk-avatar img { width: 100%; height: 100%; object-fit: cover; } #cmdk .cmdk-item-body { flex: 1 1 auto; min-width: 0; } #cmdk .cmdk-item-label { font-size: 14px; color: var(--text, #e8e8ec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cmdk .cmdk-item-label mark { background: transparent; color: var(--accent, #5b8af7); font-weight: 600; } #cmdk .cmdk-item-sub { margin-top: 1px; font-size: 12px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cmdk .cmdk-item-badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent, #5b8af7); border-radius: 99px; } #cmdk .cmdk-item-action { flex: 0 0 auto; display: none; align-items: center; gap: 5px; padding: 4px 8px; font-family: inherit; font-size: 11.5px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); background: var(--glass, rgba(255, 255, 255, 0.04)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-xs, 4px); cursor: pointer; transition: background var(--transition, 0.2s), color var(--transition, 0.2s); } #cmdk .cmdk-item-action:hover { background: var(--glass-hover, rgba(255, 255, 255, 0.08)); color: var(--text, #e8e8ec); } #cmdk .cmdk-item[aria-selected="true"] .cmdk-item-action { display: inline-flex; } #cmdk .cmdk-item-action kbd { font-family: inherit; font-size: 10px; opacity: 0.8; } /* Right-aligned trailing hint (e.g. "Page", "↵") */ #cmdk .cmdk-item-enter { flex: 0 0 auto; display: none; font-size: 11px; color: var(--text-dim, rgba(232, 232, 236, 0.25)); } #cmdk .cmdk-item[aria-selected="true"] .cmdk-item-enter { display: inline; } /* ---------- Empty / loading states ------------------------- */ #cmdk .cmdk-empty { padding: 34px 16px; text-align: center; font-size: 13.5px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); } #cmdk .cmdk-loading { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-dim, rgba(232, 232, 236, 0.25)); } #cmdk .cmdk-spinner { width: 13px; height: 13px; border: 2px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-top-color: var(--accent, #5b8af7); border-radius: 50%; animation: cmdk-spin 0.7s linear infinite; } /* ---------- Footer hint bar -------------------------------- */ #cmdk .cmdk-footer { display: flex; align-items: center; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); font-size: 11.5px; color: var(--text-dim, rgba(232, 232, 236, 0.25)); } #cmdk .cmdk-footer span { display: inline-flex; align-items: center; gap: 5px; } #cmdk .cmdk-footer kbd { font-family: inherit; font-size: 10.5px; padding: 2px 5px; color: var(--text-muted, rgba(232, 232, 236, 0.45)); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07)); border-radius: var(--radius-xs, 4px); } /* ---------- Motion ----------------------------------------- */ @keyframes cmdk-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { @keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmdk-pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } #cmdk:not([hidden]) .cmdk-backdrop { animation: cmdk-fade 0.16s ease; } #cmdk:not([hidden]) .cmdk-dialog { animation: cmdk-pop 0.18s cubic-bezier(0.25, 0.8, 0.25, 1); } } /* ---------- Mobile ----------------------------------------- */ @media (max-width: 560px) { #cmdk .cmdk-dialog { width: 100vw; max-height: 100vh; height: 100%; margin-top: 0; border-radius: 0; border: none; } #cmdk .cmdk-footer { display: none; } /* On phones the dialog is full-screen (no visible backdrop) and there's no Esc key, so the close button is the ONLY way out. Swap the "Esc" hint for a clear ✕ icon with a finger-sized tap target. */ #cmdk .cmdk-esc { padding: 7px; } #cmdk .cmdk-esc-label { display: none; } #cmdk .cmdk-esc-x { display: block; } }