plan/plan/index.scss

@use 'sass:color';

body {
	background-color: black;
	color: white;
	margin: 0;

	& * {
		font-family: 'Cute Font';
	}
}

.content {
	margin: 8px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

.nfc-form {
	font-size: 2em;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;

	button {
		margin-top: 10px;
		font-size: 1em;
	}
}

button {
	background-color: black;
	color: white;
	border: 1px solid white;
	cursor: pointer;

	&:hover {
		background-color: white;
		color: black;
	}

	&:disabled {
		border-color: rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.3);

		&:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}
	}
}

.content {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

.error {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	background-color: rgba(255, 0, 0, 0.1);
	border: 1px solid rgba(255, 0, 0, 0.3);
	text-align: center;

	.details {}
}

.error-container {
	$error_border: rgba(255, 0, 0, 0.7);
	padding: 3px 5px 3px 5px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	background-color: rgba(255, 0, 0, 0.1);
	border: 1px solid rgba(255, 0, 0, 0.3);
	text-align: center;

	&>button {
		border: 1px solid $error_border;
		color: $error_border;
		background-color: color.change($error_border, $alpha: 0.1);

		&:hover {
			background-color: color.change($error_border, $alpha: 0.3);
		}
	}
}

.calendar {
	user-select: none;
	width: max-content;
}

.date-span {
	font-size: 2rem;
}

.week {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	gap: 1vw;
	max-width: 80vw;
}

@media only screen and (max-width : 999px) {
	.day {
		width: 50vw;
	}
}

// @media only screen and (min-width : 1000px) {
// 	.content {
// 		margin-left: 5vw;
// 		margin-right: 5vw;
// 		display: flex;
// 		flex-basis: content;
// 		min-height: 100vh;
// 	}
// }


.day {
	padding: 10px 30px 10px 30px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

.date {
	font-size: 1.2rem;
}

.day-tiles {
	padding-left: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	list-style: none;

}

.tile {
	flex-grow: 1;
	flex-shrink: 1;
	// border: 1px solid white;
	padding: 10px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7); // &:hover {
	// 	background-color: rgba(255, 255, 255, 0.3);
	// }

	&.pending {
		background-color: red;
		color: black;

		&:hover {
			background-color: rgba(255, 255, 255, 0.7);
		}
	}

	&.selected-mine {
		// border: 1px solid white;
		$border_color: white;
		color: white;

		&.border-middle {
			border-left: 1px solid $border_color;
			border-right: 1px solid $border_color;
		}

		&.border-top {
			border-left: 1px solid $border_color;
			border-right: 1px solid $border_color;
			border-top: 1px solid $border_color;
		}

		&.border-bottom {
			border-left: 1px solid $border_color;
			border-right: 1px solid $border_color;
			border-bottom: 1px solid $border_color;
		}

		&.border-lone {
			border: 1px solid $border_color;
		}

	}

	&[style] {
		background-color: var(--color);
	}
}

.tile:hover {
	// background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: invert(30%);
}

nav.user-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 20px;
	user-select: none;
	width: max-content;
	padding: 10px;
	margin: 0;
	// border: 1px solid white;
	align-items: baseline;

	.username {
		width: max-content;
	}

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

	font-size: 1rem;

	button {
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 1rem;
	}
}

.validation-fail {
	color: red;
}

.new-plan {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;

	.submit {
		margin-top: 20px;

		button {
			padding: 5px 15px 5px 15px;
			font-size: 2em;
		}

	}
}

.days {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.faint {
	filter: opacity(50%);
	font-size: 0.5em;
}

.create-day {
	border: 1px solid white;
	padding: 10px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: nowrap;

	.field {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		font-size: 1.5em;
		width: 100%;
	}


	.remove {
		width: 100%;
		text-align: center;
	}
}

.set-date {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	&>button {
		flex-grow: 1;
	}

	&>.date {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.date-detail {
	width: 100%;
	text-align: center;
}

.message {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	flex-wrap: nowrap;
}

.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;



	.dialog-box {


		font-size: 2rem;
		border: 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: 10px;
		background-color: black;
		gap: 5px;
		color: white;

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

			&>button {
				min-width: 4cm;
				font-size: 1em;
			}

			$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);
				}
			}
		}
	}
}


.users-available {
	list-style: none;

	.user {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
	}

	.user:hover {
		background-color: rgba(255, 255, 255, 0.3);
	}

	[last_available]:hover::after {
		display: block;
		position: absolute;
		content: attr(last_available);
		border: 1px solid white;
		background: rgba(0, 0, 0, 0.7);
		padding: .25em;
	}
}

.signup,
.signin {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.5rem;

	input {
		background-color: black;
		border: 1px solid white;
		color: white;
	}

	.submit {
		margin-top: 30px;
		font-size: 1.5rem;
	}
}

.plan-details {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;

	.add-day {
		margin-top: 5px;
		font-size: 1.5em;
		padding: 5px 0 5px 0;
	}
}

.fields {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	width: 100%;

	.field {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		font-size: 1.5em;
		flex-grow: 1;

		input,
		select {
			font-size: 1em;
			box-sizing: border-box;
		}
	}
}

@media only screen and (max-width : 999px) {

	.created-plans,
	.participating-plans {
		width: 100%;
	}
}

@media only screen and (min-width : 1000px) {

	.created-plans,
	.participating-plans {
		width: 40vw;
	}
}

.created-plans,
.participating-plans {
	padding: 0 30px 0 30px;
	align-items: center;
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.plan-column {
	width: 100%;
}

.main-plans {
	user-select: none;
	text-align: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
}

.plans {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 0;

	.plan-headline {
		button {
			width: 100%;
		}
	}

	.plan-detail {
		display: flex;
		flex-direction: row;
		gap: 30px;
		font-size: 1.5rem;
		padding: 10px;

		.start-date {
			filter: opacity(50%);
		}
	}
}

.splash {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;

	.options {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1cm;

		& button {
			font-size: 2rem;
		}
	}
}

.create-days-view {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	width: 80vw;
	gap: 20px;

	.controls {
		align-self: flex-end;

		button {
			font-size: 1.5em;
		}
	}

	.create-days-view-content {}
}

.calendar-view {
	width: 100%;
	user-select: none;
	display: flex;
	flex-direction: column;
	gap: 20px;

	.headline {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		font-size: 2em;
		align-items: baseline;

		button {
			font-size: 1em;
			padding: 0;
			height: 2em;
			width: 2em;
			text-align: center;
		}

		.inactive {
			cursor: not-allowed;
			background-color: rgba(255, 255, 255, 0.2);
			color: white;
			filter: brightness(40%);

			&:hover {
				filter: brightness(25%);
			}
		}
	}

	.days {
		display: grid;
		grid-template-columns: repeat(7, 1fr);

		.weekday {
			text-align: center;
		}

		.sun {
			color: red;
		}

		.calendar-day {
			border: 1px solid white;
			padding: 5px;
			cursor: pointer;
			font-size: 2em;
			text-align: center;

			&.inactive {
				cursor: not-allowed;
				border: 1px solid rgba(255, 255, 255, 0.3);
				background-color: rgba(255, 255, 255, 0.2);
				color: white;
				filter: brightness(40%);

				&:hover {
					filter: brightness(40%);
				}
			}

			&:hover {
				background-color: rgba(255, 255, 255, 0.3);
			}

			&.marked {
				background-color: rgba(0, 255, 0, 0.3);
				border: 1px solid rgba(0, 255, 0, 0.6);
				// color: rgba(0, 255, 0, 0.6);

				&:hover {
					background-color: rgba(0, 255, 0, 0.2);
				}
			}
		}
	}
}

@media only screen and (max-width: 299px) {

	.days,
	.headline {
		font-size: 0.5rem !important;
	}

	.days {
		gap: 3px;
	}
}

@media only screen and (min-width: 300px) and (max-width : 425px) {

	.calendar-day,
	.headline {
		font-size: 1em !important;
	}

	.days {
		gap: 3px;
	}
}

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

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

#change-password {
	input {
		font-size: 1em;
	}
}

.user-settings {
	width: 100%;

	.user-options {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-left: 0;
		width: 100%;
		align-items: center;

		button {
			font-size: 1.5em;
			padding: 10px;
		}
	}
}