Alex: Created page with "/* ====================== OOUI ====================== / // MediaWiki documentation: // Interactive documentation: / ---------------------- variables ---------------------- */ // variable names correspond to states/flags described in docs above // see also @oo..."

2024-10-16T23:11:26Z

Created page with "====================== 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> @oo..."

New page

/* ======================
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% );

// progressive
//@ooui-progressive: #3366cc; in parent file
@ooui-progressive--hover: lighten(@ooui-progressive, 10%);
//@ooui-progressive--active: #2a4b8d;

@ooui-destructive: #dd3333;
// @ooui-destructive--hover: #
// @ooui-destructive--active: #

@ooui-disabled: desaturate(lighten( @ooui-normal, 32% ) ,16%);

/* ----------------------
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 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;
}

// progressive button which gets overriden by above
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: @ooui-progressive--hover;
border-color: @ooui-progressive--hover;
}

// standard button disabled
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button[aria-disabled="true"] {
background-color: @ooui-disabled;
border-color: @ooui-disabled;
}

// reset back multibuttons
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background-color: #2a4b8d;
border-color: #2a4b8d;
}

// switch disabled
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
background-color: @ooui-disabled;
border-color: @ooui-disabled;
}

/* Buttons on:
[[Equipment tables]]
[[Calculator:Disassembly by material]] subpages
[[Calculator:Disassembly by category]] subpages
jsCalc hiscore lookups

.page-Equipment_tables,
#dis-calc-settings,
.jsCalc-field-hs {

.oo-ui-buttonInputWidget:not(.oo-ui-flaggedElement-primary) .oo-ui-labelElement-label,
.oo-ui-buttonOptionWidget:not(.oo-ui-optionWidget-selected) .oo-ui-labelElement-label {
color: @ooui-text;
}

}
*/

/* Buttons on:
[[Special:ListFiles]] etc

.TablePager_nav,
.tdg-editscreen-main {

.oo-ui-buttonWidget.oo-ui-widget-enabled .oo-ui-labelElement-label {
color: @ooui-text;
}

.oo-ui-buttonWidget.oo-ui-widget-disabled .oo-ui-labelElement-label {
color: lighten( @ooui-text, 40% );
}

}
*/

/* ----------------------
TagMultiselect
---------------------- */

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
background-color: @ooui-input;
}

.oo-ui-tagMultiselectWidget-handle {
border-color: @ooui-input-border;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
border-color: #556c9b;
}

.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-menuSelectWidget {
background-color: @ooui-normal;
border-color: @ooui-normal-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-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
background-color: #182137;
}

/* ----------------------
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-pendingElement-pending {
background-image: repeating-linear-gradient(
-45deg,
#2f4060,
#303f59 20px,
#182137 20px,
#182137 30px
);
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
border-color: @ooui-normal-border;
}

// dropdowns
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
background-color: #182137;
}

// 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;
}

}

.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
background-color: @ooui-disabled;
border-color: @ooui-disabled;
}

.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% );
}

}

.oo-ui-checkboxInputWidget [type='checkbox'] + span,
.oo-ui-radioInputWidget [type='radio'] + span {
background-color: @ooui-input;
border-color: @ooui-input-border;
}

.oo-ui-checkboxInputWidget [type='checkbox']:disabled + span,
.oo-ui-radioInputWidget [type='radio']:disabled + span {
background-color: @ooui-disabled;
border-color: @ooui-disabled;
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span {
background-color: #8daeee;
border-color: #728bba;
}

.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
color: #ccd9f4;
}

.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
color: #ccd9f4;
border-color: @ooui-normal-border;
}

/* ----------------------
dialogs
---------------------- */
// Popup window when uploading a file using editors and VE's
.oo-ui-window-content {
background-color: @ooui-interface;
color: @ooui-text;

.oo-ui-window-body,
.oo-ui-window-head {
outline-color: @ooui-interface-border;
}

// Middle dropfiles menu
.oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget-info {
background-color: lighten(@ooui-interface, 5%);
border-color: lighten(@ooui-interface-border, 5%);

&:hover {
border-color: lighten(@ooui-interface-border, 7%);
}

.oo-ui-selectFileWidget-dropLabel {
color: @ooui-text;
}

}

// "I confirm that...."
.mw-foreignStructuredUpload-bookletLayout-license {
color: @ooui-text;
}

// In ACE editor, "Go to line number" has a diff box. This recolors the missing parts
.oo-ui-actionWidget,
.oo-ui-window-foot {
border-color: @ooui-interface-border;
outline-color: @ooui-interface-border;
}

//Button
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button {
background-color: @ooui-normal;
border-color: @ooui-normal-border;
}
}
// For some super odd reasons, this will recolor the top part of the menu above
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
border-color: @ooui-interface-border;
}

.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;
}

.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
color: #8b92a1;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
background-color: #313946;
border-color: #363f50;
}

.tdg-templateDataDialog-panels {
.oo-ui-labelElement-label {
color: @ooui-text;
}

.oo-ui-dropdownWidget .oo-ui-labelElement-label,
.tdg-templateDataParamWidget-param-alias {
color: @ooui-text;
}
}

.tdg-templateDataParamWidget-param-alias {
background: @big-stone;
border-color: @ooui-interface-border;
}

.oo-ui-textInputWidget.oo-ui-widget-disabled {
input, textarea {
text-shadow: 0 1px 1px @black;
color: @tropical-blue;
-webkit-text-fill-color: @tropical-blue; // for some reason this is a color override if not specified here.
}
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
background-color: @river-bed;
}

.tdg-templateDataParamWidget-param-name,
.tdg-templateDataParamWidget-param-aliases,
.tdg-templateDataParamWidget-param-description {
color: @ooui-text;
}

/* ----------------------
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;
}

}

//Calendar interface e.g. on Special:Contributions
.mw-widget-calendarWidget {
border-color: @ooui-input-border;
}

//Day of the Month inside Calendar interface
.mw-widget-calendarWidget-day {
color: @ooui-text;
}

//Calendar interface days of previous/next month
.mw-widget-calendarWidget-day-additional {
color: fade( @ooui-text, 50% );
}

.mw-widget-dateInputWidget-calendar {
background-color: @ooui-input;
border-color: @ooui-input-border;
}

//Date input
.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;
}

//Mo, Tue, We,.. etc. inside Calendar interface
.mw-widget-calendarWidget-day-heading {
color: @ooui-text;
}

.mw-widgets-datetime-calendarWidget.mw-widgets-datetime-calendarWidget-dependent {
background: @ooui-input;
border-color: @ooui-input-border;
}

.mw-widgets-datetime-dateTimeInputWidget-handle {
background-color: @ooui-input;
border-color: @ooui-input-border;
color: white;
}

.mw-widgets-datetime-dateTimeInputWidget-field,
.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled:hover input,
.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled:hover textarea {
border: none;
background-color: transparent;
}

.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
background-color: transparent;
}

.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-handle:hover {
border-color: #475980;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
border-color: @ooui-input;
}

/* Disabled for now because it fuggs up the dark mode icon
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-indicatorElement-indicator {
filter: invert(100%);
} */

// ICONS
.oo-ui-iconElement-icon:not(.oo-ui-image-destructive):not(.oo-ui-image-warning):not(.oo-ui-image-progressive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-icon-page-existing),
.oo-ui-indicatorElement-indicator {
filter: invert(1);
}

#mw-indicator-mw-helplink a {
color: #745418;
filter: invert(100%);
}

//Special:SearchDigest page creation window
.oo-ui-processDialog-content > div:nth-child(2) > div:nth-child(1) > p:nth-child(1) {
color: @ooui-text;
}

// fixes for [[Special:ApiSandbox]]
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
background-color: @ooui-normal;
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
background-color: @ooui-normal--hover;
}

.oo-ui-textInputWidget.oo-ui-widget-enabled input[readonly], .oo-ui-textInputWidget.oo-ui-widget-enabled textarea[readonly] {
background-color: @pickled-bluewood;
}

// Special:ActiveUsers
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
&:not(.oo-ui-tagItemWidget-fixed) {
background-color: @ooui-normal;
border-color: @ooui-normal-border;
}

&:hover {
background-color: @ooui-normal--hover;
border-color: @ooui-normal-border--hover;
}
}

.oo-ui-tagItemWidget {
border-color: @waikawa-grey;
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
background-color: @ooui-normal--hover;
}

// templatedata warning
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
background-color: @ooui-interface;
border-color: @ooui-interface-border;
}

MediaWiki:Vector-darkmode.less/ooui.less - Revision history

Alex: Created page with "/* ====================== OOUI ====================== */ // MediaWiki documentation: // Interactive documentation: /* ---------------------- variables ---------------------- */ // variable names correspond to states/flags described in docs above // see also @oo..."

Alex: Created page with "/* ====================== OOUI ====================== / // MediaWiki documentation: // Interactive documentation: / ---------------------- variables ---------------------- */ // variable names correspond to states/flags described in docs above // see also @oo..."