mediawiki-skins-Citizen/skinStyles/ooui/oojs-ui-widgets.less

/*
 * Citizen
 *
 * SkinStyles for OOUI
 * Module: oojs-ui-widgets
 * Version: v0.44.3
 *
 * Date: 2022-11-30
*/

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

.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
	border-right-color: var( --border-color-base );
}

.oo-ui-buttonSelectWidget {
	border-radius: var( --border-radius--small );
}

.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
	border-top-left-radius: var( --border-radius--small );
	border-bottom-left-radius: var( --border-radius--small );
}

.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
	border-top-right-radius: var( --border-radius--small );
	border-bottom-right-radius: var( --border-radius--small );
}

.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
	border-left-color: var( --border-color-base );
}

.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}

.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
	color: var( --color-emphasized );
	background-color: var( --background-color-primary--active );
}

.oo-ui-toggleSwitchWidget {
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
	box-shadow: inset 0 0 0 1px var( --color-progressive--active );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
	border-color: var( --color-progressive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
	background-color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
	border-color: var( --color-progressive );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
	border-color: var( --color-subtle );
	box-shadow: inset 0 0 0 1px var( --color-subtle );
}

.oo-ui-selectFileWidget-dropTarget {
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius--small );
}

.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
	background-color: transparent;
}

.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
	background-color: var( --color-surface-1 );
	border-color: var( --color-progressive--hover );
}

.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
	color: var( --color-progressive--active );
	background-color: var( --background-color-primary--hover );
}

.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.oo-ui-outlineSelectWidget:focus {
	box-shadow: inset 0 0 0 2px var( --color-progressive );
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--hover );
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
	color: var( --color-progressive );
	background-color: var( --background-color-primary--hover );
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
	color: var( --color-progressive );
	background-color: var( --background-color-primary--active );
}

.oo-ui-outlineControlsWidget {
	background-color: var( --color-surface-1 );
}

.oo-ui-tabSelectWidget-framed {
	background-color: var( --color-surface-2 );
}

.oo-ui-tabSelectWidget-frameless {
	box-shadow: inset 0 -1px 0 0 var( --border-color-base );
}

.oo-ui-tabOptionWidget {
	font-weight: var( --font-weight-medium );
	color: var( --color-base );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
	border-top-left-radius: var( --border-radius--small );
	border-top-right-radius: var( --border-radius--small );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
	color: var( --color-emphasized );
	background-color: var( --color-surface-0 );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
	border-bottom-color: var( --color-surface-0 );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
	color: var( --color-emphasized );
	background-color: var( --background-color-quiet--hover );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
	color: var( --color-emphasized );
	background-color: var( --background-color-quiet--active );
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
	background-color: var( --color-surface-0 );
}

.oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
	border-bottom-color: var( --color-progressive );
}

.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
	box-shadow: inset 0 0 0 0 var( --color-progressive );
}

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

.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
	color: var( --color-progressive--hover );
	box-shadow: inset 0 -2px 0 0 var( --color-progressive--hover );
}

.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
	color: var( --color-progressive--active );
	box-shadow: inset 0 -2px 0 0 var( --color-progressive--active );
}

.oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
	border-radius: var( --border-radius--small );
	box-shadow: inset 0 0 0 2px var( --color-progressive );
}

.oo-ui-tagMultiselectWidget-handle {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius--small );
}

.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
	color: var( --color-emphasized );
}

.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder {
	color: var( --color-subtle );
}

.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
	color: var( --color-emphasized );
}

.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::placeholder {
	color: var( --color-subtle );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
	background-color: var( --color-surface-1 );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
	border-color: var( --color-subtle );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
	border-color: var( --color-destructive );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
	background-color: var( --color-surface-2 );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
	background-color: var( --color-surface-2--hover );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
	border-color: var( --color-destructive );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
	color: var( --color-destructive );
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
	color: var( --color-subtle );
	text-shadow: none;
	background-color: var( --color-surface-3 );
	border-color: var( --color-surface-4 );
}

.oo-ui-tagItemWidget {
	border-color: var( --border-color-base );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled {
	color: var( --color-base );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
	color: var( --color-base );
	background-color: var( --color-surface-2--hover );
	border-color: var( --border-color-base );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) {
	background-color: var( --color-surface-2 );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
	border-color: var( --color-destructive );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
	border-color: var( --color-destructive );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
	border-color: var( --color-destructive );
	box-shadow: inset 0 0 0 1px var( --color-destructive );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
	background-color: var( --color-surface-2--hover );
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
	background-color: var( --color-surface-2--active );
}

.oo-ui-tagItemWidget.oo-ui-widget-disabled {
	color: var( --color-subtle );
	text-shadow: none;
	background-color: var( --color-surface-3 );
	border-color: var( --color-surface-4 );
}

.oo-ui-searchWidget-query {
	border-bottom: 1px solid var( --border-color-base );
}