Hash: FDCodeEditor gadget styles

2026-09-21T18:26:56Z

FDCodeEditor gadget styles

New page

/* FDCodeEditor - styling for the CodeMirror editor that replaces the FlexDiagrams
* Mermaid/DOT textarea. Loaded only while the gadget is enabled.
*
* TWO-LEVEL SELECTORS ARE DELIBERATE (0-0-2-0), and so is the absence of
* !important. CodeMirror's own codemirror.less arrives via addModules, i.e. AFTER
* the site.styles <link>, so a flat `.cm-editor { ... }` here would lose the
* specificity tie and silently do nothing. Same trap already documented for
* FD_Mermaid.css / FD_DOT.css overrides in [[MediaWiki:Common.css]].
*
* The matching `textarea.mermaidCode` / `textarea.dotCode` rules in Common.css are
* intentionally left alone: they still apply for anyone who switches this gadget
* off in Preferences.
*/

/* CodeMirror takes its initial height from the textarea's outerHeight() before
* hiding it, so the 340px minimum set in Common.css carries over by itself. What
* does NOT carry over is the native resize handle - it belonged to a textarea that
* is now display:none - so put it back on the editor, keeping the code/preview
* split draggable the way it is today. */
.mermaidEditPane .cm-editor,
.dotEditPane .cm-editor {
resize: vertical;
overflow: hidden;
border: 1px solid #a2a9b1;
border-radius: 2px;
}

.mermaidEditPane .cm-editor.cm-focused,
.dotEditPane .cm-editor.cm-focused {
border-color: #36c;
}

/* Match the monospace sizing the textarea had, so toggling the gadget on and off
* does not reflow the diagram source under you. */
.mermaidEditPane .cm-content,
.dotEditPane .cm-content {
font-family: monospace, monospace;
font-size: 13px;
line-height: 1.4;
}

MediaWiki:Gadget-FDCodeEditor.css - Revision history

Hash: FDCodeEditor gadget styles