MIND/frontend/static/css/reminders.css

/*  */
/* Nav collapse button */
/*  */
header > div:first-child {
	transform: translateX(-3.8rem);

	display: flex;
	align-items: center;
	gap: 1rem;

	transition: transform var(--nav-show-speed) var(--playful-curve);
}

#toggle-nav {
	height: 2.5rem;
	width: 2.5rem;

	background-color: transparent;
}

#toggle-nav svg {
	height: 100%;
	width: auto;
	padding: 0.45rem;
}

#toggle-nav:hover svg :where(path, rect) {
	animation: flash-nav-colour .2s forwards;
}

@keyframes flash-nav-colour {
	0% {
		fill: var(--color-light);
	}
	50% {
		fill: var(--color-light-gray);
	}
	100% {
		fill: var(--color-light);
	}
}

header img:hover {
	cursor: pointer;
}

/*  */
/* Nav collapse */
/*  */
.nav-divider {
	height: calc(100% - var(--header-height));

	display: grid;
	grid-template-columns: calc(var(--nav-width) + var(--dyn-spacing)) 1fr;

	transition: grid-template-columns var(--nav-show-speed) var(--playful-curve);
}

.nav-container {
	height: 100%;
	overflow-x: hidden;

	display: flex;
	justify-content: flex-end;
}

/*  */
/* Clock */
/*  */
#clock-container {
	display: flex;
	flex-direction: column;
}

#clock-time {
	text-align: right;
	font-weight: bold;
	font-size: 1.5rem;
}

#clock-date {
	text-align: right;
	font-size: .9rem;
}

/*  */
/* Nav */
/*  */
nav {
	height: calc(100% - 2 * var(--dyn-spacing));
	width: var(--nav-width);
	margin: var(--dyn-spacing);
	margin-right: 0rem;
	flex: 0 0 auto;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--nav-button-spacing);
	overflow-y: auto;

	padding: var(--nav-button-spacing);
	border-radius: 4px;
	background-color: var(--color-gray);
	
	&::-webkit-scrollbar {
		width: 0rem;
	}
}

nav > div {
	display: flex;
	flex-direction: column;
	gap: var(--nav-button-spacing);
}

nav > div > button {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: var(--nav-button-spacing);
	border-radius: 4px;
	background-color: var(--color-dark);
	color: var(--color-light);

	transition: background-color 150ms ease-in-out;
	
	&:hover {
		background-color: var(--color-light-gray);
	}
	
	& svg {
		height: 1.8rem;
		width: 2rem;
	}
}

/*  */
/* Window management */
/*  */
.window-container {
	width: 100%;

	display: flex;
	overflow: hidden;
}

.window-container > :where(#home, .extra-window-container) {
	width: 100%;
	flex: 0 0 auto;

	translate: 0 0;
	transition: translate var(--window-slide-duration) ease-in-out;
}

.window-container.inter-window-ani > :where(#home, .extra-window-container) {
	transition: translate var(--window-slide-duration) ease-in-out,
				transform var(--window-slide-duration) ease-in-out;
}

.extra-window-container {
	--y-offset: 0%;
	transform: translateY(var(--y-offset));
}

.extra-window-container > div {
	height: 100%;
	overflow-y: auto;
}

.window-container.show-window > :where(#home, .extra-window-container) {
	translate: -100% 0;
}

.window-container.show-window > .extra-window-container {
	transform: translateY(var(--y-offset));
}

/*  */
/* Styling extra window */
/*  */
.extra-window-container > div {
	padding: var(--dyn-spacing);
}

.extra-window-container > div > h2 {
	text-align: center;
	font-size: clamp(1.5rem, 8vw, 2rem);
	margin-bottom: 1rem;
}

.extra-window-container > div > h2:not(:first-of-type) {
	margin-top: 1.5rem;
}

.extra-window-container > div > p {
	text-align: center;
}

@media (max-width: 34rem) {
	header > div:first-child {
		transform: translateX(0);
	}

	body:has(#nav-toggle:checked) .nav-divider {
		grid-template-columns: 0 auto;
	}
}