werewolves/style/main.scss

@use 'sass:color';

$host_nav_height: 36px;
$host_nav_top_pad: 10px;
$host_nav_bottom_pad: 10px;
$host_nav_total_height: $host_nav_height + $host_nav_top_pad + $host_nav_bottom_pad;

$wolves_color: rgba(255, 0, 0, 0.7);
$village_color: rgba(0, 0, 255, 0.7);
$village_border: color.change($village_color, $alpha: 1.0);
$wolves_border: color.change($wolves_color, $alpha: 1.0);
$intel_color: color.adjust($village_color, $hue: -30deg);
$intel_border: color.change($intel_color, $alpha: 1.0);
$defensive_color: color.adjust($village_color, $hue: -60deg);
$defensive_border: color.change($defensive_color, $alpha: 1.0);
$offensive_color: color.adjust($village_color, $hue: 30deg);
$offensive_border: color.change($offensive_color, $alpha: 1.0);
$starts_as_villager_color: color.adjust($village_color, $hue: 60deg);
$starts_as_villager_border: color.change($starts_as_villager_color, $alpha: 1.0);
$damned_color: color.adjust($village_color, $hue: 45deg);
$damned_border: color.change($damned_color, $alpha: 1.0);
$drunk_color: color.adjust($village_color, $hue: 150deg);
$drunk_border: color.change($drunk_color, $alpha: 1.0);

$wolves_border_faint: color.change($wolves_border, $alpha: 0.3);
$village_border_faint: color.change($village_border, $alpha: 0.3);
$offensive_border_faint: color.change($offensive_border, $alpha: 0.3);
$defensive_border_faint: color.change($defensive_border, $alpha: 0.3);
$intel_border_faint: color.change($intel_border, $alpha: 0.3);
$starts_as_villager_border_faint: color.change($starts_as_villager_border, $alpha: 0.3);
$damned_border_faint: color.change($damned_border, $alpha: 0.3);
$drunk_border_faint: color.change($drunk_border, $alpha: 0.3);

$wolves_color_faint: color.change($wolves_color, $alpha: 0.1);
$village_color_faint: color.change($village_color, $alpha: 0.1);
$offensive_color_faint: color.change($offensive_color, $alpha: 0.1);
$defensive_color_faint: color.change($defensive_color, $alpha: 0.1);
$intel_color_faint: color.change($intel_color, $alpha: 0.1);
$starts_as_villager_color_faint: color.change($starts_as_villager_color, $alpha: 0.1);
$damned_color_faint: color.change($damned_color, $alpha: 0.1);
$drunk_color_faint: color.change($drunk_color, $alpha: 0.1);

@import 'faction';

@mixin flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

body {
	font-family: sans-serif;
	text-align: center;
	background-color: black;
	color: white;
}

.error_container {
	position: fixed;
	top: 3vh;
	left: 37vw;
	width: 60vw;
	height: 94vh;
	display: flex;
	justify-content: center;

	h5,
	p {
		margin: 0;
	}

	.error {
		position: fixed;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 1ch;
		width: fit-content;
		padding: 1ch;

		border: 1px solid red;
		background-color: rgba(128, 0, 0, 1);
	}
}

input,
select {
	border: 1px solid rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.07);
	color: white;
	font-size: 1em;

	&:focus {
		outline: 1px solid white;
		background-color: white;
		color: black;
	}
}

button {
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.7);

	color: white;
	// border: 1px solid white;
	cursor: pointer;
	font-size: 1em;

	&:focus-visible {
		outline: solid rgba(255, 0, 255, 0.5) 2px;
	}

	&:not(:disabled, .no-hover, .selected):hover {
		color: black;
		background-color: white;
	}

	&.selected {
		color: black;
		background-color: white;
	}

	&:disabled {
		$disabled_color: rgba(255, 255, 255, 0.7);
		cursor: default;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid $disabled_color;
		color: $disabled_color;

		&.current {
			background-color: white;
			color: black;
		}
	}
}

.signup,
.signin {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 1ch;

	font-size: 2em;

	.optional {
		margin-left: 1ch;
		font-size: 0.5em;
		font-style: italic;
		color: rgba(255, 255, 255, 0.5)
	}
}

nav.header {
	position: sticky;
	backdrop-filter: brightness(70%);
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	gap: 10px;
	height: $host_nav_height;
	overflow-x: scroll;
	scrollbar-width: none;
	white-space: nowrap;
	align-items: center;

	font-size: 1.5em;

	.username {
		font-size: 0.5em;
		color: rgba(255, 255, 255, 0.5);
		margin-left: -1ch;
	}

	.right-side {
		position: absolute;
		right: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 10px;
	}
}

.click-backdrop {
	z-index: 4;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-size: cover;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.7);
}

.dialog {
	z-index: 5;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	position: fixed;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(1em);

	.dialog-box {
		border-top: 1px solid white;
		background-color: black;
		font-size: 1.5em;

		input {
			font-size: 1em;
			width: 60vw;
		}


		.dialog-main {
			border-left: 1px solid white;
			border-right: 1px solid white;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
			padding-left: 30px;
			padding-right: 30px;
			padding-top: 10px;
			padding-bottom: 40px;
			gap: 5px;
			color: white;

			&.full {
				border-bottom: 1px solid white;
			}
		}
	}

	.options {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 20px;
		width: 100%;

		&>button {
			min-width: 4cm;
		}

		$close_color: rgba(255, 0, 0, 1);

		.close {
			border: 1px solid $close_color;
			color: $close_color;
			background-color: change-color($color: $close_color, $alpha: 0.1);

			&:hover {
				background-color: change-color($color: $close_color, $alpha: 0.4);
			}
		}
	}
}

#change-password,
#update-profile {
	.pwless-notice {
		font-size: 0.7em;
		word-wrap: normal;
		margin: 0;
	}

	.dialog-box {
		max-width: 70%;
	}

	form {
		font-size: 1em;
		display: flex;
		flex-direction: column;
		gap: 1ch;
		align-items: center;

		.form-fields {
			display: flex;
			flex-direction: column;
			align-items: center;
			// width: 100%;
			gap: 1ch;
		}


		label {
			user-select: none;
		}
	}
}

.user-settings-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1ch;
	height: calc(100vh - $host_nav_total_height - 3ch);

	li {
		width: 60%;

		margin-left: 0;

		.dialog-modal>button,
		&>button {
			font-size: 2em;
			width: 100%;
			flex-grow: 1;
		}
	}

	.logout {
		margin-top: auto;
	}

	dialog {
		font-size: 1em;
	}
}

.welcome-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 89%;
	gap: 3ch;

	&>* {
		flex-grow: 1;
	}

	padding: 0 5vw 0 5vw;
}

.status-bar {
	background-color: black;
	border: 1px solid white;
	padding: 1ch;
	margin: 5ch;
	user-select: none;

	&.disconnected {
		border: 1px solid red;
		background-color: rgba(255, 0, 0, 0.1);
	}
}

.debug-marker {
	$debug_color: rgba(255, 255, 255, 0.5);
	position: relative;
	margin: 0;
	width: fit-content;
	height: fit-content;
	padding: 1px;
	user-select: none;
	top: 0;
	left: 0;
	border: 1px solid $debug_color;
	color: $debug_color;
	background-color: color.change($debug_color, $alpha: 0.1);
}

.game-settings {
	padding: 0px 3ch 3ch 3ch;

	.top-bar {
		font-size: 1.5em;
		padding: 1ch;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1ch;
		background-color: rgba(255, 0, 255, 0.05);
		width: fit-content;
	}

	.role-add-list {
		margin: 1ch 0 1ch 0;
		width: 100%;
		user-select: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 3ch;
		justify-content: space-between;
		row-gap: 0.5ch;

		.category {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 0.5ch;

			.title {
				padding: 0.5ch;
				text-align: center;
				min-width: 15ch;
				filter: saturate(70%) grayscale(10%);
			}

			.roles {
				min-width: 15ch;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				gap: 0.5ch;

				.add-role {
					padding: 0.5ch;
					flex-grow: 1;
					width: 100%;
				}
			}
		}
	}

	.setup-slots {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1ch;
		row-gap: 0.5ch;

		align-items: flex-start;
	}

	.setup-slot-container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.25ch;
		align-items: flex-start;

		.setup-slot {
			color: rgba(255, 255, 255, 0.9);
			font-size: 1.5em;
		}

		.aura,
		.assignment {
			margin: 0px;
			font-size: 0.8em;
			color: rgba(255, 255, 255, 0.5);
			user-select: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			word-break: normal;
			gap: 0.5ch;

			&:hover {
				color: white;
			}
		}
	}
}

.role-title {
	user-select: none;
}

.tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 80vw;
	align-items: flex-start;

	.tab {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;

		.detail {
			margin: 0px;
			font-size: 0.5em;
			color: rgba(255, 255, 255, 0.5);
			user-select: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			word-break: normal;
			gap: 0.5ch;

			&:hover {
				color: white;
			}
		}
	}
}

dialog .tab-content {
	max-width: 80vw;
	min-height: 40vh;

}

.toggle-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	row-gap: 0.5ch;
	gap: 0.5ch;
}

.player-select {
	flex-grow: 1;

	.identity {
		justify-content: space-between;
	}
}

.identity,
.identity .name,
.identity .pronouns {
	word-wrap: normal;
}

.identity {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5ch;

	.number {
		text-shadow: yellow 1px 1px;
	}

	.pronouns {
		font-size: 0.5em;
		opacity: 50%;
		align-self: center;
	}
}

.lobby-players {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.25ch;

	.player-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5ch;
		align-items: center;
	}
}

.player {
	font-size: 1.25em;
	border: 1px solid rgba(255, 255, 255, 0.5);
	height: fit-content;

	&.connected:not(:hover) {
		background-color: rgba(0, 128, 0, 0.1);
		border: 1px solid rgba(0, 64, 0, 0.7);

		.number:not(.red) {
			color: green;
			text-shadow: none;
			font-weight: bold;
		}
	}

	.number.red {
		text-shadow: rgb(64, 0, 0) 1px 1px;
		font-weight: bold;
	}
}

.red {
	color: red;
}

.player-lobby {
	user-select: none;
	margin: 5vh 15vw 5vh 15vw;
	padding: 3ch;
	font-size: 1.5em;
	border: 1px solid rgba(128, 0, 0, 0.7);
	background-color: rgba(64, 0, 0, 0.3);

	&.joined {
		border: 1px solid rgba(0, 128, 0, 0.7);
		background-color: rgba(0, 64, 0, 0.3);
	}
}

.player-additional {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.number-info {
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(0, 64, 0);
	background-color: rgba(0, 64, 0, 0.3);
	gap: 0.25ch;
	width: fit-content;
	padding: 3ch;
	min-width: 40vw;
	align-items: center;

	&.unset {
		border: 1px solid rgb(128, 0, 0);
		background-color: rgba(64, 0, 0, 0.3);
	}

	#player-number {
		text-align: center;
	}

	.number-text {
		font-size: 1.5em;
		user-select: none;

		.number {
			font-size: 1.25em;
		}

		&.unset {
			font-size: 1.25em;
			color: rgb(192, 0, 0);
			font-weight: bold;
		}
	}
}

.number-update:not([hidden]) {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.25ch;
	margin-top: 3ch;
	font-size: 1.5em;

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		display: none;
		-webkit-appearance: none;
		margin: 0;
	}

	input[type=number] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	input[type=submit] {
		@extend button;
	}
}

.tutorial-box {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 2ch;
	width: fit-content;

	&[hidden] {
		display: none;
	}

	.hide,
	.show {
		align-self: flex-start;
	}


	.show {
		&:hover {
			&::after {
				content: "show tutorial";
				background-color: black;
				color: white;
				position: fixed;
				font-size: 1em;
				width: max-content;
				height: max-content;
				margin-left: 2ch;
			}
		}
	}

	.tutorial {
		font-size: 1.25em;
		padding: 1ch;
		border: 1px solid white;
		background-color: rgba(0, 0, 64, 0.3);
	}


	.sample {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5ch;

		align-items: center;
	}

	.equals {
		font-size: 2em;
		user-select: none;
	}

	.ok {
		user-select: none;
	}

}