MediaWiki:Vector-darkmode.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/> /* ---------------------- variables ---------------------- */ // variable names correspond to states/flags described in docs above // see also <https://github.com/wikimedia/mediawiki/blob/master/resources/lib/ooui/wikimedia-ui-base.less> @ooui-text: @dark-text; // general non-interactive interfaces @ooui-interface: @cloud-burst; @ooui-interface-border: lighten( @ooui-interface, 8% ); // text fields and inputs @ooui-input: lighten( @pickled-bluewood, 4% ); @ooui-input-border: lighten( @ooui-input, 8% ); @ooui-input-border--hover: lighten( @ooui-input-border, 8% ); // buttons @ooui-normal: @pickled-bluewood; @ooui-normal--hover: lighten( @ooui-normal, 4% ); @ooui-normal-border: lighten( @ooui-normal, 8% ); @ooui-normal-border--hover: lighten( @ooui-normal--hover, 8% ); @ooui-progressive: #3366cc; // @ooui-progressive--hover: # // @ooui-progressive--active: # @ooui-destructive: #dd3333; // @ooui-destructive--hover: # // @ooui-destructive--active: # // @ooui-disabled: # /* ---------------------- buttons ---------------------- */ .oo-ui-widget { color: @ooui-text; } // standard button .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: @ooui-text; background-color: @ooui-normal; border-color: @ooui-normal-border; } // standard button disabled .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { background-color: @ooui-normal; border-color: @ooui-normal-border; opacity: 0.6; } .oo-ui-widget-disabled > .oo-ui-buttonElement-button { border-left-color: @ooui-normal-border !important; } .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { opacity: 0.6; filter: none !important; } // standard button hover .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:hover { color: @ooui-text; background-color: @ooui-normal--hover; border-color: @ooui-normal-border--hover; } /* ---------------------- TagMultiselect ---------------------- */ .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { background-color: @ooui-interface; border-color: @ooui-interface-border; } .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle { background-color: @ooui-input; border-color: @ooui-input-border; } .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content .oo-ui-tagMultiselectWidget-group:empty + input { color: @ooui-text; } .oo-ui-menuSelectWidget { border-color: @ooui-interface-border; } // tag .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: @ooui-normal; border-color: @ooui-normal-border; } .oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-draggableElement.oo-ui-draggableElement-handle.oo-ui-tagItemWidget { background-color: @ooui-normal; border-color: @ooui-normal-border; } /* ---------------------- inputs ---------------------- */ .oo-ui-textInputWidget { input, textarea { color: @ooui-text; background-color: @ooui-input; border-color: @ooui-input-border; } } .oo-ui-inputWidget-input::placeholder { color: fade( @ooui-text, 60% ); } // text fields .oo-ui-textInputWidget.oo-ui-widget-enabled:hover input, .oo-ui-textInputWidget.oo-ui-widget-enabled:hover textarea { border-color: @ooui-input-border--hover; } .oo-ui-textInputWidget .oo-ui-pendingElement-pending { background-color: #fff; } // input disabled .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input { background-color: @ooui-normal; border-color: @ooui-normal-border; opacity: 0.6; } .oo-ui-textInputWidget.oo-ui-widget-disabled input, .oo-ui-textInputWidget.oo-ui-widget-disabled textarea { text-shadow: none; } //input disabled icon .oo-ui-numberInputWidget.oo-ui-widget-disabled.oo-ui-numberInputWidget-buttoned .oo-ui-iconElement-icon { filter: none; opacity: 0.6; } // dropdowns /* .oo-ui-dropdownInputWidget, .oo-ui-dropdownWidget, .oo-ui-selectWidget .oo-ui-labelElement:not(.oo-ui-optionWidget-selected) { .oo-ui-labelElement-label { color: @ooui-text; } } */ // button clicked to open dropdown .oo-ui-dropdownWidget.oo-ui-widget-enabled { .oo-ui-dropdownWidget-handle { color: @ooui-text; background-color: @ooui-normal; border-color: @ooui-normal-border; &:hover { color: @ooui-text; background-color: @ooui-normal; border-color: @ooui-normal-border--hover; } } // when button is clicked and dropdown is open &.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle { background-color: @ooui-input; } } // dropdown list .oo-ui-menuSelectWidget { background-color: @ooui-normal; } .oo-ui-menuOptionWidget { // selected option in dropdown &.oo-ui-optionWidget-selected { background-color: darken( @ooui-normal, 4% ); } // hovering over non-selected option &.oo-ui-optionWidget-highlighted { background-color: lighten( @ooui-normal, 4% ); } } // date field, e.g. on Special:Contributions .mw-widget-dateInputWidget-handle { background: @ooui-input; border-color: @ooui-input-border; } .mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover { border-color: @ooui-input-border--hover; } /* ---------------------- dialogs ---------------------- */ .oo-ui-windowManager-modal > .oo-ui-dialog { background-color: rgba(25, 25, 25, 0.6); } // e.g Special:NewFiles .oo-ui-labelElement-label { color: @ooui-text; } .tdg-templateDataDialog-panels { .oo-ui-labelElement-label { color: @ooui-text; } .oo-ui-dropdownWidget .oo-ui-labelElement-label, .tdg-templateDataParamWidget-param-alias { color: @ooui-text; } .errorbox { background-color: @old-brick; border-color: @old-brick; color: @white; } .successbox { background-color: @la-palma; border-color: @la-palma; color: @white; } } /* ---------------------- forms ---------------------- */ // found on Special:BotPasswords .oo-ui-panelLayout-framed { background-color: @ooui-interface; border-color: @ooui-interface-border; } .mw-htmlform-ooui .mw-htmlform-matrix { tbody tr:first-child td, tbody tr:nth-child(even) td { background-color: transparent; } tbody tr:not(:first-child):hover td { background-color: @ooui-interface-border; } } /* ---------------------- popups ---------------------- */ .oo-ui-popupWidget-popup { background-color: @ooui-interface; border-color: @ooui-interface-border; } .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor { &:after { border-right-color: @ooui-interface; } &:before { border-right-color: @ooui-interface-border; } } .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor { &:after { border-left-color: @ooui-interface; } &:before { border-left-color: @ooui-interface-border; } } .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor { &:after { border-top-color: @ooui-interface; } &:before { border-top-color: @ooui-interface-border; } } .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor { &:after { border-bottom-color: @ooui-interface; } &:before { border-bottom-color: @ooui-interface-border; } } .oo-ui-buttonInputWidget:not(.oo-ui-flaggedElement-primary), .oo-ui-buttonOptionWidget:not(.oo-ui-optionWidget-selected), .dis-calc-select-junk-menu .oo-ui-optionWidget-selected { .oo-ui-labelElement-label { color: @ooui-text; } } // date picker, e.g. on Special:Contributions .mw-widget-calendarWidget { border-color: @ooui-input-border; } .mw-widget-dateInputWidget-calendar { background: @ooui-input; } // hovering over date .mw-widget-calendarWidget-item:hover { background: @ooui-input-border--hover; } // day of the week .mw-widget-calendarWidget-day-heading { color: @ooui-text; } // day within selected month .mw-widget-calendarWidget-day { color: @ooui-text; } // day from months before/after current .mw-widget-calendarWidget-day-additional { color: fade( @ooui-text, 50% ); } // ICONS .oo-ui-iconElement-icon { &.oo-ui-icon-next, &.oo-ui-icon-previous, &.oo-ui-icon-collapse, &.oo-ui-icon-first, &.oo-ui-icon-last, &.oo-ui-icon-info, &.oo-ui-icon-close, &.oo-ui-icon-bookmark, &.oo-ui-icon-trash, &.oo-ui-icon-article, &.oo-ui-icon-tag, &.oo-ui-icon-menu, &.oo-ui-icon-play, &.oo-ui-icon-highlight, &.oo-ui-icon-search, &.oo-ui-icon-calendar, &.oo-ui-icon-history { filter: invert(1); } } .oo-ui-indicatorElement-indicator { filter: invert(1) } //