.editor { background: var(--bg-primary); color: var(--text-primary); display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; } .editor__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-muted); gap: 8px; } .editor__placeholder p { margin: 0; font-size: 15px; } .editor__placeholder-hint { font-size: 12px; color: var(--text-faint); } .editor__drag-strip { height: 48px; flex-shrink: 0; -webkit-app-region: drag; app-region: drag; } /* Tab bar */ .editor__tab-bar { display: flex; background: var(--bg-card); border-bottom: 1px solid var(--border-primary); overflow-x: auto; flex-shrink: 0; -webkit-app-region: drag; app-region: drag; } .editor__tab-bar::-webkit-scrollbar { height: 0; } .editor__tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; border-right: 1px solid var(--border-primary); white-space: nowrap; max-width: 180px; flex-shrink: 0; transition: all 0.1s; -webkit-app-region: no-drag; app-region: no-drag; } .editor__tab:hover { background: var(--bg-hover-subtle); color: var(--text-secondary); } .editor__tab--active { background: var(--bg-primary); color: var(--text-primary); border-bottom: 2px solid var(--accent-blue); } .editor__tab-title { overflow: hidden; text-overflow: ellipsis; } .editor__tab-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; border-radius: 3px; opacity: 0; transition: opacity 0.1s; } .editor__tab:hover .editor__tab-close, .editor__tab--active .editor__tab-close { opacity: 1; } .editor__tab-close:hover { background: var(--bg-hover); color: var(--text-primary); } /* Wikilink inline content */ .wikilink { color: var(--accent-blue, #2196f3); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; border-radius: 2px; padding: 0 1px; } .wikilink:hover { background: var(--accent-blue-bg, rgba(33, 150, 243, 0.1)); text-decoration-style: solid; } /* BlockNote container */ .editor__blocknote-container { flex: 1; overflow: auto; } .editor__blocknote-container .bn-container { height: 100%; background: var(--bg-primary); color: var(--text-primary); font-size: 15px; } .editor__blocknote-container .bn-editor { padding: 20px 40px; max-width: 760px; } /* Tab bar actions (diff toggle) */ .editor__tab-bar-actions { display: flex; align-items: center; margin-left: auto; padding: 0 8px; -webkit-app-region: no-drag; app-region: no-drag; } .editor__diff-toggle { padding: 3px 10px; font-size: 11px; border: 1px solid var(--border-primary); border-radius: 4px; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: all 0.15s; font-weight: 500; } .editor__diff-toggle:hover { background: var(--bg-button); color: var(--text-secondary); } .editor__diff-toggle--active { background: var(--accent-blue-bg); color: var(--accent-blue); border-color: var(--accent-blue-bg); } .editor__diff-toggle:disabled { opacity: 0.5; cursor: default; } /* Diff view */ .editor__diff-container { flex: 1; overflow: auto; } .diff-view { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 13px; line-height: 1.6; padding: 12px 0; } .diff-view__empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 14px; } .diff-view__line { display: flex; padding: 0 16px; min-height: 22px; } .diff-view__line-number { width: 40px; flex-shrink: 0; text-align: right; padding-right: 12px; color: var(--text-faint); user-select: none; } .diff-view__line-content { flex: 1; white-space: pre-wrap; word-break: break-all; padding: 0 8px; } .diff-view__line--added { background: rgba(76, 175, 80, 0.12); } .diff-view__line--added .diff-view__line-content { color: #4caf50; } .diff-view__line--removed { background: rgba(244, 67, 54, 0.12); } .diff-view__line--removed .diff-view__line-content { color: #f44336; } .diff-view__line--hunk { background: rgba(33, 150, 243, 0.08); } .diff-view__line--hunk .diff-view__line-content { color: var(--accent-blue, #2196f3); font-style: italic; } .diff-view__line--header { background: var(--bg-hover-subtle); } .diff-view__line--header .diff-view__line-content { color: var(--text-muted); font-weight: 600; } .diff-view__line--context .diff-view__line-content { color: var(--text-secondary); } /* ============================================= Bear-style live preview: zero horizontal shift ============================================= */ /* FIX 1: Remove header underlines */ .cm-heading-line { border-bottom: none !important; text-decoration: none !important; } /* FIX 2: Heading markers in left gutter area The ## markers are absolutely positioned in the content's left padding (40px), so they never affect text flow — zero horizontal shift. */ .cm-heading-line { position: relative; } .cm-heading-line .cm-formatting-block { position: absolute !important; top: 50%; transform: translateY(-50%); right: 100%; padding-right: 4px; font-size: 0.75rem !important; line-height: 1; opacity: 0; transition: opacity 0.15s ease-out !important; white-space: nowrap; pointer-events: none; color: var(--text-faint); } .cm-heading-line .cm-formatting-block.cm-formatting-block-visible { font-size: 0.75rem !important; opacity: 0.5; pointer-events: auto; } /* FIX 3: List/block bullets — always visible, fixed width, zero shift Override the library's font-size animation so the marker always occupies the same space regardless of cursor position. */ .cm-line:not(.cm-heading-line) .cm-formatting-block { font-size: 1em !important; display: inline-block !important; min-width: 1.5em !important; vertical-align: baseline; transition: color 0.15s ease-out, opacity 0.15s ease-out !important; } /* Inactive state: hide source text, show bullet dot via ::before */ .cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible) { color: transparent !important; opacity: 1 !important; position: relative; overflow: visible !important; } .cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible)::before { content: '\2022'; position: absolute; left: 0; color: var(--text-tertiary); } /* Active state: show source marker (-, *, +, etc.) */ .cm-line:not(.cm-heading-line) .cm-formatting-block.cm-formatting-block-visible { color: var(--text-faint) !important; opacity: 1 !important; }