common.css

@charset "utf-8";

html {
	font-size: 14px;
}
html.mobile {
	font-size: 16px;
}
body {
	/* Chrome injects a stylesheet that sets the font-size of body to 75% */
	font-size: 1em;
}

html, body {
	font-family: sans-serif;
	background: var(--bg-color);
	color: var(--fg-color);
}

form {
	margin: 0;
	padding: 0;
}

.mobile .desktop-only {
	display: none;
}
.desktop .mobile-only {
	display: none;
}

:any-link {
	color: var(--link-color);
}

button,
input,
textarea {
	font-size: 1rem;
	line-height: 1.5;
	padding: 4px 4px;
}
button[type="submit"],
input[type="submit"] {
	font-weight: bold;
}
button,
input[type="submit"],
input[type="button"] {
}
input[type="email"],
input[type="number"],
input[type="password"],
input[type="text"],
input[type="url"],
textarea {
	box-sizing: border-box;
	resize: none;  /* Because we have JavaScript auto-sizing. */
	margin: 0;
	min-width: 1em;
	min-height: 1em;
	background: white;
	overflow: hidden;
	border: 1px solid var(--border-color);
	background: var(--input-color);
	color: var(--fg-color);
}
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
textarea:focus {
	/* So that the focus outline renders correctly. */
	z-index: 1;
}
fieldset {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	margin: 0;
}

input::placeholder,
textarea::placeholder {
	color: var(--placeholder-color);
	font-style: italic;
}
input:invalid,
textarea:invalid {
	background: var(--invalid-color);
}


/* Colors mostly picked from Firefox default interface */

/* Light color scheme */
html,
html.light {
	/* Text */
	--fg-color: #15141A;
	--link-color: #0060DF;
	--placeholder-color: #818184;

	/* Background */
	--bg-color: #FFFFFF;  /* #F9F9FB */
	--invalid-color: #FF9AA2;
	--input-color: #FFFFFF;
	--hover-color: #DEDEDF;
	--button-color: #E6E6E6;
	--button-hover-color: #CECECF;
	--button-active-color: #B6B6B6;

	--border-color: #9F9EA1;
}

/* Dark color scheme */
/* Warning! These colors are copy-pasted twice! Once inside @media, another outside. */
@media (prefers-color-scheme: dark) {
	html {
		/* Text */
		--fg-color: #FBFBFE;
		--link-color: #00DDFF;
		--placeholder-color: #97979c;

		/* Background */
		--bg-color: #1C1B22;
		--invalid-color: #C50042;
		--input-color: #23222B;
		--hover-color: #414149;
		--button-color: #484854;
		--button-hover-color: #5C5C6A;
		--button-active-color: #1C1C22;

		--border-color: #7C7B82;
	}
}
html.dark {
	/* Text */
	--fg-color: #FBFBFE;
	--link-color: #00DDFF;
	--placeholder-color: #97979c;

	/* Background */
	--bg-color: #1C1B22;
	--invalid-color: #C50042;
	--input-color: #23222B;
	--hover-color: #414149;
	--button-color: #484854;
	--button-hover-color: #5C5C6A;
	--button-active-color: #1C1C22;

	--border-color: #7C7B82;
}