MediaWiki:Common.css: Difference between revisions
Hide the raw diagram-source dump on Drawio/BPMN/Gantt pages (FlexDiagrams prints it under the diagram) |
VisualEditor: show a labelled placeholder for embedded Mermaid/DOT diagrams instead of a wall of raw source |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1,151: | Line 1,151: | ||
.ns-742 #mw-content-text > pre { /* Gantt */ | .ns-742 #mw-content-text > pre { /* Gantt */ | ||
display: none; | 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; | |||
} | } | ||