mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-18 08:40:49 +00:00
dd154b4ea7
The values have slightly changed: - Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile only experience but should make barely a difference to vast majority of our users. - Biggest difference is in `min-width-breakpoint-desktop`, which is increased by 120px in comparison to `@width-breakpoint-desktop: 1000px` Also removing one out-dated feature phone clause. TECHNICAL CHANGES: * The previous breakpoint was tied to the maximum content width. The previous maximum content width is preserved, and several media queries are adjusted to make use of it. * The header (logo) is not optimized for 640px-720px. For now a temporary fix is but in place which will be investigated as part of T366859 VISUAL CHANGES: * 6 visual changes which improve alignment in language and visual editor overlay and diffs (where wikidiff2 is not installed) Bug: T349793 Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779 Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
105 lines
2.5 KiB
Plaintext
105 lines
2.5 KiB
Plaintext
@import '../../../minerva.less/minerva.variables.less';
|
|
|
|
// These styles transform the SearchOverlay appearance in the Minerva skin.
|
|
// Since SearchOverlay can be used by other skins, these styles are kept separate from
|
|
// the others.
|
|
|
|
.overlay.search-overlay {
|
|
.spinner-container {
|
|
top: @height-site-header;
|
|
}
|
|
|
|
.with-results,
|
|
.without-results {
|
|
margin: 0;
|
|
}
|
|
|
|
.clear {
|
|
background: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY( -50% );
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
// Calculate padding based off icon and branding box widths,
|
|
// accounting for `box-sizing: border-box` on the icon
|
|
@spacing-search-horizontal-ems: unit( @spacing-horizontal-button / @font-size-browser, ems );
|
|
|
|
@media all and ( min-width: @min-width-breakpoint-tablet ) {
|
|
.overlay.search-overlay {
|
|
@searchPadding: @min-size-interactive-touch-ems + @min-width-branding-box-ems - @spacing-search-horizontal-ems;
|
|
|
|
.search-box,
|
|
.search-content,
|
|
.spinner-container,
|
|
.results {
|
|
width: @width-search-box;
|
|
margin-left: @searchPadding;
|
|
}
|
|
|
|
// Ensure search overlay content is aligned with .heading-container
|
|
.overlay-header-container,
|
|
.overlay-content {
|
|
padding-left: @padding-content;
|
|
padding-right: @padding-content;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.overlay-title {
|
|
width: auto;
|
|
}
|
|
|
|
.overlay-content {
|
|
// Override default width styles
|
|
width: 90%;
|
|
max-width: none;
|
|
}
|
|
|
|
.spinner-container {
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Keeps search input aligned */
|
|
@media all and ( min-width: @min-width-breakpoint-tablet ) and ( max-width: @min-width-breakpoint-desktop ) {
|
|
.overlay-title {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* FIXME: Remove when T366859 has been addressed */
|
|
@media screen and ( min-width: 720px ) {
|
|
.overlay.search-overlay {
|
|
@T366859-searchPadding: @min-size-interactive-touch-ems + @T366859-min-width-branding-box-ems - @spacing-search-horizontal-ems;
|
|
|
|
.search-box,
|
|
.search-content,
|
|
.spinner-container,
|
|
.results {
|
|
margin-left: @T366859-searchPadding;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: @min-width-breakpoint-desktop ) {
|
|
.overlay.search-overlay {
|
|
// Normally .overlay-content would have these styles by default
|
|
// But since we need to account for .heading-container padding in .overlay-content,
|
|
// we apply these styles directly to the search results instead.
|
|
.search-results-view {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 90%;
|
|
max-width: @max-width-content-tablet;
|
|
}
|
|
}
|
|
}
|