MediaWiki:Common.css: Difference between revisions
Stack the FlexDiagrams Edit-diagram panes: full-width code editor above the preview (Mermaid + DOT) |
VisualEditor: show a labelled placeholder for embedded Mermaid/DOT diagrams instead of a wall of raw source |
||
| Line 1,192: | Line 1,192: | ||
line-height: 1.4; | line-height: 1.4; | ||
tab-size: 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; | |||
} | } | ||