7a919ffd78
Clicking anywhere in the editor container (including empty space below the last block) now focuses the editor and places the cursor at the end of the last block. This matches the behavior of Notion, Bear, and Obsidian. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
164 lines
4.4 KiB
CSS
164 lines
4.4 KiB
CSS
/* Wikilink inline content — color is set via inline style per note type */
|
|
.wikilink {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
text-underline-offset: 2px;
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
.wikilink:hover {
|
|
text-decoration-style: solid;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Broken wikilink: dashed underline + lower opacity */
|
|
.wikilink--broken {
|
|
text-decoration-style: dashed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.wikilink--broken:hover {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* BlockNote container */
|
|
.editor__blocknote-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: text;
|
|
}
|
|
|
|
/* Drag-over state: subtle border highlight */
|
|
.editor__blocknote-container--drag-over {
|
|
outline: 2px dashed var(--primary, #155DFF);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Drop overlay shown when dragging images over the editor */
|
|
.editor__drop-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(21, 93, 255, 0.06);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.editor__drop-overlay-label {
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
background: var(--background, #fff);
|
|
color: var(--primary, #155DFF);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.editor__blocknote-container .bn-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 15px;
|
|
/* Override BlockNote's internal color variables so .bn-editor background
|
|
matches our vault theme instead of BlockNote's hardcoded light/dark defaults. */
|
|
--bn-colors-editor-background: var(--bg-primary);
|
|
--bn-colors-editor-text: var(--text-primary);
|
|
--bn-colors-menu-background: var(--bg-card);
|
|
--bn-colors-menu-text: var(--text-primary);
|
|
--bn-colors-tooltip-background: var(--bg-hover);
|
|
--bn-colors-tooltip-text: var(--text-primary);
|
|
--bn-colors-hovered-background: var(--bg-hover);
|
|
--bn-colors-hovered-text: var(--text-primary);
|
|
--bn-colors-selected-background: var(--bg-selected);
|
|
--bn-colors-selected-text: var(--text-primary);
|
|
--bn-colors-border: var(--border-primary);
|
|
--bn-colors-shadow: var(--border-primary);
|
|
--bn-colors-side-menu: var(--text-muted);
|
|
}
|
|
|
|
.editor__blocknote-container .bn-editor {
|
|
width: 100%;
|
|
padding: 20px 40px;
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* =============================================
|
|
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;
|
|
}
|