all tests pass but only if md-delim display: inline
This commit is contained in:
evilchili
+128
-46
@@ -1,9 +1,18 @@
|
||||
/*
|
||||
* ribbit-core.css — functional editor styles. Always load this.
|
||||
* These styles control editor state visibility and behavior.
|
||||
* They should not be overridden by themes.
|
||||
*
|
||||
* 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;
|
||||
}
|
||||
@@ -12,54 +21,127 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
#ribbit.edit {
|
||||
/* ── 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:inline;
|
||||
opacity: 0.3;
|
||||
font-size: 0.85em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.ribbit-editing {
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
.ribbit-editing > .md-delim {
|
||||
display: inline;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
[data-speculative]::before,
|
||||
[data-speculative]::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
#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: "> ";
|
||||
}
|
||||
/* ── Vim mode indicators ────────────────────────────────────────────────────── */
|
||||
|
||||
#ribbit.vim-normal {
|
||||
cursor: default;
|
||||
|
||||
Reference in New Issue
Block a user