mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/tablet/common.less
Timo Tijhof 0d61c78f73 Move skins.minerva.content.styles into skins.minerva.base.styles
This could be made even simpler by not using a LESS varialbe for
hacks.less, but loading it conditionally through the moduel def.
But, as a first step we can merge the two as-is.

Given that the subject and target are always referenced together
in page views, there is no need to keep an alias around. However,
I'm keeping it anyway so as to not produce any
`/* {"skins.foo":"missing"} */` appendix to the stylesheet response
for these cached URLs.

Bug: T266361
Change-Id: I8578faab8ca32bd49be90711cbd5e182763b8065
2021-06-21 17:50:37 +00:00

117 lines
2.4 KiB
Plaintext

/*
A file for css that optimises the Minerva skin on larger devices.
*/
@import '../../../../minerva.less/minerva.variables.less';
@import '../../../../minerva.less/minerva.mixins.less';
@media screen and ( min-width: @width-breakpoint-tablet ) {
.client-js #searchIcon { // stylelint-disable-line selector-max-id
display: none;
}
.header {
.branding-box {
width: @brandingBoxWidth;
}
.search-box {
display: table-cell;
width: auto;
.search {
width: @searchBoxWidth;
}
}
}
// stylelint-disable selector-max-id
// 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;
}
// stylelint-enable selector-max-id
.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 {
max-width: @width-breakpoint-tablet - @contentMargin;
&.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;
}
}
table {
caption {
background: inherit; // T170344
}
tbody {
display: table-row-group;
}
}
}
.last-modified-bar {
background-color: transparent;
padding-left: 0;
padding-right: 0;
font-size: 1em;
}
}
@media screen and ( min-width: @width-breakpoint-desktop ) {
// stylelint-disable-next-line selector-max-id
.banner-container,
/* FIXME: Generic header class needed me-thinks! */
.header,
.page-header-bar,
.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 {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: @contentMaxWidthTablet;
}
.header {
// Make sure the main menu and secondary button icon images are aligned
// with the content.
max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;
}
}