MediaWiki:Common.css: Difference between revisions
No edit summary |
VisualEditor: show a labelled placeholder for embedded Mermaid/DOT diagrams instead of a wall of raw source |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 51: | Line 51: | ||
border-left: 1px solid #ccc; | border-left: 1px solid #ccc; | ||
border-right: 1px solid #ccc; | border-right: 1px solid #ccc; | ||
} | |||
/* controls the logo styling */ | |||
#p-logo { | |||
height: 100px; | |||
} | } | ||
| Line 136: | Line 141: | ||
*/ | */ | ||
.page-MediaWiki #lastmod, | .page-MediaWiki #lastmod, | ||
.page-MediaWiki #siteSub, | |||
.page-MediaWiki #contentSub, | .page-MediaWiki #contentSub, | ||
.page-MediaWiki .subtitle, | .page-MediaWiki .subtitle, | ||
| Line 143: | Line 148: | ||
display: none; | display: none; | ||
} | } | ||
/** | /** | ||
| Line 1,130: | Line 1,136: | ||
color: black; | color: black; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
/* ---- FlexDiagrams ------------------------------------------------------ | |||
Each FlexDiagrams content handler prints the page's raw source in a <pre> | |||
under the rendered diagram. For the machine-readable formats that is just | |||
noise — a base64 data URI for Drawio, raw XML for BPMN, JSON for Gantt — | |||
so hide it there. Mermaid (744) and DOT (748) keep theirs: that source is | |||
short, readable, and worth showing under the diagram. | |||
The source is still reachable via the Edit source tab and page history. | |||
Nothing renders from this block; the viewers fetch their data separately | |||
over AJAX, so hiding it cannot break a diagram. */ | |||
.ns-746 #mw-content-text > pre, /* Drawio */ | |||
.ns-740 #mw-content-text > pre, /* BPMN */ | |||
.ns-742 #mw-content-text > pre { /* Gantt */ | |||
display: none; | |||
} | |||
/* ---- Flex Diagrams: stack the Edit-diagram panes ------------------------ | |||
Upstream floats the code pane left of the preview (300px for Mermaid, 40% | |||
for DOT) and never styles the textarea at all, so it is sized by its | |||
cols="15" attribute and wraps almost every line of diagram source. Stack | |||
instead: full-width code on top, preview below. | |||
Selectors are two levels deep on purpose. FD_Mermaid.css / FD_DOT.css are | |||
registered with addModules, so they are injected as <style> at runtime | |||
AFTER the site.styles <link> that carries this file - a flat | |||
.mermaidCodePane rule here would lose the tie and silently do nothing. */ | |||
.mermaidEditPane > .mermaidCodePane, | |||
.dotEditPane > .dotCodePane { | |||
float: none; | |||
width: auto; | |||
margin-bottom: 1em; | |||
} | |||
.mermaidEditPane > .mermaidPreviewPane, | |||
.dotEditPane > .dotPreviewPane { | |||
overflow: auto; | |||
min-height: 300px; | |||
} | |||
/* The rule that actually fixes the wrapping, since the textarea is unstyled | |||
upstream. resize:vertical keeps the browser's native drag handle so the | |||
code/preview split is adjustable, and stops a drag from making the textarea | |||
wider than its container the way resize:both would. box-sizing matters here: | |||
the code pane has 12px side padding and a 1px border with no box-sizing of | |||
its own, so a plain width:100% would overflow it. */ | |||
.mermaidEditPane textarea.mermaidCode, | |||
.dotEditPane textarea.dotCode { | |||
display: block; | |||
width: 100%; | |||
box-sizing: border-box; | |||
min-height: 340px; | |||
resize: vertical; | |||
font-family: monospace, monospace; | |||
font-size: 13px; | |||
line-height: 1.4; | |||
tab-size: 4; | |||
} | |||
/* ---- Flex Diagrams: readable placeholder inside VisualEditor ------------ | |||
VE builds its surface from Parsoid's HTML. For Mermaid and DOT that HTML is | |||
the *literal diagram source* in a div - the client-side module that turns it | |||
into a picture never runs against the VE surface - so the editor shows a wall | |||
of flowchart source as one opaque transclusion node. | |||
Collapse that text and label the node instead. attr(data-wiki-page) is | |||
available because of the local FD_DisplayDiagram.php patch, and Parsoid | |||
carries the attribute through to VE. | |||
Display only, and safe: VE serialises a transclusion from its data-mw, not | |||
from the rendered DOM, so nothing here can reach the saved wikitext. Scoped | |||
to .ve-ce-surface so the read view is untouched. */ | |||
.ve-ce-surface .mermaid, | |||
.ve-ce-surface .dotText { | |||
display: block; | |||
margin: 0.5em 0; | |||
/* collapses the raw source text; ::before sets its own size back */ | |||
font-size: 0; | |||
line-height: 0; | |||
} | |||
.ve-ce-surface .mermaid::before, | |||
.ve-ce-surface .dotText::before { | |||
content: "\25C8 " attr(data-wiki-page) " \2014 diagram, edit it on its own page"; | |||
display: block; | |||
padding: 0.6em 0.9em; | |||
border: 1px dashed #c8ccd1; | |||
border-radius: 2px; | |||
background-color: #f8f9fa; | |||
color: #54595d; | |||
font-family: sans-serif; | |||
font-size: 0.95rem; | |||
line-height: 1.6; | |||
} | } | ||