mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-23 22:03:39 +00:00
145db70286
Required for proper presentation of page issues overlay and multimedia viewer. The div rules were unnecessary. Bug: T205341 Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
86 lines
2.1 KiB
Plaintext
86 lines
2.1 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;
|
|
}
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
|
.overlay.search-overlay {
|
|
// TODO: update @size-icon and @width-icon-gutter to reflect new icon button specs
|
|
@size-icon-updated: 1.25em; // 20px icon width
|
|
@width-icon-gutter-updated: 0.75em; // 12px padding width
|
|
@border-width-icon: 0.125em; // 1px border width * 2
|
|
// Calculate padding based off icon and branding box widths, accounting for `box-sizing: border-box` on the icon
|
|
@searchPadding: (@size-icon-updated + @width-icon-gutter-updated + @border-width-icon) + @width-branding-box;
|
|
|
|
.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;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.overlay-content {
|
|
// Override default width styles
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.spinner-container {
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: @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;
|
|
}
|
|
}
|
|
}
|