mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-03 19:57:19 +00:00
4ab2b1bff1
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
66 lines
1.5 KiB
Plaintext
66 lines
1.5 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
/**
|
|
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
|
*/
|
|
|
|
/* Tab list items */
|
|
.vector-menu-tabs {
|
|
float: left;
|
|
padding-left: @border-width-base;
|
|
|
|
li {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
|
|
// Make first and last elements flush with edge of header.
|
|
&:first-child {
|
|
margin-left: -8px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
|
|
/* focus and hover have outlines. Text underline interferes with bottom border */
|
|
li a:focus,
|
|
li a:hover {
|
|
text-decoration: none;
|
|
border-bottom: @border-width-base @border-style-base;
|
|
}
|
|
|
|
.new a,
|
|
.new a:visited {
|
|
color: @color-link-new;
|
|
}
|
|
|
|
.selected a,
|
|
.selected a:visited {
|
|
color: @color-link-selected;
|
|
border-bottom: @border-width-base @border-style-base;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tab link appearance, applies to
|
|
* - <a> inside vector-menu-tabs (e.g. read, edit, view, history)
|
|
* - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
|
|
*/
|
|
.vector-menu-tabs li a,
|
|
.vector-article-toolbar .vector-menu-heading {
|
|
display: block;
|
|
position: relative;
|
|
// Top bottom padding to increase clickable area.
|
|
padding-top: 18px;
|
|
padding-bottom: 7px;
|
|
// left & right margin separate bottom border between words,
|
|
// bottom margin makes link border overlap toolbar border.
|
|
margin: 0 8px -1px 8px;
|
|
cursor: pointer;
|
|
border-bottom: @border-width-base @border-style-base transparent;
|
|
}
|