/* Editor toolbar + rendered-markdown styling for the social forum.
* Paired with static/markdown.js and served by its own route
* (server.py's /markdown.css), shared by social.html and thread.html for
* the same "one copy" reason the JS is.
*
* Every colour here is an existing custom property from the two pages'
* own :root blocks (--page, --surface-1, --border, --text-primary,
* --text-secondary, --text-muted, --series-1). Both pages define those in
* all of their theme blocks, so this file needs no theme blocks of its
* own -- and must never hardcode a hex, which is what would make it wrong
* in exactly one theme.
*/
/* The wrapper markdown.js puts around each textarea. flex:1/min-width:0
* because it inherits the sizing role the textarea used to have inside a
* horizontal .composer-row. */
.md-field {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.md-field > textarea {
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.md-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 6px;
border: 1px solid var(--border);
border-bottom: none;
border-radius: 8px 8px 0 0;
background: var(--surface-1);
}
.md-tools {
display: flex;
align-items: center;
gap: 1px;
flex-wrap: wrap;
min-width: 0;
}
/* The rich-text box. Shares .md-body with the rendered post, so what you
type looks like what everyone else will read -- that shared class is
the whole point, and the reason these rules only cover the differences
an editable box needs. */
.md-rich {
padding: 10px 12px;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 8px 8px;
background: var(--page);
color: var(--text-primary);
font-size: 13.5px;
line-height: 1.55;
overflow-y: auto;
/* Long words and pasted URLs must not widen the field. */
word-break: break-word;
/* Matches the textarea's own affordance, which people already use. */
resize: vertical;
}
.md-rich:focus {
outline: none;
border-color: color-mix(in srgb, var(--series-1) 60%, var(--border));
}
/* contenteditable has no placeholder attribute, so one is drawn from the
textarea's, copied onto a data- attribute by markdown.js. :empty alone
is not enough -- an "empty" contenteditable usually holds
. */
.md-rich:empty::before,
.md-rich > p:only-child:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.md-rich:empty::before {
content: attr(data-placeholder);
}
/* Only one of the two inputs is live at a time; the other stays in the
DOM because the textarea is still what carries the value on submit. */
.md-field[data-md-mode="rich"] > textarea {
display: none;
}
.md-field[data-md-mode="markdown"] > .md-rich {
display: none;
}
.md-mode-toggle {
flex: 0 0 auto;
font: inherit;
font-size: 11.5px;
font-weight: 600;
padding: 4px 8px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
}
.md-mode-toggle:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.md-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 26px;
padding: 0;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.md-btn:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.md-btn:focus-visible {
outline: 2px solid var(--series-1);
outline-offset: -2px;
}
/* The caret is inside this formatting right now. Only meaningful in rich
mode -- markdown mode has no caret context to report, and markdown.js
clears these when it switches. */
.md-btn.active {
color: var(--text-primary);
background: color-mix(in srgb, var(--series-1) 22%, transparent);
}
.md-sep {
width: 1px;
height: 16px;
margin: 0 5px;
background: var(--border);
}
@media (max-width: 520px) {
/* Ten buttons plus two separators do not fit a phone in one row, and
wrapping them is better than a horizontally scrolling toolbar the
user cannot see the end of. */
.md-btn {
width: 26px;
}
.md-sep {
margin: 0 2px;
}
}
/* ---- rendered output -------------------------------------------------
* Applied to the containers that now hold renderMarkdown() output. These
* used to be a single with white-space:pre-wrap; the renderer emits
* its own block structure, so pre-wrap is gone from them (it would double
* every gap) and the spacing is set here instead. */
.md-body > *:first-child {
margin-top: 0;
}
.md-body > *:last-child {
margin-bottom: 0;
}
.md-body p {
margin: 0 0 10px;
}
/* An empty paragraph is how a contenteditable holds a blank line. Without
a height it collapses and pressing Enter appears to do nothing. */
.md-rich p:empty::after {
content: "";
display: inline-block;
}
.md-body h3,
.md-body h4,
.md-body h5 {
margin: 16px 0 8px;
line-height: 1.3;
}
.md-body h3 {
font-size: 1.15em;
}
.md-body h4 {
font-size: 1.05em;
}
.md-body h5 {
font-size: 1em;
color: var(--text-secondary);
}
.md-body ul,
.md-body ol {
margin: 0 0 10px;
padding-left: 22px;
}
.md-body li {
margin: 2px 0;
}
.md-body blockquote {
margin: 0 0 10px;
padding: 2px 0 2px 12px;
border-left: 3px solid var(--border);
color: var(--text-secondary);
}
.md-body code {
padding: 1px 5px;
border-radius: 4px;
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "IBM Plex Sans Thai", monospace;
font-size: 0.9em;
/* A long identifier must not push the thread column sideways. */
word-break: break-word;
}
.md-body pre {
margin: 0 0 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--page);
/* Code is the one thing that may not be re-wrapped, so it scrolls
inside its own box -- the same treatment .table-scroll gives a wide
table rather than letting it widen the page. */
overflow-x: auto;
}
.md-body pre code {
padding: 0;
background: none;
white-space: pre;
}
.md-body a {
color: var(--series-1);
text-decoration: underline;
word-break: break-word;
}