mediawiki-skins-Citizen/skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less

/*
 * Citizen
 *
 * SkinStyles for Extension:WSSearch
 * Module: ext.WSSearchFront.module
 * Version: 3.5.4 c27ebcb5
 *
 * Date: 2021-11-23
*/

:root {
	--tint-1: var( --color-surface-2 );
	--border-1: 1px solid var( --color-surface-2--active );
}

.wssearch--filter-options-search,
.wssearch--search-input {
	border: 1px solid var( --border-color-base );
	background-color: var( --color-surface-2 );
	color: var( --color-base );

	&:hover {
		border-color: #72777d;
	}

	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color );
	}
}

.wssearch--search-button {
	border: 1px solid var( --border-color-input );
	background-color: var( --base-color );
	color: var( --color-base );

	&:hover {
		border-color: var( --border-color-input--hover );
		background-color: var( --base-color-lighter );
	}

	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
	}

	&:active {
		border-color: var( --base-color-darker );
		background-color: var( --base-color-darker );
		color: var( --color-base );
	}
}

.wssearch--selected-filter {
	background-color: var( --color-surface-2 );
	transition: var( --transition-hover );
	transition-property: background-color, color, border-color, box-shadow;

	&:hover {
		border-color: var( --base-color-lighter );
		background-color: var( --color-surface-2--hover );
	}

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

.wssearch--checkbox-input-checkbox {
	&:checked {
		+ .wssearch--checkbox-input-icon {
			border-color: var( --color-base );
			background-color: var( --color-primary--active );
		}

		&:hover {
			border-color: var( --base-color-lighter );
			background-color: var( --base-color-lighter );
		}

		&:focus {
			border-color: var( --color-base );
			background-color: var( --color-base );
			box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
		}
	}

	&:hover {
		+ .wssearch--checkbox-input-icon {
			border-color: var( --base-color-lighter );
		}
	}

	&:focus {
		+ .wssearch--checkbox-input-icon {
			border-color: var( --color-base );
			box-shadow: inset 0 0 0 1px var( --base-color );
		}
	}
}

.wssearch--checkbox-input-icon {
	border-color: #72777d;
	background-color: var( --color-surface-0 );
}

.wssearch--selected-clear {
	color: var( --color-link );

	&:hover {
		color: var( --color-link--hover );
	}
}

.wssearch--order__sortorder {
	border: 1px solid #a2a9b1;
	background-color: var( --color-surface-0 );
	color: var( --color-base );

	&:active,
	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
	}
}

.wssearch--size__select,
.wssearch--order__select {
	border: 1px solid #a2a9b1;
	background-color: var( --color-surface-0 );
	color: var( --color-base );

	&:hover {
		border-color: #72777d;
	}

	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color );
	}
}

.wssearch--order__label,
.wssearch--size__label {
	color: var( --color-base );
}

.wssearch--order__option,
.wssearch--size__option {
	background-color: var( --color-surface-2 );
	color: var( --color-base--emphasized );
}

.wssearch-hit-prop-loading-bg {
	background: linear-gradient( 135deg, var( --color-surface-2 ) 25%, transparent 0, transparent 50%, var( --color-surface-2 ) 0, var( --color-surface-2 ) 75%, transparent 0, transparent );
	background-color: var( --color-surface-2--active );
}

.wssearch--hit-pill {
	background-color: var( --color-surface-0 );

	a {
		color: var( --color-link );

		&:hover {
			color: var( --base-color-lighter );
		}
	}
}

.wssearch--hit__date,
.wssearch--hit__namespace,
.wssearch--hit__pagetitle {
	color: var( --color-success );
}

.wssearch--pagers {
	.wssearch--pager {
		&.active {
			background-color: var( --color-primary );
			color: var( --color-base );
		}

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

	.wssearch--pager-back-icon {
		background-image: var( --back-icon );

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

	.wssearch--pager-forward-icon {
		background-image: var( --next-icon );

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

	.wssearch--pager-hide {
		color: var( --color-base );

		.wssearch--pager-back-icon,
		.wssearch--pager-forward-icon {
			color: var( --color-base );
		}
	}
}

.wssearch--slider-input-icon {
	border: 2px solid #a2a9b1;
}

.wssearch--selected-filters__combobox {
	&:not( :empty ) {
		border: var( --border-1 );
		background: var( --tint-1 );
	}

	.wssearch--checkbox {
		background-color: var( --color-surface-2 );
		color: var( --color-base--emphasized );

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

		&-selected {
			background-color: var( --color-surface-3 );
			color: #36c;
		}

		&.wssearch--checkbox-selected:hover {
			background-color: var( --color-surface-2 );
		}

		&:not( :last-child ) {
			border-bottom: 1px solid var( --color-surface-2--active );
		}

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

.wssearch--facetsearch-input {
	border: 1px solid #a2a9b1;
	background-color: var( --color-surface-0 );
	color: var( --color-base );

	&:hover {
		border-color: #72777d;
	}

	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color );
	}
}

.wssearch--filter-showmore {
	border: var( --border-1 );
	background-color: var( --tint-1 );

	&:hover {
		border-color: var( --color-base );
		background-color: var( --color-surface-0 );
		color: var( --color-base );
	}

	&:active,
	&:focus {
		border-color: var( --color-base );
		box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
	}
}

.wssearch--table {
	.wssearch--hits {
		background-color: #a2a9b1;
	}

	.wssearch--hit > * {
		background-color: var( --color-surface-0 );
	}

	&__header > * {
		background-color: var( --color-surface-2--active );
	}
}

.skin-citizen-dark {
	.wssearch--filter-icon__more,
	.wssearch--search-icon,
	.wssearch--search-clear,
	.wssearch--pager-back-icon,
	.wssearch--pager-forward-icon {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}

@media ( max-width: 500px ) {
	.wssearch--filters {
		background: var( --color-surface-0 );

		&__open {
			border: 1px solid var( --base-color );
			background-color: var( --color-base );
			color: var( --color-base );
		}
	}
}