mediawiki-skins-Citizen/resources/skins.citizen.styles.search/skins.citizen.styles.search.less

//
// Citizen - Search styles
// https://starcitizen.tools
//

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

:root {
	--suggestion-dropdown-background-color: @base-100;

	--suggestion-link-active-background-color: @accent-90;
	--suggestion-link-active-suggestion-title-color: @accent-50;

	--suggestion-title-color: @base-10;

	--suggestion-highlight-color: @base-30;

	--suggestion-description-color: @base-30;

	--suggestion-thumbnail-background-color: @base-80;

	--suggestion-special-border-color: @base-80;
	--suggestion-special-hover-background-color: @accent-90;
	--suggestion-special-color: @base-10;
}

:root.skin-citizen-dark {
	--suggestion-dropdown-background-color: @dark-bg-50;

	--suggestion-link-active-background-color: @accent-10;
	--suggestion-link-active-suggestion-title-color: @accent-90;

	--suggestion-title-color: @dark-text-90;

	--suggestion-highlight-color: @dark-text-70;

	--suggestion-description-color: @dark-text-70;

	--suggestion-thumbnail-background-color: @base-80;

	--suggestion-special-border-color: @dark-bg-40;
	--suggestion-special-hover-background-color: @accent-10;
	--suggestion-special-color: @dark-text-90;
}

#typeahead-suggestions {
	position: absolute;
	z-index: 90;
	top: 38px;
}

.suggestions-dropdown {
	display: flex; // Needed to show margin
	width: @search-bar-width;
	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
	flex-direction: column;
	padding-top: 4px;
	background: var( --suggestion-dropdown-background-color );
	border-radius: 0 0 @border-radius-large @border-radius-large;
	.boxshadow(4);
}

.suggestion {
	&-link {
		display: flex;
		align-items: center;
		padding: 8px 20px;

		&.active {
			background-color: var( --suggestion-link-active-background-color );

			.suggestion-title {
				color: var( --suggestion-link-active-suggestion-title-color );
			}
		}
	}

	&-text {
		margin-left: 15px;
	}

	&-title {
		display: inline-block; // so that the margin does not occupy space
		margin: 0 0 0.78rem * @content-scaling 0;
		color: var( --suggestion-title-color );
		font-size: @content-h6-size;
		line-height: 1.872rem * @content-scaling;
	}

	&-highlight {
		color: var( --suggestion-highlight-color );
		font-style: normal;
	}

	&-description {
		margin: 0;
		color: var( --suggestion-description-color );
		font-family: @fonts;
		font-size: @content-caption-size;
		line-height: 1.43rem * @content-scaling;
	}

	&-thumbnail {
		width: 70px;
		min-width: 70px; // so it won't be squeezed by the content text
		height: 60px;
		background-color: var( --suggestion-thumbnail-background-color );
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: @border-radius-small;
	}
}

#suggestion {
	&-link {
		&-first {
			margin-top: 8px;
		}

		&-last {
			margin-bottom: 8px;
		}
	}

	&-special {
		display: flex;
		align-items: center;
		padding: 1rem;
		border-top: 1px solid @base-80;
		border-radius: 0 0 @border-radius-large @border-radius-large;
		color: @base-10;

		&-icon {
			width: 20px;
			min-width: 20px;
			height: 20px;
			margin: 0 14px 0 10px;
			background-repeat: no-repeat;
		}

		&-text {
			overflow: hidden;
			padding: 5px 0; // make it looks more center aligned
			font-family: @fonts;
			font-size: @content-caption-size;
			font-weight: bold;
			text-overflow: ellipsis; // handle overflow
		}

		&:hover {
			background-color: @accent-90;
		}
	}
}

/* using element selector to override default anchor styles */
a.suggestion-link:hover {
	text-decoration: none;
}

// RTL tweaks
.rtl {
	#searchform {
		right: unset;
		left: @icon-box-size + @margin-side + @icon-padding;
	}
}

/**
 * Loading indicator for search widget
 * Based on Vector
 *
 * By adding a class on the parent search form
 * <div id="searchform" class="search-form__loader"></div>
 * A pseudo element is added via ':after' that adds the loading indicator.
 *
 * After appearing for more than a second, a progress-bar animation appears
 * above the loading indicator.
 *
 **/
#searchform.search-form__loading:after {
	position: absolute;
	z-index: 999;
	top: 100%;
	// Position loader below the input.
	display: block;
	overflow: hidden;
	width: 100%;
	// Hide text in case it extends beyond the input.
	height: @search-loader-progress-bar-height;
	// Ensure it doesn't extend beyond the input.
	box-sizing: border-box;
	// Overlay the form
	margin-top: -@search-loader-progress-bar-height;
	// Animates the progress-bar.
	animation: search-loader-progress-bar
		/* duration */ 1200ms
		/* timing function */ linear
		/* delay */ 1000ms
		/* iteration count */ infinite
		/* fill direction */ alternate;
	// Add a progress-bar to the loading indicator,
	// but only show it animating after 1 second of loading.
	background: /*image*/ linear-gradient( 90deg, @accent-50 0%, @accent-50 100% )
		/* position / size*/ -10% 0 ~'/' 0 @search-loader-progress-bar-height
		/* repeat */ no-repeat,transparent;
	// Align style with the form
	border-radius: 0 0 @border-radius-large @border-radius-large;
	// Placeholder text
	content: 'loading';
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes search-loader-progress-bar {
	0% {
		background-position: -10% 0;
		background-size: 0 @search-loader-progress-bar-height;
	}

	30% {
		background-position: -10% 0;
		background-size: 30% @search-loader-progress-bar-height;
	}

	70% {
		background-position: 110% 0;
		background-size: 30% @search-loader-progress-bar-height;
	}

	100% {
		background-position: 110% 0;
		background-size: 0 @search-loader-progress-bar-height;
	}
}

@media only screen and ( max-width: @search-bar-width ) {
	.suggestions-dropdown {
		position: fixed;
		left: 0;
		max-width: 100vw;
	}
}