From 4d5720cb1e70138cf5f7dd40ab541520683e9782 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Fri, 1 Apr 2022 20:27:38 +0200
Subject: [PATCH] Make Nord default theme, update solarized

---
 res/include/style/layout.css             | 246 +++++++++++++++++------
 res/template/appearance.html             |  59 ++++--
 res/template/fragments/meta_tags.html    |  12 ++
 res/template/home.html                   |   2 +-
 svelte/src/file_viewer/IntroPopup.svelte |   4 +-
 svelte/src/home_page/FeatureTable.svelte |   4 +-
 svelte/src/home_page/OtherPlans.svelte   |   2 +-
 svelte/src/user_home/Subscription.svelte |   2 +-
 svelte/src/util/Expandable.svelte        |   2 +-
 svelte/src/util/Modal.svelte             |   2 +-
 svelte/src/util/ThemePicker.svelte       |  34 ++--
 webcontroller/style.go                   | 162 ++++++++++-----
 12 files changed, 377 insertions(+), 154 deletions(-)

diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index 8332b6f..3f247f8 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -16,6 +16,7 @@
 		local('MaterialIcons-Regular'),
 		url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
 }
+
 .icon {
 	font-family: 'Material Icons';
 	font-weight: normal;
@@ -31,6 +32,7 @@
 	text-rendering: optimizeLegibility;
 	vertical-align: middle;
 }
+
 .icon_unicode {
 	font-size: 1.5em;
 	display: inline-block;
@@ -39,17 +41,28 @@
 	vertical-align: middle;
 	line-height: 1;
 }
-.icon.small { font-size: 1.2em; }
-a > svg { vertical-align: middle; }
+
+.icon.small {
+	font-size: 1.2em;
+}
+
+a>svg {
+	vertical-align: middle;
+}
 
 /* Page rendering configuration */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
 	box-sizing: border-box;
 }
-html, body {
+
+html,
+body {
 	/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
 	overflow-x: hidden;
 }
+
 body {
 	margin: 0;
 	font-family: system-ui, sans-serif;
@@ -60,23 +73,30 @@ body {
 	min-height: 100vh;
 	padding: 0;
 }
-header, footer, .checkers {
+
+header,
+footer,
+.checkers {
 	background-image: url("{{.BackgroundPattern}}");
 	background-color: var(--background_pattern_color);
 	background-repeat: repeat;
 }
-header, footer {
+
+header,
+footer {
 	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
 	border-radius: 12px;
 	text-align: center;
 	overflow: hidden;
 }
-header > h1 {
+
+header>h1 {
 	text-shadow: 1px 1px 4px var(--shadow_color);
 	margin-top: 69px;
 	margin-bottom: 69px;
 }
-footer > .footer_content {
+
+footer>.footer_content {
 	background-color: var(--shaded_background);
 	display: inline-block;
 	border-radius: 8px;
@@ -99,6 +119,7 @@ footer > .footer_content {
 	border-radius: 0;
 	border-bottom-right-radius: 90%;
 }
+
 .button_toggle_navigation:active {
 	padding: 15px 15px 10px 15px;
 }
@@ -117,6 +138,7 @@ footer > .footer_content {
 	text-align: left;
 	transition: left 0.5s;
 }
+
 .page_body {
 	position: relative;
 	right: 0;
@@ -125,7 +147,8 @@ footer > .footer_content {
 	margin-left: 17em;
 	min-width: 300px;
 	display: block;
-	text-align: center; /* Center the header and body */
+	text-align: center;
+	/* Center the header and body */
 	overflow-y: auto;
 	overflow-x: hidden;
 	background: var(--body_background);
@@ -134,16 +157,19 @@ footer > .footer_content {
 	padding: 8px;
 	transition: margin-left 0.5s;
 }
+
 @media (max-width: 1000px) {
 	.page_navigation {
 		left: -18em;
 	}
+
 	.page_body {
 		margin-left: 0;
 		width: 100%;
 		padding: 4px;
 	}
 }
+
 section {
 	position: relative;
 	display: inline-block;
@@ -169,12 +195,13 @@ section {
 	font-size: 1.5em;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	transition: background-color 0.5s;
+	transition: background 0.2s;
 	border-radius: 24px;
 	text-decoration: none;
 }
+
 .page_navigation a:hover {
-	background: var(--input_background);;
+	background: var(--input_background);
 	color: var(--input_text);
 	text-decoration: none;
 }
@@ -192,21 +219,26 @@ section {
 	padding: 4px;
 	border-radius: 8px;
 }
+
 .highlight_shaded {
 	background: var(--shaded_background);
 }
+
 .highlight_green {
 	background-color: rgba(0, 255, 0, 0.05);
 	border-color: #00D000;
 }
+
 .highlight_blue {
 	background-color: rgba(32, 32, 255, 0.2);
 	border-color: #3636FF;
 }
+
 .highlight_yellow {
 	background-color: rgba(255, 255, 0, 0.05);
 	border-color: #A0A000;
 }
+
 .highlight_red {
 	background-color: rgba(255, 0, 0, 0.1);
 	border-color: #B00000;
@@ -224,7 +256,12 @@ section {
 
 /* Common elements */
 
-h1, h2, h3, h4, h5, h6, .light {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	line-height: 1;
 	margin: 0.5em 0;
 	font-weight: lighter;
@@ -235,25 +272,31 @@ h1 {
 	font-size: 2.5em;
 	text-align: center;
 }
+
 h2 {
 	font-size: 2em;
 	border-bottom: 1px var(--separator) solid;
 }
+
 h3 {
 	font-size: 1.75em;
 	border-bottom: 1px var(--separator) solid;
 }
+
 h4 {
 	font-size: 1.50em;
 	border-bottom: 1px var(--separator) solid;
 }
+
 h5 {
 	font-size: 1.25em;
 	border-bottom: 1px var(--separator) solid;
 }
+
 h6 {
 	font-size: 1em;
 }
+
 .indent {
 	margin: 8px;
 }
@@ -273,32 +316,43 @@ p {
 	margin: 1em 0;
 }
 
-.form{
+.form {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: left;
 	max-width: 30em;
 	width: 100%;
 }
+
 table:not(.form) {
 	border-collapse: collapse;
 	width: 100%;
 }
+
 .table_scroll {
 	width: 100%;
 	overflow-x: auto;
 	overflow-y: hidden;
-    white-space: nowrap;
+	white-space: nowrap;
 }
-.table_scroll > table {
+
+.table_scroll>table {
 	min-width: 100%;
 }
 
-tr:not(.form)    {border-bottom: 1px var(--separator) solid;}
-tr > td, tr > th {padding: 0.2em 0.5em;}
+tr:not(.form) {
+	border-bottom: 1px var(--separator) solid;
+}
+
+tr>td,
+tr>th {
+	padding: 0.2em 0.5em;
+}
+
 @media(max-width: 30em) {
+
 	/* Forms will be stacked on small screens */
-	tr.form > td {
+	tr.form>td {
 		float: left;
 		width: 100%;
 		padding: 0.5em;
@@ -311,7 +365,7 @@ pre {
 	overflow-x: auto;
 }
 
-.file_button{
+.file_button {
 	position: relative;
 	width: 400px;
 	max-width: 90%;
@@ -321,7 +375,6 @@ pre {
 	overflow: hidden;
 	border-radius: 6px;
 	background: var(--input_background);
-	color: #bfbfbf; /* Fallback */
 	color: var(--body_text_color);
 	word-break: break-all;
 	text-align: left;
@@ -334,22 +387,26 @@ pre {
 	vertical-align: top;
 	cursor: pointer;
 }
+
 .file_button:hover {
 	text-decoration: none;
 	background: var(--input_hover_background);
 }
+
 .file_button_selected {
-	box-shadow: 0 0 3px 2px var(--highlight_color);
+	box-shadow: 0 0 2px 2px var(--highlight_color);
 	text-decoration: none;
 }
-.file_button > img{
+
+.file_button>img {
 	max-height: 100%;
 	max-width: 25%;
 	margin-right: 5px;
 	float: left;
 	display: block;
 }
-.file_button > .file_button_title{
+
+.file_button>.file_button_title {
 	color: var(--link_color);
 }
 
@@ -360,27 +417,51 @@ details {
 	border-bottom: 1px solid;
 	margin: 15px 0 15px 0;
 }
-details > summary {
+
+details>summary {
 	padding: 2px;
 	font-family: monospace;
 }
-details > summary > .method {
+
+details>summary>.method {
 	display: inline-block;
 	width: 80px;
 }
-details > div {
+
+details>div {
 	padding: 8px;
 }
 
-details.request_get    { border-color: #3636ff; background-color: rgba(32, 32, 255, 0.2); }
-details.request_post   { border-color: #00d000; background-color: rgba(0, 255, 0, 0.05); }
-details.request_delete { border-color: #B00000; background-color: rgba(255, 0, 0, 0.05); }
-details.request_put    { border-color: #B06000; background-color: rgba(255, 128, 0, 0.05); }
-details.request_patch  { border-color: #6000B0; background-color: rgba(128, 0, 255, 0.1); }
+details.request_get {
+	border-color: #3636ff;
+	background-color: rgba(32, 32, 255, 0.2);
+}
+
+details.request_post {
+	border-color: #00d000;
+	background-color: rgba(0, 255, 0, 0.05);
+}
+
+details.request_delete {
+	border-color: #B00000;
+	background-color: rgba(255, 0, 0, 0.05);
+}
+
+details.request_put {
+	border-color: #B06000;
+	background-color: rgba(255, 128, 0, 0.05);
+}
+
+details.request_patch {
+	border-color: #6000B0;
+	background-color: rgba(128, 0, 255, 0.1);
+}
 
 /* Form fields */
 
-.form_input {width: 100%;}
+.form_input {
+	width: 100%;
+}
 
 /* BUTTONS */
 button,
@@ -400,7 +481,7 @@ select {
 	vertical-align: middle;
 	align-items: center;
 	cursor: pointer;
-	transition: padding 0.2s, box-shadow 0.2s, background 0.2s;
+	transition: padding 0.1s, box-shadow 0.1s, background 0.1s;
 
 	/* Remove default styles set by the user-agent */
 	outline: 0;
@@ -411,6 +492,7 @@ select {
 	text-shadow: none;
 	border: none;
 }
+
 button:hover,
 .button:hover,
 input[type="submit"]:hover,
@@ -423,13 +505,12 @@ input[type="submit"]:focus,
 input[type="button"]:focus,
 input[type="color"]:focus,
 select:focus {
-	color: #bfbfbf; /* Fallback */
 	color: var(--input_text);
 	text-decoration: none;
-	/* box-shadow: inset 0 0 3px 0 var(--highlight_color); */
 	background: var(--input_hover_background);
 
 }
+
 button:active,
 .button:active,
 input[type="submit"]:active,
@@ -440,21 +521,29 @@ select:active {
 	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
 	padding: 9px 1px 1px 9px;
 }
+
 .button_highlight {
 	background: var(--highlight_background) !important;
 	color: var(--highlight_text_color) !important;
 }
+
 .button_red {
 	background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
 	color: var(--highlight_text_color) !important;
 }
 
-button:disabled, button.disabled,
-.button:disabled, .button.disabled,
-input[type="submit"]:disabled, input[type="submit"].disabled,
-input[type="button"]:disabled, input[type="button"].disabled,
-input[type="color"]:disabled, input[type="color"].disabled,
-select:disabled , select.disabled {
+button:disabled,
+button.disabled,
+.button:disabled,
+.button.disabled,
+input[type="submit"]:disabled,
+input[type="submit"].disabled,
+input[type="button"]:disabled,
+input[type="button"].disabled,
+input[type="color"]:disabled,
+input[type="color"].disabled,
+select:disabled,
+select.disabled {
 	color: var(--input_disabled_text);
 	box-shadow: none;
 	transition: none;
@@ -462,10 +551,29 @@ select:disabled , select.disabled {
 	cursor: not-allowed;
 	background: var(--input_background);
 }
-button > i,
-.button > i,
-button > svg,
-.button > svg {
+
+.group_first {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin-right: 0;
+}
+
+.group_middle {
+	border-radius: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.group_last {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	margin-left: 0;
+}
+
+button>i,
+.button>i,
+button>svg,
+.button>svg {
 	vertical-align: middle;
 	line-height: 1;
 }
@@ -473,6 +581,7 @@ button > svg,
 .round {
 	border-radius: 32px;
 }
+
 .tab_bar {
 	display: block;
 	width: 100%;
@@ -481,22 +590,24 @@ button > svg,
 	white-space: nowrap;
 	text-align: center;
 	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
+	/* border-bottom: 2px solid var(--input_background); */
 }
-.tab_bar > button,
-.tab_bar > .button {
+
+.tab_bar>button,
+.tab_bar>.button {
 	margin: 10px 0 0 10px;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
 	min-width: 5em;
 }
-.tab_bar > *:last-child {
+
+.tab_bar>*:last-child {
 	margin-right: 10px;
 }
 
 /* Dropdown list of the select tag */
-option{
+option {
 	background: var(--input_background);
-	color: #bfbfbf; /* Fallback */
 	color: var(--body_text_color);
 }
 
@@ -507,9 +618,10 @@ input[type="text"],
 input[type="password"],
 input[type="email"],
 input[type="number"],
-input[type="date"]{
+input[type="date"] {
 	display: inline-block;
-	margin: 3px; /* Same as button, to make them align nicely */
+	margin: 3px;
+	/* Same as button, to make them align nicely */
 	border: none;
 	border-radius: 6px;
 	background: var(--input_background);
@@ -518,8 +630,9 @@ input[type="date"]{
 	color: var(--input_text);
 	font-size: 1em;
 	outline: 0;
-	transition: box-shadow 0.3s;
+	transition: box-shadow 0.2s;
 }
+
 textarea:active,
 input[type="text"]:active,
 input[type="password"]:active,
@@ -531,22 +644,23 @@ input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
-input[type="date"]:focus{
+input[type="date"]:focus {
 	box-shadow: inset 0 0 3px 0 var(--highlight_color);
 }
+
 textarea:disabled,
 input[type="text"]:disabled,
 input[type="password"]:disabled,
 input[type="email"]:disabled,
 input[type="number"]:disabled,
-input[type="date"]:disabled{
+input[type="date"]:disabled {
 	color: var(--input_disabled_text);
 	box-shadow: none;
 	transition: none;
 	cursor: not-allowed;
 }
 
-input[type=file]{
+input[type=file] {
 	visibility: hidden;
 	position: static;
 	width: 0;
@@ -555,13 +669,17 @@ input[type=file]{
 
 /* Webkit Scrollbars */
 
-::-webkit-scrollbar{
-	width: 18px;  /* for vertical scrollbars */
-	height: 18px; /* for horizontal scrollbars */
+::-webkit-scrollbar {
+	width: 18px;
+	/* for vertical scrollbars */
+	height: 18px;
+	/* for horizontal scrollbars */
 }
+
 ::-webkit-scrollbar-track {
 	background: var(--body_color);
 }
+
 ::-webkit-scrollbar-thumb {
 	background-color: var(--scrollbar_foreground_color);
 	border-radius: 10px;
@@ -569,12 +687,15 @@ input[type=file]{
 	height: 40px;
 	width: 40px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
 	background-color: var(--scrollbar_hover_color);
 }
-::-webkit-scrollbar-corner{
+
+::-webkit-scrollbar-corner {
 	background-color: var(--body_color);
 }
+
 ::-webkit-scrollbar-button:single-button {
 	background-color: var(--body_color);
 	display: block;
@@ -582,11 +703,13 @@ input[type=file]{
 	height: 10px;
 	width: 10px;
 }
+
 ::-webkit-scrollbar-button:single-button:vertical:decrement {
 	display: none;
 	/* border-width: 0 8px 8px 8px; */
 	/* border-color: transparent transparent var(--scrollbar_foreground_color) transparent; */
 }
+
 /* ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
 	border-color: transparent transparent var(--scrollbar_hover_color) transparent;
 } */
@@ -595,6 +718,7 @@ input[type=file]{
 	/* border-width: 8px 8px 0 8px; */
 	/* border-color: var(--scrollbar_foreground_color) transparent transparent transparent; */
 }
+
 /* ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
 	border-color: var(--scrollbar_hover_color) transparent transparent transparent;
 } */
@@ -603,6 +727,7 @@ input[type=file]{
 	/* border-width: 8px 8px 8px 0px; */
 	/* border-color: transparent var(--scrollbar_foreground_color) transparent transparent; */
 }
+
 /* ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
 	border-color: transparent var(--scrollbar_hover_color) transparent transparent;
 } */
@@ -611,6 +736,7 @@ input[type=file]{
 	/* border-width: 8px 0px 8px 8px; */
 	/* border-color: transparent transparent transparent var(--scrollbar_foreground_color); */
 }
+
 /* ::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
     border-color: transparent transparent transparent var(--scrollbar_hover_color);
 } */
diff --git a/res/template/appearance.html b/res/template/appearance.html
index 1fdb50f..b044d20 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -16,30 +16,50 @@
 				be saved in a cookie.
 			</p>
 			<div class="indent">
-				<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
-				Default pixeldrain style, with purple gradients
-				<br/>
-				<br/>
 				<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
-				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
-				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:<br/>
-				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label><br/>
-				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label><br/>
+				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
 				<br/>
-				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label><br/>
-				Classic pre-2020 pixeldrain style, dark grey<br/>
+				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+				<br/>
+				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
+				<br/>
+				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
+				<br/>
+				<br/>
+				<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
+				(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
+				<br/>
+				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+				<br/>
+				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
+				<br/>
+				<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
+				<br/>
+				<!-- <br/> -->
+				<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
+				<br/>
+				<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
+				<br/>
+				Classic 2022 style, with purple gradients
+				<br/>
+				<br/>
+				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
+				<br/>
+				Classic pre-2020 pixeldrain style, dark gray
+				<br/>
+				<br/>
+				Other (experimental) themes
+				<br/>
+				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label>
+				<br/>
+				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label>
 				<br/>
-				Other (experimental) themes<br/>
-				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
-				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
-				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
 				<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
-				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
-				<input type="radio" id="style_snowstorm"      name="style"><label for="style_snowstorm">Snowstorm Style</label>
-				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
+				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
+				<br/>
 				<input type="radio" id="style_skeuos"         name="style"><label for="style_skeuos">Skeuos Style</label>
-				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
-				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
+				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
+				<br/>
 				<input type="radio" id="style_sweet"          name="style"><label for="style_sweet">Sweet</label>
 			</div>
 		</section>
@@ -51,7 +71,6 @@
 				var date = new Date();
 				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
 				document.cookie = "style=" + evt.target.id.substring(6) + "; expires=" + date.toUTCString() + "; path=/";
-
 				location.reload();
 			})
 		});
diff --git a/res/template/fragments/meta_tags.html b/res/template/fragments/meta_tags.html
index 2cd3069..42f697c 100644
--- a/res/template/fragments/meta_tags.html
+++ b/res/template/fragments/meta_tags.html
@@ -17,6 +17,18 @@
 <meta name="description" content="Pixeldrain is a free file sharing service, you
 can upload any file and you will be given a shareable link right away.
 pixeldrain also supports previews for images, videos, audio, PDFs and much more." />
+<meta name="keywords" content="file sharing, free file sharing, file transfer,
+free file transfer, file hosting, free file hosting, hosting, file upload,
+free file upload, uploading, send file, large file, free file sharing,
+free file transfer, 10 GB free, free file sending, file storage, cloud storage,
+free cloud storage, image hosting, image sharing, photo hosting,
+photo transfer, photo sharing, video hosting, video sharing, video transfer,
+document sharing, upload documents, send documents, huge file, large video,
+large document, pdf, pdf sharing, pdf upload, pdf transfer, pdf reader,
+free pdf upload, text file upload, text sharing, photo storage,
+professional file transfer, cheap storage, cheap file storage, send large file,
+send big file, send huge file, audio sharing, music sharing, audio upload,
+music upload" />
 <meta property="og:type" content="website" />
 <meta property="og:title" content="{{.}} ~ pixeldrain" />
 <meta property="og:site_name" content="pixeldrain" />
diff --git a/res/template/home.html b/res/template/home.html
index e71c929..720ffc7 100644
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -14,7 +14,7 @@
 			background-attachment: fixed;
 			background-position: center;
 			background-size: cover;
-			color: var(--background_text_color);
+			color: #ffffff;
 		}
 		</style>
 
diff --git a/svelte/src/file_viewer/IntroPopup.svelte b/svelte/src/file_viewer/IntroPopup.svelte
index 9d4b565..4ea99b9 100644
--- a/svelte/src/file_viewer/IntroPopup.svelte
+++ b/svelte/src/file_viewer/IntroPopup.svelte
@@ -56,7 +56,7 @@ onMount(() => {
 	max-width: 80%;
 	height: auto;
 	padding: 8px;
-	background-color: var(--popout_color);
+	background-color: var(--card_color);
 	box-shadow: 1px 1px 10px -2px var(--shadow_color);
 	border-radius: 20px;
 	z-index: 50;
@@ -68,7 +68,7 @@ onMount(() => {
 	position: absolute;
 	left: 30px;
 	top: -15px;
-	border-bottom: 15px solid var(--popout_color);
+	border-bottom: 15px solid var(--card_color);
 	border-left: 15px solid transparent;
 	border-right: 15px solid transparent;
 }
diff --git a/svelte/src/home_page/FeatureTable.svelte b/svelte/src/home_page/FeatureTable.svelte
index e99a533..10d7a2c 100644
--- a/svelte/src/home_page/FeatureTable.svelte
+++ b/svelte/src/home_page/FeatureTable.svelte
@@ -282,10 +282,10 @@ onMount(() => {
 	background: var(--shaded_background);
 }
 .feat_table > div > .feat_normal {
-	background-color: var(--popout_color);
+	background-color: var(--card_color);
 }
 .feat_table > div > .feat_pro {
-	background-color: var(--popout_color);
+	background-color: var(--card_color);
 	box-shadow: 1px 1px 2px -1px var(--shadow_color);
 }
 .feat_table > div > .feat_highlight {
diff --git a/svelte/src/home_page/OtherPlans.svelte b/svelte/src/home_page/OtherPlans.svelte
index 166598f..04be274 100644
--- a/svelte/src/home_page/OtherPlans.svelte
+++ b/svelte/src/home_page/OtherPlans.svelte
@@ -133,7 +133,7 @@
 	hyphens: auto;
 }
 .feat_table > div > .feat_pro {
-	background-color: var(--popout_color);
+	background-color: var(--card_color);
 	box-shadow: 1px 1px 2px -1px var(--shadow_color);
 }
 .text_highlight {
diff --git a/svelte/src/user_home/Subscription.svelte b/svelte/src/user_home/Subscription.svelte
index 64c4b75..b10bee0 100644
--- a/svelte/src/user_home/Subscription.svelte
+++ b/svelte/src/user_home/Subscription.svelte
@@ -292,7 +292,7 @@ onMount(load_tranfer_used)
 	font-size: 1.1em;
 }
 .feat_table > div > .feat_normal {
-	background: var(--popout_color);
+	background: var(--card_color);
 }
 .feat_table > div > .feat_highlight {
 	border: 1px solid var(--highlight_color)
diff --git a/svelte/src/util/Expandable.svelte b/svelte/src/util/Expandable.svelte
index cd91cba..fa15d3a 100644
--- a/svelte/src/util/Expandable.svelte
+++ b/svelte/src/util/Expandable.svelte
@@ -41,7 +41,7 @@ export let highlight = false
 <style>
 .expandable {
 	text-decoration: none;
-	background-color: var(--popout_color);
+	background-color: var(--card_color);
 	margin: 0.6em 0;
 	border-radius: 6px;
 	overflow: hidden;
diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte
index aefefdb..0be2d81 100644
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -87,7 +87,7 @@ const keydown = e => {
 	left: 50%;
 	transform: translate(-50%, -20%);
 	padding: 0;
-	border-radius: 20px 20px 16px 16px;
+	border-radius: 20px 20px 12px 12px;
 	overflow: hidden;
 	text-align: left;
 }
diff --git a/svelte/src/util/ThemePicker.svelte b/svelte/src/util/ThemePicker.svelte
index 9e50d81..406bb1e 100644
--- a/svelte/src/util/ThemePicker.svelte
+++ b/svelte/src/util/ThemePicker.svelte
@@ -14,15 +14,30 @@ let set = s => {
 	<button class:button_highlight={theme===""} on:click={() => {set("")}}>
 		None
 	</button>
-	<button class:button_highlight={theme==="default"} on:click={() => {set("default")}}>
-		Default (purple)
+	<button class="group_first" class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
+		Nord
+	</button>
+	<button class="group_middle" class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
+		dark
+	</button>
+	<button class="group_last" class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
+		light
+	</button>
+	<button class="group_first" class:button_highlight={theme==="solarized"} on:click={() => {set("solarized")}}>
+		Solarized
+	</button>
+	<button class="group_middle" class:button_highlight={theme==="solarized_dark"} on:click={() => {set("solarized_dark")}}>
+		dark
+	</button>
+	<button class="group_last" class:button_highlight={theme==="solarized_light"} on:click={() => {set("solarized_light")}}>
+		light
+	</button>
+	<button class:button_highlight={theme==="purple_drain"} on:click={() => {set("purple_drain")}}>
+		Purple drain
 	</button>
 	<button class:button_highlight={theme==="classic"} on:click={() => {set("classic")}}>
 		Classic
 	</button>
-	<button class:button_highlight={theme==="solarized_dark"} on:click={() => {set("solarized_dark")}}>
-		Solarized
-	</button>
 	<button class:button_highlight={theme==="maroon"} on:click={() => {set("maroon")}}>
 		Maroon
 	</button>
@@ -32,15 +47,6 @@ let set = s => {
 	<button class:button_highlight={theme==="canta"} on:click={() => {set("canta")}}>
 		Canta
 	</button>
-	<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
-		Nord (dynamic)
-	</button>
-	<button class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
-		Nord (dark)
-	</button>
-	<button class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
-		Nord (light)
-	</button>
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos
 	</button>
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 8951301..fdd921f 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -25,10 +25,22 @@ func userStyleFromRequest(r *http.Request) (s template.CSS) {
 
 func userStyle(style string) template.CSS {
 	switch style {
-	case "classic":
-		return template.CSS(pixeldrainClassicStyle.String())
+	case "nord":
+		return template.CSS(nordDarkStyle.withLight(nordLightStyle))
+	case "nord_dark":
+		return template.CSS(nordDarkStyle.String())
+	case "nord_light", "snowstorm":
+		return template.CSS(nordLightStyle.String())
+	case "solarized":
+		return template.CSS(solarizedDarkStyle.withLight(solarizedLightStyle))
 	case "solarized_dark":
 		return template.CSS(solarizedDarkStyle.String())
+	case "solarized_light":
+		return template.CSS(solarizedLightStyle.String())
+	case "classic":
+		return template.CSS(classicStyle.String())
+	case "purple_drain":
+		return template.CSS(defaultPixeldrainStyle.String())
 	case "maroon":
 		return template.CSS(maroonStyle.String())
 	case "hacker":
@@ -37,18 +49,12 @@ func userStyle(style string) template.CSS {
 		return template.CSS(cantaPixeldrainStyle.String())
 	case "skeuos":
 		return template.CSS(skeuosPixeldrainStyle.String())
-	case "nord":
-		return template.CSS(nordPixeldrainStyle.withLight(snowstormPixeldrainStyle))
-	case "nord_dark":
-		return template.CSS(nordPixeldrainStyle.String())
-	case "nord_light", "snowstorm":
-		return template.CSS(snowstormPixeldrainStyle.String())
 	case "sweet":
 		return template.CSS(sweetPixeldrainStyle.String())
-	case "default":
-		fallthrough // use default case
+	case "adwaita":
+		return template.CSS(adwaitaDarkStyle.withLight(adwaitaLightStyle))
 	default:
-		return template.CSS(defaultPixeldrainStyle.String())
+		return template.CSS(nordDarkStyle.withLight(nordLightStyle))
 	}
 }
 
@@ -76,7 +82,8 @@ type styleSheet struct {
 	BodyText          hsl
 	Separator         Color
 	Shaded            Color
-	PopoutColor       hsl
+	CardColor         hsl
+	CardText          hsl
 
 	// Colors to use in graphs
 	Chart1 hsl
@@ -84,7 +91,6 @@ type styleSheet struct {
 	Chart3 hsl
 
 	Shadow hsl
-	Light  bool // If this is a light theme
 }
 
 func (s styleSheet) withDefaults() styleSheet {
@@ -148,7 +154,7 @@ func (s styleSheet) String() string {
 	--body_text_color:          %s;
 	--separator:                %s;
 	--shaded_background:        %s;
-	--popout_color:             %s;
+	--card_color:               %s;
 
 	--chart_1_color: %s;
 	--chart_2_color: %s;
@@ -179,7 +185,7 @@ func (s styleSheet) String() string {
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
 		s.Shaded.CSS(),
-		s.PopoutColor.CSS(),
+		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
 		s.Chart3.CSS(),
@@ -251,14 +257,14 @@ var defaultPixeldrainStyle = styleSheet{
 	BodyColor:         hsl{274, .9, .14},
 	BodyBackground:    NoColor,
 	BodyText:          hsl{0, 0, .8},
-	PopoutColor:       hsl{275, .8, .18},
+	CardColor:         hsl{275, .8, .18},
 
 	Shadow: hsl{0, 0, 0},
 }
 
-var pixeldrainClassicStyle = styleSheet{
-	Input:               hsl{0, 0, .16},
-	InputHover:          hsl{0, 0, .20},
+var classicStyle = styleSheet{
+	Input:               hsl{0, 0, .18},
+	InputHover:          hsl{0, 0, .22},
 	InputText:           hsl{0, 0, .9},
 	InputDisabledText:   hsl{0, 0, .4},
 	Highlight:           hsl{89, .60, .45},
@@ -268,28 +274,9 @@ var pixeldrainClassicStyle = styleSheet{
 	ScrollbarHover:      hsl{0, 0, .50},
 
 	BackgroundColor: hsl{0, 0, .08},
-	BodyColor:       hsl{0, 0, .11},
+	BodyColor:       hsl{0, 0, .12},
 	BodyText:        hsl{0, 0, .8},
-	PopoutColor:     hsl{0, 0, .18},
-
-	Shadow: hsl{0, 0, 0},
-}
-
-var solarizedDarkStyle = styleSheet{
-	Input:               hsl{192, .95, .25},
-	InputHover:          hsl{192, .95, .29},
-	InputText:           hsl{0, 0, 1},
-	InputDisabledText:   hsl{0, 0, .5},
-	Highlight:           hsl{145, .63, .42},
-	HighlightText:       hsl{0, 0, 0},
-	Danger:              hsl{343, .63, .42},
-	ScrollbarForeground: hsl{192, .95, .30},
-	ScrollbarHover:      hsl{192, .95, .40},
-
-	BackgroundColor: hsl{192, .87, .09},
-	BodyColor:       hsl{192, .81, .14},
-	BodyText:        hsl{0, 0, .75},
-	PopoutColor:     hsl{192, .95, .17},
+	CardColor:       hsl{0, 0, .16},
 
 	Shadow: hsl{0, 0, 0},
 }
@@ -308,7 +295,7 @@ var maroonStyle = styleSheet{
 	BackgroundColor: hsl{0, .7, .05},
 	BodyColor:       hsl{0, .8, .08}, // hsl{0, .8, .15},
 	BodyText:        hsl{0, 0, .8},
-	PopoutColor:     hsl{0, .9, .14},
+	CardColor:       hsl{0, .9, .14},
 
 	Shadow: hsl{0, 0, 0},
 }
@@ -327,7 +314,7 @@ var hackerStyle = styleSheet{
 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{0, 0, .03},
 	BodyText:        hsl{0, 0, .8},
-	PopoutColor:     hsl{120, .4, .05},
+	CardColor:       hsl{120, .4, .05},
 
 	Shadow: hsl{0, 0, 0},
 }
@@ -346,7 +333,7 @@ var cantaPixeldrainStyle = styleSheet{
 	BackgroundColor: hsl{180, .04, .16},
 	BodyColor:       hsl{168, .05, .21},
 	BodyText:        hsl{0, 0, .8},
-	PopoutColor:     hsl{170, .05, .26},
+	CardColor:       hsl{170, .05, .26},
 
 	Shadow: hsl{0, 0, 0},
 }
@@ -365,12 +352,12 @@ var skeuosPixeldrainStyle = styleSheet{
 	BackgroundColor: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
 	BodyColor:       hsl{229, .14, .16}, // hsl(229, 14%, 16%)
 	BodyText:        hsl{60, .06, .93},  // hsl(60, 6%, 93%)
-	PopoutColor:     hsl{225, .14, .17}, // hsl(225, 14%, 17%)
+	CardColor:       hsl{225, .14, .17}, // hsl(225, 14%, 17%)
 
 	Shadow: hsl{0, 0, 0},
 }
 
-var nordPixeldrainStyle = styleSheet{
+var nordDarkStyle = styleSheet{
 	Input:               hsl{220, .16, .36}, // nord3
 	InputHover:          hsl{220, .16, .40},
 	InputText:           hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
@@ -384,13 +371,13 @@ var nordPixeldrainStyle = styleSheet{
 	BackgroundColor: hsl{220, .16, .22}, // nord0
 	BodyColor:       hsl{222, .16, .28}, // nord1
 	BodyText:        hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
-	PopoutColor:     hsl{220, .17, .32}, // nord2
+	CardColor:       hsl{220, .17, .32}, // nord2
 
 	Shadow: hsl{0, 0, 0},
 }
 
-var snowstormPixeldrainStyle = styleSheet{
-	Link:                hsl{92, .40, .40},
+var nordLightStyle = styleSheet{
+	Link:                hsl{92, .40, .32},
 	Input:               hsl{218, .27, .94}, // nord6 hsl(218, 27%, 94%)
 	InputHover:          hsl{218, .27, .98},
 	InputText:           hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
@@ -408,10 +395,9 @@ var snowstormPixeldrainStyle = styleSheet{
 	BodyText:          hsl{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
 	Shaded:            RGBA{255, 255, 255, 0.4},
 	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
-	PopoutColor:       hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
+	CardColor:         hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
 
 	Shadow: hsl{220, .16, .36},
-	Light:  true,
 }
 
 var sweetPixeldrainStyle = styleSheet{
@@ -426,7 +412,81 @@ var sweetPixeldrainStyle = styleSheet{
 	BackgroundColor: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
 	BodyColor:       hsl{228, .25, .12}, // hsl(228, 25%, 12%)
 	BodyText:        hsl{223, .13, .79}, // hsl(223, 13%, 79%)
-	PopoutColor:     hsl{229, .25, .14}, // hsl(229, 25%, 14%)
+	Separator:       RGBA{255, 255, 255, 0.05},
+	CardColor:       hsl{229, .25, .14}, // hsl(229, 25%, 14%)
 
 	Shadow: hsl{0, 0, 0},
 }
+
+var adwaitaDarkStyle = styleSheet{
+	Input:             RGBA{255, 255, 255, .06},
+	InputHover:        RGBA{255, 255, 255, .1},
+	InputText:         hsl{0, 0, 1},
+	InputDisabledText: hsl{0, 0, .5},
+	Highlight:         hsl{152, .62, .39}, // hsl(152, 62%, 39%)
+	HighlightText:     hsl{0, 0, 0},
+	Danger:            hsl{9, 1, .69}, // hsl(9, 100%, 69%)
+
+	BackgroundColor: hsl{0, 0, .19},
+	BodyColor:       hsl{0, 0, .14},
+	BodyText:        hsl{0, 0, 1},
+	Separator:       RGBA{255, 255, 255, 0.04},
+	CardColor:       hsl{0, 0, .08},
+
+	Shadow: hsl{0, 0, 0},
+}
+
+var adwaitaLightStyle = styleSheet{
+	Input:             RGBA{0, 0, 0, .06},
+	InputHover:        RGBA{0, 0, 0, .1},
+	InputText:         hsl{0, 0, .2},
+	InputDisabledText: hsl{0, 0, .7},
+	Highlight:         hsl{152, .62, .47}, // hsl(152, 62%, 47%)
+	HighlightText:     hsl{0, 0, 1},
+	Danger:            hsl{356, .75, .43}, // hsl(356, 75%, 43%)
+
+	BackgroundColor: hsl{0, 0, .92},
+	BodyColor:       hsl{0, 0, .98},
+	BodyText:        hsl{0, 0, .2},
+	Shaded:          RGBA{0, 0, 0, 0.04},
+	CardColor:       hsl{0, 0, 1},
+
+	Shadow: hsl{0, 0, 0.36},
+}
+
+var solarizedDarkStyle = styleSheet{
+	Input:             hsl{192, .81, .18}, // hsl(194, 14%, 40%)
+	InputHover:        hsl{192, .81, .22}, // hsl(196, 13%, 45%)
+	InputText:         hsl{180, .07, .80}, // hsl(44, 87%, 94%)
+	InputDisabledText: hsl{194, .14, .30}, // hsl(194, 14%, 40%)
+	Highlight:         hsl{68, 1, .30},    // hsl(68, 100%, 30%)
+	HighlightText:     hsl{192, 1, .11},   // hsl(192, 100%, 11%)
+	Danger:            hsl{1, .71, .52},   // hsl(1, 71%, 52%)
+
+	BackgroundColor: hsl{192, 1, .11},   //hsl(192, 100%, 11%)
+	BodyColor:       hsl{192, .81, .14}, // hsl(192, 81%, 14%)
+	BodyText:        hsl{180, .07, .60}, // hsl(180, 7%, 60%)
+	Separator:       RGBA{255, 255, 255, 0.05},
+	CardColor:       hsl{192, .81, .16},
+
+	Shadow: hsl{0, 0, 0},
+}
+
+var solarizedLightStyle = styleSheet{
+	Input:             hsl{46, .42, .84}, //hsl(180, 7%, 60%)
+	InputHover:        hsl{46, .42, .88},
+	InputText:         hsl{194, .14, .20}, // hsl(192, 81%, 14%)
+	InputDisabledText: hsl{194, .14, .80},
+	Highlight:         hsl{68, 1, .30},  // hsl(68, 100%, 30%)
+	HighlightText:     hsl{192, 1, .11}, // hsl(192, 100%, 11%)
+	Danger:            hsl{1, .71, .52}, // hsl(1, 71%, 52%)
+
+	BackgroundColor: hsl{46, .42, .88},  // hsl(46, 42%, 88%)
+	BodyColor:       hsl{44, .87, .94},  // hsl(44, 87%, 94%)
+	BodyText:        hsl{194, .14, .40}, // hsl(194, 14%, 40%)
+	Separator:       RGBA{0, 0, 0, 0.05},
+	Shaded:          RGBA{255, 255, 255, 0.2},
+	CardColor:       hsl{44, .87, .96},
+
+	Shadow: hsl{0, 0, 0.36},
+}