mediawiki-skins-Citizen/skinStyles/mediawiki/mediawiki.rcfilters.filters.base.styles.less

/*
 * Citizen - Recent Changes Styles
 * TODO Split into separate files
 * https://starcitizen.tools
*/

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

.skin-citizen {
	.mw-rcfilters-ui {
		&-filter {
			&TagMultiselectWidget {
				&.oo-ui-widget-enabled {
					.oo-ui-tagMultiselectWidget-handle {
						border-color: var( --border-color-base );
						background-color: var( --background-color-framed );
					}
				}

				&-views-select-widget {
					&.oo-ui-widget {
						border-color: var( --border-color-base );
					}
				}

				&-wrapper-content-title {
					color: var( --color-base );
				}
			}

			&Menu {
				&HeaderWidget {
					&-header {
						border-color: var( --border-color-base--darker );
						background-color: var( --background-color-dp-16 );
						.boxshadow(2);
					}

					&-title {
						color: var( --color-base );
					}
				}

				&SectionOptionWidget {
					background-color: var( --background-color-framed );
					.boxshadow(1);

					&-header-title.oo-ui-labelElement-label {
						color: var( --color-base--subtle );
					}
				}

				&OptionWidget.oo-ui-flaggedElement-muted:not( .oo-ui-optionWidget-selected ) {
					background-color: var( --background-color-framed );
				}

				&SelectWidget-footer {
					border-top: 1px solid var( --border-color-base--darker );
					background-color: var( --background-color-dp-16 );
				}
			}
		}

		&-itemMenuOptionWidget {
			&-label {
				&-title {
					color: var( --color-base--emphasized );
				}

				&-desc {
					color: var( --color-base--subtle );
				}
			}

			&:hover {
				background-color: var( --background-color-quiet--hover );
			}

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

			&:not( :last-child ):not( .mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk ) {
				border-color: var( --border-color-base );
			}
		}

		&-viewSwitchWidget label.oo-ui-labelWidget {
			color: var( --color-base--subtle );
		}

		&-changesListWrapperWidget .mw-changeslist-legend {
			border-color: var( --border-color-base );
			background-color: var( --background-color-framed );
		}

		&-datePopupWidget {
			border-color: var( --border-color-base );
		}
	}

	// Override input field style because it feels out of place
	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
		border-color: var( --border-color-base );
	}
}