waffle/frontend/public/global.css

/* fonts */

@font-face {
	font-family: "Iosevka Waffle Web";
	font-display: swap;
	font-weight: 400;
	font-stretch: normal;
	font-style: normal;
	src: url("assets/woff2/iosevka-waffle-regular.woff2") format("woff2");
}

@font-face {
	font-family: 'Iosevka Waffle Web';
	font-display: swap;
	font-weight: 700;
	font-stretch: normal;
	font-style: normal;
	src: url('assets/woff2/iosevka-waffle-bold.woff2') format('woff2');
}

/* top-level */

:root {
	--background-color-0: hsl(180, 11%, 5%);
	--background-color-1: hsl(180, 11%, 7%);
	--background-color-2: hsl(180, 11%, 10%);
	--background-color-3: hsl(180, 11%, 12%);
	--foreground-color-1: rgb(253, 254, 255);
	--foreground-color-2: rgb(218, 219, 220);
	--foreground-color-3: rgb(153, 154, 155);
	--foreground-color-4: rgb(123, 124, 125);
	--colored-element-text-color: var(--foreground-color-1);

	--purple-1: hsl(280, 78%, 50%);
	--blue-1: hsl(200, 78%, 50%);
	--green-1: hsl(140, 78%, 50%);
	--yellow-1: hsl(50, 78%, 50%);
	--red-1: hsl(2, 78%, 65%);

	--purple-2: hsl(280, 78%, 45%);
	--blue-2: hsl(200, 78%, 45%);
	--green-2: hsl(140, 78%, 40%);
	--yellow-2: hsl(50, 78%, 60%);
	--red-2: hsl(2, 78%, 60%);


	--space-unit: 1em;
	--space-xxs: calc(0.25 * var(--space-unit));
	--space-xs: calc(0.5 * var(--space-unit));
	--space-xsplus: calc(0.65 * var(--space-unit));
	--space-sm: calc(0.75 * var(--space-unit));
	--space-norm: var(--space-unit);
	--space-normplus: calc(var(--space-unit) + var(--space-sm));
	--space-md: calc(1.25 * var(--space-unit));
	--space-lg: calc(2 * var(--space-unit));
	--space-xl: calc(3.25 * var(--space-unit));
	--space-xxl: calc(5.25 * var(--space-unit));

	--radius-unit: 0.5em;
	--radius-xxs: calc(0.25 * var(--radius-unit));
	--radius-xs: calc(0.5 * var(--radius-unit));
	--radius-xsplus: calc(0.65 * var(--radius-unit));
	--radius-sm: calc(0.75 * var(--radius-unit));
	--radius-norm: var(--radius-unit);
	--radius-md: calc(1.25 * var(--radius-unit));
	--radius-mdplus: calc(1.50 * var(--radius-unit));
	--radius-lg: calc(2 * var(--radius-unit));
	--radius-xl: calc(3.25 * var(--radius-unit));
	--radius-xxl: calc(5.25 * var(--sradius-unit));

	/* initial values. these will be modified by javascript */
	--viewportWidth: 100vw;
	--viewportHeight: 100vh;
}

html, body {
	padding: 0;
	margin: 0;

	color-scheme: dark;
	accent-color: var(--purple-2);
}

body {
	overflow: hidden;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	color: var(--foreground-color-1);
	background-color: var(--background-color-1);
	font-size: 100%;
	font-family: "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-weight: 400;
	line-height: 1.75;

	display: flex;
	flex-direction: row;

	width: var(--viewportWidth);
	height: var(--viewportHeight);
}

/* fullscreen message */

.fullscreen-message {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--background-color-1);
}

/* top bar */

.top-bar {
	display: flex;
	align-items: center;
	justify-content: left;
	width: 100%;
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
	flex-grow: 0;
	flex-shrink: 0;
}

.top-bar.darker {
	background-color: var(--background-color-0);
}

.top-bar-heading {
	margin-left: var(--space-xxs);
}

/* modal */

.modal-backdrop {
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	background-color: rgba(0, 0, 0, 0.4);
}

.modal-backdrop-opaque {
	background-color: var(--background-color-1);
}

.modal {
	display: flex;
	flex-direction: column;
	background-color: var(--background-color-1);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
}

.modal-header {
	margin-bottom: var(--space-md);
	text-align: center;
}

.modal-footer {
	margin-top: auto;
	padding-top: var(--space-lg);
}

.modal-primary-action {
	float: right;
}

.modal-secondary-action {
	float: left;
}

@media screen and (max-width: 768px) {
	.modal {
		width: 100%;
		height: 100%;
		border-radius: 0px;
	}
	.modal-backdrop {
		display: block;
	}
}

/* input */

.input-label {
	text-transform: uppercase;
	color: var(--foreground-color-2);
	user-select: none;
}

.input {
	background-color : var(--background-color-2);
	border: none;
	color: currentColor;
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	font-size: inherit;
	line-height: inherit;
}

.input::placeholder {
	color: var(--foreground-color-2);
}

/* button */

.button {
	color: var(--foreground-color-1);
	background: none;
	text-align: center;
	border: none;
	padding: 0.6em;
	border-radius: 1em;
	font: inherit;
	user-select: none;

	/* TODO: inefficient */
	display: flex;
	justify-content: center;
	align-items: center;
}

.button:hover {
	background-color: var(--background-color-2);
}

.button-accent {
	color: var(--colored-element-text-color);
	background-color: var(--purple-2);
}

.button-accent:hover {
	background-color: var(--purple-1);
}

.button-accent:disabled {
	background-color: var(--purple-2);
}

.button-red {
	color: var(--colored-element-text-color);
	background-color: var(--red-2);
}

.button-red:hover {
	background-color: var(--red-1);
}

.button-red:disabled {
	background-color: var(--red-2);
}

.icon-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	color: var(--foreground-color-2);
	text-align: center;
	border: none;
	border-radius: var(--radius-md);
	font: inherit;
}

.icon-button-auto {
	margin-left: auto;
}

.icon-button:hover {
	color: var(--foreground-color-1);
}

/* text */

.h1 {
	font-size: 2.488rem;
}

.h2 {
	font-size: 2.074rem;
}

.h3 {
	font-size: 1.728rem;
}

.h4 {
	font-size: 1.44rem;
}

.h5 {
	font-size: 1.2rem;
}

.text-small {
	font-size: 0.833rem;
}

/* sidebar */

.sidebar-container {
	display: flex;
	flex-direction: column;
	background-color: var(--background-color-0);
	height: 100%;
	min-width: 255px;
	max-width: 255px;
}

@media screen and (max-width: 768px) {
	.sidebar-container {
		flex-basis: 100%;
		min-width: unset;
		max-width: unset;
	}
}

.sidebar {
	width: 100%;
	height: 100%;
	padding: var(--space-xs);
	overflow-x: hidden;
	overflow-y: auto;
}

.sidebar-button {
	user-select: none;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: left;
	border: none;
	background-color: var(--background-color-0);
	padding: var(--space-xs);
	margin-bottom: var(--space-xxs);
	color: currentColor;
	font: inherit;
	border-radius: var(--radius-md);
	width: 100%;
	max-height: 3.4em;
}

.sidebar-button .sidebar-button-text {
	margin-left: var(--space-xxs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-button .icon-button {
	display: none;
}

.sidebar-button.selected .icon-button,
.sidebar-button:hover .icon-button {
	display: flex;
}

.sidebar-button:hover {
	background-color: var(--background-color-2);
}

.sidebar-button.selected {
	color: var(--colored-element-text-color);
	background-color: var(--purple-2);
}

.sidebar-button.selected .icon-button {
	color: var(--colored-element-text-color);
}

.material-icons-outlined, .material-icons {
	user-select: none;
}

/* badges */

.user-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--purple-2);
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 0.375rem;
	padding-right: 0.375rem;
	border-radius: 9999px;
	font-size: x-small;
	margin-left: var(--space-sm);
	cursor: pointer;
}

/*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

*,
::before,
::after {
	box-sizing: border-box;
}

/* firefox placeholder */
::-moz-placeholder {
	opacity: 1;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
}

b, strong {
	font-weight: bolder;
}

code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/* Remove the inheritance of text transform in Edge and Firefox. */
button, select {
	text-transform: none;
}

/* Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button;
}

/* Remove the additional ":invalid" styles in Firefox. */
/* See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */
:-moz-ui-invalid {
	box-shadow: none;
}