mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-17 20:52:14 +00:00
78787d9665
This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
180 lines
4.2 KiB
Plaintext
180 lines
4.2 KiB
Plaintext
//
|
|
// Default layout for Modern Vector.
|
|
//
|
|
|
|
@margin-horizontal-sidebar-button-icon: 12px;
|
|
|
|
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 */
|
|
.skin-vector-search-header-legacy .mw-header-placeholder {
|
|
// Reserve space for the absolute positioned header and tabs.
|
|
height: @height-header + @height-tabs;
|
|
}
|
|
|
|
/* Header layout */
|
|
.skin-vector-search-header-legacy .mw-header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.mw-header {
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-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 */
|
|
.skin-vector-search-header-legacy #mw-head {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Navigation Containers */
|
|
.mw-article-toolbar-container {
|
|
// Clear the floats on #left-navigation and #right-navigation.
|
|
.mixin-clearfix();
|
|
}
|
|
|
|
.skin-vector-search-header-legacy #left-navigation {
|
|
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;
|
|
}
|
|
|
|
#left-navigation {
|
|
float: left;
|
|
}
|
|
|
|
.skin-vector-search-header-legacy #right-navigation {
|
|
margin-top: @height-header;
|
|
}
|
|
|
|
#right-navigation {
|
|
float: right;
|
|
}
|
|
|
|
.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-sidebar-button {
|
|
margin-left: -@margin-horizontal-sidebar-button-icon;
|
|
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
|
}
|
|
|
|
.skin-vector-search-header-legacy #mw-panel {
|
|
// 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;
|
|
}
|
|
|
|
#mw-panel {
|
|
position: absolute;
|
|
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;
|
|
}
|
|
|
|
.skin-vector-search-header-legacy .mw-footer {
|
|
margin-top: 0;
|
|
}
|