MediaWiki:Common.less/ooui.less

/* ======================

           OOUI
  ====================== */

// MediaWiki documentation: <https://www.mediawiki.org/wiki/OOUI> // Interactive documentation: <https://doc.wikimedia.org/oojs-ui/master/demos/> // Styles repo directory: <https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui>

// Variables @ooui-normal: #d8ccb4; // aka --body-light @ooui-normal-border: #b8a282; // aka --body-dark @ooui-progressive: #605443; // aka --button-background; maybe too dark @ooui-box-shadow-base--focus: inset 0 0 0 1px var(--ooui-accent); @ooui-box-shadow-input-binary--active: inset 0 0 0 1px var(--ooui-progressive--hover); @ooui-color-base--inverted: @white;

root {

--ooui-text: var(--text-color);

--ooui-interface: var(--body-light); --ooui-interface-border: var(--body-border); --ooui-window-background: rgba(255,255,255,0.5);

// use the same styles for :hover AND :active // :focus will use the accent var

--ooui-normal: darken( @ooui-normal, 2% ); // default styles basically add +2% luminance (from #f8f9fa to #ffffff) // there's also another hover color: #eaecf0 (like .oo-ui-tool-link:hover) // ...but we only have one var for button hover, so we should make sure // the color does not blend with its bg --ooui-normal--hover: lighten(@ooui-normal, 4%); --ooui-normal-border: @ooui-normal-border;

// use separate color for progressive buttons - BUT use link-color for // anywhere else that uses progressive colors; this isnt the greatest idea // and unifying them is better in the longer term --ooui-progressive: @ooui-progressive; --ooui-progressive--hover: lighten(@ooui-progressive, 10%); // border and bg are the same in non-normal buttons

--ooui-accent: var(--link-color);

// probably not worth adjusting <textarea>/<input>-esque bg in light mode --ooui-input: #fff; --ooui-input-border: @ooui-normal-border; --ooui-input-border--hover: darken(@ooui-normal-border, 19%);

--ooui-disabled: desaturate( lighten( @ooui-normal, 2%), 20% ); --ooui-disabled-border: desaturate( lighten( @ooui-normal-border, 10%), 12% ); --ooui-disabled-text: var(--subtle-color);

--ooui-pending-background-image: repeating-linear-gradient(-45deg, @SEARCH_BOX, @SEARCH_BOX 20px, @BODY_MAIN 20px, @BODY_MAIN 30px); }

/* ----------------------

         widgets
  ---------------------- */

// need this one to be able to adjust the font color inside popups and etc .oo-ui-widget { color: var(--ooui-text); }

// combine checkbox and radio as theyre really similar .oo-ui-checkboxInputWidget [type='checkbox'] + span, .oo-ui-radioInputWidget [type='radio'] + span { background-color: var(--ooui-input); border-color: var(--ooui-input-border); }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span { background-color: var(--ooui-progressive); border-color: var(--ooui-progressive); }

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span { border-color: var(--ooui-progressive); }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span { border-color: var(--ooui-progressive--hover); }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span, .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span { border-color: var(--ooui-accent); }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); box-shadow: @ooui-box-shadow-input-binary--active; }

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span { border-color: var(--ooui-progressive--hover); box-shadow: @ooui-box-shadow-input-binary--active; }

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span:before { border-color: var(--ooui-progressive--hover); }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-accent); box-shadow: inset 0 0 0 1px var(--ooui-accent), inset 0 0 0 2px #fff; }

.oo-ui-checkboxInputWidget [type='checkbox']:disabled + span, .oo-ui-radioInputWidget [type='radio']:disabled + span { background-color: var(--ooui-disabled); border-color: var(--ooui-disabled); // same as bg for both }

.oo-ui-dropdownWidget { &-handle { border-color: var(--ooui-normal-border); }

&.oo-ui-widget-enabled &-handle { background-color: var(--ooui-normal); color: var(--ooui-text);

&:hover { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

&:active { color: var(--ooui-text); }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; } }

&.oo-ui-widget-enabled&-open &-handle { background-color: var(--ooui-normal--hover); }

&.oo-ui-widget-disabled &-handle { color: var(--ooui-disabled-text); text-shadow: none; // wont look good on dark mode border-color: var(--ooui-disabled-border); background-color: var(--ooui-disabled); } }

// input dropdowns .oo-ui-dropdownInputWidget { // ooui styled dropdown thats actually an html <select> select { border-color: var(--ooui-normal-border); }

option { background-color: var(--ooui-interface); }

&.oo-ui-widget-enabled { background-color: var(--ooui-normal);

&:hover { background-color: var(--ooui-normal--hover); }

select { color: var(--ooui-text);

&:hover, &:active { color: var(--ooui-text); border-color: var(--ooui-normal-border); }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; }

// there's a `oo-ui-indicator-down` class here that adds the pointer // icon, it's not a separate element so invert filter for dark mode // is infeasible } } }

// in Special:Preferences .oo-ui-labelWidget { &.oo-ui-inline-help { color: var(--byline-color); } }

// dropdown selection menu .oo-ui-menuSelectWidget { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border);

&-frameless { box-shadow: inset 0 -1px 0 0 var(--ooui-normal-border); } }

.oo-ui-menuSectionOptionWidget { color: var(--byline-color); }

// options eg. on page deletion/move .oo-ui-menuOptionWidget { // hover &.oo-ui-optionWidget { // hover and selected option &-highlighted, // combined &-selected { background-color: var(--ooui-normal--hover); color: var(--ooui-text); }

// hover on chosen option &-selected&-highlighted, &-pressed&-highlighted { color: var(--ooui-accent); } }

// hover again &.oo-ui-widget-enabled { &.oo-ui-optionWidget { color: var(--ooui-text); } }

// highlight & hover eg page deletion reason // &.oo-ui-optionWidget-selected&.oo-ui-optionWidget-highlighted, // &.oo-ui-optionWidget-pressed&.oo-ui-optionWidget-highlighted { // // } }

.oo-ui-messageDialog { // eg exiting out editor without saving the edit modal &-title { color: inherit; } }

.oo-ui-messageWidget { // all .messagebox like boxes &.oo-ui-messageWidget-block { // matching .errorbox &.oo-ui-flaggedElement-error { background-color: var(--errorbox-bg); border-color: var(--errorbox-border); }

// eg warning when there's templatedata when editing a template // matching .warningbox &.oo-ui-flaggedElement-warning { background-color: var(--warningbox-bg); border-color: var(--warningbox-border); }

// matching .successbox &.oo-ui-flaggedElement-success { background-color: var(--successbox-bg); border-color: var(--successbox-border); }

&.oo-ui-flaggedElement-notice { background-color: var(--messagebox-info-background); border-color: var(--messagebox-info-border); } }

// ideally we would use our own success and error colors, but this will do for now &.oo-ui-flaggedElement-error:not(.oo-ui-messageWidget-block), &.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) { color: var(--ooui-text); } }

.oo-ui-optionWidget { &.oo-ui-widget-disabled { color: var(--ooui-disabled-text); } }

.oo-ui-outlineControlsWidget { background-color: var(--ooui-normal); }

// eg in ve "Options" window .oo-ui-outlineOptionWidget { &.oo-ui-optionWidget-highlighted { background-color: var(--ooui-normal--hover); color: var(--ooui-text); } }

.oo-ui-popupWidget { // Popups eg when interacting with templates in ve &-popup { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border); }

// popups anchors/arrow .ooui-anchor(@direction) { .oo-ui-popupWidget-anchor:after { border-@{direction}-color: var(--ooui-interface); }

.oo-ui-popupWidget-anchor:before { border-@{direction}-color: var(--ooui-interface-border); } }

&-anchored- { &top { .ooui-anchor(bottom); } &bottom { .ooui-anchor(top); } &start { .ooui-anchor(right); } &end { .ooui-anchor(left); } } }

.oo-ui-searchWidget-query { border-bottom-color: var(--ooui-interface-border); }

.oo-ui-selectFileWidget { &-dropTarget { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border); }

&.oo-ui-widget-enabled { &.oo-ui-selectFileWidget-dropTarget { background-color: var(--ooui-interface);

&:hover { border-color: var(--ooui-input-border--hover); } } } }

.oo-ui-tabOptionWidget { color: var(--ooui-text);

.oo-ui-tabSelectWidget-framed & { &.oo-ui-optionWidget-selected { background-color: var(--body-dark); color: var(--ooui-text);

& .oo-ui-labelElement-label { border-bottom-color: var(--body-border); } }

&.oo-ui-widget-enabled { &:hover, &:active { background-color: var(--body-light); color: var(--ooui-text); }

&.oo-ui-optionWidget-selected:hover { background-color: var(--body-dark); } } }

.oo-ui-tabSelectWidget-frameless & { &.oo-ui-optionWidget-selected { color: var(--ooui-progressive); box-shadow: inset 0 -2px 0 0 var(--ooui-progressive);

&:hover, &:focus { color: var(--ooui-progressive--hover); box-shadow: inset 0 -2px 0 0 var(--ooui-progressive--hover); } } } }

.oo-ui-tabSelectWidget { // eg used on Special:Preferences &-framed { background: none; // actually uses something like --ooui-interface border-bottom: 1px solid var(--ooui-interface-border); // our customisation }

// used in TabberNeue (even though we dont have it) &-frameless { box-shadow: inset 0 -1px 0 0 var(--ooui-interface-border); }

&-mobile { // both use the following mixin in core; but we already have a similar // var in minerva.css for these stuff already used in navboxes /* .oo-ui-horizontal-gradient( @startColor: #eee, @endColor: #fff, @startPos: 0, @endPos: 100% ) { background-color: average( @startColor, @endColor ); background-image: linear-gradient( to right, @startColor @startPos, @endColor @endPos ); } */

&.oo-ui-tabSelectWidget-framed:after { // background instead of -image so the prev properties used as // fallback for ancient browsers are reset background: var(--mobile-navbox-linear-gradient); } &.oo-ui-tabSelectWidget-frameless:after { background: var(--mobile-navbox-linear-gradient); } } }

// eg recent changes selected filter tag .oo-ui-tagItemWidget { border-color: var(--ooui-normal-border);

&.oo-ui-widget-enabled { color: var(--ooui-text);

&:hover { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

&:not( .oo-ui-tagItemWidget-fixed ) { background-color: var(--ooui-normal); }

& .oo-ui-buttonElement-button {

&:hover { background-color: var(--ooui-normal--hover); } } } }

.oo-ui-tagMultiselectWidget { // rc/watchlist filter box &.oo-ui-widget-enabled { background-color: var(--ooui-interface);

// and again - this time it's button bg &.oo-ui-tagMultiselectWidget-outlined { background-color: var(--ooui-normal);

.oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: var(--ooui-interface); } } } }

.oo-ui-textInputWidget { // eg RecentChanges filter changes input .oo-ui-inputWidget-input { background-color: var(--ooui-input); color: var(--ooui-text); border-color: var(--ooui-input-border); }

&.oo-ui-widget-enabled { .oo-ui-inputWidget-input { &::placeholder { color: var(--subtle-color); }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; }

&[readonly]:not(.oo-ui-pendingElement-pending) { background-color: var(--ooui-disabled); color: var(--ooui-disabled-text); } }

&:hover { .oo-ui-inputWidget-input { border-color: var(--ooui-input-border--hover);

&:focus { border-color: var(--ooui-accent); } } }

@media screen { @media ( min-width: 0 ) { textarea.oo-ui-inputWidget-input:focus { outline: 1px solid var(--ooui-accent); } } } }

&.oo-ui-widget-disabled { .oo-ui-inputWidget-input { background-color: var(--ooui-disabled); color: var(--ooui-disabled-text); text-shadow: none; // wont look good on dark mode border-color: var(--ooui-disabled-border); } } }

.oo-ui-toggleSwitchWidget { background-color: var(--ooui-input); border-color: var(--ooui-input-border);

&.oo-ui-widget-enabled { .oo-ui-toggleSwitchWidget-grip { background-color: var(--ooui-input); border-color: var(--ooui-input-border); }

&:hover { background-color: var(--ooui-input); border-color: var(--ooui-accent);

.oo-ui-toggleSwitchWidget-grip { background-color: var(--ooui-input); border-color: var(--ooui-accent); } }

&:active, &:active:hover, &:active:focus { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); box-shadow: @ooui-box-shadow-input-binary--active;

.oo-ui-toggleSwitchWidget-grip { background-color: var(--ooui-input); border-color: var(--ooui-input); } }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus;

.oo-ui-toggleSwitchWidget-grip { border-color: var(--ooui-accent); } }

&.oo-ui-toggleWidget-on { background-color: var(--ooui-progressive); border-color: var(--ooui-progressive);

.oo-ui-toggleSwitchWidget-grip { background-color: var(--ooui-input); border-color: var(--ooui-input); }

&:hover { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

&:active, &:active:hover { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

&:focus { border-color: var(--ooui-progressive);

&::before { border-color: @ooui-color-base--inverted; } } } }

&.oo-ui-widget-disabled { background-color: var(--ooui-disabled); border-color: var(--ooui-disabled); // same as bg } }

/* ----------------------

     elements/buttons
  ---------------------- */

// mixin for frameless progressive/destructive button .mw-frameless-button-colored( @child, @color-text ) { > @{child}, // no distinct color for hover > @{child}:hover { color: @color-text; }

> @{child}:active, &.oo-ui-buttonElement-pressed > @{child} { // dont differentiate between :active and normal color: @color-text; border-color: @color-text; } }

.mw-framed-button-colored( @child, @color-text, @hover, @border-color--hover, /* @active,*/ @focus ) { > @{child} { color: @color-text; }

> @{child}:hover { background-color: @hover; border-color: @border-color--hover; }

> @{child}:focus { border-color: @focus; box-shadow: inset 0 0 0 1px @focus; }

/* ugh uses lighten() > @{child}:active, &.oo-ui-buttonElement-pressed > @{child}, &.oo-ui-buttonElement-active > @{child}, &.oo-ui-popupToolGroup-active > @{child} { background-color: lighten( @active, 60% ); color: @active; border-color: @active; } */ }

// mixin for framed progressive/destructive button .mw-framed-primary-button-colored( @child, @color, @hover, @active, @focus ) { > @{child} { background-color: @color; border-color: @color; }

> @{child}:hover { background-color: @hover; border-color: @hover; }

> @{child}:focus { border-color: @focus; box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @ooui-color-base--inverted; }

> @{child}:active, &.oo-ui-buttonElement-pressed > @{child}, &.oo-ui-buttonElement-active > @{child}, &.oo-ui-popupToolGroup-active > @{child} { color: @ooui-color-base--inverted; background-color: @active; border-color: @active; } }

.oo-ui-buttonElement { &-frameless { &.oo-ui-widget-enabled { > .oo-ui-buttonElement-button { color: var(--ooui-text);

&:hover { color: var(--ooui-text); }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; } }

&.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button, > .oo-ui-buttonElement-button:active { color: var(--ooui-text); }

&.oo-ui-flaggedElement { &-progressive { .mw-frameless-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-text) ); // try out using text color as the button label like hard-coded darkmode }

// not needed // &-destructive { // .mw-frameless-button-colored( ~'.oo-ui-buttonElement-button' ); // } } }

&.oo-ui-widget-disabled { > .oo-ui-buttonElement-button { color: var(--ooui-disabled-text); } } }

&-framed { &.oo-ui-widget-disabled { > .oo-ui-buttonElement-button { background-color: var(--ooui-disabled); border-color: var(--ooui-disabled-border); } }

&.oo-ui-widget-enabled { > .oo-ui-buttonElement-button { background-color: var(--ooui-normal); color: var(--ooui-text); border-color: var(--ooui-normal-border);

&:hover { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

&:focus { border-color: var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; } }

&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: var(--ooui-progressive--hover); color: #fff; // needed, else it would be overriden by non-active styles border-color: var(--ooui-progressive--hover);

&:focus { border-color: var(--ooui-progressive--hover); box-shadow: @ooui-box-shadow-base--focus; } }

// same as :hover above > .oo-ui-buttonElement-button:active, &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

&.oo-ui-flaggedElement { &-progressive { .mw-framed-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-text), var(--ooui-normal--hover), var(--ooui-progressive--hover), var(--ooui-accent) ); }

&-destructive { // .mw-framed-button-colored( ~'.oo-ui-buttonElement-button', @color-destructive-non-primary, @background-color-framed--hover, @border-color-framed-destructive--hover, @color-destructive--active, @color-destructive--focus ); // since we arent changing destructive > .oo-ui-buttonElement-button { color: var(--ooui-text);

&:hover { background-color: var(--ooui-normal--hover); } } } }

&.oo-ui-flaggedElement-primary { &.oo-ui-flaggedElement { &-progressive { .mw-framed-primary-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-progressive), var(--ooui-progressive--hover), var(--ooui-progressive--hover), var(--ooui-accent) ); }

// dont need // &-destructive { // .mw-framed-primary-button-colored( ~'.oo-ui-buttonElement-button' ); // } } } } } }

.oo-ui-pendingElement-pending { background-image: var(--ooui-pending-background-image); background-size: 200%; animation: oo-ui-pendingElement-stripes 6s linear infinite;

@keyframes oo-ui-pendingElement-stripes { 100% { background-position: 100%; } } }

/* ----------------------

         windows
  ---------------------- */

.oo-ui-messageDialog { &-content > .oo-ui-window-foot { outline-color: var(--ooui-interface-border); }

&-message { color: var(--ooui-text); }

&-actions { // eg ace editor "Go to line number..." window &-horizontal .oo-ui-actionWidget { border-right-color: var(--ooui-interface-border); }

&-vertical .oo-ui-actionWidget { border-bottom-color: var(--ooui-interface-border); } } }

.oo-ui-processDialog { &-content { .oo-ui-window-head, .oo-ui-window-foot { outline-color: var(--ooui-interface-border); } }

// need to reoverride so buttons wont have weird borders .oo-ui-actionWidget { > .oo-ui-buttonElement-button { border-top-color: transparent; border-bottom-color: transparent;

&:hover, &:active { border-top-color: transparent; border-bottom-color: transparent; } }

&:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) { > .oo-ui-buttonElement-button { &:hover, &:active { border-right-color: var(--ooui-interface-border); border-left-color: transparent; }

&:focus { border-color: var(--ooui-accent); } } } }

&-actions { &-safe, &-other { .oo-ui-actionWidget > .oo-ui-buttonElement-button { border-right-color: var(--ooui-normal-border); border-left-color: transparent; } }

&-safe { .oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) { > .oo-ui-buttonElement-button { &:hover { background-color: var(--ooui-normal--hover); border-right-color: var(--ooui-interface-border); } } } } } }

.oo-ui-windowManager { &-modal { // bg behind windows > .oo-ui-dialog { background-color: var(--ooui-window-background); }

// all popup windows > .oo-ui-dialog > .oo-ui-window-frame { background-color: var(--ooui-interface); } }

// window outlines &-modal&-floating > .oo-ui-dialog > .oo-ui-window-frame { border-color: var(--ooui-interface-border); } }

// we need this one to be able to adjust the font color inside windows .oo-ui-window { color: var(--ooui-text); }

/* ----------------------

         tools
  ---------------------- */

.mw-tool-colored( @child /*, @color-text*/ , @hover, @active , @focus , @active-text: @active ) { // > @{child} { // color: @color-text; // }

> @{child}:hover { background-color: @hover; }

> @{child}:focus { outline: 1px solid @focus; box-shadow: inset 0 0 0 1px @focus; }

> @{child}:active, &.oo-ui-tool-active > @{child}, &.oo-ui-popupToolGroup-active > @{child} { background-color: var(--ooui-normal--hover); color: @active-text; box-shadow: none; } }

.mw-primary-tool-colored( @child, @color, @hover, @active, @focus ) { > @{child} { // color: @ooui-color-base--inverted; background-color: @color; }

> @{child}:hover { background-color: @hover; }

> @{child}:focus { // outline: @border-width-base @border-style-base @focus; box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @ooui-color-base--inverted; }

> @{child}:active, &.oo-ui-tool-active > @{child} { // color: @ooui-color-base--inverted; background-color: @active; // box-shadow: none; }

// &.oo-ui-widget-disabled > @{child}, // &.oo-ui-widget-disabled > @{child}:active { // background-color: @background-color-filled--disabled; // color: @color-filled--disabled; // } }

@ooui-toolbar: var(--ooui-interface); @ooui-toolbar-border: var(--body-mid);

// mainly used by ve and source editor // toolbar .oo-ui-toolbar { &-bar { background-color: @ooui-toolbar; color: var(--ooui-text);

// toolbar borders .oo-ui-toolbar-position-top > & { border-bottom-color: @ooui-toolbar-border; }

.oo-ui-bookletLayout > .oo-ui-menuLayout-menu { border-right-color: @ooui-toolbar-border; } } }

.oo-ui-tool { &.oo-ui-widget-enabled { .mw-tool-colored( ~'.oo-ui-tool-link', var(--ooui-normal--hover), var(--ooui-accent), var(--ooui-accent) );

// &.oo-ui-flaggedElement { // &-progressive { // .mw-tool-colored( ~'.oo-ui-tool-link', @background-color-tool--hover, @color-primary--active, @color-primary--focus ); // }

// &-destructive { // .mw-tool-colored( ~'.oo-ui-tool-link', @color-destructive-non-primary, @background-color-tool--hover, @color-destructive--active, @color-destructive--focus ); // } // }

&.oo-ui-flaggedElement-primary { &.oo-ui-flaggedElement { &-progressive { .mw-primary-tool-colored( ~'.oo-ui-tool-link', var(--ooui-progressive), var(--ooui-progressive--hover), var(--ooui-progressive--hover), var(--ooui-accent) ); }

// &-destructive { // .mw-primary-tool-colored( ~'.oo-ui-tool-link', @color-destructive, @color-destructive--hover, @color-destructive--active, @color-destructive--focus ); // } } } } }

.oo-ui-listToolGroup { // eg "Page options" dropdown &-tools .oo-ui-tool { &.oo-ui-widget-enabled { background-color: var(--ooui-normal);

&:hover { background-color: var(--ooui-normal--hover); color: var(--ooui-text); } }

// does not match source ordering &-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: var(--ooui-progressive) } } }

// left-hand tool group .oo-ui-menuToolGroup { border-left-color: @ooui-toolbar-border; border-right-color: @ooui-toolbar-border; }

.oo-ui-popupToolGroup { // dropdown menu &-tools { background-color: @ooui-toolbar; border-color: @ooui-toolbar-border; }

&.oo-ui-widget-enabled { // eg hover "Insert" > .oo-ui-popupToolGroup-handle { &:hover { background-color: var(--ooui-normal--hover); }

&:focus { outline: 1px solid var(--ooui-accent); box-shadow: @ooui-box-shadow-base--focus; } }

// ve "Page options" again .oo-ui-toolbar-actions & { > .oo-ui-popupToolGroup-handle { &:hover { // same as button hover border-right-color: var(--ooui-normal--hover); } } } }

// might not match source ordering &-tools .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus { box-shadow: inset 0 0 0 2px var(--ooui-accent); }

&-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: var(--ooui-progressive); }

&.oo-ui-popupToolGroup-active { > .oo-ui-popupToolGroup-handle { // aka active background-color: var(--ooui-normal); color: var(--ooui-accent);

&:hover { background-color: var(--ooui-normal--hover); color: var(--ooui-accent); } } } }

/* ----------------------

         layouts
  ---------------------- */

.oo-ui-bookletLayout { &-outlinePanel { > .oo-ui-outlineControlsWidget { border-top-color: var(--ooui-interface-border); } }

// eg "Show options" in ve template editor > .oo-ui-menuLayout-menu { border-right-color: var(--ooui-interface-border); } }

.oo-ui-fieldLayout { // disabled text color in layouts &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label { color: var(--ooui-disabled-text); } }

// ooui <fieldset> .oo-ui-panelLayout { &-framed {

border-color: var(--sidebar); // along with