Graphical overhaul.

Remove all legacy pixeldrain pages, handlers and assets.
Remove old theming engine.
Make logo responsive to the accent colour.
Lots of other stuff.

res/static/img/nova.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="23.47 13.09 31.04 31.04">
+<defs>
+	<linearGradient id="nbar" x1="27.2" y1="44.04" x2="27.2" y2="16.51" gradientUnits="userSpaceOnUse">
+		<stop offset="0" style="stop-color:#45ed52"/>
+		<stop offset=".5" style="stop-color:#11a574"/>
+		<stop offset="1" style="stop-color:#000"/>
+	</linearGradient>
+	<linearGradient id="nbar2" x1="50.8" y1="13.18" x2="50.8" y2="40.72" href="#nbar"/>
+	<linearGradient id="ndiagonal" x1="24.86" y1="28.61" x2="53.14" y2="28.61" gradientUnits="userSpaceOnUse">
+		<stop offset="0" style="stop-color:#24b880"/>
+		<stop offset="1" style="stop-color:#39ef3d"/>
+	</linearGradient>
+	<linearGradient id="nedge" x1="27.2" y1="16.42" x2="27.2" y2="44.13" gradientUnits="userSpaceOnUse">
+		<stop offset="0" style="stop-color:currentColor;stop-opacity:0"/>
+		<stop offset="1" style="stop-color:currentColor"/>
+	</linearGradient>
+	<linearGradient id="nedge2" x1="50.8" y1="40.81" x2="50.8" y2="13.09" href="#nedge"/>
+	<linearGradient id="nedge3" x1="24.77" y1="28.61" x2="53.23" y2="28.61" gradientUnits="userSpaceOnUse">
+		<stop offset="0" style="stop-color:currentColor;stop-opacity:0"/>
+		<stop offset=".54" style="stop-color:currentColor"/>
+		<stop offset="1" style="stop-color:currentColor;stop-opacity:0"/>
+	</linearGradient>
+</defs>
+<g stroke-width=".18" stroke-miterlimit="10">
+	<path fill="url(#nbar)" stroke="url(#nedge)" d="M27.96,16.75c-2.08,0-2.93,1.83-3.11,3v21.81c0,1.37,1.05,2.48,2.34,2.48s2.34-1.11,2.34-2.48v-24.76c-.58-.63-.72-.05-1.57-.05Z"/>
+	<path fill="url(#nbar2)" stroke="url(#nedge2)" d="M50.03,40.48c2.08,0,2.93-1.83,3.11-3v-.54s0-21.28,0-21.28c0-1.37-1.05-2.48-2.34-2.48s-2.34,1.11-2.34,2.48v20.98s0,2.54,0,2.54v1.24c.58.63.72.05,1.57.05Z"/>
+	<path fill="url(#ndiagonal)" stroke="url(#nedge3)" d="M50.03,40.49c-.71,0-1.33-.32-1.86-.77-.18-.15-.33-.33-.45-.53l-1-1.66-12.34-21.84c-.8-1.43-2.19-2.5-3.83-2.5-.34,0-.68.05-1.01.13-2.49.63-4.68,3.44-4.68,5.96h0v.29c.18-1.1,1.03-2.83,3.11-2.83.71,0,1.33.32,1.86.77.18.15.33.33.45.53l1,1.66,12.34,21.84c.8,1.43,2.19,2.5,3.83,2.5.34,0,.68-.05,1.01-.13,2.49-.63,4.68-3.44,4.68-5.96h0v-.29c-.18,1.1-1.03,2.83-3.11,2.83Z"/>
+</g>
+</svg>

res/static/style/layout.css

@@ -3,8 +3,95 @@
     Author     : Fornax
 */
 
+/* The default theme, a dark and a light variant which follow the browser's
+   preference. Branding colours are applied on top of these by the app, see
+   Branding.ts */
 :root {
-	--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
+	--color_scheme: dark;
+	--background_color: #15161c;
+	--background: var(--background_color);
+	--background_text_color: #e6e8ef;
+	--body_color: #1c1d25;
+	--body_background: rgb(28 29 37 / 90%);
+	--shaded_background: rgb(28 29 37 / 90%);
+	--body_text_color: #e6e8ef;
+	--card_color: #252733;
+	--separator: #2e3040;
+	--shadow_color: #0c0d12;
+	--input_background: #2c2e3b;
+	--input_hover_background: #363949;
+	--input_text: #eceef4;
+	--input_disabled_text: #737890;
+	--accent_color: #49dfa0;
+	--accent_shade: #243d32;
+	--accent_background: #49dfa0;
+	--accent_text_color: #05130d;
+	--link_color: #70ebb8;
+	--scrollbar_foreground_color: #33364a;
+	--scrollbar_hover_color: #43475f;
+
+	/* Accents for success, errors, warnings and notices. They're the highlight
+	   colour with a different hue, see Branding.ts. The tints are backgrounds
+	   for messages */
+	--green_color: #49df7b;
+	--red_color: #df5d49;
+	--yellow_color: #dfba49;
+	--blue_color: #4987df;
+	--green_tint: rgb(73 223 123 / 12%);
+	--red_tint: rgb(223 93 73 / 12%);
+	--yellow_tint: rgb(223 186 73 / 12%);
+	--blue_tint: rgb(73 135 223 / 12%);
+
+	/* The logo's mint colourway, see NovaLogo.svelte */
+	--logo_color_1: #45ed52;
+	--logo_color_2: #11a574;
+	--logo_color_3: #24b880;
+	--logo_color_4: #39ef3d;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--color_scheme: light;
+		--background_color: #e9ebf0;
+		--background_text_color: #1b1d25;
+		--body_color: #f5f6f9;
+		--body_background: rgb(245 246 249 / 90%);
+		--shaded_background: rgb(245 246 249 / 90%);
+		--body_text_color: #1b1d25;
+		--card_color: #ffffff;
+		--separator: #d3d7e0;
+		--shadow_color: #b9bdc9;
+		--input_background: #e2e5ec;
+		--input_hover_background: #d7dbe4;
+		--input_text: #1b1d25;
+		--input_disabled_text: #80859a;
+		--accent_color: #09714b;
+		--accent_shade: #e2eeea;
+		--accent_background: #09714b;
+		--accent_text_color: #ffffff;
+		--link_color: #09714b;
+		--scrollbar_foreground_color: #c6cad5;
+		--scrollbar_hover_color: #b0b5c3;
+
+		/* Accents derived from the accent colour are too light on white,
+		   these are the same ones branded light themes get */
+		--green_color: #15793a;
+		--red_color: #ba2c37;
+		--yellow_color: #995c00;
+		--blue_color: #2164ca;
+		--green_tint: rgb(21 121 58 / 12%);
+		--red_tint: rgb(186 44 55 / 12%);
+		--yellow_tint: rgb(153 92 0 / 12%);
+		--blue_tint: rgb(33 100 202 / 12%);
+	}
+}
+
+/* Branding can set a different scheme on the body, for a shared directory. The
+   browser draws checkboxes and radio buttons in the accent colour */
+:root,
+body {
+	color-scheme: var(--color_scheme);
+	accent-color: var(--accent_color);
 }
 
 @font-face {
@@ -14,7 +101,7 @@
 	font-display: block;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
-		url(/res/misc/MaterialIcons.woff2) format('truetype');
+		url(/res/misc/MaterialIcons.woff2) format('woff2');
 }
 
 .icon {
@@ -117,21 +204,6 @@ pre>code {
 
 /* Page layout elements */
 
-.page_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	background: var(--navigation_background);
-	width: 300px;
-	height: 100%;
-	left: 0;
-	float: left;
-	padding: 20px 0 10px 0;
-	overflow-y: auto;
-	overflow-x: hidden;
-	text-align: left;
-	transition: left 0.5s;
-}
-
 .page_content {
 	background: var(--body_background);
 	text-align: center;
@@ -140,10 +212,6 @@ pre>code {
 }
 
 @media (max-width: 1000px) {
-	.page_navigation {
-		left: -300px;
-	}
-
 	header>h1 {
 		/* We want the header text to appear below the menu button, so the top
 		margin needs to be fairly large when the screen is small */
@@ -173,29 +241,6 @@ section {
 
 /* Page contents */
 
-.page_navigation a {
-	float: none;
-	display: block;
-	color: var(--background_text_color);
-	text-align: center;
-	padding: 4px;
-	margin: 0.2em 15px 0.2em 15px;
-	font-family: 'Open Sans Light', sans-serif;
-	font-weight: lighter;
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	transition: background 0.2s;
-	border-radius: 24px;
-	text-decoration: none;
-}
-
-.page_navigation a:hover {
-	background: var(--input_background);
-	color: var(--input_text);
-	text-decoration: none;
-}
-
 .highlight_shaded,
 .highlight_border,
 .highlight_green,
@@ -218,23 +263,23 @@ section {
 }
 
 .highlight_green {
-	background-color: rgba(0, 255, 0, 0.1);
-	border-color: #00D000;
+	background-color: var(--green_tint);
+	border-color: var(--green_color);
 }
 
 .highlight_blue {
-	background-color: rgba(0, 0, 255, 0.1);
-	border-color: #3636FF;
+	background-color: var(--blue_tint);
+	border-color: var(--blue_color);
 }
 
 .highlight_yellow {
-	background-color: rgba(255, 255, 0, 0.1);
-	border-color: #A0A000;
+	background-color: var(--yellow_tint);
+	border-color: var(--yellow_color);
 }
 
 .highlight_red {
-	background-color: rgba(255, 0, 0, 0.1);
-	border-color: #B00000;
+	background-color: var(--red_tint);
+	border-color: var(--red_color);
 }
 
 .highlight_green,
@@ -386,53 +431,6 @@ tr>th {
 	padding: 0.2em 0.5em;
 }
 
-/* API documentation markup */
-
-.api_doc_details {
-	border-top: 1px solid;
-	border-bottom: 1px solid;
-	margin: 15px 0 15px 0;
-}
-
-.api_doc_details>summary {
-	padding: 2px;
-	font-family: monospace;
-}
-
-.api_doc_details>summary>.method {
-	display: inline-block;
-	width: 80px;
-}
-
-.api_doc_details>div {
-	padding: 8px;
-}
-
-.api_doc_details.request_get {
-	border-color: #3636ff;
-	background-color: rgba(32, 32, 255, 0.2);
-}
-
-.api_doc_details.request_post {
-	border-color: #00d000;
-	background-color: rgba(0, 255, 0, 0.05);
-}
-
-.api_doc_details.request_delete {
-	border-color: #B00000;
-	background-color: rgba(255, 0, 0, 0.05);
-}
-
-.api_doc_details.request_put {
-	border-color: #B06000;
-	background-color: rgba(255, 128, 0, 0.05);
-}
-
-.api_doc_details.request_patch {
-	border-color: #6000B0;
-	background-color: rgba(128, 0, 255, 0.1);
-}
-
 /* BUTTONS */
 button,
 .button,
@@ -486,7 +484,7 @@ input[type="color"]:focus {
 	color: var(--input_text);
 	text-decoration: none;
 	background: var(--input_hover_background);
-	box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
+	box-shadow: 0px 0px 0px 1px var(--accent_color) !important;
 }
 
 button:active,
@@ -499,13 +497,25 @@ input[type="color"]:active {
 	padding: 4px 0px 0px 4px;
 }
 
+/* Selected buttons get the accent colour on a shade of it. The outline shows
+   hover and keyboard focus, so it would be confusing to use it for this too */
 .button_highlight {
-	box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
+	color: var(--accent_color) !important;
+	background: var(--accent_shade) !important;
+}
+
+.icon.button_highlight {
+	border-radius: 4px;
 }
 
 .button_red {
-	background: var(--danger_color) !important;
-	color: var(--danger_text_color) !important;
+	background: var(--red_tint) !important;
+	color: var(--red_color) !important;
+}
+
+.button_red:hover,
+.button_red:focus {
+	box-shadow: 0px 0px 0px 1px var(--red_color) !important;
 }
 
 button:disabled,
@@ -631,7 +641,7 @@ input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="date"]:focus,
 input[type="datetime-local"]:focus {
-	box-shadow: inset 0px 0px 0px 1px var(--highlight_color);
+	box-shadow: inset 0px 0px 0px 1px var(--accent_color);
 }
 
 textarea:disabled,
@@ -657,8 +667,8 @@ input[type=file] {
 
 /* The selected option in multi select */
 option:checked {
-	background-color: var(--highlight_background);
-	color: var(--highlight_text_color);
+	background-color: var(--accent_background);
+	color: var(--accent_text_color);
 }
 
 /* Webkit Scrollbars */