mediawiki-skins-MinervaNeue/resources/skins.minerva.tablet.styles/common.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

154 lines
3 KiB
Plaintext

/*
A file for css that optimises the Minerva skin on larger devices.
*/
@import 'minerva.variables';
@import 'minerva.mixins';
@paddingVertical: 1.4em;
@media screen and ( min-width: @width-breakpoint-tablet ) {
.client-js {
#searchIcon {
display: none;
}
}
.header {
.branding-box {
width: @brandingBoxWidth;
}
.search-box {
display: table-cell;
width: auto;
.search {
width: @searchBoxWidth;
}
}
}
.toc-mobile {
// Reset the rule for mobile mode (but not for .client-nojs)
display: block;
visibility: visible;
position: relative;
font-size: 1.3em;
float: left;
clear: left;
margin: 1em 0;
border: solid 1px transparent;
> h2 {
visibility: hidden;
font-family: @fontFamily;
font-size: @tocFontSize;
font-weight: bold;
border-bottom: 0;
padding: @paddingVertical / 2 0;
}
}
.content_block {
width: auto;
clear: none;
}
// FIXME: Have a class that identifies all of these selectors
.pre-content,
// Form only pages e.g. Special:MobileOptions
#mw-content-text > form,
.content,
.post-content {
max-width: @contentMaxWidthTablet;
margin: 0 @contentPaddingTablet;
}
.content {
// Classes added by thumbnails
// e.g. [[File:Scholars mate animation.gif|frame|left|"[[Scholar's mate]]"]]
// We use @noflip because we still want .tleft to be on the left and
// .tright to be on the right in RTL languages.
figure,
.thumb {
width: 320px;
&.mw-halign-left,
&.tleft {
/* @noflip */
float: left;
/* @noflip */
clear: left;
/* @noflip */
margin-right: 1.4em;
}
&.mw-default-size,
&.mw-halign-right,
&.tright {
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
margin-left: 1.4em;
}
}
// Override rules in common.less
table {
display: table;
width: auto !important;
caption {
background: inherit; // T170344
display: table-caption;
}
tbody {
display: table-row-group;
}
}
}
#mw-mf-last-modified {
padding: 5px 0;
}
.last-modified-bar {
background-color: transparent;
padding-left: 0;
padding-right: 0;
font-size: 1em;
}
}
@media screen and ( min-width: @width-breakpoint-desktop ) {
// FIXME: Zero should use banner-container class or better - append to banner-container
#mw-mf-page-center .mw-mf-banner,
.banner-container,
// FIXME: Generic header class needed me-thinks!
.header,
.page-header-bar,
.content-header,
.overlay-header,
// FIXME: Generic content class needed?
.content,
.overlay-content,
.content-unstyled,
.pre-content,
.post-content,
// Form only pages e.g. Special:MobileOptions
#mw-content-text > form,
// FIXME: remove need for id selector
#mw-mf-page-center .pointer-overlay {
margin-left: auto;
margin-right: auto;
max-width: @contentMaxWidthTablet;
}
.header {
// Make sure the main menu and secondary button icon images are aligned
// with the content.
max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;
}
}