mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 12:09:30 +00:00
5852e320a3
Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
93 lines
2.9 KiB
Plaintext
93 lines
2.9 KiB
Plaintext
/**
|
|
* Less mixins shared between both legacy and Vector 2022.
|
|
*/
|
|
|
|
@import '../common/variables.less';
|
|
|
|
.mixin-vector-menu-heading() {
|
|
align-self: center;
|
|
color: @color-base--subtle;
|
|
font-weight: normal;
|
|
cursor: default;
|
|
// NOTE: Setting these values does not produce a visible border.
|
|
// That's handled elsewhere with either border-top-style or border-bottom-style.
|
|
border-color: @border-color-portal-heading;
|
|
border-width: @border-width-base;
|
|
}
|
|
|
|
// Defines the arrow beside dropdown headings.
|
|
.mixin-vector-legacy-menu-heading-arrow {
|
|
content: '';
|
|
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
|
|
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
|
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
|
}
|
|
|
|
.mixin-vector-menu-heading-arrow() {
|
|
content: '';
|
|
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
|
|
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
|
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
|
// https://phabricator.wikimedia.org/T319070#8284272
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.mixin-vector-dropdown-menu-item() {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
|
|
font-size: @font-size-dropdown;
|
|
|
|
&:not( .mw-selflink ):visited {
|
|
color: @color-link;
|
|
}
|
|
|
|
&.selected a,
|
|
&.selected a:visited {
|
|
color: @color-link-selected;
|
|
}
|
|
}
|
|
|
|
// Scroll indicator used by TOC and page tools.
|
|
.mixin-vector-scroll-indicator() {
|
|
// Add extra padding for the fade scrollable indicator.
|
|
padding-bottom: @height-scroll-indicator - @padding-vertical-dropdown-menu-item;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: @height-scroll-indicator;
|
|
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
|
|
background-repeat: no-repeat;
|
|
background-position: -12px; // T311436 Hacky way to prevent the fade from covering the scrollbar
|
|
pointer-events: none; // Make the link below the fade clickable
|
|
}
|
|
}
|
|
|
|
.mixin-page-container() {
|
|
max-width: @max-width-page-container;
|
|
// Set a min-width to make explicit we do not support anything below this threshold.
|
|
// For devices too small, they should be more useable with horizontal scrolling.
|
|
// e.g. Portrait on an iPad
|
|
min-width: @min-width-supported;
|
|
margin: 0 auto;
|
|
padding-left: @padding-horizontal-page-container;
|
|
padding-right: @padding-horizontal-page-container;
|
|
background-color: @background-color-page-container;
|
|
box-sizing: border-box;
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
padding-left: @padding-horizontal-page-container-desktop;
|
|
padding-right: @padding-horizontal-page-container-desktop;
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
padding-left: @padding-horizontal-page-container-desktop-wide;
|
|
padding-right: @padding-horizontal-page-container-desktop-wide;
|
|
}
|
|
}
|