mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-28 12:46:45 +00:00
f1123f87f5
This change is meant to transform the current block image node rendering in ContentEditable from the nested <div> structure to a <figure> tag more closely matching Parsoid's output, with CSS to style it the same. This is mostly so we can work with and display attribute changes, like 'type' and 'alignment', without constantly destroying and rebuilding nested <div> structures. This change also includes all the attribute changes that will be called when the media edit dialog changes image type, alignment, size, etc. Node: The mw-classes 'thumb', 'thumbinner' and 'thumbcaption' are preserved in the structure of the <figure> but CSS designers should note these styles are no longer necessarily attached to <div> elements. Bug: 53436 Change-Id: I40065acd9fd59d30f94b5336736d4986e8de15aa
118 lines
2.2 KiB
CSS
118 lines
2.2 KiB
CSS
/*!
|
|
* VisualEditor ContentEditable MediaWiki Node styles.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
/*csslint regex-selectors:false, overqualified-elements:false */
|
|
|
|
/* ve.ce.MWTransclusionNode */
|
|
|
|
.ve-ce-mwTransclusionInlineNode {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* HACK: Hide Ref errors in templates */
|
|
.ve-ce-mwTransclusionNode .mw-ext-cite-error {
|
|
display: none;
|
|
}
|
|
|
|
/* HACK: Fake superscript style for references generated as spans in templates */
|
|
.ve-ce-mwTransclusionNode span.reference {
|
|
vertical-align: super;
|
|
font-size: smaller;
|
|
}
|
|
|
|
/* ve.ce.MWReferenceListNode */
|
|
|
|
.ve-ce-mwReferenceListNode .ve-ce-generated-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ve-ce-mwReferenceListNode-muted {
|
|
font-style: italic;
|
|
color: #777;
|
|
}
|
|
|
|
/* ve-ce-mwReferenceNode */
|
|
|
|
.ve-ce-mwReferenceNode-missingref {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ve.ce.MWInlineImageNode */
|
|
|
|
.ve-ce-mwInlineImageNode {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ve.ce.MWBlockImageNode */
|
|
.ve-ce-mwBlockImageNode {
|
|
margin: 5px;
|
|
}
|
|
|
|
figure[typeof*='mw:Image'].mw-halign-right {
|
|
clear: right;
|
|
float: right;
|
|
}
|
|
|
|
figure[typeof*='mw:Image'].mw-halign-center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
figure[typeof*='mw:Image'].mw-halign-left {
|
|
clear: left;
|
|
float: left;
|
|
}
|
|
|
|
figure[typeof='mw:Image/Thumb'], figure[typeof='mw:Image/Frame'] {
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #cccccc;
|
|
padding: 3px !important;
|
|
overflow: hidden;
|
|
font-size: 94%;
|
|
text-align: center;
|
|
}
|
|
|
|
figure[typeof*='mw:Image'] figcaption {
|
|
border: medium none;
|
|
font-size: 94%;
|
|
line-height: 1.4em;
|
|
padding: 3px !important;
|
|
}
|
|
|
|
figure[typeof*='mw:Image'] img {
|
|
border: 1px solid #cccccc;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ve.ce.MWAlienExtensionNode */
|
|
|
|
.ve-ce-mwAlienExtensionNode {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ve.ce.MWMathNode */
|
|
|
|
.ve-ce-mwMathNode {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ve.ce.MWHieroNode */
|
|
|
|
.ve-ce-mwHieroNode {
|
|
display: table;
|
|
}
|
|
|
|
/* ve.ce.MWNumberedExternalLinkNode */
|
|
|
|
.ve-ce-surface {
|
|
counter-reset: ve-ce-mwNumberedExternalLinkNode;
|
|
}
|
|
|
|
a[rel~="mw:ExtLink"]:empty:after {
|
|
content: "[" counter(ve-ce-mwNumberedExternalLinkNode) "]";
|
|
counter-increment: ve-ce-mwNumberedExternalLinkNode;
|
|
}
|