path: root/frontend/style.css

/*
 * Copyright (c) 2024 Runxi Yu <https://runxiyu.org>
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/*
 * TODO: Remove all uses of !important. These are obviously bad practice, but
 * it's not always trivial to get the precedence right.
 */

:root {
	--primary-bg: white;
	--primary-fg: #212529;
	--border: #ced4da;
	--anchor-underline-color: lightgray;
	--anchor-color: #0062cc;
	--theme: #0062cc;
	--theme-contrast: white;
	--box: #f2f2f2;
	--box-contrast: var(--primary-fg);
	--danger: #d32535;
	--danger-contrast: white;
	--white: white;
	--white-contrast: #222222;
	--header-fg: black;
	--header-bg: #f2f2f2;
}

@media (prefers-color-scheme: dark)  {
	:root {
		--primary-bg: #212529;
		--primary-fg: #f8f9fa;
		--border: #495057;
		--anchor-underline-color: #4F4F4F;
		--anchor-color: #3294fe;
		--theme: #0062cc;
		--theme-contrast: #f8f9fa;
		--box: #30363B;
		--box-contrast: #f8f9fa;
		--danger: #d32535;
		--danger-contrast: #f8f9fa;
		--white: #202020;
		--white-contrast: #f8f9fa;
		--header-fg: #f8f9fa;
		--header-bg: #30363b;
	}
}

html {
	font-family: system-ui, sans-serif;
	line-height: 1.2;
	background-color: var(--primary-bg);
	color: var(--primary-fg);
}

body {
	margin: 0;
	padding: 0;
}

main,
body > section,
.reading-width,
footer {
	margin: 1rem auto;
	padding-left: 1rem;
	padding-right: 1rem;
	max-width: 60rem;
}

/*
 * For accessibility reasons, we still want anchors to be underlined, but
 * perhaps not as profound of an underline as the default.
 */
a {
	color: var(--anchor-color);
	text-decoration: underline;
	text-decoration-color: var(--anchor-underline-color);
}

/*
 * However, although the site title will be an anchor, it should not be
 * underlined.
 */
#site-title {
	text-decoration: none;
}

/*
 * Navigation is a simple bulleted list with bullets in the middle only.
 * This should probably be revamped.
 */
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul > li {
	display: inline-block;
}
nav ul > li:not(:last-child)::after {
	content:"\2000"
}

/*
 * The header should stick to the top of the page.
 */
header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	color: var(--header-fg);
	background-color: var(--header-bg);
	z-index: 1000;
	width: 100%;
}

/*
 * We don't want underlined anchors in the header in general, since it should
 * be obvious that things in it are links.
 */
header a {
	text-decoration: none;
	color: var(--header-fg);
}
.header-content {
	padding-left: 1rem;
	padding-right: 1rem;
	max-width: 60rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}
header img {
	vertical-align: middle;
	max-height: 40px;
}
header h1 {
	font-size: 25px; /* TODO: Specifying font sizes in pixels is bad */
}

/*
 * The table, the most important element in my site design...
 */
table {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	border-collapse: collapse;
	border: 1px solid var(--border);
}
table.wide {
	width: 100%;
}
th[scope~="row"] {
	text-align: left;
}
th[scope~="col"] {
}
td {
	border: 1px solid;
	text-align: left;
	height: 1.25rem;
	border: 1px solid var(--border);
	padding: 3px 5px;
}
table.fat td {
	padding: 6px 5px;
}
td.th-like, th {
	background-color: var(--box) !important;
	border: 1px solid var(--border);
	font-weight: bold;
	padding: 3px 5px;
}
th.min, td.min {
	width: 0;
	min-width: fit-content;
	white-space: nowrap;
}

/* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=217769 */
tbody:empty {
	display: none;
}
table > tbody:after {
	content: "";
}

/*
 * Input elements, which are usually in tables anyway
 */
textarea {
	box-sizing: border-box;
	background-color: var(--box);
	resize: vertical;
}
textarea,
input[type=text],
input[type=password] {
	font-family: sans-serif;
	font-size: smaller;
	background-color: var(--box);
	color: var(--box-contrast);
	border: none;
	padding: 0.3rem;
	width: 100%;
	box-sizing: border-box;
}
td.tdinput, th.tdinput {
	padding: 0rem !important;
}
td.tdinput textarea,
td.tdinput input[type=text],
td.tdinput input[type=password],
th.tdinput textarea,
th.tdinput input[type=text],
th.tdinput input[type=password] {
	background-color: transparent !important;
}

/*
 * Button definitions.
 *
 * Each button should contain the .btn class and a .btn-type class, where type
 * is one of primary, danger, white, and normal.
 */
.btn-primary {
	background: var(--theme);
	color: var(--theme-contrast);
	border: var(--border) 1px solid;
	font-weight: bold;
}
.btn-danger {
	background: var(--danger);
	color: var(--danger-contrast);
	border: var(--border) 1px solid;
	font-weight: bold;
}
.btn-white {
	background: var(--white);
	color: var(--white-contrast);
	border: var(--border) 1px solid;
}
.btn-normal,
input[type=file]::file-selector-button {
	background: var(--box-contrast);
	border: var(--border) 1px solid !important;
	color: var(--box-contrast);
}
.btn,
input[type=submit],
input[type=file]::file-selector-button {
	display: inline-block;
	width: auto;
	min-width: fit-content;
	border-radius: 0;
	padding: .1rem .75rem;
	font-size: 0.9rem;
	transition: background .1s linear;
	cursor: pointer;
}
a.btn {
	text-decoration: none;
}


/*
 * Multiple columns, flexible wrapping
 */
.multicols {
	display: flex;
	flex-direction: row;
	@media(max-width: 50rem) {
		flex-wrap: wrap;
		gap: 0rem;
	}
	gap: 2rem;
	align-items: stretch;
}

.multicols div {
	min-width: 18em;
	/* max-width: 40rem; */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Spanning elements across a flex container with equal space in between
 */
.flex-justify {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	border: none;
}

.message-box {
	margin: auto;
	max-width: 30rem;
	border: solid 1px var(--border);
	background-color: var(--box);
	padding: 0rem 1rem;
}

table.table-of-courses {
	width: 100%;
}

/*
 * .need-connection is the content that should actually display when we are
 * connected via WebSocket. The JavaScript would change display from none to
 * block when fully connected to WebSocket.
 */
.need-connection {
	display: none;
}

/*
 * Same for script-required, though the JavaScript hides this as soon as it's
 * loaded.
 */
.script-required {
	display: none;
}

/*
 * .broken-connection displays a message telling users to refresh the page,
 * after their WebSocket connection breaks. It should be hidden by default.
 */
.broken-connection {
	display: none;
}

/*
 * This site heavily uses CSS styling to display and hide messages, so by
 * default we put a big warning about CSS being broken, which disappears
 * once the main CSS, i.e. this file, is completely loaded. Therefore it's
 * probably best to put this at the bottom of this file.
 */
.broken-styling-warning {
	display: none;
}