mirror of
https://github.com/yaye-work/inline-note.git
synced 2026-07-22 08:28:50 +00:00
b580204839
The idle reading view (MarkdownRenderer) rendered with different spacing than the live-preview editor shown on first expand, so cards visibly changed rhythm after blur or when another inline opened. Instead of chasing reading-view CSS, drop the rendered view entirely: the native embedded editor stays mounted when focus leaves (without stealing focus on idle mounts), so the card always renders exactly like the note does in its own pane. Blur still saves and still reclaims untouched empty notes.
193 lines
5.3 KiB
CSS
193 lines
5.3 KiB
CSS
/* Inline Note — the [[link]] is the toggle; the body is a card */
|
|
|
|
/* --- toggle button after wikilinks --- */
|
|
.inline-note-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: text-bottom;
|
|
margin-left: 4px;
|
|
padding: 1px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
opacity: 0.55;
|
|
color: var(--text-faint);
|
|
transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease;
|
|
}
|
|
.inline-note-btn svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
.inline-note-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
/* note exists: round chevron button, always visible */
|
|
.inline-note-btn.is-visible {
|
|
opacity: 1;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--text-accent);
|
|
background-color: var(--background-modifier-hover);
|
|
border: 1px solid var(--background-modifier-border);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.inline-note-btn:hover {
|
|
color: var(--text-accent);
|
|
background-color: var(--background-modifier-active-hover, var(--background-modifier-hover));
|
|
}
|
|
|
|
/* --- [[links]] inside fallback editors --- */
|
|
.inline-note-link {
|
|
color: var(--link-color, var(--text-accent));
|
|
text-decoration: underline;
|
|
cursor: text;
|
|
transition: opacity 120ms ease;
|
|
}
|
|
.inline-note-link-clickable {
|
|
cursor: var(--cursor-link, pointer);
|
|
}
|
|
.inline-note-link-clickable:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* --- inline body --- */
|
|
.inline-note-flow {
|
|
margin: 4px 0 8px 2px;
|
|
}
|
|
|
|
/* style 1: vertical accent line only */
|
|
.inline-note-style-line .inline-note-flow,
|
|
.inline-note-style-card-line .inline-note-flow {
|
|
padding-left: 14px;
|
|
border-left: 2px solid var(--interactive-accent);
|
|
}
|
|
|
|
/* style 2 & 3: card — soft shadow, round corners */
|
|
.inline-note-style-card .inline-note-flow,
|
|
.inline-note-style-card-line .inline-note-flow {
|
|
background-color: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
padding: 8px 12px;
|
|
}
|
|
.inline-note-style-card-line .inline-note-flow {
|
|
padding-left: 14px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/* cards nested in cards: alternate tone so levels stay readable */
|
|
.inline-note-style-card .inline-note-flow .inline-note-flow,
|
|
.inline-note-style-card-line .inline-note-flow .inline-note-flow {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
.inline-note-style-card .inline-note-flow .inline-note-flow .inline-note-flow,
|
|
.inline-note-style-card-line .inline-note-flow .inline-note-flow .inline-note-flow {
|
|
background-color: var(--background-primary-alt);
|
|
}
|
|
|
|
/* --- long notes: fixed-height, scrollable content (title stays) --- */
|
|
.inline-note-flow.is-long > .inline-note-content {
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.inline-note-error {
|
|
color: var(--text-error);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* --- native embedded editor (live preview inside the body) --- */
|
|
.inline-note-native {
|
|
width: 100%;
|
|
}
|
|
/* Obsidian gives embeds their own accent bar and title; the card
|
|
already has both, so strip the embed's wherever those classes land
|
|
(the embed factory can put them on the container itself) */
|
|
.inline-note-flow .markdown-embed,
|
|
.inline-note-flow .internal-embed.markdown-embed,
|
|
.inline-note-native.markdown-embed,
|
|
.inline-note-native.internal-embed,
|
|
.inline-note-native .markdown-embed,
|
|
.inline-note-native .markdown-embed-content {
|
|
--embed-border-left: none;
|
|
border: none;
|
|
border-left: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
}
|
|
.inline-note-native .markdown-embed-link,
|
|
.inline-note-native .embed-title,
|
|
.inline-note-native.markdown-embed > .markdown-embed-link {
|
|
display: none;
|
|
}
|
|
.inline-note-native .cm-editor {
|
|
background: transparent;
|
|
}
|
|
.inline-note-native .cm-content {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* --- rendered ![[embeds]] inside fallback editors --- */
|
|
.inline-note-embedded {
|
|
display: inline-block;
|
|
width: 100%;
|
|
vertical-align: top;
|
|
}
|
|
.inline-note-embedded .internal-embed {
|
|
display: block;
|
|
}
|
|
|
|
/* --- fallback CodeMirror editor --- */
|
|
.inline-note-editor {
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
.inline-note-editor .cm-content {
|
|
padding: 2px 0;
|
|
font-family: var(--font-text);
|
|
font-size: var(--font-text-size);
|
|
line-height: var(--line-height-normal);
|
|
color: var(--text-normal);
|
|
min-height: 1.5em;
|
|
}
|
|
.inline-note-editor .cm-line {
|
|
padding: 0;
|
|
}
|
|
.inline-note-editor.cm-focused {
|
|
outline: none;
|
|
}
|
|
.inline-note-editor .cm-cursor {
|
|
border-left-color: var(--text-normal);
|
|
}
|
|
.inline-note-editor .cm-scroller .cm-selectionLayer .cm-selectionBackground,
|
|
.inline-note-editor.cm-focused .cm-scroller .cm-selectionLayer .cm-selectionBackground {
|
|
background-color: var(--text-selection);
|
|
}
|
|
|
|
/* --- [[ link suggestion popup inside fallback editors --- */
|
|
.inline-note-editor .cm-tooltip.cm-tooltip-autocomplete {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--shadow-s);
|
|
font-family: var(--font-interface);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
z-index: var(--layer-popover);
|
|
}
|
|
.inline-note-editor .cm-tooltip-autocomplete > ul {
|
|
max-height: 14em;
|
|
font-family: var(--font-interface);
|
|
}
|
|
.inline-note-editor .cm-tooltip-autocomplete > ul > li {
|
|
padding: 3px 8px;
|
|
}
|
|
.inline-note-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|