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

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

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

@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px

#typeahead-suggestions {
	position: absolute;
	top: @header-height;
	z-index: 99999;
}

.suggestions-dropdown {
	background: @base-100;
	.boxshadow(4);
	width: @suggestion-max-width;
	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
}

.suggestion {
	&-link {
		display: block;
		position: relative;
		min-height: 3.2rem * @content-scaling;
		padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
		border-bottom: 1px solid @base-90;

		&.active {
			background-color: @accent-90;

			.suggestion-title {
				color: @accent-50;
			}
		}
	}

	&-title {
		margin: 0 0 0.78rem * @content-scaling 0;
		color: @base-10;
		font-size: @content-h6-size;
		line-height: 1.872rem * @content-scaling;
	}

	&-highlight {
		color: @base-30;
		font-style: normal;
	}

	&-description {
		color: @base-30;
		margin: 0;
		font-family: @fonts;
		font-size: @content-caption-size;
		line-height: 1.43rem * @content-scaling;
	}

	&-thumbnail {
		background-color: @base-80;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width: 7rem * @content-scaling;
		position: absolute;
		top: 0;
		left: 0;
	}
}

#suggestion-special {
	padding: 1rem;
	display: flex;
	color: @base-10;
	align-items: center;

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

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

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

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

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

@media only screen and ( max-width: @suggestion-max-width ) {
	.suggestions-dropdown {
		position: fixed;
		left: 0;
		top: @header-height + 1px;
		max-width: 100vw;

		&:after {
			content: '';
			width: 100vw;
			height: 100vh;
			background: #000;
			display: block;
			opacity: 0.7;
			position: fixed;
		}
	}
}

@media ( prefers-color-scheme: dark ) {
	.suggestions-dropdown {
		background: @dark-bg-50;
	}

	.suggestion {
		&-link {
			border-color: @dark-bg-60;

			&.active {
				background-color: @accent-10;

				.suggestion-title {
					color: @accent-90;
				}
			}
		}

		&-title {
			color: @dark-text-90;
		}

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

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

	#suggestion-special {
		color: @dark-text-90;

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