/* zoa-overlay — preview-only feedback toolbar, tray, and dialogs. Hidden until is present (set client-side in base.njk). All visuals live here; behavior in preview-overlay.js. */ :root { --zoa-ov-bg: #1f2a26; --zoa-ov-bg-elev: #28342f; --zoa-ov-fg: #f6efde; --zoa-ov-muted: rgba(246, 239, 222, 0.65); --zoa-ov-accent: #e14836; --zoa-ov-success: #5fbf72; --zoa-ov-warn: #ffcc66; --zoa-ov-danger: #ff6e6e; --zoa-ov-border: rgba(246, 239, 222, 0.12); --zoa-ov-radius: 10px; --zoa-ov-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); --zoa-ov-z: 999990; } html:not(.is-preview) #zoa-overlay, html:not(.is-preview) #zoa-overlay-show, html:not(.is-preview) #zoa-tray, html:not(.is-preview) #zoa-modal, html:not(.is-preview) #zoa-toast, html:not(.is-preview) #zoa-comment-popover { display: none !important; } /* Honor the [hidden] attribute even on overlay components — id selectors would otherwise win over the browser default. */ #zoa-overlay[hidden], #zoa-overlay-show[hidden], #zoa-tray[hidden], #zoa-modal[hidden], #zoa-toast[hidden], #zoa-comment-popover[hidden], #zoa-hover-label[hidden] { display: none !important; } /* ── Toolbar ───────────────────────────────────────────────────── */ #zoa-overlay { position: fixed; bottom: 16px; right: 16px; z-index: var(--zoa-ov-z); display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); border-radius: var(--zoa-ov-radius); box-shadow: var(--zoa-ov-shadow); font: 13px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; user-select: none; } .zoa-toolbar__pill, .zoa-toolbar__btn { appearance: none; background: transparent; color: inherit; border: 1px solid transparent; border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, border-color 0.12s; } .zoa-toolbar__pill:hover, .zoa-toolbar__btn:hover { background: var(--zoa-ov-bg-elev); } .zoa-toolbar__pill[aria-pressed="true"] { background: var(--zoa-ov-bg-elev); border-color: var(--zoa-ov-border); color: var(--zoa-ov-fg); } .zoa-toolbar__pill[data-mode="comment"][aria-pressed="true"] { box-shadow: inset 0 -2px 0 #6cb8ff; } .zoa-toolbar__pill[data-mode="edit"][aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--zoa-ov-warn); } .zoa-toolbar__pill[data-mode="brief"][aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--zoa-ov-accent); } .zoa-toolbar__icon { opacity: 0.85; font-size: 14px; } .zoa-toolbar__divider { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--zoa-ov-border); } .zoa-toolbar__btn--tray .zoa-toolbar__count { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--zoa-ov-accent); color: #fff; font-weight: 600; font-size: 12px; text-align: center; } .zoa-toolbar__btn--tray[data-pending="0"] .zoa-toolbar__count { background: rgba(246,239,222,0.18); color: var(--zoa-ov-muted); } #zoa-overlay-show { position: fixed; bottom: 16px; right: 16px; z-index: var(--zoa-ov-z); background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); border: 1px solid var(--zoa-ov-border); border-radius: var(--zoa-ov-radius); box-shadow: var(--zoa-ov-shadow); padding: 8px 14px; font: 13px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } /* ── Mode-driven page styles ───────────────────────────────────── */ html.zoa-mode-comment [data-zoa-hover="true"] { outline: 2px dashed #6cb8ff; outline-offset: 2px; cursor: pointer; } html.zoa-mode-edit [data-zoa-anchor]:hover { outline: 2px dashed var(--zoa-ov-warn); outline-offset: 2px; } html.zoa-mode-edit [contenteditable="true"]:focus { outline: 2px solid var(--zoa-ov-warn); outline-offset: 3px; background: rgba(255, 204, 102, 0.08); } [data-zoa-changed="true"] { background: linear-gradient(to bottom, transparent 60%, rgba(255, 204, 102, 0.45) 60%); } /* Hover label that follows the element being hovered in comment mode */ #zoa-hover-label { position: fixed; z-index: var(--zoa-ov-z); background: #11252e; color: #e6f4ff; font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 8px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); pointer-events: none; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } #zoa-hover-label .label { font-weight: 700; } #zoa-hover-label .selector { opacity: 0.65; } #zoa-hover-label .scoped { color: #ffd479; opacity: 0.9; } /* Comment dot anchored to elements */ .zoa-comment-dot { position: absolute; width: 18px; height: 18px; background: #6cb8ff; color: #11252e; font-weight: 700; font-size: 11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: calc(var(--zoa-ov-z) - 1); } /* ── Tray ───────────────────────────────────────────────────────── */ #zoa-tray { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); z-index: calc(var(--zoa-ov-z) + 2); display: flex; flex-direction: column; box-shadow: -16px 0 36px rgba(0,0,0,0.35); font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; overflow: auto; } .zoa-tray__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--zoa-ov-border); } .zoa-tray__header h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--zoa-ov-muted); } .zoa-tray__close { appearance: none; background: transparent; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 0 6px; } .zoa-tray__section { padding: 14px 16px; border-bottom: 1px solid var(--zoa-ov-border); } .zoa-tray__section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zoa-ov-muted); } .zoa-tray__hint { margin: 0 0 8px; font-size: 12px; color: var(--zoa-ov-muted); } .zoa-tray__section textarea { width: 100%; background: var(--zoa-ov-bg-elev); color: var(--zoa-ov-fg); border: 1px solid var(--zoa-ov-border); border-radius: 6px; padding: 8px 10px; font: inherit; resize: vertical; } .zoa-tray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .zoa-tray__list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; background: var(--zoa-ov-bg-elev); border-radius: 6px; } .zoa-tray__list .kind { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; margin-right: 6px; background: rgba(246, 239, 222, 0.1); color: var(--zoa-ov-muted); } .zoa-tray__list .kind--edit { background: rgba(255, 204, 102, 0.18); color: var(--zoa-ov-warn); } .zoa-tray__list .kind--comment { background: rgba(108, 184, 255, 0.16); color: #6cb8ff; } .zoa-tray__list .meta { display: block; font-size: 12px; color: var(--zoa-ov-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .zoa-tray__list button.zoa-tray__remove { appearance: none; background: transparent; color: inherit; border: 0; cursor: pointer; font-size: 14px; opacity: 0.6; } .zoa-tray__list button.zoa-tray__remove:hover { opacity: 1; } .zoa-tray__footer { margin-top: auto; padding: 14px 16px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--zoa-ov-border); background: var(--zoa-ov-bg); position: sticky; bottom: 0; } .zoa-tray__btn { appearance: none; background: var(--zoa-ov-accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; font-weight: 600; } .zoa-tray__btn--ghost { background: transparent; border: 1px solid var(--zoa-ov-border); color: var(--zoa-ov-muted); font-weight: 500; } .zoa-tray__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Modal (history) ────────────────────────────────────────────── */ #zoa-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--zoa-ov-z) + 4); display: grid; place-items: center; padding: 24px; } .zoa-modal__panel { background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); border-radius: var(--zoa-ov-radius); width: min(820px, 100%); max-height: 90vh; display: flex; flex-direction: column; font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; } .zoa-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--zoa-ov-border); } .zoa-modal__header h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--zoa-ov-muted); } .zoa-modal__close { appearance: none; background: transparent; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 0 6px; } .zoa-modal__body { padding: 14px 18px; overflow: auto; } .zoa-modal__body .commit { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--zoa-ov-border); } .zoa-modal__body .sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--zoa-ov-warn); font-size: 12px; } .zoa-modal__body .author { color: var(--zoa-ov-muted); font-size: 12px; } .zoa-modal__body .message { color: var(--zoa-ov-fg); } .zoa-modal__body .ago { color: var(--zoa-ov-muted); font-size: 12px; } .zoa-modal__body button { appearance: none; background: transparent; color: var(--zoa-ov-fg); border: 1px solid var(--zoa-ov-border); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .zoa-modal__body button:hover { background: var(--zoa-ov-bg-elev); } .zoa-modal__body pre { background: #11181a; color: #d8d2bf; border-radius: 6px; padding: 10px 12px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; max-height: 300px; } /* ── Toast ──────────────────────────────────────────────────────── */ #zoa-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: calc(var(--zoa-ov-z) + 6); background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); border-radius: var(--zoa-ov-radius); padding: 10px 16px; font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; box-shadow: var(--zoa-ov-shadow); max-width: 80vw; } #zoa-toast .ok { color: var(--zoa-ov-success); } #zoa-toast .warn { color: var(--zoa-ov-warn); } #zoa-toast .err { color: var(--zoa-ov-danger); } /* ── Comment popover ────────────────────────────────────────────── */ #zoa-comment-popover { position: absolute; z-index: calc(var(--zoa-ov-z) + 1); background: var(--zoa-ov-bg); color: var(--zoa-ov-fg); border-radius: var(--zoa-ov-radius); padding: 12px; width: 320px; box-shadow: var(--zoa-ov-shadow); font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; } .zoa-comment-popover__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--zoa-ov-border); padding-bottom: 8px; } .zoa-comment-popover__component { font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: #6cb8ff; } .zoa-comment-popover__source { font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--zoa-ov-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; text-align: right; } #zoa-comment-popover textarea { width: 100%; background: var(--zoa-ov-bg-elev); color: var(--zoa-ov-fg); border: 1px solid var(--zoa-ov-border); border-radius: 6px; padding: 6px 8px; font: inherit; resize: vertical; } .zoa-comment-popover__scope { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; } .zoa-comment-popover__scope legend { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--zoa-ov-muted); margin-bottom: 4px; } .zoa-comment-popover__scope label { font-size: 12px; color: var(--zoa-ov-fg); display: flex; align-items: center; gap: 6px; cursor: pointer; } .zoa-comment-popover__scope label[hidden] { display: none; } .zoa-comment-popover__scope input[type="radio"] { accent-color: var(--zoa-ov-accent); } .zoa-comment-popover__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; } #zoa-comment-popover button { appearance: none; background: var(--zoa-ov-accent); color: #fff; border: 0; border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; font-weight: 600; } #zoa-comment-popover button[data-action="cancel-comment"] { background: transparent; border: 1px solid var(--zoa-ov-border); color: var(--zoa-ov-muted); font-weight: 500; } /* ── Hide overlay on /admin/promote/ since it has its own controls ── */ html[data-pathname^="/admin/promote"] #zoa-overlay, html[data-pathname^="/admin/promote"] #zoa-tray { display: none; }