Styled preferences page

static/style.css

@@ -0,0 +1,142 @@
+@font-face {
+	font-family: "Roboto";
+	src:
+		local("Roboto"),
+		url("/Roboto-Regular.ttf");
+	font-weight: 400;
+}
+
+:root {
+	--bg: #000;
+	--fg: #fff;
+	--gray: #777;
+	--lowcontrast: #222;
+	--accent: #1d9bf0;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--bg: #fff;
+		--fg: #000;
+		--lowcontrast: #ddd;
+	}
+}
+
+body {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	background: var(--bg);
+	color: var(--fg);
+	display: grid;
+	grid-template-rows: auto auto 1fr auto;
+	font-family: "Roboto", sans-serif;
+}
+
+header {
+	padding: 1em 1ch;
+	border-bottom: 1px solid var(--lowcontrast);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--bg);
+}
+
+header svg {
+	width: 24px;
+	height: 24px;
+	fill: var(--fg);
+}
+
+header h1 {
+	margin: 0 auto;
+	font-size: 24px;
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	width: calc(100% - 4ch);
+	max-width: 1500px;
+	padding: 0 2ch;
+	margin: 0 auto;
+}
+
+label input {
+	grid-area: input;
+}
+
+label h3 {
+	grid-area: title;
+	margin: 0;
+}
+
+label p {
+	grid-area: text;
+	color: var(--gray);
+	margin: 0;
+}
+
+/* Checkbox settings */
+label:has(input[type=checkbox]) {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		"title input"
+		"text text";
+}
+
+label:has(input[type=checkbox]):hover {
+	cursor: pointer;
+}
+
+.checkboxcontainer {
+	position: relative;
+}
+
+input[type=checkbox] {
+	appearance: none;
+	width: 20px;
+	height: 20px;
+	border: 2px solid var(--gray);
+	border-radius: 5px;
+	background: var(--bg);
+}
+
+input[type=checkbox]+svg {
+	display: none;
+	width: 20px;
+	height: 20px;
+	fill: var(--fg);
+	position: absolute;
+	inset: 1px 2px;
+}
+
+input[type=checkbox]:hover {
+	box-shadow: 0 0 0 5px var(--lowcontrast);
+}
+
+input[type=checkbox]:checked {
+	background: var(--accent);
+	border-color: var(--accent);
+}
+
+input[type=checkbox]:checked+svg {
+	display: block;
+}
+
+/* "Not a phishing site" warning tape */
+aside {
+	background: repeating-linear-gradient(
+		45deg,
+		var(--bg) 1ch 2ch,
+		var(--accent) 2ch 3ch);
+	text-align: center;
+}
+
+aside em {
+	background: var(--bg);
+	color: var(--accent);
+}