mediawiki-skins-Citizen/resources/components/Searchbox.less

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

#search {
	&form {
		position: absolute;
		z-index: -1; // not interactable
		margin: 7px 0 8px; // 1px h3 screen reader
		display: flex;
		top: 0;
		right: @margin-side / 2;
		opacity: 0;
		.boxshadow(4);
		border-radius: @border-radius-small;
		transition: @transition-opacity;
		pointer-events: none; // not clickable

		&-icon {
			position: absolute;
			z-index: 110;
			width: @search-bar-height;
			height: @search-bar-height;
			opacity: @opacity-icon;
			background-size: 14px;
			background-repeat: no-repeat;
			background-position: center;
		}

		&-random {
			position: absolute;
			z-index: 120;
			right: 38px;
			width: @search-bar-height;
			height: @search-bar-height;
			opacity: @opacity-icon;
			background-size: 18px;
			background-repeat: no-repeat;
			background-position: center;
			transition: @transition-transform-quick, @transition-opacity-quick;

			&:hover {
				opacity: @opacity-icon-active;
				transform: rotate( 30deg );
			}
		}
	}

	&-toggle {
		right: 0; // align checkbox with icon
		z-index: 21; // override to be on top of the form

		&-icon {
			position: relative;
			z-index: 20; // stay on top of search form
			display: flex;
			align-items: center;
			justify-content: center;
			width: @icon-box-size + @margin-side + @icon-padding;
			height: @header-height;
			opacity: @opacity-icon;
			transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;

			&-1 {
				top: 7px;
				left: 12px;
				height: 10px;
				transform: rotate( -45deg );
			}

			&-2 {
				margin-top: -2px;
				margin-left: -2px;
				width: 10px;
				height: 10px;
				border: solid 2px @base-0;
				border-radius: 100%;
				transform: rotate( -45deg );
			}

			&-3 {
				opacity: 0;
				top: 0;
				left: -7px;
				height: 14px;
				transform: rotate( -135deg );
			}

			&-1,
			&-3 {
				width: 2px;
				background-color: @base-0;
			}
		}

		&:checked {
			~ #searchform {
				z-index: 10;
				opacity: 1;
				pointer-events: auto; // clickable

				#searchInput {
					width: @search-bar-width;
				}
			}

			~ #search-toggle-icon {
				#search-toggle-icon {
					&-2 {
						border-color: transparent;
					}

					&-1 {
						height: 14px;
						transform: translate( -5px, -7px ) rotate( 135deg );
					}

					&-3 {
						opacity: 1;
					}
				}

				&:hover {
					border-color: @base-0;

					#search-toggle-icon-3 {
						opacity: 0;
					}
				}
			}

			&:hover {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1 {
							height: 12px;
							transform: translate( -5px, -7px ) rotate( 135deg );
						}

						&-2 {
							border-color: transparent;
						}

						&-3 {
							height: 12px;
						}
					}
				}
			}
		}

		&:hover {
			~ #search-toggle-icon {
				opacity: @opacity-icon-active;

				#search-toggle-icon {
					&-1 {
						height: 6px;
						transform: translate( 2px, 2px ) rotate( -45deg );
					}
				}
			}
		}
	}

	&Input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		z-index: 100;
		padding: 8px @icon-box-size + @icon-padding + @search-bar-height 8px @search-bar-height;
		width: 0;
		height: @search-bar-height;
		max-width: calc( ~'100vw -'@margin-side );
		background: @base-100;
		border: 1px solid @base-90;
		border-radius: @border-radius-small;
		transition: @transition-width, @transition-box-shadow;

		&:focus {
			outline: 0;
			.boxshadow(5);
		}
	}
}

.search {
	&-toggle-icon-div {
		position: relative;
		transition: inherit;
	}
}

@media only screen and ( max-width: @search-bar-width ) {
	#searchform:before {
		content: '';
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @base-100;
		opacity: 0.9;
	}
}

@media ( prefers-color-scheme: dark ) {
	#search {
		&form {
			&-icon,
			&-random {
				opacity: 0.4;
				filter: invert( 1 );
			}

			&-random:hover {
				opacity: 0.6;
			}
		}

		&-toggle {
			&-icon {
				opacity: 0.4;

				&-2 {
					border-color: @base-100;
				}

				&-1,
				&-3 {
					background: @base-100;
				}
			}

			&:hover {
				~ #search-toggle-icon {
					opacity: 0.6;
				}
			}
		}

		&Input {
			border-color: @dark-bg-60;
			background: @dark-bg-50;
		}
	}
}

@media only screen and ( max-width: @search-bar-width )  and ( prefers-color-scheme: dark ) {
	#searchform:before {
		background: @dark-bg-50;
	}
}