hippie/source/style/ui.scss

@use "sass:map";

@use "demo_config";
@use "hippie-style/hippie";

@use "modules/ui/frame_module";
@use "modules/ui/drag_module";
@use "modules/ui/form_module";
@use "modules/ui/gallery_module";
@use "modules/ui/windows_module";
@use "modules/ui/table_module";

$color_gui_back: hippie.$color_dark;
$space_gui_half: hippie.$space_half;

.op_show {
	transition: hippie.$transition_show;
}

.op_hide {
	transition: hippie.$transition_hide;
}

.html_ui {
	height: 100%;

	body {
		position: relative;
		min-height: 100%;
	}
}

.body_intro {
	background-color: black;

	.step {
		@extend %full_parent;
	}

	#loader {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	#bar {
		display: flex;
		justify-content: space-between;
		width: 50%;
	}

	#wrap {
		flex: 1;
		background-color: hippie.$color_back_basic;
	}

	#progress {
		width: 0;
		height: 100%;
		background-color: black;
	}

	#status,
	#spinner {
		@extend %basic;

		display: flex;
		flex-grow: 0;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		margin-inline: $space_gui_half;
		padding-block: calc($space_gui_half - 1px) $space_gui_half;
		line-height: hippie.$line_basic;
		text-align: center;
	}

	#status {
		width: 4em;
		background-color: black;
		color: white;
	}

	#spinner {
		width: 2.5em;
		background-color: hippie.$color_back_basic;
		color: black;

		span {
			animation: rotate 1s linear infinite;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	#init {
		z-index: map.get(hippie.$z-indexes, "content-top");
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: black;

		h1,
		p,
		li {
			color: white;
		}
	}

	.brand {
		text-align: center;

		svg {
			height: 128px;
			width: 128px;

			rect, circle, path {
				stroke: white !important;
			}
		}

		img {
			display: inline-block;
			width: 128px;
			height: 128px;
			background-color: white;
		}

		* + h1 {
			margin-top: hippie.$space_small;
			margin-bottom: hippie.$space_large;
		}
	}

	.tech-stack {
		display: flex;
		padding-left: 0;

		li {
			list-style: none;
			padding-inline: hippie.$space_double;
		}
	}

	#agreement,
	#idle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	#agreement {
		flex-direction: column;
		background-color: map.get(hippie.$color_palette, bravo);
		user-select: none;

		h1 {
			margin-top: 0;
			color: hippie.$color_brightest;
		}
	}

	#idle {
		background-color: hippie.$color_back_basic;
		transition: background-color 4s;

		&:hover > .mouse_overlay {
			background-color: transparent !important;
			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
		}

		.hello {
			flex: 0 1 auto;
			padding: 1em 2em;
			background-color: rgba(hippie.$color_bright, .5);
			font-family: hippie.$family_text_mono;
		}
	}
}

.toast {
	z-index: map.get(hippie.$z-indexes, "toast");
	position: fixed;
	right: $space_gui_half;
	bottom: hippie.$space_double;

	p {
		color: white;
	}

	kbd {
		border-color: hippie.$color_brighter;
		color: hippie.$color_back_io;
	}
}