ribbit/src/static/ribbit-core.css

/*
 * ribbit-core.css — functional editor styles. Always load this.
 * These styles control editor state visibility and behavior.
 * They should not be overridden by themes.
 */

#ribbit {
    display: none;
}

#ribbit.loaded {
    display: block;
}

#ribbit.edit {
    font-family: monospace;
    white-space: pre;
}

#ribbit.wysiwyg .md {
    opacity: 0.5;
}

.ribbit-editing::before,
.ribbit-editing::after {
    opacity: 0.3;
    font-weight: normal;
    font-style: normal;
    font-family: monospace;
    font-size: 0.85em;
}

#ribbit.wysiwyg strong.ribbit-editing::before,
#ribbit.wysiwyg strong.ribbit-editing::after {
    content: "**";
}

#ribbit.wysiwyg em.ribbit-editing::before,
#ribbit.wysiwyg em.ribbit-editing::after {
    content: "*";
}

#ribbit.wysiwyg code.ribbit-editing::before,
#ribbit.wysiwyg code.ribbit-editing::after {
    content: "\`";
}

#ribbit.wysiwyg h1.ribbit-editing::before { content: "# "; font-size: 0.5em; }
#ribbit.wysiwyg h2.ribbit-editing::before { content: "## "; font-size: 0.5em; }
#ribbit.wysiwyg h3.ribbit-editing::before { content: "### "; font-size: 0.5em; }
#ribbit.wysiwyg h4.ribbit-editing::before { content: "#### "; font-size: 0.5em; }
#ribbit.wysiwyg h5.ribbit-editing::before { content: "##### "; font-size: 0.5em; }
#ribbit.wysiwyg h6.ribbit-editing::before { content: "###### "; font-size: 0.5em; }

#ribbit.wysiwyg blockquote.ribbit-editing::before {
    content: "> ";
}