53d9452795
To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
160 lines
3.8 KiB
Plaintext
160 lines
3.8 KiB
Plaintext
//
|
|
// Default layout for Modern Vector.
|
|
//
|
|
|
|
body {
|
|
// General background/foreground color definition as one exception to the rule.
|
|
background-color: @background-color-base;
|
|
color: @color-base;
|
|
// Vertical scrollbar always visible.
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.mw-body,
|
|
.parsoid-body {
|
|
direction: ltr;
|
|
padding: @padding-content;
|
|
}
|
|
|
|
.mw-body {
|
|
// Will be removed when we limit content width (T246420).
|
|
/* Border on top, left, and bottom side */
|
|
border: @border-width-base @border-style-base @border-color-content;
|
|
border-right-width: 0;
|
|
/* Merge the border with tabs' one (in their background image) */
|
|
margin-top: -@border-width-base;
|
|
|
|
.firstHeading {
|
|
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
/* Space for header above content */
|
|
.mw-header-placeholder {
|
|
// Reserve space for the absolute positioned header and tabs.
|
|
height: @height-header + @height-tabs;
|
|
}
|
|
|
|
/* Header layout */
|
|
.mw-header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
// A height is set to account for projects where no icon is set.
|
|
height: @height-logo-icon;
|
|
margin: @margin-top-header 0 @margin-bottom-header;
|
|
padding: @padding-vertical-header @padding-horizontal-header;
|
|
// Vertical centering of header elements (IE>=11), requires flex.
|
|
// Non-flex fallback for IE<=9: float rule on the child elements.
|
|
.flex-display();
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
z-index: @z-index-header;
|
|
}
|
|
|
|
/* Searchbox */
|
|
#p-search {
|
|
float: left;
|
|
margin: 0.5em 0.5em 0 0.5em;
|
|
min-width: 5em;
|
|
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
|
width: 13.2em;
|
|
// Support: Modern browsers, responsive width.
|
|
width: 20vw;
|
|
max-width: 20em;
|
|
}
|
|
|
|
/* Main column */
|
|
.mw-body,
|
|
#mw-data-after-content,
|
|
#left-navigation,
|
|
.mw-footer {
|
|
margin-left: @width-grid-column-one;
|
|
}
|
|
|
|
/* Content */
|
|
.mw-indicators {
|
|
float: right;
|
|
z-index: @z-index-indicators;
|
|
}
|
|
|
|
.mw-body-content {
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
}
|
|
|
|
/* Hide, but keep accessible for screen-readers */
|
|
#mw-navigation h2 {
|
|
position: absolute;
|
|
top: -9999px;
|
|
}
|
|
|
|
/* Tabs */
|
|
#mw-head {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Navigation Containers */
|
|
#left-navigation {
|
|
float: left;
|
|
margin-top: @height-header;
|
|
/* When right nav would overlap left nav, it's placed below it
|
|
(normal CSS floats behavior). This rule ensures that no empty space
|
|
is shown between them due to right nav's margin-top. Page layout
|
|
is still broken, but at least the nav overlaps only the page title
|
|
instead of half the content. */
|
|
margin-bottom: -@height-header;
|
|
}
|
|
|
|
#right-navigation {
|
|
float: right;
|
|
margin-top: @height-header;
|
|
}
|
|
|
|
// FIXME: Remove the body:not selector when
|
|
// skin-vector-search-header-legacy class is available in cached HTML
|
|
// i.e. deploy after I7f8059d43eaab49de362405784b34a4fe502c7b0 lands.
|
|
body:not( .skin-vector-search-header ) #p-personal,
|
|
.skin-vector-search-header-legacy #p-personal {
|
|
position: absolute;
|
|
top: @top-personal-tools;
|
|
right: 0.75em;
|
|
z-index: @z-index-personal;
|
|
|
|
ul {
|
|
// Keep from spilling out into the first column
|
|
// For completeness this should also include the width of the logo.
|
|
// As a result it is possible for the personal tools to overlap the logo.
|
|
padding-left: @width-grid-column-one;
|
|
}
|
|
}
|
|
|
|
#p-personal {
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
#mw-panel {
|
|
position: absolute;
|
|
// The sidebar is absolutely positioned inside the header which applies a top
|
|
// margin so we need to subtract this top margin in order to get the correct
|
|
// sidebar position.
|
|
top: @height-header - @margin-top-header;
|
|
left: 0;
|
|
width: @width-grid-column-one;
|
|
.box-sizing( border-box );
|
|
margin-top: @margin-top-sidebar;
|
|
padding-left: @padding-left-sidebar;
|
|
z-index: @z-index-sidebar;
|
|
}
|
|
|
|
.mw-footer {
|
|
margin-top: 0;
|
|
}
|