MediaWiki:Vector-darkmode.less/ooui.less

From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>

/* ======================
            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:              #898ead;

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

// standard button disabled
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button[aria-disabled="true"] {
	background-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.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
	background-color: @ooui-interface;
	border-color: @ooui-interface-border;
}

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

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


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

.tdg-templateDataParamWidget-param-alias:first-child {
	background: @big-stone;
	border-color: @venice-blue;
}

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

.tdg-templateDataParamWidget-param-name,
.tdg-templateDataParamWidget-param-aliases,
.tdg-templateDataParamWidget-param-description {
	color: @tropical-blue;
}

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

}

.mw-widgets-datetime-calendarWidget.mw-widgets-datetime-calendarWidget-dependent {
background: #384766;
border: 1px solid @dark-interface-border;
}

.mw-widgets-datetime-dateTimeInputWidget-handle {
    border: 1px solid @dark-interface-border;
    background-color: #384766;
    color: white;
}


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

.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 {
		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:@dark-text;
}

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

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
  background-color: @pickled-bluewood;
}

.mw-apisandbox-optionalWidget.oo-ui-widget-disabled .oo-ui-widget-disabled * {
  background-color: @silver;
  color: #36414f;
  border-color: #36414f;
}

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