MediaWiki:Gadget-FDCodeEditor.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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;
}