Merge "Yoink 'content-media' feature from core"
jenkins-bot
3 years ago
committed by
Gerrit Code Review
commit
e811fb932e
@ -0,0 +1,277 @@
|
|||||||
|
@import 'variables-content.less';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Block media items
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure[ typeof~='mw:File' ],
|
||||||
|
figure[ typeof~='mw:File/Frameless' ],
|
||||||
|
/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no
|
||||||
|
* longer supported
|
||||||
|
*/
|
||||||
|
figure[ typeof~='mw:Image' ],
|
||||||
|
figure[ typeof~='mw:Video' ],
|
||||||
|
figure[ typeof~='mw:Audio' ],
|
||||||
|
figure[ typeof~='mw:Image/Frameless' ],
|
||||||
|
figure[ typeof~='mw:Video/Frameless' ],
|
||||||
|
figure[ typeof~='mw:Audio/Frameless' ] {
|
||||||
|
margin: 0; // Maybe belongs in element.css for figure
|
||||||
|
|
||||||
|
> a {
|
||||||
|
// The addition of the class is needed for higher specificity
|
||||||
|
// than Vector's print styles
|
||||||
|
.mw-body-content & {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-right {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-floatright;
|
||||||
|
/* @noflip */
|
||||||
|
clear: right;
|
||||||
|
/* @noflip */
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-left {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-floatleft;
|
||||||
|
/* @noflip */
|
||||||
|
clear: left;
|
||||||
|
/* @noflip */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-none {
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-center {
|
||||||
|
/* Matches *.center * in element.css */
|
||||||
|
margin: 0 auto;
|
||||||
|
display: table;
|
||||||
|
border-collapse: collapse;
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the caption for frameless and plain floated images */
|
||||||
|
> figcaption {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figure[ typeof~='mw:File/Thumb' ],
|
||||||
|
figure[ typeof~='mw:File/Frame' ],
|
||||||
|
/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no
|
||||||
|
* longer supported
|
||||||
|
*/
|
||||||
|
figure[ typeof~='mw:Image/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Video/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Audio/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Image/Frame' ],
|
||||||
|
figure[ typeof~='mw:Video/Frame' ],
|
||||||
|
figure[ typeof~='mw:Audio/Frame' ] {
|
||||||
|
margin: 0; // Maybe belongs in element.css for figure
|
||||||
|
margin-bottom: @margin-bottom-thumb;
|
||||||
|
display: table;
|
||||||
|
text-align: center;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
// The addition of the class is needed for higher specificity
|
||||||
|
// than Vector's print styles
|
||||||
|
.mw-body-content & {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Defaults for page content language
|
||||||
|
|
||||||
|
.mw-content-ltr & {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-tright;
|
||||||
|
/* @noflip */
|
||||||
|
clear: right;
|
||||||
|
/* @noflip */
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-content-rtl & {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-tleft;
|
||||||
|
/* @noflip */
|
||||||
|
clear: left;
|
||||||
|
/* @noflip */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Override defaults when explicitly set
|
||||||
|
// Order of application is important, so don't combine with the defaults
|
||||||
|
|
||||||
|
&.mw-halign-right {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-tright;
|
||||||
|
/* @noflip */
|
||||||
|
clear: right;
|
||||||
|
/* @noflip */
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-left {
|
||||||
|
/* @noflip */
|
||||||
|
margin: @margin-tleft;
|
||||||
|
/* @noflip */
|
||||||
|
clear: left;
|
||||||
|
/* @noflip */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-none {
|
||||||
|
/* Override the default margin from mw-content-xxx above */
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: @margin-bottom-thumb;
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mw-halign-center {
|
||||||
|
/* Override the default margin from mw-content-xxx above
|
||||||
|
* And, matches *.center * in element.css
|
||||||
|
*/
|
||||||
|
margin: 0 auto @margin-bottom-thumb auto;
|
||||||
|
clear: none;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> *:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
margin: 0.75em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Broken media get a span instead.
|
||||||
|
*
|
||||||
|
* FIXME: The `> span:first-child` can be removed when version 2.4.0
|
||||||
|
* of the content is no longer supported
|
||||||
|
*/
|
||||||
|
> span:first-child,
|
||||||
|
> span.mw-broken-media {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.75em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
/* This is hardcoded in Linker::makeThumbLink2 for broken media */
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> figcaption {
|
||||||
|
display: table-caption;
|
||||||
|
caption-side: bottom;
|
||||||
|
line-height: @line-height-thumbcaption;
|
||||||
|
min-height: 1em;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The "break-word" value is deprecated, however, it's well supported
|
||||||
|
* at 94.73%
|
||||||
|
* https://caniuse.com/mdn-css_properties_word-break_break-word
|
||||||
|
*
|
||||||
|
* The spec suggests it has the same effect as,
|
||||||
|
*
|
||||||
|
* word-break: normal;
|
||||||
|
* overflow-wrap: anywhere;
|
||||||
|
*
|
||||||
|
* https://drafts.csswg.org/css-text-3/#word-break-property
|
||||||
|
*
|
||||||
|
* So, we should use that. However, support for "anywhere" is lagging
|
||||||
|
* at just 72.39%, with Safari being a notable miss.
|
||||||
|
* https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
|
||||||
|
*
|
||||||
|
* "Soft wrap opportunities introduced by the word break are considered
|
||||||
|
* when calculating min-content intrinsic sizes."
|
||||||
|
* From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
|
||||||
|
*/
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
.mw-content-ltr & {
|
||||||
|
/* @noflip */
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-content-rtl & {
|
||||||
|
/* @noflip */
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* taken from .thumbcaption, plus .thumbinner */
|
||||||
|
padding: 0 0.75em 0.75em 0.75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inline media items
|
||||||
|
*/
|
||||||
|
*:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
.mw-valign-middle > & {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-baseline > & {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-sub > & {
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-super > & {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-top > & {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-text-top > & {
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-bottom > & {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-valign-text-bottom > & {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable selector-class-pattern */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Avoid the need to calculate paddings individually
|
||||||
|
* https://stackoverflow.com/a/7310398
|
||||||
|
*
|
||||||
|
* FIXME: This would be better in mediawiki.page.gallery.styles,
|
||||||
|
* but let's wait until wgParserEnableLegacyMediaDOM is removed
|
||||||
|
*/
|
||||||
|
.mw-gallery-traditional .gallerybox > .thumb {
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
@import 'variables-content.less';
|
||||||
|
|
||||||
|
figure[ typeof~='mw:File/Thumb' ],
|
||||||
|
figure[ typeof~='mw:File/Frame' ],
|
||||||
|
/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no
|
||||||
|
* longer supported
|
||||||
|
*/
|
||||||
|
figure[ typeof~='mw:Image/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Video/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Audio/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Image/Frame' ],
|
||||||
|
figure[ typeof~='mw:Video/Frame' ],
|
||||||
|
figure[ typeof~='mw:Audio/Frame' ] {
|
||||||
|
border: @border-thumbinner-print;
|
||||||
|
border-bottom: 0; // No border to figcaption
|
||||||
|
background-color: @background-color-thumbinner-print;
|
||||||
|
|
||||||
|
> *:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
border: @border-thumbimage-print;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> figcaption {
|
||||||
|
border: @border-thumbinner-print;
|
||||||
|
border-top: 0;
|
||||||
|
background-color: @background-color-thumbinner-print;
|
||||||
|
font-size: @font-size-thumbinner-print;
|
||||||
|
color: @color-thumbinner-print;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-image-border > *:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
border: @border-thumbborder-print;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
@import 'variables-content.less';
|
||||||
|
|
||||||
|
figure[ typeof~='mw:File/Thumb' ],
|
||||||
|
figure[ typeof~='mw:File/Frame' ],
|
||||||
|
/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no
|
||||||
|
* longer supported
|
||||||
|
*/
|
||||||
|
figure[ typeof~='mw:Image/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Video/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Audio/Thumb' ],
|
||||||
|
figure[ typeof~='mw:Image/Frame' ],
|
||||||
|
figure[ typeof~='mw:Video/Frame' ],
|
||||||
|
figure[ typeof~='mw:Audio/Frame' ] {
|
||||||
|
border: @border-thumbinner-screen;
|
||||||
|
border-bottom: 0; // No border to figcaption
|
||||||
|
border-width: 1px 1px 0.2em; // From .box
|
||||||
|
box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 ); // From .box
|
||||||
|
background-color: @background-color-thumbinner-screen;
|
||||||
|
|
||||||
|
> *:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
border: @border-thumbimage-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> figcaption {
|
||||||
|
border: @border-thumbinner-screen;
|
||||||
|
border-top: 0;
|
||||||
|
border-width: 1px 1px 0.2em; // From .box
|
||||||
|
box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 ); // From .box
|
||||||
|
background-color: @background-color-thumbinner-screen;
|
||||||
|
font-size: @font-size-thumbcaption-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-image-border > *:first-child {
|
||||||
|
> audio,
|
||||||
|
> img,
|
||||||
|
> video {
|
||||||
|
border: @border-thumbborder-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Magnify clip, not present for broken media */
|
||||||
|
figure[ typeof~='mw:File/Thumb' ]:not( [ typeof~='mw:Error' ] ),
|
||||||
|
/* TODO: Remove "Image|Video|Audio" when version 2.4.0 of the content is no
|
||||||
|
* longer supported
|
||||||
|
*/
|
||||||
|
figure[ typeof~='mw:Image/Thumb' ]:not( [ typeof~='mw:Error' ] ),
|
||||||
|
figure[ typeof~='mw:Video/Thumb' ]:not( [ typeof~='mw:Error' ] ),
|
||||||
|
figure[ typeof~='mw:Audio/Thumb' ]:not( [ typeof~='mw:Error' ] ) {
|
||||||
|
> figcaption:before {
|
||||||
|
content: '';
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
.mw-content-ltr & {
|
||||||
|
/* @noflip */
|
||||||
|
margin-left: 0.5em;
|
||||||
|
/* @noflip */
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-content-rtl & {
|
||||||
|
/* @noflip */
|
||||||
|
margin-right: 0.5em;
|
||||||
|
/* @noflip */
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a:after {
|
||||||
|
content: '';
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -20px;
|
||||||
|
|
||||||
|
.mw-content-ltr & {
|
||||||
|
/* @noflip */
|
||||||
|
right: 0.75em;
|
||||||
|
/* @noflip */
|
||||||
|
background-image: @background-image-magnify-ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-content-rtl & {
|
||||||
|
/* @noflip */
|
||||||
|
left: 0.75em;
|
||||||
|
/* @noflip */
|
||||||
|
background-image: @background-image-magnify-rtl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
@import 'themes/wikimedia.less'; // default theme
|
||||||
|
|
||||||
|
@font-size-thumbinner-screen: 94%;
|
||||||
|
@font-size-thumbinner-print: 10pt;
|
||||||
|
|
||||||
|
@border-thumbinner-screen: 1px solid @base80;
|
||||||
|
@border-thumbinner-print: 1px;
|
||||||
|
|
||||||
|
@background-color-thumbinner-screen: #f8f9fa;
|
||||||
|
@background-color-thumbinner-print: #fff;
|
||||||
|
|
||||||
|
@color-thumbinner-print: #666;
|
||||||
|
|
||||||
|
@font-size-thumbcaption-screen: 95%;
|
||||||
|
|
||||||
|
@line-height-thumbcaption: 1.5em;
|
||||||
|
|
||||||
|
@margin-floatright: 0 0 1.5em 2em;
|
||||||
|
@margin-floatleft: 0 2em 1.5em 0;
|
||||||
|
|
||||||
|
@margin-bottom-thumb: 0.5em;
|
||||||
|
|
||||||
|
@margin-tright: 0 0 1.5em 2em;
|
||||||
|
@margin-tleft: 0 2em 1.5em 0;
|
||||||
|
|
||||||
|
@border-thumbimage-screen: 1px solid @base80;
|
||||||
|
@border-thumbimage-print: 1px;
|
||||||
|
|
||||||
|
@background-color-thumbimage-screen: #fff;
|
||||||
|
|
||||||
|
@block-border: #aaa; // From resources/libraries/common-print.less
|
||||||
|
@border-thumbborder-screen: 1px solid @base80;
|
||||||
|
@border-thumbborder-print: 1pt solid @block-border;
|
||||||
|
|
||||||
|
@background-image-magnify-ltr: url( images/magnify-ltr.svg );
|
||||||
|
@background-image-magnify-rtl: url( images/magnify-rtl.svg );
|
||||||
Loading…
Reference in New Issue