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