mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-28 08:00:32 +00:00
0cb19335fa
MinervaNeue depends on mobile.search. mobile.search's LESS has been collapsed into mobile.startup. This patch updates Minerva's references and revises the SearchOverlay's CSS selector to increase specificity to account for the new order of CSS files. Previously: - ... - MobileFrontend Overlay.less - MobileFrontend SearchOverlay.less - ... - Minerva Overlay.less - Minerva SearchOverlay.less - ... Now: - ... - MobileFrontend Overlay.less - Minerva Overlay.less - ... - MobileFrontend SearchOverlay.less - Minerva SearchOverlay.less - ... Since SearchOverlay's selector are intended to override Overlay's, it seems appropriate to specify that a SearchOverlay is also an Overlay and increase specificity. Bug: T210207 Related: Ib0316020ed10eb0c921a3300501df7634a889977 Change-Id: I5c06b13f22f530fb52f37f373e081ed55f332a07
57 lines
1.1 KiB
Plaintext
57 lines
1.1 KiB
Plaintext
@import '../../../minerva.less/minerva.variables';
|
|
|
|
// 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: @headerHeight;
|
|
}
|
|
|
|
.clear {
|
|
position: absolute;
|
|
top: ( @headerHeight / 2 ) - ( @iconSize / 2 );
|
|
right: 0;
|
|
margin-top: @headerMarginTop;
|
|
}
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
|
.overlay.search-overlay {
|
|
.search-box {
|
|
display: table-cell;
|
|
}
|
|
|
|
.spinner-container,
|
|
.search-content,
|
|
.results {
|
|
width: @searchBoxWidth;
|
|
margin-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
|
|
}
|
|
|
|
.overlay-title {
|
|
width: @searchBoxWidth;
|
|
padding-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
|
|
}
|
|
|
|
.spinner-container {
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
|
|
ul {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-desktop ) {
|
|
.overlay.search-overlay {
|
|
.overlay-content {
|
|
// align with the search form
|
|
max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
|
|
}
|
|
}
|
|
}
|