mediawiki-skins-MinervaNeue/resources/skins.minerva.content.styles/hacks.less
jdlrobson 4389b67989 Explicitly use LESS variable for breakpoint defined in mediawiki ui
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.

Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
2018-02-06 22:23:32 +00:00

201 lines
4.2 KiB
Plaintext

/*
A file for css that corrects known rendering issues on known Wikimedia wikis.
the following definitions exist to deal with certain inline styles
present in wikitext.
This file should not need to exist
It will become redundant when the following RFC is resolved:
https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
FIXME: Review all of these hacks to see if they still apply.
*/
@import 'minerva.variables';
@import 'minerva.mixins';
.collapsible td {
width: auto !important;
}
.content {
.vertical-navbox,
.navbox {
display: none;
}
// Hide cleanup templates by default to non-javascript users as these stop them from reading the article itself
// Edit page notices
.action-edit .fmbox,
// Talk page informational boxes
.tmbox,
// Note not in issues.less as that is only loaded via JavaScript
.ambox,
#coordinates,
// Hide article badges, clean-up notices, stub notices, and navigation boxes
.topicon, .metadata {
// It's important as some of these are tables which become display: table on larger screens
display: none !important;
}
table {
// A lot of templates introduce floating and horizontal margins inline styles
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
&.infobox {
font-size: 90%;
position: relative;
border: 1px solid @colorGray14;
margin-bottom: 2em;
text-align: left;
background-color: @colorGray15;
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
th, td {
vertical-align: top;
border: 0;
border-bottom: 1px solid @colorGray14;
padding: 7px 10px;
}
tbody > tr > td,
tbody > tr > th {
flex: 1 0;
}
td:only-child,
th:only-child {
width: 100%;
}
tr:last-child th,
tr:last-child td {
border: 0;
}
}
&.infobox > tbody {
display: flex;
flex-flow: column nowrap;
}
&.infobox > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
}
}
// FIXME: Remove when filetoc is stripped from file pages a la table of contents (toc)
#filetoc,
.mw-editsection {
display: none;
}
/* force portals to use a one column layout on mobile */
.skin-minerva {
.portal-column-left-wide,
.portal-column-left,
.portal-column-right,
.portal-column-right-narrow {
float: none;
width: 100%;
}
}
/* bug 34878: Set an optimal width for a column.
* Makes sure that on small screens column-count is only honored if column-width hint is not violated.
* https://developer.mozilla.org/en-US/docs/CSS/column-width
*/
.references-column-count,
.column-count {
-moz-column-width: 35em;
-webkit-column-width: 35em;
column-width: 35em;
}
// When JavaScript is disabled clarify to the user which reference they clicked on
.references li:target {
background-color: #def;
}
.hatnote,
.dablink,
.rellink {
padding: 5px 7px;
color: @colorGray5;
font-size: 0.8em;
background-color: @colorGray15;
margin-bottom: 1px;
a {
color: @colorProgressive;
}
}
// Template:Quote_box uses fixed width
.quotebox {
margin: 0 0 0.8em !important;
width: auto !important;
}
@media all and ( min-width: @width-breakpoint-tablet ) {
// When in the HTML these should be revealed at tablet resolution (T172078)
.content {
.vertical-navbox,
.navbox {
display: inherit;
}
}
}
// Hacks to render galleries and multicol tables better on mobile
@media all and ( max-width: @width-breakpoint-tablet ) {
// Center images that might be less than the screen width.
// Image will appear centered and caption will take up full screen.
.gallery {
.gallerybox {
width: 100% !important;
div {
width: 100% !important;
}
}
}
.content {
table {
// Make {{col-beg}}, {{col-break}}, and {{col-end}} templates display single column tables
&.multicol {
> tr > td,
> tbody > tr > td {
display: block !important;
width: auto !important;
}
}
}
// Deal with Template:Multiple_image. T38030 and T148505
.thumb .thumbinner {
.flex-display( flex );
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
> .thumbcaption {
.flex( 1, 0, 100% );
display: block;
}
}
}
}
// Hack to assign info boxes properly when using RTL languages on LTR wiki
[dir='rtl'] .content .infobox {
/* @noflip */
text-align: left;
}