mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/tablet/common.less
Jan Drewniak be0b43042e Convert Less variable names from camelCase to snake-case
Converts all Less variable names from CamelCase to snake-case
per the MediaWiki coding conventions.

Removes the following unused Less variables, mostly
related to icons, since those were converted to Codex:
- @icon-touch-area-sm
- @icon-touch-area-md
- @min-size-icon (replaced with @size-icon-medium)
- @icon-glyph-size-sm
- @icon-size-sm
- @icon-padding-sm
- @icon-glyph-size-md
- @icon-size-md
- @margin-icon-md-labelled

Bug: T350581
Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
2024-01-31 15:24:31 -08:00

151 lines
3.1 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;
}
// stylelint-disable selector-max-id
// FIXME: Have a class that identifies all of these selectors
.pre-content,
/* Form only pages e.g. Special:MobileOptions */
.minerva-anon-talk-message,
#mw-content-text > form,
.content,
.content-unstyled,
.post-content {
max-width: @max-width-content-tablet;
margin: 0 @padding-content-tablet;
}
// stylelint-enable selector-max-id
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
// Default where page content language is not set
// Allow to flip
clear: right;
float: right;
margin-left: 1.4em;
margin-right: 0;
// Defaults for page content language
// These will be overriden below when explicit classes are set
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
margin-left: 1.4em;
/* @noflip */
margin-right: 0;
}
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
clear: left;
/* @noflip */
margin-left: 0;
/* @noflip */
margin-right: 1.4em;
}
}
.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[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ],
.thumb {
max-width: @width-breakpoint-tablet - @margin-content;
&.mw-halign-left,
&.tleft {
/* @noflip */
float: left;
/* @noflip */
clear: left;
/* @noflip */
margin-left: 0;
/* @noflip */
margin-right: 1.4em;
}
&.mw-halign-right,
&.tright {
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
margin-left: 1.4em;
/* @noflip */
margin-right: 0;
}
&.mw-halign-none {
float: none;
clear: none;
margin-left: 0;
margin-right: 0;
}
&.mw-halign-center {
float: none;
clear: none;
margin-left: auto;
margin-right: auto;
}
}
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,
.minerva-anon-talk-message,
.minerva-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: @max-width-content-tablet;
}
}