Add Nord style

res/include/style/layout.css

@@ -472,8 +472,8 @@ select:disabled , select.disabled {
 	padding: 4px 5px 4px 5px;
 	cursor: not-allowed;
 }
-button > *,
+button > i,
-.button > * {
+.button > i {
 	vertical-align: middle;
 	line-height: 1;
 }

res/template/appearance.html

@@ -23,8 +23,7 @@
 				<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_arc"            name="style"><label for="style_arc">Arc Style</label>
+				<input type="radio" id="style_nord"           name="style"><label for="style_nord">Nord Style</label><br/>
-				(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
 				<input type="radio" id="style_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><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/>

res/template/home.html

@@ -37,13 +37,13 @@
 		}
 		.feat_table > div > .feat_normal {
 			background-color: var(--layer_3_color);
-			box-shadow: 1px 1px 3px -1px var(--shadow_color);
+			box-shadow: 1px 1px 4px -2px var(--shadow_color);
-			text-shadow: 1px 1px 3px var(--shadow_color);
+			text-shadow: 1px 1px 2px var(--shadow_color);
 		}
 		.feat_table > div > .feat_pro {
 			background-color: var(--layer_4_color);
-			box-shadow: 1px 1px 3px 0 var(--shadow_color);
+			box-shadow: 1px 1px 4px -1px var(--shadow_color);
-			text-shadow: 1px 1px 6px var(--shadow_color);
+			text-shadow: 1px 1px 4px var(--shadow_color);
 		}
 		.feat_table > div > .feat_highlight {
 			border: 1px solid var(--highlight_color)
@@ -64,7 +64,7 @@
 			text-align: left;
 			font-size: 1.1em;
 			color: #ffffff;
-			text-shadow: 0 0 3px #000000;
+			text-shadow: 1px 1px 4px #000000;
 		}
 
 		.feat_table > div > div.round_tl { border-top-left-radius:     0.5em; }

svelte/src/util/Expandable.svelte

@@ -52,7 +52,8 @@ export let highlight = false
 	color: var(--text_color);
 }
 .click_expand:hover, .highlight:hover {
-	background-color: var(--input_color_dark)
+	background-color: var(--input_color_dark);
+	color: var(--input_text_color);
 }
 .click_expand {
 	cursor: pointer;

webcontroller/user_style.go

@@ -29,12 +29,12 @@ func userStyle(r *http.Request) pixeldrainStyleSheet {
 		return hackerStyle
 	case "canta":
 		return cantaPixeldrainStyle
-	case "arc":
-		return arcPixeldrainStyle
 	case "deepsea":
 		return deepseaPixeldrainStyle
 	case "skeuos":
 		return skeuosPixeldrainStyle
+	case "nord":
+		return nordPixeldrainStyle
 	case "default":
 		fallthrough // use default case
 	default:
@@ -314,24 +314,6 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 	ShadowColor: hsl{0, 0, 0},
 }
 
-var arcPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, 1},
-	InputColor:               hsl{218, .16, .30},
-	InputTextColor:           hsl{215, .19, .75},
-	HighlightColor:           hsl{212, .71, .60},
-	HighlightTextColor:       hsl{215, .19, .9},
-	DangerColor:              hsl{357, .53, .57}, // hsl(357, 53%, 57%)
-	ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
-	ScrollbarHoverColor:      hsl{222, .08, .54}, // hsl(222, 8%, 44%)
-
-	Layer1Color: hsl{215, .17, .19},
-	Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
-	Layer3Color: hsl{223, .12, .29},
-	Layer4Color: hsl{223, .10, .32},
-
-	ShadowColor: hsl{0, 0, 0},
-}
-
 var deepseaPixeldrainStyle = pixeldrainStyleSheet{
 	TextColor:                hsl{0, 0, .7},
 	InputColor:               hsl{41, .58, .47},
@@ -367,3 +349,21 @@ var skeuosPixeldrainStyle = pixeldrainStyleSheet{
 
 	ShadowColor: hsl{0, 0, 0},
 }
+
+var nordPixeldrainStyle = pixeldrainStyleSheet{
+	TextColor:                hsl{210, .34, .63},
+	InputColor:               hsl{193, .43, .67},
+	InputTextColor:           hsl{180, .19, .23},
+	HighlightColor:           hsl{145, .63, .42},
+	HighlightTextColor:       hsl{0, 0, 0},
+	DangerColor:              hsl{354, .42, .56},
+	ScrollbarForegroundColor: hsl{193, .43, .67},
+	ScrollbarHoverColor:      hsl{193, .43, .76},
+
+	Layer1Color: hsl{220, .16, .22},
+	Layer2Color: hsl{222, .16, .28},
+	Layer3Color: hsl{220, .17, .32},
+	Layer4Color: hsl{220, .16, .36},
+
+	ShadowColor: hsl{0, 0, 0},
+}