152 lines
3.9 KiB
CSS
152 lines
3.9 KiB
CSS
/*
|
|
* ribbit-core.css — functional editor styles. Always load this.
|
|
*
|
|
* These styles control editor state visibility and the styled-source
|
|
* rendering. They should not be overridden by themes.
|
|
*
|
|
* Two CSS states (not modes):
|
|
* .wysiwyg — contentEditable, delimiters revealed on cursor focus
|
|
* .view — read-only, all delimiters hidden, full block styling
|
|
*
|
|
* The DOM is identical in both states; only CSS changes.
|
|
*/
|
|
|
|
/* ── Visibility ─────────────────────────────────────────────────────────────── */
|
|
|
|
#ribbit {
|
|
display: none;
|
|
}
|
|
|
|
#ribbit.loaded {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Delimiter visibility ───────────────────────────────────────────────────── */
|
|
|
|
/*
|
|
* Delimiters are always present in the DOM as text nodes inside
|
|
* .md-delim spans. In view state they are hidden; in wysiwyg state
|
|
* they are hidden by default and revealed only for the span the
|
|
* cursor is currently inside (.ribbit-editing).
|
|
*
|
|
* This means getMarkdown() = element.textContent at all times —
|
|
* no conversion is needed.
|
|
*/
|
|
|
|
.md-delim {
|
|
display: none;
|
|
}
|
|
|
|
#ribbit.wysiwyg .ribbit-editing > .md-delim {
|
|
display: inline;
|
|
opacity: 0.8;
|
|
/*
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-family: monospace;
|
|
font-size: 0.85em;
|
|
*/
|
|
}
|
|
|
|
/* List prefixes use a separate class so CSS can replace them with
|
|
real list bullets in view state while keeping them in textContent */
|
|
.md-list-prefix {
|
|
display: inline;
|
|
opacity: 0.8;
|
|
/*
|
|
font-family: monospace;
|
|
font-size: 0.85em;
|
|
*/
|
|
}
|
|
|
|
#ribbit.view .md-list-prefix {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Inline formatting ──────────────────────────────────────────────────────── */
|
|
|
|
.md-bold,
|
|
.md-bold-italic {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.md-italic,
|
|
.md-bold-italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.md-strikethrough {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.md-code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.md-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.md-link-text {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Block-level styling ────────────────────────────────────────────────────── */
|
|
|
|
/*
|
|
* Block divs use .md-{name} classes. In view state they render as
|
|
* their visual equivalents. In wysiwyg state they use monospace so
|
|
* the user can see the raw markdown while the formatting is applied.
|
|
*/
|
|
|
|
#ribbit.wysiwyg {
|
|
/* white-space: pre-wrap; */
|
|
}
|
|
|
|
.md-h1 { font-size: 2em; font-weight: bold; }
|
|
.md-h2 { font-size: 1.5em; font-weight: bold; }
|
|
.md-h3 { font-size: 1.17em; font-weight: bold; }
|
|
.md-h4 { font-size: 1em; font-weight: bold; }
|
|
.md-h5 { font-size: 0.83em; font-weight: bold; }
|
|
.md-h6 { font-size: 0.67em; font-weight: bold; }
|
|
|
|
.md-blockquote {
|
|
border-left: 3px solid currentColor;
|
|
opacity: 0.7;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/*
|
|
* List items: in wysiwyg state the .md-list-prefix span shows the
|
|
* raw markdown marker ("- " or "1. "). In view state we hide the
|
|
* prefix and use display:list-item to get a real browser bullet.
|
|
*/
|
|
#ribbit.view .md-list-item {
|
|
display: list-item;
|
|
margin-left: 1.5em;
|
|
list-style-type: disc;
|
|
}
|
|
|
|
#ribbit.view .md-ol-list-item {
|
|
display: list-item;
|
|
margin-left: 1.5em;
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.md-pre {
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ── Vim mode indicators ────────────────────────────────────────────────────── */
|
|
|
|
#ribbit.vim-normal {
|
|
cursor: default;
|
|
caret-color: transparent;
|
|
border-left: 3px solid #4af;
|
|
}
|
|
|
|
#ribbit.vim-insert {
|
|
border-left: 3px solid #4f4;
|
|
}
|