index.scss

$menu-height: 3rem;
$searchbar-height: 2rem;
$navbar-height: $menu-height + $searchbar-height;

$main-default-padding: 0.75rem 0.75rem;
$main-list-padding: 0.5rem 0 0.75rem;

:root {
	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
	font-weight: 400;

	color: rgba(var(--foreground), 0.85);
	background-color: var(--primary-medium);

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;

	--background: 255, 255, 255;
	--foreground: 0, 0, 0;

	--primary: 64, 104, 125;
	--primary-medium: 46, 81, 99;
	--primary-dark: 28, 42, 51;
	--primary-contrasty: 28, 104, 150;

	box-sizing: border-box;
	max-width: 100vw;
}

[data-theme='dark'] {
	--background: 28, 42, 51;
	--foreground: 255, 255, 255;
}

html,
body,
#root {
	margin: 0;
	padding: 0;
	color: rgba(var(--foreground), 0.85);
	background-color: rgba(var(--background));
	height: 100vh;

	overflow: hidden;
	@extend .flex-col;
}

main {
	margin-top: $navbar-height;
	overflow-y: scroll;
	flex: 1;
}

h1 {
	margin: 0.2rem 0.5rem;
	font-size: 1.6rem;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

// Components

nav {
	position: fixed;
	height: $navbar-height;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0.2rem 0 0 rgba(var(--foreground), 0.3);

	div.menu {
		height: $menu-height;
		background-color: rgb(var(--primary-medium));
		color: #fff;

		@extend .flex-row;
		@extend .space-between;

		h1 {
			margin-right: 0;
			font-size: 1.4rem;
		}

		button {
			height: $menu-height;
			width: $menu-height;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(var(--foreground), 0);

			transition: all 0.15s ease-in;

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

	div.search {
		width: 100%;
		height: $searchbar-height;
		background-color: rgb(var(--background));

		@extend .flex-row;

		> button {
			height: $searchbar-height;
			width: $searchbar-height;

			@extend .flex-row;
			@extend .content-center;
			@extend .items-center;
		}

		> input {
			flex: 1;
			height: $searchbar-height;
			background-color: rgb(var(--background));
			color: rgb(var(--foreground));
			border: none;
			padding: 0.25rem 0.3rem;
			font-size: 1.1rem;
			vertical-align: baseline;
			box-sizing: border-box;
			outline: none;
		}
	}
}

main.SongList {
	padding: $main-list-padding;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

main.Song {
	padding: 0.75rem 0.75rem;

	h1 {
		margin: 0 0.5rem 0 0;
	}

	h3 {
		margin: 0;
		font-size: 0.9rem;
		color: rgba(var(--foreground), 0.6);
		font-weight: 500;
	}

	button.action {
		margin-left: 0.2rem;
		padding: 0.3rem;
		border-radius: 0.4rem;

		transition: background-color 0.1s ease-in;
		background-color: rgba(var(--foreground), 0);

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

	.tag-row {
		padding: 0.25rem 0;
		overflow-x: scroll;
		@extend .flex-row;
		@extend .gap-sm;
	}

	div.song-content {
		@mixin section-margin {
			margin: 0.8rem 0;
		}

		p {
			white-space: pre-wrap;
			font-weight: 500;
			@include section-margin();
		}

		h2 {
			font-size: 1.2rem;
			@include section-margin();
		}

		blockquote {
			margin: 0 0.8rem;
			color: rgba(var(--primary-contrasty), 0.8);
		}
	}
}

main.BookmarksList {
	padding: $main-list-padding;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.SongListItem {
	@extend .list-item;

	> li {
		background-color: rgba(var(--background));

		> div {
			p {
				margin: 0.2rem 0 0 0;
				white-space: nowrap;
				overflow-x: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

.BookmarkListItem {
	@extend .list-item;

	button.action {
		padding: 0.3rem;
		margin-right: 0.1rem;
		border-radius: 0.4rem;

		transition: background-color 0.1s ease-in;
		background-color: rgba(var(--foreground), 0);

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

span.TagBadge {
	padding: 0.05rem 0.5rem;
	border-radius: 50rem;
	border-style: solid;
	border-width: 0.1rem;
	font-weight: 900;
	font-size: 0.75rem;
	vertical-align: baseline;
	user-select: none;
}

div.Modal-outer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem 1rem;
	@extend .flex-row;
	@extend .items-center;
	@extend .content-center;

	background-color: rgba(var(--foreground), 0.3);
	opacity: 0;
	z-index: -99;

	&.visible {
		z-index: 99;
		animation: visible 0.2s;
		opacity: 1;

		@keyframes visible {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	}

	> div.Modal-inner {
		background-color: rgb(var(--background));
		border-radius: 0.25rem;
		width: 100%;
		max-width: 40rem;
		max-height: 100%;
		padding: 1rem;

		> .Modal-button-group {
			margin-top: 1rem;

			@extend .flex-row;
			@extend .content-end;
			@extend .gap-md;

			button {
				position: relative;
				padding: 0.75rem;
				border-radius: 0.4rem;

				font-weight: 600;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: currentColor;
					opacity: 0.05;
					transition: opacity 0.1s ease-in;

					border-radius: 0.4rem;
				}

				&:hover::before {
					opacity: 0.2;
				}
			}
		}
	}
}

.Filter-modal {
	@extend .flex-col;
	@extend .gap-sm;

	label {
		@extend .flex-row;
		@extend .items-center;

		font-size: 1rem;
		> span {
			margin-left: 0.4rem;
		}
	}
}

// Shared

.list-item {
	> li {
		border-bottom: rgba(var(--foreground), 0.4) solid 1px;

		> div {
			padding: 0.3rem 0.4rem;
			background-color: rgba(var(--foreground), 0);
			transition: all 0.1s ease-in;
			&:hover {
				background-color: rgba(var(--foreground), 0.1);
			}

			h1 {
				margin-left: 0;
				font-size: 1.1rem;
			}
		}
	}
	&:last-child > li {
		border: none;
	}
}

// General

.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.content-center {
	justify-content: center;
}
.content-end {
	justify-content: flex-end;
}
.space-between {
	justify-content: space-between;
}
.items-center {
	align-items: center;
}
.items-start {
	align-items: flex-start;
}

.gap-sm {
	gap: 0.25rem;
}
.gap-md {
	gap: 0.5rem;
}

.line-0 {
	line-height: 0;
}

.width-full {
	width: 100%;
}

.margin-r-sm {
	margin-right: 0.25rem;
}

// Icon

div.icon-sm {
	font-size: 0.9rem;
}
div.icon-md {
	font-size: 1.3rem;
}
div.icon-lg {
	font-size: 1.6rem;
}