MediaWiki:Common.less/ooui.less
Jump to navigation
Jump to search
/* ======================
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: #ad9e9a; /* body-mid */
@ooui-normal-border: #bdb2ae; /* body-border */
@ooui-progressive: #6d5b54; /* body-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: lighten( @ooui-normal, 15%);
--ooui-disabled-border: lighten( @ooui-normal-border, 10%);
--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 <h1/2> border
}
}
/* ----------------------
others
---------------------- */
.oo-ui-icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esettings%3C/title%3E%3Cg transform='translate(10 10)'%3E%3Cpath id='a' d='M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3'/%3E%3Cuse xlink:href='%23a' transform='rotate(45)'/%3E%3Cuse xlink:href='%23a' transform='rotate(90)'/%3E%3Cuse xlink:href='%23a' transform='rotate(135)'/%3E%3C/g%3E%3Cpath d='M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7'/%3E%3C/svg%3E");
}
.oo-ui-icon-clear {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclear%3C/title%3E%3Cpath d='M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm5.66 14.24-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z'/%3E%3C/svg%3E");
}
// --- widgets in core mediawiki ---
// DateInputWidget
.mw-widget-dateInputWidget {
&-handle {
background-color: var(--ooui-input);
color: var(--ooui-text);
border-color: var(--ooui-input-border);
}
&-calendar {
background-color: var(--ooui-interface);
}
&.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover {
border-color: var(--ooui-input-border--hover);
}
}
// CalendarWidget
.mw-widget-calendarWidget {
border-color: var(--ooui-interface-border);
&:focus {
border-color: var(--ooui-accent);
box-shadow: @ooui-box-shadow-base--focus;
}
// focused month
&-day,
// week day name
&-day-heading {
color: var(--ooui-text);
}
// other months
&-day-additional {
color: var(--ooui-text);
opacity: 0.67;
}
&-day-today {
box-shadow: inset 0 0 0 1px var(--ooui-accent);
}
&-item {
&:hover {
background-color: var(--ooui-progressive);
}
&-selected {
background-color: var(--ooui-progressive--hover);
}
}
}
// e.g. on [[Special:AbuseFilter/examine]]
.mw-widgets-datetime-calendarWidget {
background-color: var(--ooui-interface);
border-color: var(--ooui-interface-border);
&:focus {
border-color: var(--ooui-accent);
box-shadow: inset 0 0 0 1px var(--ooui-accent), 0 2px 2px 0 rgba(0,0,0,0.25);
}
&-grid {
.mw-widgets-datetime-calendarWidget-cell {
&.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button {
.oo-ui-labelElement-label {
color: var(--subtle-color);
}
}
&.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button {
background-color: var(--ooui-progressive--hover);
}
}
}
}
// input box
.mw-widgets-datetime-dateTimeInputWidget {
&-handle {
background-color: var(--ooui-input);
color: var(--ooui-text);
border-color: var(--ooui-input-border);
}
&.oo-ui-widget-enabled {
&.mw-widgets-datetime-dateTimeInputWidget-handle {
&:hover {
border-color: var(--ooui-input-border--hover);
}
}
&:hover {
input,
textarea {
border-color: var(--ooui-input-border--hover);
}
}
.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
background-color: var(--ooui-normal);
}
}
}