Yoink 'content-media' feature from core
Unfortunately, that seems to be what this skin is doing for other files. The styles are then adapted to match the theme. If would be much nicer to just enable the feature but that pulls in content.thumbnails-* which this skin has duplicated and adapted. The resources added here are only needed if $wgParserEnableLegacyMediaDOM is `false` though, but hopefully that'll soon be the default. Alas, when VE loads, it pulls in "mediawiki.skinning.content.parsoid" which overwrites some of the styles adapted here. Bug: T287965 Change-Id: Ia9278b4c164ea1ddeca49094c572df70e660043eisekai
Arlo Breault
3 years ago
parent
b7ed1ab96f
commit
b8f4bb7644
@ -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