mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-23 15:26:47 +00:00
Remove @font-size-base from vector-2022
Bug: T367899 Change-Id: I6ec44a10a7bfeb6b03912ca6d5a23eaed046db08
This commit is contained in:
parent
15e7bf48d1
commit
25f4bc2a37
|
@ -23,10 +23,6 @@
|
|||
|
||||
// Overrides for Codex variables:
|
||||
|
||||
// Fonts
|
||||
// Assumes 16px as the default browser font-size.
|
||||
@font-size-base: unit( 14 / 16, em ); // Equals `0.875em`.
|
||||
|
||||
// Body content uses the user setting in browser / the system default sans-serif font:
|
||||
// Arial on Windows, Roboto on Android.
|
||||
// FIXME: Use Codex's OS specific default sans-serif fonts.
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
@opacity-icon-base--hover: 0.8; // = `#333` on `background-color: #fff`. Codex: 0.74
|
||||
|
||||
// Fonts
|
||||
// Assumes 16px as the default browser font-size.
|
||||
@font-size-base: unit( 14 / 16, em ); // Equals `0.875em`.
|
||||
|
||||
// Body content uses the user setting in browser / the system default sans-serif font:
|
||||
// Arial on Windows, Roboto on Android.
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.mw-indicators {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
position: relative;
|
||||
float: right;
|
||||
|
|
|
@ -86,10 +86,10 @@ pre,
|
|||
}
|
||||
|
||||
.vector-body {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
// Support IE 9-11, Trident cuts values 2 digits after decimal point.
|
||||
// `calc` enables to set correct calculation in place again. See T102364.
|
||||
font-size: @font-size-base--trident-hack;
|
||||
font-size: @font-size-small--trident-hack;
|
||||
line-height: @line-height-base;
|
||||
|
||||
#siteSub {
|
||||
|
|
|
@ -33,8 +33,7 @@
|
|||
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex-design-tokens/src/theme-wikimedia-ui.json#429
|
||||
// See also Vector's 'mediawiki.skin.variables.less' overrides.
|
||||
|
||||
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
||||
@font-size-base--trident-hack: calc( 1em ~'*' unit( @font-size-base ) );
|
||||
@font-size-small--trident-hack: calc( 1em ~'*' unit( @font-size-small ) );
|
||||
@font-size-reset: @font-size-root;
|
||||
@font-size-heading-1: 1.8em;
|
||||
@font-size-heading-2: 1.5em;
|
||||
|
@ -86,7 +85,7 @@
|
|||
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
||||
@padding-vertical-dropdown-menu-item: 6px;
|
||||
@padding-horizontal-dropdown-menu-item: 14px;
|
||||
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
||||
@font-size-dropdown: @font-size-small;
|
||||
|
||||
// Scroll Indicator
|
||||
@height-scroll-indicator: 30px;
|
||||
|
@ -110,7 +109,7 @@
|
|||
@margin-top-pinned-toc: @margin-top-pinned-page-tools + @padding-top-content;
|
||||
|
||||
// Search
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-small, em ); // 35.71428571em @ 16 & 0.875em T270202
|
||||
@min-width-search-button: 28px;
|
||||
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
||||
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
.mixin-vector-arrowed-dropdown-toggle();
|
||||
}
|
||||
|
||||
.vector-dropdown-label-text {
|
||||
font-size: @font-size-dropdown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Invisible checkbox covering the dropdown toggle button.
|
||||
*/
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.mw-indicators {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
position: relative;
|
||||
float: right;
|
||||
|
|
|
@ -18,11 +18,6 @@
|
|||
// Set opacity to `1` on language button (it applies to more menu because of label color).
|
||||
opacity: @opacity-base;
|
||||
|
||||
.vector-dropdown-label-text {
|
||||
// Special treatment for language button, based on Vector font-size
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// T291286: Temporarily use progressive ULS style
|
||||
&.cdx-button--action-progressive.cdx-button--weight-quiet::after {
|
||||
mask-image: url( ./images/arrow-down-progressive.svg );
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
> .cdx-button {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
// When labels have multiple words e.g. "Add topic" make sure they do not wrap onto
|
||||
// new line. This can happen when editing pages with long titles. e.g. F36867314
|
||||
white-space: nowrap;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-small, em );
|
||||
|
||||
.vector-page-toolbar-container {
|
||||
display: flex;
|
||||
font-size: unit( @font-size-small, rem );
|
||||
font-size: @font-size-small;
|
||||
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
|
||||
box-shadow: 0 1px @border-color-subtle;
|
||||
// Add bottom margin to account for box-shadow
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
// We have to put those styles outside `.skin-vector-search-vue`,
|
||||
// as we can't address no-JS modern and Vue enhanced otherwise.
|
||||
.vector-search-box {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
// If this is a flex item, make sure it grows into available space.
|
||||
flex-grow: 1;
|
||||
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
.vector-menu-content-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
.user-links-collapsible-item {
|
||||
|
@ -93,7 +93,7 @@
|
|||
* Logged-in user-page link in personal (overflow) menu.
|
||||
*/
|
||||
#pt-userpage-2 {
|
||||
max-width: unit( 155 / @font-size-browser / @font-size-base, em );
|
||||
max-width: unit( 155 / @font-size-browser / @font-size-small, em );
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
@ -109,6 +109,6 @@
|
|||
// T287522#7295558: Increase the max-width of the username when viewport
|
||||
// allows for it.
|
||||
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
|
||||
max-width: unit( 200 / @font-size-browser / @font-size-base, em );
|
||||
max-width: unit( 200 / @font-size-browser / @font-size-small, em );
|
||||
}
|
||||
}
|
||||
|
|
|
@ -90,7 +90,7 @@ body {
|
|||
// are rendered.
|
||||
#contentSub:not( :empty ),
|
||||
#contentSub2 {
|
||||
font-size: unit( @font-size-small, rem );
|
||||
font-size: @font-size-small;
|
||||
color: @color-subtle;
|
||||
width: auto;
|
||||
// Visually separate #contentSub and #contentSub2 (T315639)
|
||||
|
|
|
@ -177,7 +177,7 @@ pre,
|
|||
// T335625 - Move siteSub into common.less to prevent it from being feature-flagged
|
||||
// and overriding on-wiki modifications.
|
||||
#siteSub {
|
||||
font-size: unit( @font-size-small, rem ); // T311421
|
||||
font-size: @font-size-small; // T311421
|
||||
// By default the sitesub (i.e. tagline) is hidden as it was hidden in Vector legacy but site styles can reveal.
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex-design-tokens/src/theme-wikimedia-ui.json#429
|
||||
// See also Vector's 'mediawiki.skin.variables.less' overrides.
|
||||
|
||||
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
||||
@font-size-reset: @font-size-root;
|
||||
@font-size-heading-1: 1.8em;
|
||||
@font-size-heading-2: 1.5em;
|
||||
|
@ -78,7 +77,7 @@
|
|||
@padding-horizontal-dropdown-menu: 16px;
|
||||
@padding-vertical-dropdown-menu: 16px;
|
||||
@padding-vertical-dropdown-menu-item: 6px;
|
||||
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
||||
@font-size-dropdown: @font-size-small;
|
||||
|
||||
// TOC
|
||||
@size-toc-subsection-toggle: 22px;
|
||||
|
@ -86,7 +85,7 @@
|
|||
@toc-list-item-padding-start: 12px;
|
||||
|
||||
// Search
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
|
||||
@max-width-search: unit( 500px / @font-size-browser / @font-size-small, em ); // 35.71428571em @ 16 & 0.875em T270202
|
||||
@min-width-search-button: 28px;
|
||||
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
||||
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
||||
|
|
|
@ -14,8 +14,8 @@
|
|||
position: absolute;
|
||||
left: 55%;
|
||||
top: 43%;
|
||||
font-size: unit( ( 12 / 16 ) * @font-size-base, rem );
|
||||
padding: 0 unit( ( 4 / 16 ) * @font-size-base, rem );
|
||||
font-size: unit( ( 12 / 16 ) * @font-size-small, rem );
|
||||
padding: 0 unit( ( 4 / 16 ) * @font-size-small, rem );
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #72777d;
|
||||
|
|
|
@ -4,10 +4,10 @@
|
|||
// @max-width-content-container is defined in ems, so the final width depends on font-size,
|
||||
// but this element is nested in an element with a different font-size. Divide by the
|
||||
// current font-size to get the intended result (as if font-size wasn't changed).
|
||||
max-width: ( @max-width-content-container / @font-size-base );
|
||||
max-width: ( @max-width-content-container / @font-size-small );
|
||||
}
|
||||
|
||||
.mw-editform {
|
||||
font-size: unit( @font-size-base, rem );
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
// For compatibility with code older than #mw-teleport-target (T350544)
|
||||
body > .oo-ui-windowManager {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
|
||||
> .oo-ui-dialog {
|
||||
z-index: @z-index-overlay;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import 'mediawiki.skin.variables.less';
|
||||
|
||||
#mw-teleport-target {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue