diff --git a/apps/apps.html b/apps/apps.html index 9675fc1a..4fa22c27 100644 --- a/apps/apps.html +++ b/apps/apps.html @@ -80,6 +80,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+

Wikimedia Design System and Apps

diff --git a/components/button-groups.html b/components/button-groups.html index 26431eb8..2a3936de 100644 --- a/components/button-groups.html +++ b/components/button-groups.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Button groups

Buttons in button groups signal a number of equally important actions that will occur when the user taps on them. Button groups can include normal buttons with icon and or text label (dropdown) or any mixture of the three.

diff --git a/components/buttons.html b/components/buttons.html index e024f7c7..5f31ce7b 100644 --- a/components/buttons.html +++ b/components/buttons.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Buttons

Buttons signal an action that will occur when the user clicks or taps on them.

diff --git a/components/checkboxes.html b/components/checkboxes.html index 94296620..3f5625a8 100644 --- a/components/checkboxes.html +++ b/components/checkboxes.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Checkboxes

Checkboxes signal to the user that an option is selectable. They allow for users to select as many or as few checkable options as listed. The checkable option states for the user are selected, unselected or indeterminate.

diff --git a/components/comboboxes.html b/components/comboboxes.html index 0e45644c..52f91c1e 100644 --- a/components/comboboxes.html +++ b/components/comboboxes.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Comboboxes

Comboboxes combine a text input with autocomplete and a dropdown button.

diff --git a/components/dialogs.html b/components/dialogs.html index 34312e47..c845a53f 100644 --- a/components/dialogs.html +++ b/components/dialogs.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Dialogs

Dialogs are elements that are overlaid on a web page or app in order to present necessary information and tasks. Dialogs are also sometimes referred to as modals and overlays.

diff --git a/components/dropdowns.html b/components/dropdowns.html index 9a2cf06f..eef6e23f 100644 --- a/components/dropdowns.html +++ b/components/dropdowns.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Dropdowns

diff --git a/components/file-inputs.html b/components/file-inputs.html index 419562d1..021955ea 100644 --- a/components/file-inputs.html +++ b/components/file-inputs.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

File inputs

File inputs allow users to select files from their system for upload.

diff --git a/components/language-selectors.html b/components/language-selectors.html index f1f854e3..eed19649 100644 --- a/components/language-selectors.html +++ b/components/language-selectors.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Language selectors

Language selectors allow users to pick languages from a list. In projects like Wikipedia with 300+ language Wikipedias, or software like MediaWiki with 350+ languages supported, language selection is crucial and can occur in many different contexts.

diff --git a/components/links.html b/components/links.html index 30e9e4f6..4cc097d0 100644 --- a/components/links.html +++ b/components/links.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Links

Links signal an action that will let the user navigate to another page, view or resource, when they click or tap on them. The following examples are emphasized in bold for presentation only.

diff --git a/components/messages.html b/components/messages.html index e5369301..2f8f18b3 100644 --- a/components/messages.html +++ b/components/messages.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Messages

Messages to the user as system feedback can be delivered as block message with a longer explanation. The block messages, predominantly used in top or banner positions in the view are defined on this page. Or as inline message directly to an input component. For inline validation messages, see designing text inputs.

diff --git a/components/number-inputs.html b/components/number-inputs.html index 7276e388..1d027851 100644 --- a/components/number-inputs.html +++ b/components/number-inputs.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Number inputs

Number inputs allow users to input numbers or decrease/increase number values by attached buttons.

diff --git a/components/radio-buttons.html b/components/radio-buttons.html index 531b8f77..af28c014 100644 --- a/components/radio-buttons.html +++ b/components/radio-buttons.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Radio buttons

Radio buttons are part of a group of two or more. They signal an action where users can only select one radio button.

diff --git a/components/text-inputs-and-textarea.html b/components/text-inputs-and-textarea.html index 7f91c321..9be0fa17 100644 --- a/components/text-inputs-and-textarea.html +++ b/components/text-inputs-and-textarea.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Text inputs and textarea

Text inputs allow users to input text or select text via optional autocomplete or dropdown menu.

diff --git a/components/toggle-switches.html b/components/toggle-switches.html index 9f42a23b..06b2eabf 100644 --- a/components/toggle-switches.html +++ b/components/toggle-switches.html @@ -73,6 +73,10 @@
Wikimedia <
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Components

Toggle switches

Toggle switches signal an instant choice to the user.

diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css index 0905916a..fb5efb77 100644 --- a/css/build/wmui-style-guide.css +++ b/css/build/wmui-style-guide.css @@ -437,6 +437,9 @@ template { /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */ /* stylelint-disable-line value-keyword-case */ /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. Helvetica and Arial fallback gracefully to `700`, see T246791. */ + + /* .cdx-message only custom properties */ + /* Different from WikimediaUI Base's. */ } * { -moz-box-sizing: border-box; @@ -686,6 +689,115 @@ sup { .content__illustration-style .figure--full:after { clear: both; } +/* ::: Codex Messages ::: */ +.cdx-message { + /* Background color and color are for notice type messages. */ + /* These will be overridden for other message types. */ + background-color: var( --background-color-notice-subtle ); + color: #000; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + position: relative; + margin-bottom: 32px; + border: 1px solid #a2a9b1; + padding: 16px 16px; + + @media screen and ( min-width: 768px ) { + padding-right: 24px; + padding-left: 24px; + } +} +/* Set the default CSS icon to the icon for notice messages, which is the default message type. */ +/* The icon and icon color will be overridden for other message types below. */ +/* The color of the Vue icon for notice messages is inherited from the color rule set on */ +/* .cdx-message. + .cdx-message__icon { + background-image: url( 'data:image/svg+xml;utf8,' ); + } + */ +.cdx-message--warning { + background-color: #fef6e7; + border-color: #ac6600; + } +.cdx-message__icon { + /* background-image: url( data:image/svg+xml;utf8,' ); */ + background-position: center; + background-repeat: no-repeat; + background-size: 1.5em; + background-image: url( 'data:image/svg+xml;utf8,' ); + min-width: 20px; + min-height: 20px; + width: 1.5em; + /* Vertically align icon with the text. Flexbox on its own is not enough here. */ + /* Use close enough height to `&__content`'s `line-height`. */ + height: 1.5em; + } +.cdx-message--user-dismissable { + padding-right: calc( var( --min-size-interactive-pointer ) + 16px); + + @media screen and ( min-width: 768px ) { + padding-right: calc( var( --min-size-interactive-pointer ) + 24px); + } + } +.cdx-message__content { + /* Vertically center message with icon. */ + -ms-flex-item-align: center; + align-self: center; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + /* Add space between icon and message content. */ + margin-left: 8px; + word-wrap: break-word; + /* CSS3 hyphenation + // Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", + // but not the "auto" property. It is advisable to set the @lang attribute + // on the HTML element to enable hyphenation support and improve accessibility. + // Chrome 55-87 only supports `auto` exclusively on Mac platform. + */ + /* stylelint-disable plugin/no-unsupported-browser-features */ + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + /* stylelint-enable plugin/no-unsupported-browser-features */ + } +.cdx-message__content, + .cdx-message__content > * { + line-height: 1.6; + } +.cdx-message__content > *:first-child { + margin-top: 0; + padding-top: 0; + } +.cdx-message__content > *:last-child { + margin-bottom: 0; + padding-bottom: 0; + } +/* + .cdx-message__dismiss-button.cdx-button { + position: absolute; + /* Use `spacing` tokens as the top/right axis orientation can always be in pixels, * / + /* similar to paddings * / + top: var( --spacing-75 ); + right: var( --spacing-100 ); + padding: var( --spacing-30 ); + /* Remove `line-height` to not overgrow button. * / + line-height: 0; + + @media screen and ( min-width: 768px ) { + right: var( --spacing-50 ); + } + } + */ +/* Add space between stacked messages. */ +.cdx-message + .cdx-message { + margin-top: 8px; + } /* ::: Text-formatting ::: */ /* Support Blink based browsers. */ /* They use `outline` for focus styles, we're only amending the color here, see T245887. */ diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css index c66183ac..202bf1c4 100644 --- a/css/build/wmui-style-guide.min.css +++ b/css/build/wmui-style-guide.min.css @@ -1,2 +1,2 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}@font-face{font-family:Charter;font-style:normal;font-weight:400;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");text-rendering:optimizeLegibility}@font-face{font-family:Charter;font-style:normal;font-weight:700;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");text-rendering:optimizeLegibility}*{-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6;margin:0}article,aside,figcaption,figure,footer,header,nav,section{display:block}h1,h2,h3,h4,h5,h6{color:#000;line-height:1.25;margin:3.2rem 0 0;-webkit-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;font-size:2.4rem;padding-bottom:2px}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:4px solid #eaecf0;font-family:Georgia,serif;font-size:2rem;font-style:italic;margin:1.6rem 0 0;padding:.8rem 3.2rem}blockquote cite{display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal;margin-top:.8rem}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;border:0;display:block;height:.8rem;margin:8rem 0}p{margin:3.2rem 0 0}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;border:1px solid #a2a9b1;color:#000;font-size:1.4rem;padding:1.2rem 2rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;margin:1.6rem 0 0;max-width:100%}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}.is-comparison img{float:left;margin-left:1.2rem}.is-comparison img:first-child{margin-left:0}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;font-size:1.4rem;padding:.2rem .4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{clip:rect(1px,1px,1px,1px);border:0;display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;text-decoration:underline;width:auto}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-box:after,.figures-box:before,.figures-do-dont:after,.figures-do-dont:before,.is-comparison:after,.is-comparison:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-box:after,.figures-do-dont:after,.is-comparison:after,.page:after{clear:both}:focus{outline-color:#36c}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{margin-left:auto;margin-right:auto;padding-left:1.6rem;padding-right:1.6rem;position:relative}.header{left:0;line-height:6.4rem;min-height:6.4rem;position:fixed;right:0;top:0}.site__title{color:#202122;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;height:6.4rem;letter-spacing:.5px;margin-top:0}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{cursor:pointer;height:4.2rem;position:absolute;top:1.2rem;width:4.2rem}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{background-color:#54595d;content:"";height:2px;left:0;position:absolute;top:.4rem;width:2rem}.btn--nav-main i:after{box-shadow:0 .7rem 0 #54595d;top:1.1rem}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{box-shadow:0 .7rem 0 #000}.btn--nav-main span{clip:rect(1px,1px,1px,1px);display:block;height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);margin-top:6.4rem;overflow-y:hidden;padding:6.4rem 0;position:relative}.col,.content{float:left}.col{min-height:1px;position:relative}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{list-style:none none;padding:0}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;font-size:1.6rem;padding:.8rem 1.2rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;border-radius:2px;color:#36c;cursor:default;font-weight:600}.nav__sub-items{margin-bottom:1em;margin-top:1.2rem}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{border-left:1px solid #eaecf0;border-radius:0 2px 2px 0;color:#54595d;font-size:1.4rem;padding-left:1.6rem;-webkit-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;border-left-color:#000;color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{font-size:2rem;font-style:italic;font-weight:100;margin-top:1.2rem}.figures--full{background-color:#f8f9fa}.figure--centered .figure__image{margin-left:auto;margin-right:auto}.figure__caption,.heading__description{clear:both;color:#72777d;display:block;font-size:1.3rem}.figure__caption{font-style:italic;padding-top:.8rem}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figure--comparison{float:left}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;border-top-left-radius:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;border-top-style:solid;border-top-width:.8rem;display:block;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;font-size:2.1rem;line-height:1rem;margin-right:.4rem;padding-top:.4rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.note--a11y:before,.note--i18n:before{background-image:url(../../resources/WikimediaUI-icons-SVGs/eye.svg);background-repeat:no-repeat;content:"";display:inline-block;height:2rem;opacity:.67;vertical-align:text-top;width:2.4rem}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color-palette+p{margin-top:1.6rem}.color{border:1px solid #fff;border-radius:2px;color:#000;display:block;float:left;font-size:1.4rem;height:16rem;list-style:none none;margin-bottom:3.2rem;padding:1.2rem;position:relative;width:61.8%}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{border-radius:3.2rem;cursor:default;height:6.2rem;margin-bottom:2.4rem;margin-right:1.2rem;margin-top:.8rem;width:6.4rem}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{border-radius:7.2rem;height:7rem;margin-top:0;padding-top:2rem;width:7.2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{bottom:1.2rem;display:block;font-size:3.2rem;font-weight:100;left:1.2rem;position:absolute}.color-palette--overview .color__name{bottom:auto;font-size:2.4rem;left:auto;line-height:1;padding-top:1.2rem;position:relative}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;padding:0}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{background-color:var( --color-hint );border-radius:50%;content:"";cursor:help;display:inline-block;height:1.2rem;margin:0 .4rem .3rem .2rem;vertical-align:text-bottom;width:1.2rem}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;height:2rem;margin:0 .2rem;vertical-align:text-bottom;width:2rem}.icon--indicator{height:1.2rem;margin-bottom:.2rem;width:1.2rem}.icon--intermediate{height:1.6rem;margin-bottom:.2rem;width:1.6rem}.components__designing{position:relative}.components__designing:after{background:url(../../img/components/legend_16-8.svg) no-repeat;bottom:0;content:"";height:6.4rem;position:absolute;right:6.4rem;width:13.2rem}.page--components-messages .components__intro{margin-left:auto;margin-right:auto;max-width:700px}.page--components-messages img{border-radius:0}.resources-table{border-collapse:collapse;display:table;margin-top:2.4rem;width:100%}.resources-table__body,.resources-table__head{border-bottom:1px solid #a2a9b1;display:table-row}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{border-bottom:0;font-size:2.1rem;font-weight:400;margin-top:0;padding-bottom:0}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;font-size:1.3rem;padding:2.4rem 0}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{clear:both;content:" ";display:block}.footer__list li{display:block;list-style:none none;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{color:#72777d;display:inline-block;font-size:1.3rem;font-weight:600;margin:0 0 3.2rem 1.6rem;min-width:10rem;vertical-align:top}.typography-styles .typography-styles__blockquote{margin-bottom:4.8rem}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-bottom:4rem;margin-top:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{box-shadow:0 2px 2px 0 rgba(0,0,0,.25);left:-1.6rem;padding-bottom:1.6rem;position:absolute;right:-1.6rem;top:-3.2rem;-webkit-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s;z-index:1}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{font-size:2.8rem;margin-top:-.4rem}.typography-styles dt{display:block;margin-left:0}.figure--comparison{width:100%}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-bottom:.8rem;padding-top:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-transition-property:background-color,padding;transition-property:background-color,padding}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{margin-left:auto;margin-right:auto;max-width:568px;width:100%}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-left:-.2rem;margin-right:1.1rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{color:#72777d;content:"\2022";font-weight:100;padding:0 0 0 .8rem}.footer__list li:last-child:after{content:"";padding:0}.color{margin-right:2.4rem;width:16rem}}@media (min-width:568px){.lnk--contribute{bottom:1.5rem;display:block;position:absolute;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{margin-top:.8rem;width:55.55%}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{border-radius:2px}.content-box{max-width:960px;width:100%}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{-webkit-transition:width .25s;transition:width .25s;width:20.8rem;z-index:1}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figure--comparison{margin-right:4%}.figure--comparison:last-child{margin-right:0}.figure--comparison:first-child:nth-last-child(2),.figure--comparison:first-child:nth-last-child(2)~.figure--comparison{width:48%}.figure--comparison:first-child:nth-last-child(3),.figure--comparison:first-child:nth-last-child(3)~.figure--comparison{width:30%}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{max-width:1140px;width:100%}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-left:0;margin-right:1.35rem}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}@font-face{font-family:Charter;font-style:normal;font-weight:400;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");text-rendering:optimizeLegibility}@font-face{font-family:Charter;font-style:normal;font-weight:700;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");text-rendering:optimizeLegibility}*{-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6;margin:0}article,aside,figcaption,figure,footer,header,nav,section{display:block}h1,h2,h3,h4,h5,h6{color:#000;line-height:1.25;margin:3.2rem 0 0;-webkit-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;font-size:2.4rem;padding-bottom:2px}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:4px solid #eaecf0;font-family:Georgia,serif;font-size:2rem;font-style:italic;margin:1.6rem 0 0;padding:.8rem 3.2rem}blockquote cite{display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal;margin-top:.8rem}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;border:0;display:block;height:.8rem;margin:8rem 0}p{margin:3.2rem 0 0}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;border:1px solid #a2a9b1;color:#000;font-size:1.4rem;padding:1.2rem 2rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;margin:1.6rem 0 0;max-width:100%}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}.is-comparison img{float:left;margin-left:1.2rem}.is-comparison img:first-child{margin-left:0}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;font-size:1.4rem;padding:.2rem .4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{clip:rect(1px,1px,1px,1px);border:0;display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;text-decoration:underline;width:auto}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-box:after,.figures-box:before,.figures-do-dont:after,.figures-do-dont:before,.is-comparison:after,.is-comparison:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-box:after,.figures-do-dont:after,.is-comparison:after,.page:after{clear:both}.cdx-message{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var( --background-color-notice-subtle );border:1px solid #a2a9b1;color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:32px;padding:16px;position:relative;@media screen and (min-width:768px){padding-left:24px;padding-right:24px}}.cdx-message--warning{background-color:#fef6e7;border-color:#ac6600}.cdx-message__icon{background-image:url('data:image/svg+xml;utf8,');background-position:50%;background-repeat:no-repeat;background-size:1.5em;height:1.5em;min-height:20px;min-width:20px;width:1.5em}.cdx-message--user-dismissable{padding-right:calc(var( --min-size-interactive-pointer ) + 16px);@media screen and (min-width:768px){padding-right:calc(var( --min-size-interactive-pointer ) + 24px)}}.cdx-message__content{-ms-flex-item-align:center;-webkit-box-flex:1;-ms-flex-positive:1;word-wrap:break-word;align-self:center;flex-grow:1;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;margin-left:8px}.cdx-message__content,.cdx-message__content>*{line-height:1.6}.cdx-message__content>:first-child{margin-top:0;padding-top:0}.cdx-message__content>:last-child{margin-bottom:0;padding-bottom:0}.cdx-message+.cdx-message{margin-top:8px}:focus{outline-color:#36c}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{margin-left:auto;margin-right:auto;padding-left:1.6rem;padding-right:1.6rem;position:relative}.header{left:0;line-height:6.4rem;min-height:6.4rem;position:fixed;right:0;top:0}.site__title{color:#202122;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;height:6.4rem;letter-spacing:.5px;margin-top:0}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{cursor:pointer;height:4.2rem;position:absolute;top:1.2rem;width:4.2rem}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{background-color:#54595d;content:"";height:2px;left:0;position:absolute;top:.4rem;width:2rem}.btn--nav-main i:after{box-shadow:0 .7rem 0 #54595d;top:1.1rem}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{box-shadow:0 .7rem 0 #000}.btn--nav-main span{clip:rect(1px,1px,1px,1px);display:block;height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);margin-top:6.4rem;overflow-y:hidden;padding:6.4rem 0;position:relative}.col,.content{float:left}.col{min-height:1px;position:relative}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{list-style:none none;padding:0}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;font-size:1.6rem;padding:.8rem 1.2rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;border-radius:2px;color:#36c;cursor:default;font-weight:600}.nav__sub-items{margin-bottom:1em;margin-top:1.2rem}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{border-left:1px solid #eaecf0;border-radius:0 2px 2px 0;color:#54595d;font-size:1.4rem;padding-left:1.6rem;-webkit-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;border-left-color:#000;color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{font-size:2rem;font-style:italic;font-weight:100;margin-top:1.2rem}.figures--full{background-color:#f8f9fa}.figure--centered .figure__image{margin-left:auto;margin-right:auto}.figure__caption,.heading__description{clear:both;color:#72777d;display:block;font-size:1.3rem}.figure__caption{font-style:italic;padding-top:.8rem}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figure--comparison{float:left}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;border-top-left-radius:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;border-top-style:solid;border-top-width:.8rem;display:block;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;font-size:2.1rem;line-height:1rem;margin-right:.4rem;padding-top:.4rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.note--a11y:before,.note--i18n:before{background-image:url(../../resources/WikimediaUI-icons-SVGs/eye.svg);background-repeat:no-repeat;content:"";display:inline-block;height:2rem;opacity:.67;vertical-align:text-top;width:2.4rem}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color-palette+p{margin-top:1.6rem}.color{border:1px solid #fff;border-radius:2px;color:#000;display:block;float:left;font-size:1.4rem;height:16rem;list-style:none none;margin-bottom:3.2rem;padding:1.2rem;position:relative;width:61.8%}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{border-radius:3.2rem;cursor:default;height:6.2rem;margin-bottom:2.4rem;margin-right:1.2rem;margin-top:.8rem;width:6.4rem}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{border-radius:7.2rem;height:7rem;margin-top:0;padding-top:2rem;width:7.2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{bottom:1.2rem;display:block;font-size:3.2rem;font-weight:100;left:1.2rem;position:absolute}.color-palette--overview .color__name{bottom:auto;font-size:2.4rem;left:auto;line-height:1;padding-top:1.2rem;position:relative}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;padding:0}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{background-color:var( --color-hint );border-radius:50%;content:"";cursor:help;display:inline-block;height:1.2rem;margin:0 .4rem .3rem .2rem;vertical-align:text-bottom;width:1.2rem}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;height:2rem;margin:0 .2rem;vertical-align:text-bottom;width:2rem}.icon--indicator{height:1.2rem;margin-bottom:.2rem;width:1.2rem}.icon--intermediate{height:1.6rem;margin-bottom:.2rem;width:1.6rem}.components__designing{position:relative}.components__designing:after{background:url(../../img/components/legend_16-8.svg) no-repeat;bottom:0;content:"";height:6.4rem;position:absolute;right:6.4rem;width:13.2rem}.page--components-messages .components__intro{margin-left:auto;margin-right:auto;max-width:700px}.page--components-messages img{border-radius:0}.resources-table{border-collapse:collapse;display:table;margin-top:2.4rem;width:100%}.resources-table__body,.resources-table__head{border-bottom:1px solid #a2a9b1;display:table-row}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{border-bottom:0;font-size:2.1rem;font-weight:400;margin-top:0;padding-bottom:0}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;font-size:1.3rem;padding:2.4rem 0}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{clear:both;content:" ";display:block}.footer__list li{display:block;list-style:none none;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{color:#72777d;display:inline-block;font-size:1.3rem;font-weight:600;margin:0 0 3.2rem 1.6rem;min-width:10rem;vertical-align:top}.typography-styles .typography-styles__blockquote{margin-bottom:4.8rem}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-bottom:4rem;margin-top:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{box-shadow:0 2px 2px 0 rgba(0,0,0,.25);left:-1.6rem;padding-bottom:1.6rem;position:absolute;right:-1.6rem;top:-3.2rem;-webkit-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s;z-index:1}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{font-size:2.8rem;margin-top:-.4rem}.typography-styles dt{display:block;margin-left:0}.figure--comparison{width:100%}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-bottom:.8rem;padding-top:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-transition-property:background-color,padding;transition-property:background-color,padding}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{margin-left:auto;margin-right:auto;max-width:568px;width:100%}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-left:-.2rem;margin-right:1.1rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{color:#72777d;content:"\2022";font-weight:100;padding:0 0 0 .8rem}.footer__list li:last-child:after{content:"";padding:0}.color{margin-right:2.4rem;width:16rem}}@media (min-width:568px){.lnk--contribute{bottom:1.5rem;display:block;position:absolute;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{margin-top:.8rem;width:55.55%}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{border-radius:2px}.content-box{max-width:960px;width:100%}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{-webkit-transition:width .25s;transition:width .25s;width:20.8rem;z-index:1}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figure--comparison{margin-right:4%}.figure--comparison:last-child{margin-right:0}.figure--comparison:first-child:nth-last-child(2),.figure--comparison:first-child:nth-last-child(2)~.figure--comparison{width:48%}.figure--comparison:first-child:nth-last-child(3),.figure--comparison:first-child:nth-last-child(3)~.figure--comparison{width:30%}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{max-width:1140px;width:100%}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-left:0;margin-right:1.35rem}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} /*# sourceMappingURL=wmui-style-guide.min.css.map */ \ No newline at end of file diff --git a/css/build/wmui-style-guide.min.css.map b/css/build/wmui-style-guide.min.css.map index cd4663c3..b24b99f7 100644 --- a/css/build/wmui-style-guide.min.css.map +++ b/css/build/wmui-style-guide.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"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CD,CAED,sBACC,YACD,CAEA,aACC,mBAAoB,CACpB,oBACD,CAEA,sBAEC,UACD,CAEA,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,sEAIC,gBAAiB,CACjB,iBAAkB,CAFlB,eAAgB,CADhB,UAID,CAEA,kCACC,UACD,CAEA,4HAEC,YACD,CAEA,OACC,WACD,CAEA,4CACC,UACD,CAEA,4BACC,mBACD,CAEA,gEAEC,kBAAoB,CADpB,mBAED,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aACC,mBAAoB,CACpB,oBACD,CAEA,WACC,YAAa,CACb,aACD,CAEC,aACC,mBAAoB,CACpB,oBACD,CAED,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,0DACC,mBAAoB,CACpB,oBACD,CAEA,iBACC,iBAAkB,CAClB,UAAW,CACX,mBACD,CAEA,uBAEC,aAAkC,CADlC,eAAgB,CAGhB,eAAgB,CADhB,mBAED,CAEA,kCACC,UAAW,CACX,SACD,CAEA,OAEC,mBAAoB,CADpB,WAED,CACD,CAGA,yBACC,iBAGC,aAAc,CAFd,aAAc,CACd,iBAAkB,CAElB,YAAa,CACb,gBACD,CAEA,sBACC,cAAe,CACf,SAAU,CACV,+BAAmD,CAAnD,uBACD,CAEA,yBACC,eACD,CAEA,sEAEC,cACD,CAEA,8BACC,UAAW,CACX,WACD,CAEA,4DAEC,gBAAkB,CADlB,YAED,CAEA,gEACC,iBACD,CACD,CAGA,yBACC,IACC,iBACD,CAEA,aAEC,eAAgB,CADhB,UAED,CAEA,eACC,YACD,CAEA,aACC,UAAW,CACX,aACD,CAEC,4BAEC,mBAAoB,CACpB,oBACD,CAED,sBACC,cAAe,CACf,SACD,CAEA,YAGC,6BAAiD,CAAjD,qBAAiD,CAFjD,aAAc,CACd,SAED,CAEA,UACC,oBAAqB,CACrB,kBACD,CAEA,WACC,SAAU,CACV,UACD,CAEA,6CAEC,aAAc,CACd,cACD,CAGA,oBACC,eACD,CAEA,+BACC,cACD,CAGA,wHAEC,SACD,CAGA,wHAEC,SACD,CAEA,yBACC,UAAW,CACX,SACD,CAEA,4CACC,WACD,CAGA,8BACC,UAAW,CACX,YACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aAEC,gBAA2C,CAD3C,UAED,CAEA,4BAEC,mBAAoB,CACpB,oBACD,CAEA,YACC,WACD,CAEA,UACC,kBAAmB,CACnB,oBACD,CAEA,qCACC,iBACD,CAEA,OACC,mBACD,CAEC,4BACC,oBACD,CAEA,gEAEC,aAAc,CADd,oBAED,CAED,8MAIC,UAAW,CACX,YACD,CAEA,4IAGC,UACD,CAGA,8CACC,wCAA4D,CAA5D,gCACD,CAEC,oDACC,wBACD,CAEA,oHAEC,mBACD,CACF,CAEA,0BACC,aACC,YACD,CAEA,YACC,aACD,CAEA,UACC,oBAAqB,CACrB,oBACD,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file. */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t--border-start-blockquote: 4px var( --border-style-base ) var( --wmui-color-base80 );\n\t--outline-color-base--focus: var( --color-primary--focus );\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: var( --font-weight-semi-bold );\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n\n/* ::: Normalize Browser Rendering Support ::: */\n/* Support IE 9-: Add the correct display as we're relying on\n * normalize v8 which only supports IE 10+. */\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nnav,\nsection {\n\tdisplay: block;\n}\n\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: var( --color-base--emphasized );\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tmargin: 1.6rem 0 0;\n\tborder-left: var( --border-start-blockquote );\n\tpadding: 0.8rem 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n.is-comparison img {\n\tfloat: left;\n\tmargin-left: 1.2rem;\n}\n\n\t.is-comparison img:first-child {\n\t\tmargin-left: 0;\n\t}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-box:before,\n.figures-box:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.is-comparison:before,\n.is-comparison:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-box:after,\n.figures-do-dont:after,\n.is-comparison:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n/* Support Blink based browsers. */\n/* They use `outline` for focus styles, we're only amending the color here, see T245887. */\n:focus {\n\toutline-color: var( --outline-color-base--focus );\n}\n\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: var( --font-weight-hairline );\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure--centered .figure__image {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... Comparison Figures ... */\n.figure--comparison {\n\tfloat: left;\n}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n/* ... Notes ... */\n.note--a11y:before,\n.note--i18n:before {\n\tcontent: '';\n\tbackground-image: url( ../../resources/WikimediaUI-icons-SVGs/eye.svg );\n\tbackground-repeat: no-repeat;\n\topacity: var( --opacity-icon-accessory );\n\tdisplay: inline-block;\n\twidth: 2.4rem;\n\theight: 2rem;\n\tvertical-align: text-top;\n}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color-palette + p {\n\tmargin-top: 1.6rem;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-hairline );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n/*\n.components__states,\n.components__imagery\n*/\n\n/* Messages */\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* Override general img border radius for correct Message representation */\n.page--components-messages img {\n\tborder-radius: 0;\n}\n\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__blockquote {\n\tmargin-bottom: 4.8rem;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t.figure--comparison {\n\t\twidth: 100%;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t/* Comparison figures, for example in Apps section. */\n\t.figure--comparison {\n\t\tmargin-right: 4%;\n\t}\n\n\t.figure--comparison:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\t/* Two figures */\n\t.figure--comparison:first-child:nth-last-child( 2 ),\n\t.figure--comparison:first-child:nth-last-child( 2 ) ~ .figure--comparison {\n\t\twidth: 48%;\n\t}\n\n\t/* Three figures */\n\t.figure--comparison:first-child:nth-last-child( 3 ),\n\t.figure--comparison:first-child:nth-last-child( 3 ) ~ .figure--comparison {\n\t\twidth: 30%;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"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EC,mBAAoB,CADpB,WAED,CACD,CAGA,yBACC,iBAGC,aAAc,CAFd,aAAc,CACd,iBAAkB,CAElB,YAAa,CACb,gBACD,CAEA,sBACC,cAAe,CACf,SAAU,CACV,+BAAmD,CAAnD,uBACD,CAEA,yBACC,eACD,CAEA,sEAEC,cACD,CAEA,8BACC,UAAW,CACX,WACD,CAEA,4DAEC,gBAAkB,CADlB,YAED,CAEA,gEACC,iBACD,CACD,CAGA,yBACC,IACC,iBACD,CAEA,aAEC,eAAgB,CADhB,UAED,CAEA,eACC,YACD,CAEA,aACC,UAAW,CACX,aACD,CAEC,4BAEC,mBAAoB,CACpB,oBACD,CAED,sBACC,cAAe,CACf,SACD,CAEA,YAGC,6BAAiD,CAAjD,qBAAiD,CAFjD,aAAc,CACd,SAED,CAEA,UACC,oBAAqB,CACrB,kBACD,CAEA,WACC,SAAU,CACV,UACD,CAEA,6CAEC,aAAc,CACd,cACD,CAGA,oBACC,eACD,CAEA,+BACC,cACD,CAGA,wHAEC,SACD,CAGA,wHAEC,SACD,CAEA,yBACC,UAAW,CACX,SACD,CAEA,4CACC,WACD,CAGA,8BACC,UAAW,CACX,YACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aAEC,gBAA2C,CAD3C,UAED,CAEA,4BAEC,mBAAoB,CACpB,oBACD,CAEA,YACC,WACD,CAEA,UACC,kBAAmB,CACnB,oBACD,CAEA,qCACC,iBACD,CAEA,OACC,mBACD,CAEC,4BACC,oBACD,CAEA,gEAEC,aAAc,CADd,oBAED,CAED,8MAIC,UAAW,CACX,YACD,CAEA,4IAGC,UACD,CAGA,8CACC,wCAA4D,CAA5D,gCACD,CAEC,oDACC,wBACD,CAEA,oHAEC,mBACD,CACF,CAEA,0BACC,aACC,YACD,CAEA,YACC,aACD,CAEA,UACC,oBAAqB,CACrB,oBACD,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file. */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t--border-start-blockquote: 4px var( --border-style-base ) var( --wmui-color-base80 );\n\t--outline-color-base--focus: var( --color-primary--focus );\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: var( --font-weight-semi-bold );\n\n\t/* .cdx-message only custom properties */\n\t--background-color-warning-subtle: #fef6e7;\n\t--color-notice: var( --wmui-color-base80 );\n\t/* Different from WikimediaUI Base's. */\n\t--cdx-border-color-warning: #ac6600;\n\t--line-height-medium: 1.6;\n\t--size-150: 1.5em;\n\t--spacing-50: 8px;\n\t--spacing-100: 16px;\n\t--spacing-150: 24px;\n\t--spacing-200: 32px;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n\n/* ::: Normalize Browser Rendering Support ::: */\n/* Support IE 9-: Add the correct display as we're relying on\n * normalize v8 which only supports IE 10+. */\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nnav,\nsection {\n\tdisplay: block;\n}\n\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: var( --color-base--emphasized );\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tmargin: 1.6rem 0 0;\n\tborder-left: var( --border-start-blockquote );\n\tpadding: 0.8rem 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n.is-comparison img {\n\tfloat: left;\n\tmargin-left: 1.2rem;\n}\n\n\t.is-comparison img:first-child {\n\t\tmargin-left: 0;\n\t}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-box:before,\n.figures-box:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.is-comparison:before,\n.is-comparison:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-box:after,\n.figures-do-dont:after,\n.is-comparison:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Codex Messages ::: */\n.cdx-message {\n\t/* Background color and color are for notice type messages. */\n\t/* These will be overridden for other message types. */\n\tbackground-color: var( --background-color-notice-subtle );\n\tcolor: var( --color-base--emphasized );\n\tdisplay: flex;\n\talign-items: flex-start;\n\tposition: relative;\n\tmargin-bottom: var( --spacing-200 );\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-notice );\n\tpadding: var( --spacing-100 ) var( --spacing-100 );\n\n\t@media screen and ( min-width: 768px ) {\n\t\tpadding-right: var( --spacing-150 );\n\t\tpadding-left: var( --spacing-150 );\n\t}\n}\n\n\t/* Set the default CSS icon to the icon for notice messages, which is the default message type. */\n\t/* The icon and icon color will be overridden for other message types below. */\n\t/* The color of the Vue icon for notice messages is inherited from the color rule set on */\n\t/* .cdx-message.\n\t.cdx-message__icon {\n\t\tbackground-image: url( 'data:image/svg+xml;utf8,' );\n\t}\n\t*/\n\n\t.cdx-message--warning {\n\t\tbackground-color: var( --background-color-warning-subtle );\n\t\tborder-color: var( --cdx-border-color-warning );\n\t}\n\n\t.cdx-message__icon {\n\t\t/* background-image: url( data:image/svg+xml;utf8,' ); */\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var( --size-150 );\n\t\tbackground-image: url( 'data:image/svg+xml;utf8,' );\n\t\tmin-width: 20px;\n\t\tmin-height: 20px;\n\t\twidth: var( --size-150 );\n\t\t/* Vertically align icon with the text. Flexbox on its own is not enough here. */\n\t\t/* Use close enough height to `&__content`'s `line-height`. */\n\t\theight: var( --size-150 );\n\t}\n\n\t.cdx-message--user-dismissable {\n\t\tpadding-right: calc( var( --min-size-interactive-pointer ) + var( --spacing-100 ) );\n\n\t\t@media screen and ( min-width: 768px ) {\n\t\t\tpadding-right: calc( var( --min-size-interactive-pointer ) + var( --spacing-150 ) );\n\t\t}\n\t}\n\n\t.cdx-message__content {\n\t\t/* Vertically center message with icon. */\n\t\talign-self: center;\n\t\tflex-grow: 1;\n\t\t/* Add space between icon and message content. */\n\t\tmargin-left: var( --spacing-50 );\n\t\tword-wrap: break-word;\n\t\t/* CSS3 hyphenation\n\t\t// Chrome < 55 and Android 4.0 Browser support \"-webkit-hyphens: none\",\n\t\t// but not the \"auto\" property. It is advisable to set the @lang attribute\n\t\t// on the HTML element to enable hyphenation support and improve accessibility.\n\t\t// Chrome 55-87 only supports `auto` exclusively on Mac platform.\n\t\t*/\n\t\t/* stylelint-disable plugin/no-unsupported-browser-features */\n\t\t-webkit-hyphens: auto;\n\t\t-moz-hyphens: auto;\n\t\t-ms-hyphens: auto;\n\t\thyphens: auto;\n\t\t/* stylelint-enable plugin/no-unsupported-browser-features */\n\t}\n\n\t.cdx-message__content,\n\t.cdx-message__content > * {\n\t\tline-height: var( --line-height-medium );\n\t}\n\n\t.cdx-message__content > *:first-child {\n\t\tmargin-top: 0;\n\t\tpadding-top: 0;\n\t}\n\n\t.cdx-message__content > *:last-child {\n\t\tmargin-bottom: 0;\n\t\tpadding-bottom: 0;\n\t}\n\n\t/*\n\t.cdx-message__dismiss-button.cdx-button {\n\t\tposition: absolute;\n\t\t/* Use `spacing` tokens as the top/right axis orientation can always be in pixels, * /\n\t\t/* similar to paddings * /\n\t\ttop: var( --spacing-75 );\n\t\tright: var( --spacing-100 );\n\t\tpadding: var( --spacing-30 );\n\t\t/* Remove `line-height` to not overgrow button. * /\n\t\tline-height: 0;\n\n\t\t@media screen and ( min-width: 768px ) {\n\t\t\tright: var( --spacing-50 );\n\t\t}\n\t}\n\t*/\n\n\t/* Add space between stacked messages. */\n\t.cdx-message + .cdx-message {\n\t\tmargin-top: var( --spacing-50 );\n\t}\n\n\n/* ::: Text-formatting ::: */\n/* Support Blink based browsers. */\n/* They use `outline` for focus styles, we're only amending the color here, see T245887. */\n:focus {\n\toutline-color: var( --outline-color-base--focus );\n}\n\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: var( --font-weight-hairline );\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure--centered .figure__image {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... Comparison Figures ... */\n.figure--comparison {\n\tfloat: left;\n}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n/* ... Notes ... */\n.note--a11y:before,\n.note--i18n:before {\n\tcontent: '';\n\tbackground-image: url( ../../resources/WikimediaUI-icons-SVGs/eye.svg );\n\tbackground-repeat: no-repeat;\n\topacity: var( --opacity-icon-accessory );\n\tdisplay: inline-block;\n\twidth: 2.4rem;\n\theight: 2rem;\n\tvertical-align: text-top;\n}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color-palette + p {\n\tmargin-top: 1.6rem;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-hairline );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n/*\n.components__states,\n.components__imagery\n*/\n\n/* Messages */\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* Override general img border radius for correct Message representation */\n.page--components-messages img {\n\tborder-radius: 0;\n}\n\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__blockquote {\n\tmargin-bottom: 4.8rem;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t.figure--comparison {\n\t\twidth: 100%;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t/* Comparison figures, for example in Apps section. */\n\t.figure--comparison {\n\t\tmargin-right: 4%;\n\t}\n\n\t.figure--comparison:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\t/* Two figures */\n\t.figure--comparison:first-child:nth-last-child( 2 ),\n\t.figure--comparison:first-child:nth-last-child( 2 ) ~ .figure--comparison {\n\t\twidth: 48%;\n\t}\n\n\t/* Three figures */\n\t.figure--comparison:first-child:nth-last-child( 3 ),\n\t.figure--comparison:first-child:nth-last-child( 3 ) ~ .figure--comparison {\n\t\twidth: 30%;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file diff --git a/css/wmui-style-guide.dev.css b/css/wmui-style-guide.dev.css index 58bdf970..dc022e06 100644 --- a/css/wmui-style-guide.dev.css +++ b/css/wmui-style-guide.dev.css @@ -20,6 +20,18 @@ /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. Helvetica and Arial fallback gracefully to `700`, see T246791. */ --font-weight-bold: var( --font-weight-semi-bold ); + + /* .cdx-message only custom properties from Codex Design Tokens v1.2.1 */ + --background-color-warning-subtle: #fef6e7; + --color-notice: var( --wmui-color-base80 ); + /* Different from WikimediaUI Base's. */ + --cdx-border-color-warning: #ac6600; + --line-height-medium: 1.6; + --size-150: 1.5em; + --spacing-50: 8px; + --spacing-100: 16px; + --spacing-150: 24px; + --spacing-200: 32px; } * { @@ -312,6 +324,120 @@ sup { clear: both; } +/* ::: Codex Messages ::: */ +.cdx-message { + /* Background color and color are for notice type messages. */ + /* These will be overridden for other message types. */ + background-color: var( --background-color-notice-subtle ); + color: var( --color-base--emphasized ); + display: flex; + align-items: flex-start; + position: relative; + margin-bottom: var( --spacing-200 ); + border: var( --border-width-base ) var( --border-style-base ) var( --border-color-notice ); + padding: var( --spacing-100 ) var( --spacing-100 ); + + @media screen and ( min-width: 768px ) { + padding-right: var( --spacing-150 ); + padding-left: var( --spacing-150 ); + } +} + + /* Set the default CSS icon to the icon for notice messages, which is the default message type. */ + /* The icon and icon color will be overridden for other message types below. */ + /* The color of the Vue icon for notice messages is inherited from the color rule set on */ + /* .cdx-message. + .cdx-message__icon { + background-image: url( 'data:image/svg+xml;utf8,' ); + } + */ + + .cdx-message--warning { + background-color: var( --background-color-warning-subtle ); + border-color: var( --cdx-border-color-warning ); + } + + .cdx-message__icon { + /* background-image: url( data:image/svg+xml;utf8,' ); */ + background-position: center; + background-repeat: no-repeat; + background-size: var( --size-150 ); + background-image: url( 'data:image/svg+xml;utf8,' ); + min-width: 20px; + min-height: 20px; + width: var( --size-150 ); + /* Vertically align icon with the text. Flexbox on its own is not enough here. */ + /* Use close enough height to `&__content`'s `line-height`. */ + height: var( --size-150 ); + } + + .cdx-message--user-dismissable { + padding-right: calc( var( --min-size-interactive-pointer ) + var( --spacing-100 ) ); + + @media screen and ( min-width: 768px ) { + padding-right: calc( var( --min-size-interactive-pointer ) + var( --spacing-150 ) ); + } + } + + .cdx-message__content { + /* Vertically center message with icon. */ + align-self: center; + flex-grow: 1; + /* Add space between icon and message content. */ + margin-left: var( --spacing-50 ); + word-wrap: break-word; + /* CSS3 hyphenation + // Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", + // but not the "auto" property. It is advisable to set the @lang attribute + // on the HTML element to enable hyphenation support and improve accessibility. + // Chrome 55-87 only supports `auto` exclusively on Mac platform. + */ + /* stylelint-disable plugin/no-unsupported-browser-features */ + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + /* stylelint-enable plugin/no-unsupported-browser-features */ + } + + .cdx-message__content, + .cdx-message__content > * { + line-height: var( --line-height-medium ); + } + + .cdx-message__content > *:first-child { + margin-top: 0; + padding-top: 0; + } + + .cdx-message__content > *:last-child { + margin-bottom: 0; + padding-bottom: 0; + } + + /* + .cdx-message__dismiss-button.cdx-button { + position: absolute; + /* Use `spacing` tokens as the top/right axis orientation can always be in pixels, * / + /* similar to paddings * / + top: var( --spacing-75 ); + right: var( --spacing-100 ); + padding: var( --spacing-30 ); + /* Remove `line-height` to not overgrow button. * / + line-height: 0; + + @media screen and ( min-width: 768px ) { + right: var( --spacing-50 ); + } + } + */ + + /* Add space between stacked messages. */ + .cdx-message + .cdx-message { + margin-top: var( --spacing-50 ); + } + + /* ::: Text-formatting ::: */ /* Support Blink based browsers. */ /* They use `outline` for focus styles, we're only amending the color here, see T245887. */ diff --git a/design-principles.html b/design-principles.html index aa7b5e4e..04be7b20 100644 --- a/design-principles.html +++ b/design-principles.html @@ -60,6 +60,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+

Design principles

When making design decisions, we need to choose among possible solutions. Design principles help to decide what to prioritize.

diff --git a/design-principles_accessibility.html b/design-principles_accessibility.html index 809d3cb4..1262b075 100644 --- a/design-principles_accessibility.html +++ b/design-principles_accessibility.html @@ -60,6 +60,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+

This is for everyone – Accessibility

The web is fundamentally designed for humans to participate with the smallest possible limitations, independent of their hardware, software, language, location, expertise or ability. Volunteers in the Wikimedia Movement have been actively working and supporting inclusion and equal access for a long time.[1] Aligning to Wikimedia's vision[2] and to our principle “This is for everyone”, we aim for our interfaces to be accessible by design.

We'll introduce key accessibility concepts, illustrate how they are supported in the style guide, and provide guidance for you when applying them.

diff --git a/index.html b/index.html index 529d1a84..cdb75072 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,10 @@

Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+

Introduction

The Wikimedia Design Style Guide ensures a consistent look and behavior for our products.

Our interfaces are our brand.

diff --git a/resources.html b/resources.html index 1c14b964..6f9bf9d8 100644 --- a/resources.html +++ b/resources.html @@ -47,6 +47,10 @@

Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+

Resources

The Wikimedia Design Style Guide does provide principles and guidelines to help answer interaction design questions.

Its resources enable designers and developers from our communities build on top, saving valuable time. The files are provided in format of original software (here Sketch and Adobe Illustrator), and also as copy in an open format for use in license-free software.

diff --git a/visual-style.html b/visual-style.html index c82eb4e7..d877f60d 100644 --- a/visual-style.html +++ b/visual-style.html @@ -55,6 +55,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Principles

Wikimedia projects are associated with learning, editorship, and books. They are neutral and transparent. They are about reading and writing.

diff --git a/visual-style_colors.html b/visual-style_colors.html index a0debe5f..157b4fa7 100644 --- a/visual-style_colors.html +++ b/visual-style_colors.html @@ -56,6 +56,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Colors

diff --git a/visual-style_icons.html b/visual-style_icons.html index 0768e63e..3d4358f4 100644 --- a/visual-style_icons.html +++ b/visual-style_icons.html @@ -56,6 +56,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Icons

diff --git a/visual-style_illustrations.html b/visual-style_illustrations.html index 2429a949..d936e88f 100644 --- a/visual-style_illustrations.html +++ b/visual-style_illustrations.html @@ -56,6 +56,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Illustrations

diff --git a/visual-style_images.html b/visual-style_images.html index b5dc6972..6da7fd2c 100644 --- a/visual-style_images.html +++ b/visual-style_images.html @@ -56,6 +56,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Images

Images are found in Wikimedia projects as standalone contributions and as supplementary content to engage and communicate with individuals.

diff --git a/visual-style_typography.html b/visual-style_typography.html index 4b8a2be6..c194c26d 100644 --- a/visual-style_typography.html +++ b/visual-style_typography.html @@ -56,6 +56,10 @@
Wikimedia
+
+ +
Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
+
Visual Style

Typography