ribbit/src/static/ribbit-core.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.4;
    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.4;
    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 {
    font-family: monospace;
    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;
}