Finish new style

2019-09-18 22:23:12 +02:00
parent 9f836801f2
commit 3bbf51a490
19 changed files with 217 additions and 144 deletions
--- a/res/static/img/header_2019.png
+++ b/res/static/img/header_2019.png
--- a/res/static/img/header_2019.xcf
+++ b/res/static/img/header_2019.xcf
--- a/res/static/script/Viewer.js
+++ b/res/static/script/Viewer.js
@@ -42,12 +42,14 @@ var Viewer = {
 		this.currentFile = file.id;
 		var title = "";
 		if (this.isList) {
-			title = this.title + " ~ " + file.name;
+			document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
+			document.getElementById("file_viewer_list_title").innerText = this.title;
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = this.title + " ~ " + file.name + " ~ PixelDrain";
 		} else {
-			title = file.name;
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = file.name + " ~ PixelDrain";
 		}
-		document.title = title + " ~ PixelDrain";
-		document.getElementById("file_viewer_headerbar_title").innerText = title;

 		$.get("/u/" + file.id + "/preview", function(response){
 			$("#filepreview").html(response);
--- a/res/static/script/compiled/home.js
+++ b/res/static/script/compiled/home.js
@@ -151,11 +151,6 @@ document.addEventListener('drop', function (e) {
        handleUploads(e.dataTransfer.files);
    }
 });
-// Style selector
-$("input[name=style]").change(function (evt) {
-    Cookie.write("style", evt.target.id.substring(6));
-    location.reload();
-});
 function copyText(text) {
    // Create a textarea to copy the text from
    var ta = document.createElement("textarea");
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -70,15 +70,6 @@ body{

 /* Page layout elements */

-.page_wrapper {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-}
-
 .button_toggle_navigation {
 	position: absolute;
 	z-index: 300;
@@ -92,23 +83,24 @@ body{
 	border-bottom-right-radius: 90%;
 	box-shadow: 2px 2px 8px -3px var(--shadow_color);
 }
-.page_wrapper > .page_navigation {
+.page_navigation {
 	position: absolute;
 	z-index: 100;
 	width: 250px;
+	top: 0;
+	bottom: 0;
+	left: 0;
 	float: left;
 	background-color: var(--layer_1_color);
-	left: 0;
-	bottom: 0;
-	top: 0;
 	padding: 20px 0 0.5em 0;
+	box-sizing: border-box;
 	overflow-y: auto;
 	overflow-x: hidden;
 	text-align: left;
 	box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
 	transition: left 0.5s;
 }
-.page_wrapper > .page_body {
+.page_body {
 	position: absolute;
 	z-index: 200;
 	top: 0;
@@ -122,20 +114,18 @@ body{
 	overflow-x: hidden;
 	z-index: 50;
 	transition: left 0.5s;
-	padding-top: 40px;
-	background-image: var(--background_pattern);
-	background-attachment: local;
+	padding: 50px 0 50px 0;
 }
@media (max-width: 600px) {
-	.page_wrapper > .page_navigation {
+	.page_navigation {
 		left: -250px;
 	}
-	.page_wrapper > .page_body {
+	.page_body {
 		left: 0;
 	}
 }

-.page_wrapper > .page_body > .page_content {
+.page_body > .page_content {
 	position: relative;
 	display: inline-block;
 	width: 100%;
@@ -146,7 +136,7 @@ body{
 	box-sizing: border-box;
 	clear: both;
 }
-.page_wrapper > .page_body > .page_content > .limit_width {
+.page_body > .page_content > .limit_width {
 	position: relative;
 	display: inline-block;
 	max-width: 1000px;
@@ -158,7 +148,7 @@ body{
 	word-break: break-word;
 	clear: both;
 }
-.page_wrapper > .page_body > h1 {
+.page_body > h1 {
 	text-shadow: 1px 1px 25px #000000;
 }

@@ -166,12 +156,12 @@ body{

 .header_image{
 	width: 100%;
-	max-width: 1000px;
+	max-width: 1200px;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }

-.page_wrapper > .page_navigation a {
+.page_navigation a {
 	float: none;
 	display: block;
 	box-sizing: border-box;
@@ -188,8 +178,9 @@ body{
 	transition: background-color 0.5s;
 	border-radius: 5px;
 }
-.page_wrapper > .page_navigation a:hover {
+.page_navigation a:hover {
 	background-color: var(--input_color);
+	color: var(--input_text_color);
 	text-decoration: none;
 }

@@ -286,6 +277,9 @@ hr{
 	border-radius: 0.5em;
 	border: 0.22em solid var(--scrollbar_background_color);
 }
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar_hover_color);
+}
 ::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}

 a       {color: var(--highlight_color); text-decoration: none;}
--- a/res/static/style/viewer.css
+++ b/res/static/style/viewer.css
@@ -36,12 +36,29 @@
 .file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
 	flex-shrink: 1;
+	display: flex;
+	flex-direction: column;
 	overflow: hidden;
 	white-space: nowrap;
 	line-height: 2em;
 	text-overflow: ellipsis;
 }
-
+.file_viewer > .highlight_headerbar > .button_home::after {
+	content: "pixeldrain";
+}
+@media (max-width: 500px) {
+	.file_viewer > .highlight_headerbar > .button_home::after {
+		content: "pd";
+	}
+	.file_viewer > .highlight_headerbar > .list_navigator_buttons {
+		display: none;
+	}
+}
+.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title > span {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-right: 1em;
+}
 /* List Navigator (row 2) */
 .file_viewer > .list_navigator {
 	flex-grow: 0;
@@ -60,7 +77,7 @@
 }
 .file_viewer > .list_navigator > .list_item{
 	height: 2.6em !important;
-	width: 250px !important;
+	width: 220px !important;
 }

 /* File preview area (row 3) */
@@ -244,7 +261,7 @@
 	flex-direction: column;
 	opacity: 0;
 	transition: visibility .5s, opacity .5s;
-	background-color: var(--body_color);
+	background-color: var(--layer_1_color);
 	border-color: var(--layer_1_color_border);
 	max-height: 100%;
 	max-width: 100%;
--- a/res/static/typescript/home/home.ts
+++ b/res/static/typescript/home/home.ts
@@ -183,12 +183,6 @@ document.addEventListener('drop', function(e: DragEvent){
 	}
 })

-// Style selector
-$("input[name=style]").change(function(evt){
-	Cookie.write("style", evt.target.id.substring(6))
-	location.reload()
-})
-
 function copyText(text: string) : boolean {
 	// Create a textarea to copy the text from
 	var ta = document.createElement("textarea");
--- a/res/template/about.html
+++ b/res/template/about.html
@@ -7,7 +7,7 @@

 	<body>
 		{{template "page_top" .}}
-		<h1>About Pixeldrain</h1>
+		<h1>About pixeldrain</h1>
 		<div class="page_content"><div class="limit_width">
 			<h2>Questions and Answers</h2>

@@ -94,7 +94,7 @@
 				appearance of the website for you.
 			</p>

-			<h2>Legality</h2>
+			<h2 id="legality">Legality</h2>
 			<p>
 				I cannot be held liable for any illegal and / or copyrighted
 				material that's uploaded by the users of this application.
--- a/res/template/account/user_files.html
+++ b/res/template/account/user_files.html
@@ -44,7 +44,7 @@
 			</a><!--
 			-->{{end}}

-			<br/>
+			<br/><br/>
 			<div class="highlight_dark">
 				{{if ne $page 0}}
 					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
--- a/res/template/account/user_home.html
+++ b/res/template/account/user_home.html
@@ -20,7 +20,7 @@

 			<h2>Your most recently uploaded files:</h2>
 			<div class="highlight_dark">
-				{{$files := .PixelAPI.UserFiles 0 18}}
+				{{$files := .PixelAPI.UserFiles 0 15}}
 				{{range $files.Files}}<!--
 					--><a class="file_button" href="/u/{{.ID}}" target="_blank">
 						<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
@@ -34,7 +34,7 @@
 			</div>
 			<h2>Your most recently created lists:</h2>
 			<div class="highlight_dark">
-				{{$lists := .PixelAPI.UserLists 0 18}}
+				{{$lists := .PixelAPI.UserLists 0 15}}
 				{{range $lists.Lists}}<!--
 					--><a class="file_button" href="/l/{{.ID}}" target="_blank">
 						<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
--- a/res/template/account/user_lists.html
+++ b/res/template/account/user_lists.html
@@ -38,7 +38,7 @@
 				</a><!--
 			-->{{end}}

-			<br/>
+			<br/><br/>
 			<div class="highlight_dark">
 				{{if ne $page 0}}
 					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
--- a/res/template/apidoc.html
+++ b/res/template/apidoc.html
@@ -31,7 +31,7 @@

 	<body>
 		{{template "page_top" .}}
-		<h1>Pixeldrain API Documentation</h1>
+		<h1>Pixeldrain API documentation</h1>

 		<div class="page_content"><div class="limit_width">
 			<p>
@@ -80,10 +80,10 @@
 			{{template "api-list-post"}}
 			{{template "api-list-get"}}

-			<h2>Filesystem Methods</h2>
-			{{template "api-filesystem-path-post"}}
-			{{template "api-filesystem-path-get"}}
-			{{template "api-filesystem-path-delete"}}
+			<!--<h2>Filesystem Methods</h2>-->
+			{{/*template "api-filesystem-path-post"*/}}
+			{{/*template "api-filesystem-path-get"*/}}
+			{{/*template "api-filesystem-path-delete"*/}}
 		</div></div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -0,0 +1,46 @@
+{{define "appearance"}}<!DOCTYPE html>
+<html>
+	<head>
+		{{template "meta_tags" "Appearance settings"}}
+		{{template "user_style" .}}
+	</head>
+
+	<body>
+		{{template "page_top" .}}
+		<h1>Change website appearance</h1>
+		<div class="page_content"><div class="limit_width">
+			<p>
+				You can change how pixeldrain looks! Your theme choice will
+				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/>
+				<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_arc"            name="style"><label for="style_arc">Arc Style</label>
+				(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_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
+			</div>
+		</div></div>
+
+		<script>
+		// Style selector
+		document.getElementsByName("style").forEach(function(elem) {
+			elem.addEventListener("change", function(evt){
+				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();
+			})
+		});
+		</script>
+		{{template "page_bottom"}}
+		{{template "analytics"}}
+	</body>
+</html>
+{{end}}
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -26,10 +26,15 @@
 			<div id="file_viewer_headerbar" class="highlight_headerbar">
 				<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
 				<a href="/" id="button_home" class="button button_home">
-					<img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page" style="height: 1.5em; margin: -0.3em;"/>
+					<img src="/res/img/pixeldrain_transparent.png"
+						alt="Back to the Home page"
+						style="height: 1.5em; margin: -0.2em; margin-right: 0.2em;"/>
 				</a>
-				<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
-				<div id="list_navigator_buttons" class="button_group"></div>
+				<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
+					<div id="file_viewer_list_title"></div>
+					<div id="file_viewer_file_title">{{.Title}}</div>
+				</div>
+				<div id="list_navigator_buttons" class="button_group list_navigator_buttons"></div>
 				<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button>
 			</div>
 			<div id="list_navigator" class="list_navigator"></div>
--- a/res/template/fragments/meta_tags.html
+++ b/res/template/fragments/meta_tags.html
@@ -10,8 +10,7 @@

 <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.
-	  Uncensored, unmonitored and unmoderated."/>
+pixeldrain also supports previews for images, videos, audio, PDFs and much more."/>
 <meta property="og:type" content="website" />
 <meta property="og:title" content="{{.}} ~ pixeldrain" />
 <meta property="og:site_name" content="pixeldrain" />
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -1,7 +1,5 @@
 {{define "page_top"}}
-<div id="page_wrapper" class="page_wrapper">
-	<button id="button_toggle_navigation" class="button_toggle_navigation" onClick="toggleMenu();">☰</button>
-
+<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <div id="page_navigation" class="page_navigation">
 	<a href="/">Home</a>
 	<hr/>
@@ -18,20 +16,19 @@
 	<a href="/about">About</a>
 	<!--<a href="/technology">Technology</a>-->
 	<a href="/api">API</a>
+	<a href="/appearance">Appearance</a>
 </div>
 <div id="page_body" class="page_body">
 {{end}}

 {{define "page_bottom"}}
-		<br/>
-		<div class="highlight_dark" style="margin-bottom: 100px;">
+	<div class="highlight_dark">
 		Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
 		Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
 		Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
 		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
 	</div>
 </div><!-- end page_body -->
-</div><!-- end page_wrapper-->

 <script>
 var nav = document.getElementById("page_navigation");
@@ -41,13 +38,13 @@ function toggleMenu() {
 	if (nav.offsetLeft === 0) {
 		// Menu is visible

-		nav.style.left = -nav.clientWidth + "px";
+		nav.style.left = -nav.offsetWidth + "px";
 		body.style.left = "0";
 	} else {
 		// Menu is hidden

 		nav.style.left = "0";
-		body.style.left = nav.clientWidth + "px";
+		body.style.left = nav.offsetWidth + "px";
 	}
 }
 </script>
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -9,7 +9,7 @@
 	<body>
 		{{template "page_top" .}}

-		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
+		<img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
 		<br/>
 		<div class="page_content">
 			<input id="file_input_field" type="file" name="file" multiple="multiple"/>
@@ -30,7 +30,7 @@

 			<br/>
 			<div class="limit_width">
-				<h1>What is Pixeldrain?</h1>
+				<h1>What is pixeldrain?</h1>
 				<p>
 					Pixeldrain is a file sharing website built for speed and
 					ease of use. Pixeldrain does not cost any money, though
@@ -60,23 +60,6 @@
 					For more information see the <a href="/about">about</a>
 					page.
 				</p>
-
-				<h2>Style selector</h2>
-				<p>
-					You can change how pixeldrain looks! Your theme choice will
-					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/>
-					<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_arc"            name="style"><label for="style_arc">Arc Style</label>
-					(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
-					<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>
-				</div>
 			</div>
 		</div>

--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -25,6 +25,8 @@ func userStyle(r *http.Request) (style template.CSS) {
 			selectedStyle = cantaPixeldrainStyle
 		case "arc":
 			selectedStyle = arcPixeldrainStyle
+		case "deepsea":
+			selectedStyle = deepseaPixeldrainStyle
 		case "default":
 			fallthrough // use default case
 		default:
@@ -45,6 +47,7 @@ func userStyle(r *http.Request) (style template.CSS) {
 	--danger_color_dark:          %s;
 	--file_background_color:      %s;
 	--scrollbar_foreground_color: %s;
+	--scrollbar_hover_color:      %s;
 	--scrollbar_background_color: %s;

 	--background_color:           %s;
@@ -74,6 +77,7 @@ func userStyle(r *http.Request) (style template.CSS) {
 		selectedStyle.DangerColor.add(0, 0, -.03).cssString(),
 		selectedStyle.FileBackgroundColor.cssString(),
 		selectedStyle.ScrollbarForegroundColor.cssString(),
+		selectedStyle.ScrollbarHoverColor.cssString(),
 		selectedStyle.ScrollbarBackgroundColor.cssString(),
 		selectedStyle.BackgroundColor.cssString(),
 		selectedStyle.BodyColor.cssString(),
@@ -100,6 +104,7 @@ type pixeldrainStyleSheet struct {
 	DangerColor              hsl
 	FileBackgroundColor      hsl
 	ScrollbarForegroundColor hsl
+	ScrollbarHoverColor      hsl
 	ScrollbarBackgroundColor hsl

 	BackgroundColor hsl
@@ -173,21 +178,22 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{339, .65, .31},
 	FileBackgroundColor:      hsl{0, 0, .20},
 	ScrollbarForegroundColor: hsl{0, 0, .35},
+	ScrollbarHoverColor:      hsl{0, 0, .45},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},

 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{0, 0, .07},
 	Layer1Color:     hsl{0, 0, .11},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{0, 0, .13},
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{0, 0, .14},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{0, 0, .14},
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -200,21 +206,22 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{339, .65, .31},
 	FileBackgroundColor:      hsl{0, 0, 1},
 	ScrollbarForegroundColor: hsl{0, 0, .30},
+	ScrollbarHoverColor:      hsl{0, 0, .40},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},

 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{0, 0, 1},
 	Layer1Color:     hsl{0, 0, 1},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{0, 0, 1},
 	Layer2Shadow:    5,
 	Layer3Color:     hsl{0, 0, 1},
 	Layer3Shadow:    6,
 	Layer4Color:     hsl{0, 0, 1},
-	Layer4Shadow:    7,
+	Layer4Shadow:    5,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -227,21 +234,22 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{343, .63, .42},
 	FileBackgroundColor:      hsl{192, .87, .05},
 	ScrollbarForegroundColor: hsl{192, .95, .30},
+	ScrollbarHoverColor:      hsl{192, .95, .40},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},

 	BackgroundColor: hsl{192, 1, .05},
 	BodyColor:       hsl{192, .81, .14}, // hsl(192, 81%, 14%)
 	Layer1Color:     hsl{192, .87, .09},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{192, .81, .14},
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{192, .95, .17},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{192, 1, .11}, // hsl(192, 100%, 11%)
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -254,21 +262,22 @@ var maroonStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{0, .1, .1},
 	FileBackgroundColor:      hsl{0, 1, .03},
 	ScrollbarForegroundColor: hsl{0, .75, .3},
+	ScrollbarHoverColor:      hsl{0, .75, .4},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},

 	BackgroundColor: hsl{0, 1, .05},
 	BodyColor:       hsl{0, .6, .1},
 	Layer1Color:     hsl{0, .5, .07},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{0, .6, .1}, // hsl{0, .8, .15},
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{0, .9, .2},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{0, .5, .07},
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -281,21 +290,22 @@ var hackerStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{0, .65, .31},
 	FileBackgroundColor:      hsl{120, .8, .06},
 	ScrollbarForegroundColor: hsl{120, .5, .25},
+	ScrollbarHoverColor:      hsl{120, .5, .35},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},

 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{0, 0, 0},
 	Layer1Color:     hsl{120, .1, .05},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{120, .2, .10},
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{120, .3, .15},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{0, 0, .14},
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -308,21 +318,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{40, 1, .5},
 	FileBackgroundColor:      hsl{170, .04, .29},
 	ScrollbarForegroundColor: hsl{150, .02, .78},
+	ScrollbarHoverColor:      hsl{150, .02, .88},
 	ScrollbarBackgroundColor: hsl{170, .05, .26},

 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{172, .06, .25},
 	Layer1Color:     hsl{170, .06, .21},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{160, .04, .31},
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{170, .02, .47},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{172, .06, .25}, // hsl(172, 6%, 25%)
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }

@@ -335,20 +346,49 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
 	DangerColor:              hsl{357, .53, .57}, // hsl(357, 53%, 57%)
 	FileBackgroundColor:      hsl{219, .1, .2},
 	ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
+	ScrollbarHoverColor:      hsl{222, .08, .54}, // hsl(222, 8%, 44%)
 	ScrollbarBackgroundColor: hsl{223, .12, .2},  // hsl(223, 12%, 29%)

 	BackgroundColor: hsl{0, 0, 0},
 	BodyColor:       hsl{223, .12, .29},
 	Layer1Color:     hsl{215, .17, .19},
-	Layer1Shadow:    4,
+	Layer1Shadow:    3,
 	Layer2Color:     hsl{227, .14, .25}, // hsl(227, 14%, 25%)
-	Layer2Shadow:    7,
+	Layer2Shadow:    5,
 	Layer3Color:     hsl{223, .12, .29},
-	Layer3Shadow:    10,
+	Layer3Shadow:    7,
 	Layer4Color:     hsl{219, .15, .22}, // hsl(219, 15%, 22%)
-	Layer4Shadow:    13,
+	Layer4Shadow:    9,

 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    10,
+	ShadowSpread:    7,
+	ShadowIntensity: 0,
+}
+
+var deepseaPixeldrainStyle = pixeldrainStyleSheet{
+	TextColor:                hsl{0, 0, .7},
+	InputColor:               hsl{41, .58, .47}, // hsl(0, 0%, 11%)
+	InputTextColor:           hsl{0, 0, 0},
+	HighlightColor:           hsl{5, .77, .55},
+	HighlightTextColor:       hsl{0, 0, 0},
+	DangerColor:              hsl{5, .77, .55},
+	FileBackgroundColor:      hsl{159, .27, .17},
+	ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
+	ScrollbarHoverColor:      hsl{12, .38, .26},  // hsl(12, 38%, 26%)
+	ScrollbarBackgroundColor: hsl{0, 0, .11},     // hsl(0, 0%, 11%)
+
+	BackgroundColor: hsl{0, 0, 0},
+	BodyColor:       hsl{0, 0, .07},
+	Layer1Color:     hsl{160, .27, .09},
+	Layer1Shadow:    3,
+	Layer2Color:     hsl{163, .26, .11}, // hsl(163, 26%, 11%)
+	Layer2Shadow:    5,
+	Layer3Color:     hsl{161, .28, .14}, // hsl(161, 28%, 14%)
+	Layer3Shadow:    7,
+	Layer4Color:     hsl{159, .27, .17}, // hsl(159, 27%, 17%)
+	Layer4Shadow:    9,
+
+	ShadowColor:     hsl{0, 0, 0},
+	ShadowSpread:    7,
 	ShadowIntensity: 0,
 }
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -71,6 +71,7 @@ func New(r *httprouter.Router, prefix string, conf *conf.PixelWebConfig) *WebCon
 	r.GET(p+"/donation" /*     */, wc.serveTemplate("donation", false))
 	r.GET(p+"/widgets" /*      */, wc.serveTemplate("widgets", false))
 	r.GET(p+"/about" /*        */, wc.serveTemplate("about", false))
+	r.GET(p+"/appearance" /*   */, wc.serveTemplate("appearance", false))

 	// User account pages
 	r.GET(p+"/register" /*        */, wc.serveForm(wc.registerForm, false))