/* Folio quick-open dialog (⌘P). * * Loaded on every page via base.html alongside the matching JS module. * Markup is injected by quick-open.js into on first open. The * CSS variables (--surface, --bg, --accent, etc.) come from site.css * and are defined on :root, so the dialog gets themed correctly on * both published pages and the editor without any extra plumbing. * * z-index 1000 sits above the editor surface and above published-page * chrome. The search overlay (base.html) shares the same overlay * z-index regime; only one of the two opens at a time so they never * stack against each other in practice. */ .quick-open-dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; } .quick-open-dialog[hidden] { display: none; } .quick-open-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); } .quick-open-panel { position: relative; background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); padding: 14px 14px 10px; width: min(480px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; } .quick-open-label { font-size: 11px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; } .quick-open-input { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); width: 100%; box-sizing: border-box; } .quick-open-input:focus { outline: none; border-color: var(--accent); } .quick-open-results { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .quick-open-results:empty { display: none; } .quick-open-result { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 4px; cursor: pointer; /* Prevents text selection jitter on repeated arrow-key navigation. */ user-select: none; } .quick-open-result:hover, .quick-open-result[aria-selected="true"] { background: var(--accent-soft); } .quick-open-result-label { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-open-result-path { font-size: 11px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-open-hint { font-size: 11px; color: var(--faint, var(--muted)); text-align: right; padding-top: 2px; border-top: 1px solid var(--border); margin-top: 2px; }