Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4103833
variables.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
7 KB
Referenced Files
None
Subscribers
None
variables.less
View Options
@
import
'mediawiki.skin.variables.less'
;
//
//
==
Media
query
breakpoints
==
//
See
also
https
://
doc
.
wikimedia
.
org
/
codex
/
latest
/
design-tokens
/
breakpoint
.
html
//
@
max-width-breakpoint-mobile
:
719px
;
@
min-width-breakpoint-tablet
:
720px
;
//
In
contrast
to
Codex
`
640px
`
.
@
max-width-breakpoint-tablet
:
999px
;
@
min-width-breakpoint-desktop
:
1000px
;
//
In
contrast
to
Codex
`
1120px
`
.
@
max-width-breakpoint-desktop
:
1199px
;
@
min-width-breakpoint-desktop-wide
:
1200px
;
//
In
contrast
to
Codex
`
1680px
`
.
//
Defines
the
minimum
viewport
width
,
at
which
point
the
layout
will
not
get
any
//
smaller
and
will
start
horizontal
scrolling
instead
.
@
min-width-supported
:
unit
(
500px
/
@
font-size-browser
,
em
)
;
//
Sizing
calculation
primitives
.
@
font-size-root
:
100
%
;
@
font-size-browser
:
16
;
//
Assumed
browser
default
of
`
16px
`
//
//
==
Page
content
==
//
@
color-link-selected
:
@
color-base
;
//
//
==
Typography
==
//
//
Font
family
stack
is
defined
in
Codex
“
WikimediaUI
“
theme
,
available
//
through
'mediawiki.less/mediawiki.skin.variables.less'
in
MediaWiki
core
:
//
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-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;
@font-size-heading-3: 1.2em;
@font-size-notification: 0.8em;
@font-size-site-notice: 0.8em;
@font-size-footer: unit( 12 / @font-size-browser, em );
@line-height-base: 1.6;
@line-height-code: 1.3;
@line-height-footer-info: 1.4;
@line-height-footer-buttons: 2;
@size-icon: unit( 20 / @font-size-browser, em );
// FIXME: Use global variable since Echo and CentralNotice use this variable
@border-color-content: #a7d7f9;
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
@border-color-subtle: #c8ccd1;
// Use `rgba()` notation for better Safari support, see T254489.
@border-start-blockquote: 4px @border-style-base #eaecf0;
@padding-top-content: 0.5em;
@padding-blockquote: 8px 32px;
@background-color-secondary--modern: #f8f9fa;
@background-color-page-container: @background-color-base;
// Navigation
@background-color-secondary: #f6f6f6;
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
@line-height-nav: 1.125em;
// Navigation: Personal tools
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
@top-personal-tools: 6px;
@font-size-nav-personal: 0.75em;
// Using `unit()` without second parameter to achieve a unitless output for `line-height`.
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
// Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
@padding-horizontal-tabs: 8px;
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
// Dropdowns
@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: @font-size-small;
// Scroll Indicator
@height-scroll-indicator: 30px;
// The amount of space that should be between the bottom of the viewport and the
// bottom of the scroll indicator.
@max-height-bottom-spacing-scroll-indicator: 16px;
// TOC and Page tools Pinned elements
@padding-top-pinned-element: unit( ( 30px - @padding-top-tabs ) / @font-size-browser, em );
// Page Tools
// 2.34 (height of #firstHeading) - the padding on the pinned element to allow
// for 30px of space between the top of the pinned element and the top of the viewport.
@margin-top-pinned-page-tools: ( @font-size-heading-1 * @line-height-xx-small ) - @padding-top-pinned-element;
// TOC
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
@size-toc-subsection-toggle-icon: 1.834em;
// Add the top padding of .mw-body element to @margin-top-pinned-page-tools
// since it starts higher on the page.
@margin-top-pinned-toc: @margin-top-pinned-page-tools + @padding-top-content;
// Search
@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`.
// Derived from @size-typeahead-search-focus-addition in Codex
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#703
@size-search-expand: 24px;
@margin-end-search: 12px;
// Pre-content
@margin-top-pre-content: 8px;
// Header
// T245190 T296321 For sticky header, set an explicit height. This is needed for scroll padding
// and for other sticky elements on the page. Setting the height in relative units enables
// the header'
s
height
to
adapt
to
the
browser
's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-header: unit( 50px / @font-size-browser, rem );
// Z-indices
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
@z-index-header: @z-index-stacking-3;
@z-index-search-button: @z-index-stacking-1;
@z-index-search-loader: @z-index-stacking-1;
// Ensure that this is displayed on top of .vector-body and clickable.
@z-index-indicators: @z-index-stacking-1;
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
// @z-index-dropdown: 50; in Codex.
// @z-index-overlay is 450 in new Codex tokens; was 101.
// See skinStyles/jquery.ui/jquery.ui.slider.css.
// @z-index-ui-slider-range: 1;
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
// See skinStyles/jquery.ui/jquery.ui.slider.css.
// @z-index-ui-slider-handle: 2;
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
// @z-index-ui-selectable-helper: 100;
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
// @z-index-ui-tooltip: 9999;
// Transitions
// Sticky header hide/show transition
@transition-sticky-header: transform 250ms linear;
//
// Layout
//
@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16
@max-width-content-container: unit( 960px / @font-size-browser, em ); // T305069 - 60em @ 16
@padding-horizontal-page-container: unit( 24px / @font-size-browser, em );
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em );
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em );
// T314419 - Scroll padding is modified primarily to bring section headings into a position that is
// easier to read, which is slightly lower than the very top of the page. The primary use-case is when
// navigating sections via the table of contents. When changing this value, also change the value in
// resources/skins.vector.scripts/setupIntersectionObservers.js
@scroll-padding-top: 75px;
// Grid
@grid-row-gap: 24px;
@grid-column-gap: 36px;
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
@width-page-content: minmax(0, 1fr);
@width-column-start-desktop: unit( 196px / @font-size-browser, em ); // Total width including gap is 232px
@width-column-start-desktop-wide: unit( 248px / @font-size-browser, em ); // Total width including gap is 284px
@grid-template-column-desktop: ~'
@
{
width-column-start-desktop
}
@
{
width-page-content
}
';
@grid-template-column-desktop-wide: ~'
@
{
width-column-start-desktop-wide
}
@
{
width-page-content
}
'
;
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Aug 18, 18:11 (3 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a7/2a/711e4076279e28146d0ed2d1018e
Default Alt Text
variables.less (7 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment