MediaWiki:Common.less/ooui.less: Difference between revisions

/* ======================
            OOUI
   ====================== */

// MediaWiki documentation: <https://www.mediawiki.org/wiki/OOUI>
// Interactive documentation: <https://doc.wikimedia.org/oojs-ui/master/demos/>
// Styles repo directory: <https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui>

// Variables
@ooui-normal: #ad9e9a; /* body-mid */
@ooui-normal-border: #bdb2ae; /* body-border */
@ooui-progressive: #6d5b54; /* body-dark */
@ooui-box-shadow-base--focus: inset 0 0 0 1px var(--ooui-accent);
@ooui-box-shadow-input-binary--active: inset 0 0 0 1px var(--ooui-progressive--hover);
@ooui-color-base--inverted: @white;

:root {
	--ooui-text: var(--text-color);
	
	--ooui-interface: var(--body-light);
	--ooui-interface-border: var(--body-border);
	--ooui-window-background: rgba(255,255,255,0.5);
	
	// use the same styles for :hover AND :active
	// :focus will use the accent var
	
	--ooui-normal: darken( @ooui-normal, 2% );
	// default styles basically add +2% luminance (from #f8f9fa to #ffffff)
	// there's also another hover color: #eaecf0 (like .oo-ui-tool-link:hover)
	// ...but we only have one var for button hover, so we should make sure 
	// the color does not blend with its bg
	--ooui-normal--hover: lighten(@ooui-normal, 4%);
	--ooui-normal-border: @ooui-normal-border;
	
	// use separate color for progressive buttons - BUT use link-color for
	// anywhere else that uses progressive colors; this isnt the greatest idea
	// and unifying them is better in the longer term
	--ooui-progressive: @ooui-progressive;
	--ooui-progressive--hover: lighten(@ooui-progressive, 10%);
	// border and bg are the same in non-normal buttons
	
	--ooui-accent: var(--link-color);
	
	// probably not worth adjusting <textarea>/<input>-esque bg in light mode
	--ooui-input: #fff;
	--ooui-input-border: @ooui-normal-border;
	--ooui-input-border--hover: darken(@ooui-normal-border, 19%);
	
	--ooui-disabled: lighten( @ooui-normal, 15%);
	--ooui-disabled-border: lighten( @ooui-normal-border, 10%);
	--ooui-disabled-text: var(--subtle-color);
	
	--ooui-pending-background-image: repeating-linear-gradient(-45deg, @SEARCH_BOX, @SEARCH_BOX 20px, @BODY_MAIN 20px, @BODY_MAIN 30px);
}

/* ----------------------
          widgets
   ---------------------- */

// need this one to be able to adjust the font color inside popups and etc
.oo-ui-widget {
	color: var(--ooui-text);
}

// combine checkbox and radio as theyre really similar
.oo-ui-checkboxInputWidget [type='checkbox'] + span,
.oo-ui-radioInputWidget [type='radio'] + span {
	background-color: var(--ooui-input);
	border-color: var(--ooui-input-border);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
	background-color: var(--ooui-progressive);
	border-color: var(--ooui-progressive);
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span {
	border-color: var(--ooui-progressive);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span {
	background-color: var(--ooui-progressive--hover);
	border-color: var(--ooui-progressive--hover);
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span {
	border-color: var(--ooui-progressive--hover);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span,
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span {
	border-color: var(--ooui-accent);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
	border-color: var(--ooui-accent);
	box-shadow: @ooui-box-shadow-base--focus;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span {
	background-color: var(--ooui-progressive--hover);
	border-color: var(--ooui-progressive--hover);
	box-shadow: @ooui-box-shadow-input-binary--active;
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span {
	background-color: var(--ooui-progressive--hover);
	border-color: var(--ooui-progressive--hover);
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span {
	border-color: var(--ooui-progressive--hover);
	box-shadow: @ooui-box-shadow-input-binary--active;
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span:before {
	border-color: var(--ooui-progressive--hover);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span {
	background-color: var(--ooui-progressive--hover);
	border-color: var(--ooui-accent);
	box-shadow: inset 0 0 0 1px var(--ooui-accent), inset 0 0 0 2px #fff;
}


.oo-ui-checkboxInputWidget [type='checkbox']:disabled + span,
.oo-ui-radioInputWidget [type='radio']:disabled + span {
	background-color: var(--ooui-disabled);
	border-color: var(--ooui-disabled); // same as bg for both
}

.oo-ui-dropdownWidget {
	&-handle {
		border-color: var(--ooui-normal-border);
	}

	&.oo-ui-widget-enabled &-handle {
		background-color: var(--ooui-normal);
		color: var(--ooui-text);

		&:hover {
			background-color: var(--ooui-normal--hover);
			color: var(--ooui-text);
			border-color: var(--ooui-normal-border);
		}

		&:active {
			color: var(--ooui-text);
		}

		&:focus {
			border-color: var(--ooui-accent);
			box-shadow: @ooui-box-shadow-base--focus;
		}
	}

	&.oo-ui-widget-enabled&-open &-handle {
		background-color: var(--ooui-normal--hover);
	}

	&.oo-ui-widget-disabled &-handle {
		color: var(--ooui-disabled-text);
		text-shadow: none; // wont look good on dark mode
		border-color: var(--ooui-disabled-border);
		background-color: var(--ooui-disabled);
	}
}

// input dropdowns
.oo-ui-dropdownInputWidget {
	// ooui styled dropdown thats actually an html <select>
	select {
		border-color: var(--ooui-normal-border);
	}
	
	option {
		background-color: var(--ooui-interface);
	}
	
	&.oo-ui-widget-enabled {
		background-color: var(--ooui-normal);
		
		&:hover {
			background-color: var(--ooui-normal--hover);
		}
		
		select {
			color: var(--ooui-text);
			
			&:hover,
			&:active {
				color: var(--ooui-text);
				border-color: var(--ooui-normal-border);
			}
			
			&:focus {
				border-color: var(--ooui-accent);
				box-shadow: @ooui-box-shadow-base--focus;
			}
			
			// there's a `oo-ui-indicator-down` class here that adds the pointer
			// icon, it's not a separate element so invert filter for dark mode
			// is infeasible
		}
	}
}

// in Special:Preferences
.oo-ui-labelWidget {
	&.oo-ui-inline-help {
		color: var(--byline-color);
	}
}

// dropdown selection menu
.oo-ui-menuSelectWidget {
	background-color: var(--ooui-interface);
	border-color: var(--ooui-interface-border);

	&-frameless {
		box-shadow: inset 0 -1px 0 0 var(--ooui-normal-border);
	}
}

.oo-ui-menuSectionOptionWidget {
	color: var(--byline-color);
}

// options eg. on page deletion/move
.oo-ui-menuOptionWidget {
	// hover
	&.oo-ui-optionWidget {
		// hover and selected option
		&-highlighted,
		// combined
		&-selected {
			background-color: var(--ooui-normal--hover);
			color: var(--ooui-text);
		}

		// hover on chosen option
		&-selected&-highlighted,
		&-pressed&-highlighted {
			color: var(--ooui-accent);
		}
	}

	// hover again
	&.oo-ui-widget-enabled {
		&.oo-ui-optionWidget {
			color: var(--ooui-text);
		}
	}

	// highlight & hover eg page deletion reason
//	&.oo-ui-optionWidget-selected&.oo-ui-optionWidget-highlighted,
//	&.oo-ui-optionWidget-pressed&.oo-ui-optionWidget-highlighted {
//		
//	}
}

.oo-ui-messageDialog {
	// eg exiting out editor without saving the edit modal
	&-title {
		color: inherit;
	}
}

.oo-ui-messageWidget {
	// all .messagebox like boxes
	&.oo-ui-messageWidget-block {
		// matching .errorbox
		&.oo-ui-flaggedElement-error {
			background-color: var(--errorbox-bg);
			border-color: var(--errorbox-border);
		}

		// eg warning when there's templatedata when editing a template
		// matching .warningbox
		&.oo-ui-flaggedElement-warning {
			background-color: var(--warningbox-bg);
			border-color: var(--warningbox-border);
		}

		// matching .successbox
		&.oo-ui-flaggedElement-success {
			background-color: var(--successbox-bg);
			border-color: var(--successbox-border);
		}

		&.oo-ui-flaggedElement-notice {
			background-color: var(--messagebox-info-background);
			border-color: var(--messagebox-info-border);
		}
	}

	// ideally we would use our own success and error colors, but this will do for now
	&.oo-ui-flaggedElement-error:not(.oo-ui-messageWidget-block),
	&.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
		color: var(--ooui-text);
	}
}

.oo-ui-optionWidget {
	&.oo-ui-widget-disabled {
		color: var(--ooui-disabled-text);
	}
}

.oo-ui-outlineControlsWidget {
	background-color: var(--ooui-normal);
}

// eg in ve "Options" window
.oo-ui-outlineOptionWidget {
	&.oo-ui-optionWidget-highlighted {
		background-color: var(--ooui-normal--hover);
		color: var(--ooui-text);
	}
}

.oo-ui-popupWidget {
	// Popups eg when interacting with templates in ve
	&-popup {
		background-color: var(--ooui-interface);
		border-color: var(--ooui-interface-border);
	}
	
	// popups anchors/arrow
	.ooui-anchor(@direction) {
		.oo-ui-popupWidget-anchor:after {
			border-@{direction}-color: var(--ooui-interface);
		}
		
		.oo-ui-popupWidget-anchor:before {
			border-@{direction}-color: var(--ooui-interface-border);
		}
	}
	
	&-anchored- {
		&top {
			.ooui-anchor(bottom);
		}
		&bottom {
			.ooui-anchor(top);
		}
		&start {
			.ooui-anchor(right);
		}
		&end {
			.ooui-anchor(left);
		}
	}
}

.oo-ui-searchWidget-query {
	border-bottom-color: var(--ooui-interface-border);
}

.oo-ui-selectFileWidget {
	&-dropTarget {
		background-color: var(--ooui-interface);
		border-color: var(--ooui-interface-border);
	}
	
	&.oo-ui-widget-enabled {
		&.oo-ui-selectFileWidget-dropTarget {
			background-color: var(--ooui-interface);
			
			&:hover {
				border-color: var(--ooui-input-border--hover);
			}
		}
	}
}

.oo-ui-tabOptionWidget {
	color: var(--ooui-text);

	.oo-ui-tabSelectWidget-framed & {
		&.oo-ui-optionWidget-selected {
			background-color: var(--body-dark);
			color: var(--ooui-text);
			
			& .oo-ui-labelElement-label {
				border-bottom-color: var(--body-border);
			}
		}
		
		&.oo-ui-widget-enabled {
			&:hover,
			&:active {
				background-color: var(--body-light);
				color: var(--ooui-text);
			}
		
			&.oo-ui-optionWidget-selected:hover {
				background-color: var(--body-dark);
			}
		}
	}

	.oo-ui-tabSelectWidget-frameless & {
		&.oo-ui-optionWidget-selected {
			color: var(--ooui-progressive);
			box-shadow: inset 0 -2px 0 0 var(--ooui-progressive);

			&:hover,
			&:focus {
				color: var(--ooui-progressive--hover);
				box-shadow: inset 0 -2px 0 0 var(--ooui-progressive--hover);
			}
		}
	}
}

.oo-ui-tabSelectWidget {
	// eg used on [[Special:Preferences]]
	&-framed {
		background: none; // actually uses something like --ooui-interface
		border-bottom: 1px solid var(--ooui-interface-border); // our customisation
	}
	
	// used in TabberNeue (even though we dont have it)
	&-frameless {
		box-shadow: inset 0 -1px 0 0 var(--ooui-interface-border);
	}
	
	&-mobile {
		// both use the following mixin in core; but we already have a similar
		// var in minerva.css for these stuff already used in navboxes
		/*
		.oo-ui-horizontal-gradient( @startColor: #eee, @endColor: #fff, @startPos: 0, @endPos: 100% ) {
			background-color: average( @startColor, @endColor );
			background-image: linear-gradient( to right, @startColor @startPos, @endColor @endPos );
		}
		*/
		
		&.oo-ui-tabSelectWidget-framed:after {
			// background instead of -image so the prev properties used as
			// fallback for ancient browsers are reset
			background: var(--mobile-navbox-linear-gradient);
		}
		&.oo-ui-tabSelectWidget-frameless:after {
			background: var(--mobile-navbox-linear-gradient);
		}
	}
}

// eg recent changes selected filter tag
.oo-ui-tagItemWidget {
	border-color: var(--ooui-normal-border);
	
	&.oo-ui-widget-enabled {
		color: var(--ooui-text);
		
		&:hover {
			background-color: var(--ooui-normal--hover);
			color: var(--ooui-text);
			border-color: var(--ooui-normal-border);
		}
		
		&:not( .oo-ui-tagItemWidget-fixed ) {
			background-color: var(--ooui-normal);
		}
		
		& .oo-ui-buttonElement-button {
			
			&:hover {
				background-color: var(--ooui-normal--hover);
			}
		}
	}
}

.oo-ui-tagMultiselectWidget {
	// rc/watchlist filter box
	&.oo-ui-widget-enabled {
		background-color: var(--ooui-interface);
		
		// and again - this time it's button bg
		&.oo-ui-tagMultiselectWidget-outlined {
			background-color: var(--ooui-normal);
			
			.oo-ui-tagItemWidget.oo-ui-widget-enabled {
				background-color: var(--ooui-interface);
			}
		}
	}
}

.oo-ui-textInputWidget {
	// eg RecentChanges filter changes input
	.oo-ui-inputWidget-input {
		background-color: var(--ooui-input);
		color: var(--ooui-text);
		border-color: var(--ooui-input-border);
	}

	&.oo-ui-widget-enabled {
		.oo-ui-inputWidget-input {
			&::placeholder {
				color: var(--subtle-color);
			}

			&:focus {
				border-color: var(--ooui-accent);
				box-shadow: @ooui-box-shadow-base--focus;
			}
			
			&[readonly]:not(.oo-ui-pendingElement-pending) {
				background-color: var(--ooui-disabled);
				color: var(--ooui-disabled-text);
			}
		}

		&:hover {
			.oo-ui-inputWidget-input {
				border-color: var(--ooui-input-border--hover);

				&:focus {
					border-color: var(--ooui-accent);
				}
			}
		}

		@media screen {
			@media ( min-width: 0 ) {
				textarea.oo-ui-inputWidget-input:focus {
					outline: 1px solid var(--ooui-accent);
				}
			}
		}
	}

	&.oo-ui-widget-disabled {
		.oo-ui-inputWidget-input {
			background-color: var(--ooui-disabled);
			color: var(--ooui-disabled-text);
			text-shadow: none; // wont look good on dark mode
			border-color: var(--ooui-disabled-border);
		}
	}
}

.oo-ui-toggleSwitchWidget {
	background-color: var(--ooui-input);
	border-color: var(--ooui-input-border);

	&.oo-ui-widget-enabled {
		.oo-ui-toggleSwitchWidget-grip {
			background-color: var(--ooui-input);
			border-color: var(--ooui-input-border);
		}

		&:hover {
			background-color: var(--ooui-input);
			border-color: var(--ooui-accent);

			.oo-ui-toggleSwitchWidget-grip {
				background-color: var(--ooui-input);
				border-color: var(--ooui-accent);
			}
		}

		&:active,
		&:active:hover,
		&:active:focus {
			background-color: var(--ooui-progressive--hover);
			border-color: var(--ooui-progressive--hover);
			box-shadow: @ooui-box-shadow-input-binary--active;

			.oo-ui-toggleSwitchWidget-grip {
				background-color: var(--ooui-input);
				border-color: var(--ooui-input);
			}
		}

		&:focus {
			border-color: var(--ooui-accent);
			box-shadow: @ooui-box-shadow-base--focus;

			.oo-ui-toggleSwitchWidget-grip {
				border-color: var(--ooui-accent);
			}
		}

		&.oo-ui-toggleWidget-on {
			background-color: var(--ooui-progressive);
			border-color: var(--ooui-progressive);

			.oo-ui-toggleSwitchWidget-grip {
				background-color: var(--ooui-input);
				border-color: var(--ooui-input);
			}

			&:hover {
				background-color: var(--ooui-progressive--hover);
				border-color: var(--ooui-progressive--hover);
			}

			&:active,
			&:active:hover {
				background-color: var(--ooui-progressive--hover);
				border-color: var(--ooui-progressive--hover);
			}

			&:focus {
				border-color: var(--ooui-progressive);

				&::before {
					border-color: @ooui-color-base--inverted;
				}
			}
		}
	}

	&.oo-ui-widget-disabled {
		background-color: var(--ooui-disabled);
		border-color: var(--ooui-disabled); // same as bg
	}
}

/* ----------------------
      elements/buttons
   ---------------------- */

// mixin for frameless progressive/destructive button
.mw-frameless-button-colored( @child, @color-text ) {
	> @{child},
	// no distinct color for hover
	> @{child}:hover {
		color: @color-text;
	}

	> @{child}:active,
	&.oo-ui-buttonElement-pressed > @{child} {
		// dont differentiate between :active and normal
		color: @color-text;
		border-color: @color-text;
	}
}

.mw-framed-button-colored( @child, @color-text, @hover, @border-color--hover, /* @active,*/ @focus ) {
	> @{child} {
		color: @color-text;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @border-color--hover;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus;
	}

	/* ugh uses lighten()
	> @{child}:active,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		background-color: lighten( @active, 60% );
		color: @active;
		border-color: @active;
	}
	*/
}

// mixin for framed progressive/destructive button
.mw-framed-primary-button-colored( @child, @color, @hover, @active, @focus ) {
	> @{child} {
		background-color: @color;
		border-color: @color;
	}

	> @{child}:hover {
		background-color: @hover;
		border-color: @hover;
	}

	> @{child}:focus {
		border-color: @focus;
		box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @ooui-color-base--inverted;
	}

	> @{child}:active,
	&.oo-ui-buttonElement-pressed > @{child},
	&.oo-ui-buttonElement-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		color: @ooui-color-base--inverted;
		background-color: @active;
		border-color: @active;
	}
}

.oo-ui-buttonElement {
	&-frameless {
		&.oo-ui-widget-enabled {
			> .oo-ui-buttonElement-button {
				color: var(--ooui-text);

				&:hover {
					color: var(--ooui-text);
				}

				&:focus {
					border-color: var(--ooui-accent);
					box-shadow: @ooui-box-shadow-base--focus;
				}
			}

			&.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
			> .oo-ui-buttonElement-button:active {
				color: var(--ooui-text);
			}

			&.oo-ui-flaggedElement {
				&-progressive {
					.mw-frameless-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-text) ); // try out using text color as the button label like hard-coded darkmode
				}

				// not needed
//				&-destructive {
//					.mw-frameless-button-colored( ~'.oo-ui-buttonElement-button' );
//				}
			}
		}

		&.oo-ui-widget-disabled {
			> .oo-ui-buttonElement-button {
				color: var(--ooui-disabled-text);
			}
		}
	}

	&-framed {
		&.oo-ui-widget-disabled {
			> .oo-ui-buttonElement-button {
				background-color: var(--ooui-disabled);
				border-color: var(--ooui-disabled-border);
			}
		}

		&.oo-ui-widget-enabled {
			> .oo-ui-buttonElement-button {
				background-color: var(--ooui-normal);
				color: var(--ooui-text);
				border-color: var(--ooui-normal-border);

				&:hover {
					background-color: var(--ooui-normal--hover);
					color: var(--ooui-text);
					border-color: var(--ooui-normal-border);
				}

				&:focus {
					border-color: var(--ooui-accent);
					box-shadow: @ooui-box-shadow-base--focus;
				}
			}

			&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
				background-color: var(--ooui-progressive--hover);
				color: #fff; // needed, else it would be overriden by non-active styles
				border-color: var(--ooui-progressive--hover);

				&:focus {
					border-color: var(--ooui-progressive--hover);
					box-shadow: @ooui-box-shadow-base--focus;
				}
			}

			// same as :hover above
			> .oo-ui-buttonElement-button:active,
			&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
				background-color: var(--ooui-normal--hover);
				color: var(--ooui-text);
				border-color: var(--ooui-normal-border);
			}

			&.oo-ui-flaggedElement {
				&-progressive {
					.mw-framed-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-text), var(--ooui-normal--hover), var(--ooui-progressive--hover), var(--ooui-accent) );
				}

				&-destructive {
//					.mw-framed-button-colored( ~'.oo-ui-buttonElement-button', @color-destructive-non-primary, @background-color-framed--hover, @border-color-framed-destructive--hover, @color-destructive--active, @color-destructive--focus );
					// since we arent changing destructive
					> .oo-ui-buttonElement-button {
						color: var(--ooui-text);
						
						&:hover {
							background-color: var(--ooui-normal--hover);
						}
					}
				}
			}

			&.oo-ui-flaggedElement-primary {
				&.oo-ui-flaggedElement {
					&-progressive {
						.mw-framed-primary-button-colored( ~'.oo-ui-buttonElement-button', var(--ooui-progressive), var(--ooui-progressive--hover), var(--ooui-progressive--hover), var(--ooui-accent) );
					}

					// dont need
//					&-destructive {
//						.mw-framed-primary-button-colored( ~'.oo-ui-buttonElement-button' );
//					}
				}
			}
		}
	}
}

.oo-ui-pendingElement-pending {
	background-image: var(--ooui-pending-background-image);
	background-size: 200%;
	animation: oo-ui-pendingElement-stripes 6s linear infinite;

	@keyframes oo-ui-pendingElement-stripes {
		100% {
			background-position: 100%;
		}
	}
}

/* ----------------------
          windows
   ---------------------- */

.oo-ui-messageDialog {
	&-content > .oo-ui-window-foot {
		outline-color: var(--ooui-interface-border);
	}

	&-message {
		color: var(--ooui-text);
	}

	&-actions {
		// eg ace editor "Go to line number..." window
		&-horizontal .oo-ui-actionWidget {
			border-right-color: var(--ooui-interface-border);
		}

		&-vertical .oo-ui-actionWidget {
			border-bottom-color: var(--ooui-interface-border);
		}
	}
}

.oo-ui-processDialog {
	&-content {
		.oo-ui-window-head,
		.oo-ui-window-foot {
			outline-color: var(--ooui-interface-border);
		}
	}

	// need to reoverride so buttons wont have weird borders
	.oo-ui-actionWidget {
		> .oo-ui-buttonElement-button {
			border-top-color: transparent;
			border-bottom-color: transparent;

			&:hover,
			&:active {
				border-top-color: transparent;
				border-bottom-color: transparent;
			}
		}

		&:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) {
			> .oo-ui-buttonElement-button {
				&:hover,
				&:active {
					border-right-color: var(--ooui-interface-border);
					border-left-color: transparent;
				}

				&:focus {
					border-color: var(--ooui-accent);
				}
			}
		}
	}

	&-actions {
		&-safe,
		&-other {
			.oo-ui-actionWidget > .oo-ui-buttonElement-button {
				border-right-color: var(--ooui-normal-border);
				border-left-color: transparent;
			}
		}

		&-safe {
			.oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) {
				> .oo-ui-buttonElement-button {
					&:hover {
						background-color: var(--ooui-normal--hover);
						border-right-color: var(--ooui-interface-border);
					}
				}
			}
		}
	}
}

.oo-ui-windowManager {
	&-modal {
		// bg behind windows
		> .oo-ui-dialog {
		background-color: var(--ooui-window-background);
		}

		// all popup windows
		> .oo-ui-dialog > .oo-ui-window-frame {
			background-color: var(--ooui-interface);
		}
	}
	
	// window outlines
	&-modal&-floating > .oo-ui-dialog > .oo-ui-window-frame {
		border-color: var(--ooui-interface-border);
	}
}

// we need this one to be able to adjust the font color inside windows
.oo-ui-window {
	color: var(--ooui-text);
}

/* ----------------------
          tools
   ---------------------- */

.mw-tool-colored( @child /*, @color-text*/ , @hover, @active , @focus , @active-text: @active ) {
//	> @{child} {
//		color: @color-text;
//	}

	> @{child}:hover {
		background-color: @hover;
	}

	> @{child}:focus {
		outline: 1px solid @focus;
		box-shadow: inset 0 0 0 1px @focus;
	}

	> @{child}:active,
	&.oo-ui-tool-active > @{child},
	&.oo-ui-popupToolGroup-active > @{child} {
		background-color: var(--ooui-normal--hover);
		color: @active-text;
		box-shadow: none;
	}
}

.mw-primary-tool-colored( @child, @color, @hover, @active, @focus ) {
	> @{child} {
//		color: @ooui-color-base--inverted;
		background-color: @color;
	}

	> @{child}:hover {
		background-color: @hover;
	}

	> @{child}:focus {
//		outline: @border-width-base @border-style-base @focus;
		box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @ooui-color-base--inverted;
	}

	> @{child}:active,
	&.oo-ui-tool-active > @{child} {
//		color: @ooui-color-base--inverted;
		background-color: @active;
//		box-shadow: none;
	}

//	&.oo-ui-widget-disabled > @{child},
//	&.oo-ui-widget-disabled > @{child}:active {
//		background-color: @background-color-filled--disabled;
//		color: @color-filled--disabled;
//	}
}

@ooui-toolbar: var(--ooui-interface);
@ooui-toolbar-border: var(--body-mid);

// mainly used by ve and source editor
// toolbar
.oo-ui-toolbar {
	&-bar {
		background-color: @ooui-toolbar;
		color: var(--ooui-text);
		
		// toolbar borders
		.oo-ui-toolbar-position-top > & {
			border-bottom-color: @ooui-toolbar-border;
		}
		
		.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
			border-right-color: @ooui-toolbar-border;
		}
	}
}

.oo-ui-tool {
	&.oo-ui-widget-enabled {
		.mw-tool-colored( ~'.oo-ui-tool-link', var(--ooui-normal--hover), var(--ooui-accent), var(--ooui-accent) );

//		&.oo-ui-flaggedElement {
//			&-progressive {
//				.mw-tool-colored( ~'.oo-ui-tool-link', @background-color-tool--hover, @color-primary--active, @color-primary--focus );
//			}

//			&-destructive {
//				.mw-tool-colored( ~'.oo-ui-tool-link', @color-destructive-non-primary, @background-color-tool--hover, @color-destructive--active, @color-destructive--focus );
//			}
//		}

		&.oo-ui-flaggedElement-primary {
			&.oo-ui-flaggedElement {
				&-progressive {
					.mw-primary-tool-colored( ~'.oo-ui-tool-link', var(--ooui-progressive), var(--ooui-progressive--hover), var(--ooui-progressive--hover), var(--ooui-accent) );
				}

//				&-destructive {
//					.mw-primary-tool-colored( ~'.oo-ui-tool-link', @color-destructive, @color-destructive--hover, @color-destructive--active, @color-destructive--focus );
//				}
			}
		}
	}
}

.oo-ui-listToolGroup {
	// eg "Page options" dropdown
	&-tools .oo-ui-tool {
		&.oo-ui-widget-enabled {
			background-color: var(--ooui-normal);

			&:hover {
				background-color: var(--ooui-normal--hover);
				color: var(--ooui-text);
			}
		}

		// does not match source ordering
		&-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
			color: var(--ooui-progressive)
		}
	}
}

// left-hand tool group
.oo-ui-menuToolGroup {
	border-left-color: @ooui-toolbar-border;
	border-right-color: @ooui-toolbar-border;
}

.oo-ui-popupToolGroup {
	// dropdown menu
	&-tools {
		background-color: @ooui-toolbar;
		border-color: @ooui-toolbar-border;
	}

	&.oo-ui-widget-enabled {
		// eg hover "Insert" 
		> .oo-ui-popupToolGroup-handle {
			&:hover {
				background-color: var(--ooui-normal--hover);
			}

			&:focus {
				outline: 1px solid var(--ooui-accent);
				box-shadow: @ooui-box-shadow-base--focus;
			}
		}

		// ve "Page options" again
		.oo-ui-toolbar-actions & {
			> .oo-ui-popupToolGroup-handle {
				&:hover {
					// same as button hover
					border-right-color: var(--ooui-normal--hover);
				}
			}
		}
	}

	// might not match source ordering
	&-tools .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
		box-shadow: inset 0 0 0 2px var(--ooui-accent);
	}

	&-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
		color: var(--ooui-progressive);
	}

	&.oo-ui-popupToolGroup-active {
		> .oo-ui-popupToolGroup-handle {
			// aka active
			background-color: var(--ooui-normal);
			color: var(--ooui-accent);

			&:hover {
				background-color: var(--ooui-normal--hover);
				color: var(--ooui-accent);
			}
		}
	}
}

/* ----------------------
          layouts
   ---------------------- */

.oo-ui-bookletLayout {
	&-outlinePanel {
		> .oo-ui-outlineControlsWidget {
			border-top-color: var(--ooui-interface-border);
		}
	}

	// eg "Show options" in ve template editor
	> .oo-ui-menuLayout-menu {
		border-right-color: var(--ooui-interface-border);
	}
}

.oo-ui-fieldLayout {
	// disabled text color in layouts
	&-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
		color: var(--ooui-disabled-text);
	}
}

// ooui <fieldset>
.oo-ui-panelLayout {
	&-framed {
		border-color: var(--sidebar); // along with <h1/2> border
	}
}

/* ----------------------
          others
   ---------------------- */

.oo-ui-icon-settings {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esettings%3C/title%3E%3Cg transform='translate(10 10)'%3E%3Cpath id='a' d='M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3'/%3E%3Cuse xlink:href='%23a' transform='rotate(45)'/%3E%3Cuse xlink:href='%23a' transform='rotate(90)'/%3E%3Cuse xlink:href='%23a' transform='rotate(135)'/%3E%3C/g%3E%3Cpath d='M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7'/%3E%3C/svg%3E");
}

.oo-ui-icon-clear {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclear%3C/title%3E%3Cpath d='M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm5.66 14.24-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z'/%3E%3C/svg%3E");
}

// --- widgets in core mediawiki ---
// DateInputWidget
.mw-widget-dateInputWidget {
	&-handle {
		background-color: var(--ooui-input);
		color: var(--ooui-text);
		border-color: var(--ooui-input-border);
	}
	
	&-calendar {
		background-color: var(--ooui-interface);
	}
	
	&.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover {
		border-color: var(--ooui-input-border--hover);
	}
}

// CalendarWidget
.mw-widget-calendarWidget {
	border-color: var(--ooui-interface-border);

	&:focus {
		border-color: var(--ooui-accent);
		box-shadow: @ooui-box-shadow-base--focus;
	}

	// focused month
	&-day,
	// week day name
	&-day-heading {
		color: var(--ooui-text);
	}

	// other months
	&-day-additional {
		color: var(--ooui-text);
		opacity: 0.67;
	}

	&-day-today {
		box-shadow: inset 0 0 0 1px var(--ooui-accent);
	}

	&-item {
		&:hover {
			background-color: var(--ooui-progressive);
		}

		&-selected {
			background-color: var(--ooui-progressive--hover);
		}
	}
}

// e.g. on [[Special:AbuseFilter/examine]]
.mw-widgets-datetime-calendarWidget {
	background-color: var(--ooui-interface);
	border-color: var(--ooui-interface-border);

	&:focus {
		border-color: var(--ooui-accent);
		box-shadow: inset 0 0 0 1px var(--ooui-accent), 0 2px 2px 0 rgba(0,0,0,0.25);
	}

	&-grid {
		.mw-widgets-datetime-calendarWidget-cell {
			&.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button {
				.oo-ui-labelElement-label {
					color: var(--subtle-color);
				}
			}

			&.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button {
				background-color: var(--ooui-progressive--hover);
			}
		}
	}
}

// input box
.mw-widgets-datetime-dateTimeInputWidget {
	&-handle {
		background-color: var(--ooui-input);
		color: var(--ooui-text);
		border-color: var(--ooui-input-border);
	}

	&.oo-ui-widget-enabled {
		&.mw-widgets-datetime-dateTimeInputWidget-handle {
			&:hover {
				border-color: var(--ooui-input-border--hover);
			}
		}

		&:hover {
			input,
			textarea {
				border-color: var(--ooui-input-border--hover);
			}
		}

		.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
			background-color: var(--ooui-normal);
		}
	}
}