RuneRealm Wiki

MediaWiki:Vector-darkmode.less/ooui.less

< MediaWiki:Vector-darkmode.less

This is the current revision of this page, as edited by Alex (talk | contribs) at 00:11, 17 October 2024 (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..."). The present address (URL) is a permanent link to this version.

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

           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,

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

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

Retrieved from "https://wiki2.runerealm.org/index.php?title=MediaWiki:Vector-darkmode.less/ooui.less&oldid=34861"