hyperzlib
/
isekai-mediawiki-skins-Timeless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Yoink 'content-media' feature from core"

Browse Source
isekai
jenkins-bot 2 years ago committed by Gerrit Code Review
parent 6c5139e3f8 b8f4bb7644
commit e811fb932e
6 changed files with 504 additions and 0 deletions
Show Stats Download Patch File Download Diff File

277
resources/content.media-common.less
Unescape Escape View File

@ -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;
}
}

41
resources/content.media-print.less
Unescape Escape View File

@ -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;
}
}

100
resources/content.media-screen.less
Unescape Escape View File

@ -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;
}
}
}

41
resources/screen-mobile.less
Unescape Escape View File

@ -219,6 +219,47 @@ div.thumb {
margin: 0 auto 0.5em;
}
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' ] {
width: 100% !important;
> *:first-child {
> *:first-child {
margin: 1em 1.5em;
}
}
> figcaption {
padding: 0 1.5em 1em 1.5em;
}
}
// FIXME: Clear the magnify clip for now
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: none;
}
> a:after {
content: none;
}
}
.mw-body {
border: 0;

36
resources/variables-content.less
Unescape Escape View File

@ -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 );

9
skin.json
Unescape Escape View File

@ -75,6 +75,9 @@
"toc": true
},
"styles": {
"resources/content.media-common.less": {
"media": "all"
},
"resources/libraries/normalise.css": {
"media": "screen"
},
@ -84,6 +87,9 @@
"resources/forms.less": {
"media": "screen"
},
"resources/content.media-screen.less": {
"media": "screen"
},
"resources/screen-common.less": {
"media": "screen"
},
@ -108,6 +114,9 @@
},
"resources/print.css": {
"media": "print"
},
"resources/content.media-print.less": {
"media": "print"
}
},
"@NOTE": "Remember to also update variables.less if you change the width cutoffs here. screen-misc.less and mobile.js may also need updating."

Write Preview
Loading…
Cancel
Save