Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
2.1 kB · 61 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162.reams-tag-chip { --reams-tag-chip-padding-block: 2px; --reams-tag-chip-padding-inline: 6px; --reams-tag-chip-radius: 0; --reams-tag-chip-background: color-mix(in srgb, var(--accent) 12%, transparent); --reams-tag-chip-background-hover: color-mix(in srgb, var(--accent) 20%, transparent); --reams-tag-chip-border: color-mix(in srgb, var(--accent) 40%, transparent); --reams-tag-chip-color: var(--accent); --reams-tag-chip-font-size: 0.85em; display: inline-block; padding: var(--reams-tag-chip-padding-block) var(--reams-tag-chip-padding-inline); border-radius: var(--reams-tag-chip-radius); background: var(--reams-tag-chip-background); border: 1px solid var(--reams-tag-chip-border); color: var(--reams-tag-chip-color); font-size: var(--reams-tag-chip-font-size); white-space: nowrap;}
.reams-tag-chip:hover { background: var(--reams-tag-chip-background-hover);}
/* A recognized #type uses the Type definition's color; ordinary #tags stay on * the editor accent. Keep the raw markdown marker editable. */.reams-type-tag-chip { --reams-tag-chip-background: color-mix(in oklch, var(--reams-type-color) 18%, transparent); --reams-tag-chip-background-hover: color-mix(in oklch, var(--reams-type-color) 26%, transparent); --reams-tag-chip-border: color-mix(in oklch, var(--reams-type-color) 45%, var(--border-color)); --reams-tag-chip-color: color-mix(in oklch, var(--reams-type-color) 25%, var(--text-primary));}
.cm-frontmatter-tag-chip.reams-tag-chip { display: inline-flex;}
.reams-tag-chip[role='button'],.cm-md-tag { cursor: pointer;}
/* List rows use a negative hanging indent. Reset it inside the chip's own * inline-block formatting context so its text does not overlap the list text. */.cm-md-tag { text-indent: 0;}
.reams-tag-chip-prefix::before { content: '#'; display: inline-block; margin-right: 0.15em; color: var(--reams-tag-chip-color);}
@media (max-width: 767px) { .reams-tag-chip-mobile-compact { --reams-tag-chip-padding-block: 1px; --reams-tag-chip-padding-inline: 5px; --reams-tag-chip-font-size: 0.9em; }}