MediaWiki:Vector-darkmode.less/ooui.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <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-normal-active:         saturate( @ooui-normal, 25% );

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

// standard button active
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
	background-color: @ooui-normal-active;
	border-color: @ooui-normal-active;
}

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

//input pending
//temporary till a better method is determined
.oo-ui-pendingElement-pending {
	background-image: url(data:image/gif;base64,R0lGODlhGAAYAKECADhHZhchNgAruwAruyH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAQACACwAAAAAGAAYAAACNYwDqcvnyKJ6R1pqrMRQL955AChOXJmQqFqyouvBmnydq93irx7zs1/DoFLCITD4GI6KN0MBACH5BAUBAAMALAAAAAAYABgAAAI0jB+gy43YIntHWmqsxEk77H1UOIGkwnVkegLs+a5cG4e1d2v5NcO9bAKOfEHbz1hEPlquAgAh+QQFAQADACwAAAAAGAAYAAACM4x/oMuN2CJ7SUpq7MU64tA5XLh8ZDme5gl8oLqSLjvDaVjLMb53OX/z9TQ/YZA4tBQ1BQAh+QQFAQADACwAAAAAGAAYAAACNISDmcbtCp1kUM1Z15U5bJ59TyhSZAl06HGW6vqisTt/nSfX2w3rF59r2XwYIki4M46QjgIAIfkEBQEAAwAsAAAAABgAGAAAAjWEHal67bjWmyBK6izDTSfeeWBojYdoVlqqlilqwqMM0pyNecGLTzq/ivUeP2FwNswkSa5JAQAh+QQFAQADACwAAAAAGAAYAAACNIRvobvozuKbIDL6bMNIK9554OEFYyKe5YlabKW9qRqz83iDObdjPbWi1XC/TBFyDA11uwIAIfkEBQEAAwAsAAAAABgAGAAAAjWEj6G76M7imyAy+mzDSQfeaeDhfWPlnah4lqr7sq08prGlrtK9zzh/AW58v5rNSOPAkEVAAQAh+QQFAQADACwAAAAAGAAYAAACNISPF8ucr1qDUE6arMNIL955YKSNhheYAKqypjvCoMzRddnirx7zs3+zqFZAjCgnRCZ7pQIAIfkEBQEAAwAsAAAAABgAGAAAAjSEjxnLnH+ahFA2+qzDSC/eeWAkjoAXmGc5oqprwi0LyjXN2belrvyr6eFyQeAvVkQeZ5YCACH5BAEBAAMALAAAAAAYABgAAAI1jIGpa90LlXOxzlfhxTnt03lfKG4k8gUnkK7t+ZJxOHd1dlsjvMs9/QNeViyTy8gbHpVJQwEAOw==);
}

// 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: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) {
	filter: invert(1);
}

.oo-ui-indicatorElement-indicator {
	filter: invert(1)
}

// Icon exception
.oo-ui-iconElement-icon.oo-ui-icon-stop.oo-ui-image-invert,
.mw-editform .wikiEditor-ui-top .wikiEditor-ui-toolbar .oo-ui-popupToolGroup-handle .oo-ui-indicator-down {
	filter: none !important;
}

// oswf collapse gadget thingy
.oswf-tile {
	.oo-ui-iconElement-icon {
		&.oo-ui-icon-expand,
		&.oo-ui-icon-collapse {
			filter: none !important;
		}
	}
}

// Pop-up window
.oo-ui-window-content {
	background-color: @dark-wikitable-background;
	
	p,
	table.wikitable {
		color: @dark-text;
	}
		
	.oo-ui-widget-enabled:not(.oo-ui-buttonElement-active):not(.oo-ui-buttonElement-frameless) >  a.oo-ui-buttonElement-button {
		background-color: lighten( @ooui-input, 4% ) !important;
		border-color: @ooui-input-border !important;
			
		&:hover {
			background-color: lighten( @ooui-input-border, 4% ) !important;
			border-color: lighten( @ooui-input-border, 4% ) !important;
		}
	}
	
	.oo-ui-widget-enabled.oo-ui-buttonElement-active.oo-ui-buttonElement-framed > a.oo-ui-buttonElement-button {
		background-color: saturate(  @ooui-input, 25%  ) !important;
	}
}
// </pre>