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

/*
 * Citizen - OOJS-UI Styles
 * https://starcitizen.tools
*/

@import '../../resources/variables.less';
@import '../../resources/mixins.less';

/*!
 * OOUI v0.26.4
 * https://www.mediawiki.org/wiki/OOUI
 *
 * Copyright 2011–2018 OOUI Team and other contributors.
 * Released under the MIT license
 * http://oojs.mit-license.org
 *
 * Date: 2018-04-17T22:24:02Z
 */

.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
	border-color: @base-80;
}

.oo-ui-searchWidget-query {
	border: 0;
	.boxshadow(2);
}

.oo-ui-tagItemWidget {
	border-color: @base-80;
}

@media ( prefers-color-scheme: dark ) {
	.oo-ui-bookletLayout-outlinePanel {
		> .oo-ui-outlineControlsWidget {
			border-top: 1px solid @dark-bg-30;
		}
	}

	.oo-ui-bookletLayout {
		> .oo-ui-menuLayout-menu {
			border-right: 1px solid @dark-bg-30;
		}
	}

	.oo-ui-buttonSelectWidget {
		.oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
			border-left-color: @dark-bg-0;
		}
	}

	.oo-ui-toggleSwitchWidget {
		background-color: @dark-bg-10;
		border-color: @dark-bg-60;

		&.oo-ui-widget-enabled {
			.oo-ui-toggleSwitchWidget-grip {
				background-color: @dark-bg-10;
				border-color: @dark-bg-60;
			}

			&:hover {
				background-color: @dark-bg-0;

				.oo-ui-toggleSwitchWidget-grip {
					background-color: @dark-bg-0;
				}
			}

			&:active,
			&:active:hover,
			&:active:focus {
				.oo-ui-toggleSwitchWidget-grip {
					background-color: @dark-bg-0;
					border-color: @dark-bg-0;
				}
			}

			&.oo-ui-toggleWidget-on {
				.oo-ui-toggleSwitchWidget-grip {
					background-color: @dark-bg-0;
					border-color: @dark-bg-0;
				}

				&:focus:before {
					border-color: @dark-bg-0;
				}
			}
		}

		&.oo-ui-widget-disabled {
			background-color: @dark-bg-30;
			border-color: @dark-bg-30;

			&.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
				border-color: @dark-bg-0;
				box-shadow: inset 0 0 0 1px @dark-bg-0;
			}

			&.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
				background-color: @dark-bg-0;
			}
		}
	}

	.oo-ui-selectFileWidget-dropTarget {
		background-color: @dark-bg-0;
		border-color: @dark-bg-50;
	}

	.oo-ui-selectFileWidget {
		&.oo-ui-widget-enabled {
			&.oo-ui-selectFileWidget-dropTarget {
				background-color: @dark-bg-0;

				&:hover {
					border-color: @dark-bg-60;
				}
			}

			&.oo-ui-selectFileWidget-canDrop {
				&.oo-ui-selectFileWidget-dropTarget,
				.oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
					background-color: @dark-bg-20;
				}
			}
		}

		&.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
		&.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
			background-color: @dark-bg-20;
			border-color: @dark-bg-30;
		}
	}

	.oo-ui-outlineOptionWidget {
		&.oo-ui-optionWidget-highlighted {
			background-color: @dark-bg-20;
			color: @dark-text-100;
		}

		&.oo-ui-optionWidget-selected {
			background-color: @dark-bg-20;
		}
	}

	.oo-ui-outlineControlsWidget {
		background-color: @dark-bg-0;
	}

	.oo-ui-tabSelectWidget {
		background-color: @dark-bg-20;
	}

	.oo-ui-tabOptionWidget {
		color: @dark-text-80;

		&.oo-ui-optionWidget-selected {
			background-color: @dark-bg-0;
			color: @dark-text-100;

			.oo-ui-labelElement-label {
				border-bottom-color: @dark-bg-0;
			}
		}

		&.oo-ui-widget-enabled {
			&:hover {
				background-color: rgba( 0, 0, 0, 0.3 );
				color: @dark-text-90;
			}

			&:active {
				background-color: rgba( 0, 0, 0, 0.8 );
				color: @dark-text-100;
			}

			&.oo-ui-optionWidget-selected {
				&:hover {
					background-color: @dark-bg-0;
				}
			}
		}
	}

	.oo-ui-tagMultiselectWidget-handle {
		border-color: @dark-bg-50;

		> .oo-ui-tagMultiselectWidget-content {
			> input {
				color: @dark-text-100;

				&::placeholder {
					color: @dark-text-70;
				}
			}
		}
	}

	.oo-ui-tagMultiselectWidget {
		&.oo-ui-widget-enabled {
			.oo-ui-tagMultiselectWidget-handle {
				background-color: @dark-bg-0;
			}

			&.oo-ui-tagMultiselectWidget-inlined {
				&:hover {
					.oo-ui-tagMultiselectWidget-handle {
						border-color: @dark-text-70;
					}
				}
			}

			&.oo-ui-tagMultiselectWidget-outlined {
				.oo-ui-tagMultiselectWidget-handle {
					background-color: @dark-bg-10;

					&.oo-ui-widget-enabled {
						background-color: @dark-bg-0;
					}
				}

				.oo-ui-tagItemWidget {
					&.oo-ui-widget-enabled {
						background-color: @dark-bg-0;
					}
				}
			}
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tagMultiselectWidget-handle {
				color: @dark-text-70;
				text-shadow: 0 1px 1px @dark-bg-0;
				border-color: @dark-bg-30;
				background-color: @dark-bg-20;
			}
		}
	}

	.oo-ui-tagItemWidget {
		border-color: @dark-bg-50;

		&.oo-ui-widget-enabled {
			color: @dark-text-90;

			&:hover {
				background-color: @dark-bg-0;
				color: @dark-text-80;
				border-color: @dark-bg-50;
			}

			&:not( .oo-ui-tagItemWidget-fixed ) {
				background-color: @dark-bg-10;
			}

			.oo-ui-buttonElement-button {
				&:hover {
					background-color: @dark-bg-0;
				}

				&:active {
					background-color: @dark-bg-30;
				}
			}
		}

		&.oo-ui-widget-disabled {
			background-color: @dark-bg-20;
			color: @dark-text-70;
			border-color: @dark-bg-30;
			text-shadow: 0 1px 1px @dark-bg-0;
		}
	}

	.oo-ui-searchWidget-query {
		border-bottom: 1px solid @dark-bg-30;
	}
}