Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pull out commonality between thumbnails and print styles

Browse source 
This helps highlight what's different between the two.

Change-Id: I076fddda07dd734f76277376ba6361bff68b7c36
This commit is contained in:
Arlo Breault 2021-09-28 13:59:56 -04:00
parent b9a6c99032
commit 7eb9972ba0
6 changed files with 85 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/resourceloader/ResourceLoaderSkinModule.php
View file

@ -124,6 +124,7 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
'print' => [ 'resources/src/mediawiki.skinning/logo-print.less' ],
],
'content-media' => [
'all' => [ 'resources/src/mediawiki.skinning/content.thumbnails-common.less' ],
'screen' => [ 'resources/src/mediawiki.skinning/content.thumbnails.less' ],
'print' => [ 'resources/src/mediawiki.skinning/content.thumbnails-print.less' ],
],

64
resources/src/mediawiki.skinning/content.thumbnails-common.less Normal file
View file

@ -0,0 +1,64 @@
/**
* These styles are common to both print and screen media.
* Use the -print or without postfix files to apply styles more selectively.
*/
/* stylelint-disable selector-class-pattern */
@import 'variables.less';
/* @noflip */
div.tright,
div.floatright,
table.floatright {
clear: right;
float: right;
}
/* @noflip */
div.tleft,
div.floatleft,
table.floatleft {
float: left;
clear: left;
}
/* @noflip */
div.floatright,
table.floatright {
margin: @margin-floatright;
}
/* @noflip */
div.floatleft,
table.floatleft {
margin: @margin-floatleft;
}
/* @noflip */
div.tleft {
margin: @margin-tleft;
}
/* @noflip */
div.tright {
margin: @margin-tright;
}
.thumbcaption {
text-align: left;
line-height: @line-height-thumbcaption;
padding: 3px;
}
div.thumb {
width: auto;
background-color: transparent;
}
div.thumbinner {
text-align: center;
/* new block formatting context,
* to clear background from floating content */
overflow: hidden;
}

3
resources/src/mediawiki.skinning/content.thumbnails-layout.less → resources/src/mediawiki.skinning/content.thumbnails-legacy.less
View file

@ -1,8 +1,5 @@
/* stylelint-disable selector-class-pattern */
/* NOTE: These rules can be merged into the `content.thumbnails.less file when the `legacy.less`
importing this file has been removed from the codebase */
/* @noflip */ div.tright,
div.floatright,
table.floatright {

49
resources/src/mediawiki.skinning/content.thumbnails-print.less
View file

@ -1,50 +1,20 @@
/* stylelint-disable selector-class-pattern */
@import 'variables.less';
/* @noflip */
table.floatright,
div.floatright,
div.tright {
float: right;
clear: right;
}
/* @noflip */
table.floatleft,
div.floatleft,
div.tleft {
float: left;
clear: left;
}
/* @noflip */
div.tleft {
margin: @margin-tleft;
}
/* @noflip */
div.tright {
margin: @margin-tright;
}
/* @noflip */
table.floatright,
div.floatright {
margin: @margin-floatright;
border: 0;
}
/* @noflip */
table.floatleft,
div.floatleft {
margin: @margin-floatleft;
border: 0;
}
div.thumb {
background-color: transparent;
width: auto;
/* Pagination */
page-break-inside: avoid;
a {
border-bottom: 0;
@ -58,28 +28,13 @@ div.thumbinner {
padding: 5px;
font-size: 10pt;
color: #666;
text-align: center;
/* new block formatting context,
* to clear background from floating content */
overflow: hidden;
min-width: 100px;
}
.thumbcaption {
text-align: left;
line-height: @line-height-thumbcaption;
padding: 3px;
}
.thumbborder {
border: 1pt solid #ddd;
}
.thumb {
/* Pagination */
page-break-inside: avoid;
}
.magnify {
display: none;
}

55
resources/src/mediawiki.skinning/content.thumbnails.less
View file

@ -8,26 +8,10 @@
/* stylelint-disable selector-class-pattern */
@import 'variables.less';
@import 'content.thumbnails-layout.less';
/* Images */
/* @noflip */
div.floatright,
table.floatright {
margin: @margin-floatright;
}
/* @noflip */
div.floatleft,
table.floatleft {
margin: @margin-floatleft;
}
/* Thumbnails */
div.thumb {
margin-bottom: @margin-bottom-thumb;
width: auto;
background-color: transparent;
}
div.thumbinner {
@ -35,10 +19,6 @@ div.thumbinner {
padding: 3px;
background-color: @background-color-thumbinner;
font-size: @font-size-thumbinner;
text-align: center;
/* new block formatting context,
* to clear background from floating content */
overflow: hidden;
}
.thumbimage {
@ -47,12 +27,13 @@ div.thumbinner {
}
.thumbcaption {
border: 0;
line-height: @line-height-thumbcaption;
padding: 3px;
font-size: @font-size-thumbcaption;
/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
text-align: left;
border: 0;
font-size: @font-size-thumbcaption;
}
.thumbborder {
border: @border-thumbborder;
}
.magnify {
@ -79,16 +60,23 @@ div.thumbinner {
}
}
.thumbborder {
border: @border-thumbborder;
/* Directionality-specific styles for thumbnails - their positioning depends on content language */
/* @noflip */
.mw-content-ltr .thumbcaption {
text-align: left;
}
/* Directionality-specific styles for thumbnails - their positioning depends on content language */
/* @noflip */
.mw-content-rtl .thumbcaption {
text-align: right;
}
/* @noflip */
.mw-content-ltr .magnify {
margin-left: 3px;
margin-right: 0;
float: right;
}
/* @noflip */
@ -100,19 +88,10 @@ div.thumbinner {
.mw-content-rtl .magnify {
margin-left: 0;
margin-right: 3px;
float: left;
}
/* @noflip */
.mw-content-rtl .magnify a {
background-image: @background-image-magnify-rtl;
}
/* @noflip */
div.tright {
margin: @margin-tright;
}
/* @noflip */
div.tleft {
margin: @margin-tleft;
}

2
resources/src/mediawiki.skinning/legacy.less
View file

@ -130,7 +130,7 @@ td.mw-submit {
}
@import 'content.links.less';
@import 'content.thumbnails-layout.less';
@import 'content.thumbnails-legacy.less';
@import 'interface.category.less';
@import '../mediawiki.action/styles.less';