Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F1428818
variables.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
6 KB
Referenced Files
None
Subscribers
None
variables.less
View Options
@
import
'mediawiki.skin.variables.less'
;
//
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
(
300px
/
@
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-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 );
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
@border-start-blockquote: 4px @border-style-base @border-color-muted;
@padding-blockquote: 8px 32px;
@background-color-secondary--modern: @background-color-neutral-subtle;
@background-color-page-container: @background-color-base;
// Navigation
// 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
@padding-horizontal-tabs: 8px;
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
// Content boxes
@border-radius-content-box: 4px;
@border-color-content-box: @background-color-interactive;
// Content padding
@padding-vertical-content-box: @spacing-150;
@padding-horizontal-content-box: @spacing-150;
// content box changes *horizontal* padding at wide resolutions
@padding-horizontal-content-box-wide: @spacing-300;
// Content box shadow
@box-shadow-content-box: @box-shadow-drop-medium;
// Dropdowns & menus
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
@padding-horizontal-dropdown-menu: 16px;
@padding-vertical-dropdown-menu: 16px;
@padding-vertical-dropdown-menu-item: 6px;
@font-size-dropdown: @font-size-small;
// TOC
@size-toc-subsection-toggle: 22px;
@size-toc-subsection-toggle-icon: 0.7rem;
@toc-list-item-padding-start: 12px;
// 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;
// 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, rem ); // T305069 - 99.75rem @ 16
@max-width-content-container: unit( 948px / @font-size-browser, rem ); // T335155
@padding-horizontal-page-container: unit( 24px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, rem );
// 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: 24px;
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
@width-page-content: minmax(0, 1fr);
@width-column-desktop: unit( 196px / @font-size-browser, rem ); // Total width including gap is 232px
@width-column-desktop-wide: unit( 248px / @font-size-browser, rem ); // Total width including gap is 284px
@grid-template-column-desktop: ~'
@
{
width-column-desktop
}
@
{
width-page-content
}
';
@grid-template-column-desktop-wide: ~'
@
{
width-column-desktop-wide
}
@
{
width-page-content
}
'
;
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sat, May 16, 16:43 (11 h, 50 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a1/94/55d34f8f0c57a615af65459d9383
Default Alt Text
variables.less (6 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment