/* ============================================================ Edgeless — whole-page spatial canvas (light + dark) Everything is scoped under .edgeless-root, a fixed full-page overlay mounted on . Cards are read-only block previews; editing stays in the linear editor. Theme comes entirely from the app CSS variables so light/dark "just works". ============================================================ */ .edgeless-root { position: fixed; inset: 0; z-index: 240; /* above the app chrome, below toasts if any sit higher */ display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); animation: edgeless-fade 0.14s ease; } @keyframes edgeless-fade { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------- top bar ---------------------------- */ .edgeless-bar { flex: 0 0 auto; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--bg-modal); user-select: none; } .edgeless-back { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 8px; border-radius: var(--radius-ctl, 8px); font-size: 13.5px; font-weight: 500; color: var(--text-light); border: 1px solid var(--border); background: var(--bg); } .edgeless-back:hover { background: var(--bg-hover); color: var(--text); } .edgeless-back-arrow { font-size: 18px; line-height: 1; margin-top: -1px; } .edgeless-title { font-family: var(--font-display, var(--font)); font-weight: 600; font-size: 15px; color: var(--text); } .edgeless-meta { font-size: 12.5px; color: var(--text-faint); } .edgeless-spacer { flex: 1 1 auto; } /* floating-style control cluster (mirrors .graph-controls) */ .edgeless-controls { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); box-shadow: var(--shadow-card); } .edgeless-btn { width: 26px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--text-light); } .edgeless-btn:hover { background: var(--bg-hover); color: var(--text); } .edgeless-zoom { min-width: 42px; text-align: center; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* --------------------------- viewport / world --------------------------- */ .edgeless-viewport { position: relative; flex: 1 1 auto; overflow: hidden; cursor: grab; touch-action: none; /* pointer events own pan/drag */ /* subtle dotted board so pan/zoom is legible */ background-color: var(--bg); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 24px 24px; } .edgeless-viewport.is-panning { cursor: grabbing; } .edgeless-viewport.is-space { cursor: grab; } .edgeless-viewport.is-space.is-panning { cursor: grabbing; } .edgeless-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } /* ------------------------------- cards ------------------------------- */ .edgeless-card { position: absolute; box-sizing: border-box; max-height: 360px; overflow: hidden; display: flex; flex-direction: column; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius-card, 10px); background: var(--bg-modal); box-shadow: var(--shadow-card); cursor: grab; transition: box-shadow 0.12s ease, border-color 0.12s ease, transform 0.02s; } .edgeless-card:hover { border-color: var(--border-strong); } .edgeless-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .edgeless-card.is-dragging { cursor: grabbing; z-index: 10; box-shadow: rgba(20, 22, 43, 0.18) 0 10px 28px, var(--shadow-card); border-color: var(--accent); } .edgeless-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-faint); user-select: none; } .ec-type-icon { font-size: 11px; font-weight: 700; min-width: 16px; text-align: center; line-height: 1; } .ec-type-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .edgeless-card-body { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; } .ec-empty-line { color: var(--text-faint); font-style: italic; } /* type-specific preview accents */ .edgeless-card.ec-h1 .edgeless-card-body { font-size: 20px; font-weight: 700; line-height: 1.25; } .edgeless-card.ec-h2 .edgeless-card-body { font-size: 17px; font-weight: 700; line-height: 1.3; } .edgeless-card.ec-h3 .edgeless-card-body { font-size: 15px; font-weight: 600; } .edgeless-card.ec-quote { border-left: 3px solid var(--border-strong); } .edgeless-card.ec-quote .edgeless-card-body { font-style: italic; color: var(--text-light); } .edgeless-card.ec-callout { background: var(--bg-hover); } .edgeless-card.ec-code .edgeless-card-body { font-family: var(--font-mono); font-size: 12px; white-space: pre; overflow-x: auto; } .edgeless-card.ec-divider .edgeless-card-body { padding: 8px 0; } .ec-divider { height: 2px; background: var(--border-strong); border-radius: 2px; } .ec-img { display: block; max-width: 100%; border-radius: 6px; } .ec-caption { margin-top: 6px; font-size: 12px; color: var(--text-faint); } .ec-todo { display: flex; align-items: flex-start; gap: 6px; } .ec-todo.is-done { color: var(--text-faint); text-decoration: line-through; } .ec-check { flex: 0 0 auto; line-height: 1.5; } /* ------------------------------ empty state ------------------------------ */ .edgeless-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; pointer-events: none; } .edgeless-empty.hidden { display: none; } .edgeless-empty-title { font-size: 17px; font-weight: 600; color: var(--text); } .edgeless-empty-sub { font-size: 14px; color: var(--text-light); max-width: 360px; line-height: 1.5; } /* dark-mode: keep the dotted board faint */ html[data-theme="dark"] .edgeless-viewport { background-image: radial-gradient(rgba(190, 196, 255, 0.09) 1px, transparent 1px); } /* small screens: let the controls wrap under the title */ @media (max-width: 640px) { .edgeless-title, .edgeless-meta { display: none; } }