From 177219feb72ce604064dc2bb629157d0de0a9803 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Wed, 17 Jul 2019 23:19:57 +0200
Subject: [PATCH] Lots of style fixes

---
 res/static/script/ListNavigator.js     |  45 +++--
 res/static/script/Toolbar.js           |   4 +-
 res/static/script/Viewer.js            |  11 +-
 res/static/style/layout.css            |  50 +++---
 res/static/style/viewer.css            | 222 ++++++++++++++-----------
 res/template/account/file_manager.html |   8 +-
 res/template/account/logout.html       |   2 +-
 res/template/account/register.html     | 137 ---------------
 res/template/account/user_files.html   |   2 +-
 res/template/account/user_home.html    |   6 +-
 res/template/admin.html                |   1 -
 res/template/file_viewer.html          | 165 +++++++++---------
 res/template/fragments/footer.html     |   2 +-
 res/template/fragments/form.html       |   6 +-
 res/template/fragments/menu.html       |   2 +-
 res/template/history.html              |   7 +-
 res/template/home.html                 |   8 +-
 res/template/maintenance.html          |   2 +-
 res/template/widgets.html              |  10 +-
 webcontroller/user_style.go            | 118 ++++++-------
 20 files changed, 360 insertions(+), 448 deletions(-)
 delete mode 100644 res/template/account/register.html

diff --git a/res/static/script/ListNavigator.js b/res/static/script/ListNavigator.js
index b0848c0..bed875c 100644
--- a/res/static/script/ListNavigator.js
+++ b/res/static/script/ListNavigator.js
@@ -67,13 +67,13 @@ var ListNavigator = {
 
 		this.addToHistory(index);
 
-		$("#listNavigatorItems").find("*").css("border-color", "#333");
-		$("#listNavigatorItems div").eq(this.position).css("border-color", "#fff");
+		$("#listNavigatorItems").find("*").removeClass("list_item_selected");
+		$("#listNavigatorItems div").eq(this.position).addClass("list_item_selected");
 
 		// This centers the scroll bar exactly on the selected item
 		$("#listNavigatorItems").animate(
 			{
-				scrollLeft: (this.position * 109) - (($("#listNavigatorItems").width() / 2) - 55)
+				scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2)
 			}, {
 				duration: 1000,
 				queue: false
@@ -110,8 +110,8 @@ var ListNavigator = {
 	},
 
 	loadThumbnails: function(index){
-		var startPos = +index - 30;
-		var endPos = +index + 30;
+		var startPos = +index - 50;
+		var endPos = +index + 50;
 		// fyi, the + is to let javascript know it's actually a number instead of a string
 
 		if(startPos < 0){
@@ -126,12 +126,17 @@ var ListNavigator = {
 		var navigatorItems = document.getElementById("listNavigatorItems").children
 
 		for (i = startPos; i <= endPos; i++){
+			if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) {
+				console.log("skip");
+				continue;
+			}
+
 			var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
 			var name = this.data[i].name;
 
 			var itemHtml = escapeHTML(name) + "<br>"
 				+ "<img src=\"" + thumb + "\" "
-				+ "class=\"listItemThumbnail lazy\" alt=\"" + escapeHTML(name) + "\"/>";
+				+ "class=\"listItemThumbnail\" alt=\"" + escapeHTML(name) + "\"/>";
 
 			navigatorItems[i].innerHTML = itemHtml;
 		}
@@ -165,6 +170,22 @@ var ListNavigator = {
 			this.setItem(0);
 		}
 
+		var btnLastItem = document.createElement("button");
+		btnLastItem.innerText = "◀";
+		btnLastItem.setAttribute("id", "button_last_item");
+		btnLastItem.setAttribute("class", "button_highlight");
+		btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
+
+		var btnNextItem = document.createElement("button");
+		btnNextItem.innerText = "▶";
+		btnNextItem.setAttribute("id", "button_next_item");
+		btnNextItem.setAttribute("class", "button_highlight");
+		btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
+
+		var headerbar = document.getElementById("list_navigator_buttons");
+		headerbar.appendChild(btnLastItem);
+		headerbar.appendChild(btnNextItem);
+
 		// Add the list download button to the toolbar
 		var btnDownloadList = document.createElement("button");
 		btnDownloadList.setAttribute("id", "btnDownloadList");
@@ -199,16 +220,8 @@ var ListNavigator = {
 		btnShuffle.appendChild(btnShuffleText);
 		document.getElementById("btnShare").after(btnShuffle);
 
-		// We need to adjust the height of some elements to make the navigation bar fit
-		var navHeight = $("#listNavigator").height() + 2;
-
-		window.setTimeout(function(){
-			document.getElementById("listNavigator").style.top         = "0px";
-			document.getElementById("filepreview").style.top           = navHeight+"px";
-			document.getElementById("toolbar").style.top               = navHeight+"px";
-			document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
-			document.getElementById("sharebar").style.top              = navHeight+"px";
-		}, 200);
+		// Make the navigator visible
+		document.getElementById("listNavigator").style.display = "inline-block";
 	}
 };
 
diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js
index 32140af..56b58a4 100644
--- a/res/static/script/Toolbar.js
+++ b/res/static/script/Toolbar.js
@@ -9,7 +9,7 @@
 /* global Viewer */
 
 var Toolbar = {
-	visible: true,
+	visible: false,
 	toggle: function () {
 		if (this.visible) {
 			if (Sharebar.visible) {
@@ -18,11 +18,13 @@ var Toolbar = {
 
 			document.getElementById("toolbar").style.left = "-9em";
 			document.getElementById("filepreview").style.left = "0px";
+			document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
 
 			this.visible = false;
 		} else {
 			document.getElementById("toolbar").style.left = "0px";
 			document.getElementById("filepreview").style.left = "8em";
+			document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
 
 			this.visible = true;
 		}
diff --git a/res/static/script/Viewer.js b/res/static/script/Viewer.js
index af96508..13164a4 100644
--- a/res/static/script/Viewer.js
+++ b/res/static/script/Viewer.js
@@ -14,7 +14,7 @@ var Viewer = {
 		}
 
 		// On small screens the toolbar takes too much space, so it collapses automatically
-		if($("#filepreview").width() < 400 && Toolbar.visible){
+		if($("#filepreview").width() > 400 && !Toolbar.visible){
 			Toolbar.toggle();
 		}
 
@@ -34,7 +34,14 @@ var Viewer = {
 	},
 	setFile: function(file){
 		this.currentFile = file.id;
-		document.title = file.name + " ~ PixelDrain";
+		var title = "";
+		if (this.isList) {
+			title = this.title + " ~ " + file.name;
+		} else {
+			title = file.name;
+		}
+		document.title = title + " ~ PixelDrain";
+		document.getElementById("file_viewer_headerbar_title").innerText = title;
 
 		$.get("/u/" + file.id + "/preview", function(response){
 			$("#filepreview").html(response);
diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index c50b859..39d6ddc 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -141,6 +141,7 @@ body{
 	}
 }
 
+.highlight_headerbar,
 .highlight_dark,
 .highlight_middle,
 .highlight_light,
@@ -157,17 +158,17 @@ body{
 	padding: .5em;
 	z-index: 101;
 }
+.highlight_headerbar   {
+	background-color: var(--accent_color_headerbar);
+	box-shadow: 1px 1px 3px -1px var(--shadow_color);}
 .highlight_dark   {
 	background-color: var(--accent_color_dark);
-	border-color: var(--accent_color_dark_border);
 	box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
 .highlight_middle {
 	background-color: var(--accent_color_medium);
-	border-color: var(--accent_color_medium_border);
 	box-shadow: inset 1px 1px 6px -1px var(--shadow_color);}
 .highlight_light  {
 	background-color: var(--accent_color_light);
-	border-color: var(--accent_color_light_border);
 	box-shadow: 1px 1px 4px var(--shadow_color);}
 .highlight_green  {
 	background-color: rgba(0, 255, 0, 0.05);
@@ -179,18 +180,15 @@ body{
 	background-color: rgba(255, 0, 0, 0.1);
 	border-color: #B00000;}
 
-body > .highlight_dark,
-body > .highlight_middle,
-body > .highlight_light,
-body > .highlight_green,
-body > .highlight_blue,
-body > .highlight_red {
-	margin: 0;
+.highlight_green,
+.highlight_blue,
+.highlight_red {
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
 }
 
-.border_top    {border-top-width:    1px; border-top-style:    solid;}
-.border_bottom {border-bottom-width: 1px; border-bottom-style: solid;}
-
 /* Common elements */
 
 h1, h2, h3, h4, h5, h6 {
@@ -261,7 +259,7 @@ pre{
 	min-width: 200px;
 	max-width: 400px;
 	margin: 10px !important;
-	border-radius: 10px;
+	border-radius: 5px;
 	font-size: 1.9em;
 	font-weight: normal;
 	line-height: 8px;
@@ -303,8 +301,8 @@ pre{
 	margin: 6px;
 	padding: 0;
 	overflow: hidden;
-	border-radius: 0.4em;
-	box-shadow: 2px 2px 8px -1px var(--shadow_color);
+	border-radius: 5px;
+	box-shadow: 2px 2px 8px -3px var(--shadow_color);
 	/* border: 1px solid var(--accent_color_dark); */
 	background-color: var(--file_background_color);
 	color: #bfbfbf; /* Fallback */
@@ -342,12 +340,12 @@ input[type="color"],
 select{
 	display: inline-block;
 	box-sizing: border-box;
-	border-radius: 4px;
+	border-radius: 2px;
 	border: none;
-	margin: 2px;
+	margin: 3px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
 	padding: 6px 8px 6px 8px;
-	box-shadow: 2px 2px 6px -2px var(--shadow_color);
+	box-shadow: 2px 2px 6px -3px var(--shadow_color);
 	font-weight: bold;
 	font-size: 0.85em;
 	overflow: hidden;
@@ -375,7 +373,7 @@ select:focus{
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 6px -2px var(--shadow_color);
+	box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
 }
 button:active,
 .button:active,
@@ -385,13 +383,13 @@ input[type="color"]:active,
 select:active{
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 4px 4px 8px var(--shadow_color);
-	padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */
+	padding: 10px 4px 2px 12px; /* Exactly 4px offset compared to the inactive padding to give a depth effect */
 }
-.button_full_width      {width: calc(100% - 4px);}
+.button_full_width      {width: calc(100% - 6px);}
 .button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
 .button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: var(--highlight_text_color) !important;}
-.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;}
-.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;}
+.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;    color: var(--highlight_text_color) !important;}
+.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;         color: var(--highlight_text_color) !important;}
 
 /* Dropdown list of the select tag */
 option{
@@ -411,7 +409,7 @@ input[type="number"]{
 	box-sizing: border-box;
 	border-radius: 4px;
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 2px 2px 6px -2px var(--shadow_color);
+	box-shadow: inset 2px 2px 6px -3px var(--shadow_color);
 	padding: 3px 5px;
 	color: var(--input_text_color);
 	height: 26px;
@@ -431,7 +429,7 @@ input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus{
-	box-shadow: var(--highlight_border), inset 3px 3px 6px -2px var(--shadow_color);
+	box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
 }
 
 input[type=file]{
diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css
index 3f6f444..d0fbe4e 100644
--- a/res/static/style/viewer.css
+++ b/res/static/style/viewer.css
@@ -7,13 +7,82 @@ body{
 	overflow: hidden;
 }
 
-#filepreview{
+.file_viewer {
 	position: absolute;
+	display: flex;
+	flex-direction: column;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+}
+.file_viewer > .highlight_headerbar {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	line-height: 1.9em;
+	text-align: left;
+	font-size: 1.2em;
+}
+.file_viewer > .highlight_headerbar > .button_toggle_toolbar {
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+.file_viewer > .highlight_headerbar > .button_home {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-right: .5em;
+}
+.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 0.8em;
+}
+.file_viewer > .highlight_headerbar > .list_navigator_buttons {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: inline-flex;
+}
+.file_viewer > .highlight_headerbar > .button_close_file_viewer {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-left: .5em;
+}
+.file_viewer > .list_navigator{
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+	display: none; /* Becomes visible if the page is a list */
+	width: 100%;
+	height: 100px;
+	background-color: var(--accent_color_dark);
+	box-shadow: 2px 2px 8px var(--shadow_color);
+	text-align: center;
+	overflow-x: hidden;
+	overflow-y: hidden;
+	z-index: 50;
+	transition: top 1.5s;
+}
+.file_viewer > .file_viewer_window {
+	flex-grow: 1;
+	flex-shrink: 1;
+	position: relative;
+	display: inline-block;
+	width: auto;
+	height: auto;
+	margin: 0;
+}
+.file_viewer > .file_viewer_window > .file_viewer_file_preview {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
 	display: inline-block;
-	top: 0px;
-	left: 8em;
-	right: 0px;
-	bottom: 0px;
 	min-height: 100px;
 	min-width: 100px;
 	text-align: center;
@@ -21,11 +90,44 @@ body{
 	transition: left 1s, top 1.5s;
 }
 
+/* Toolbars */
+.file_viewer > .file_viewer_window > .file_viewer_toolbar {
+	position: absolute;
+	width: 8em;
+	z-index: 49;
+	overflow: hidden;
+	float: left;
+	background-color: var(--accent_color_dark);
+	left: -9em;
+	bottom: 0;
+	top: 0;
+	padding: 0;
+	text-align: left;
+	box-shadow: 2px 2px 8px var(--shadow_color);
+	transition: left 1s, top 1.5s;
+}
+.file_viewer > .file_viewer_window > .file_viewer_sharebar{
+	position: absolute;
+	width: 7em;
+	left: -8em;
+	bottom: 0;
+	top: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	float: left;
+	background-color: var(--accent_color_dark);
+	box-shadow: 2px 2px 8px var(--shadow_color);
+	text-align: center;
+	z-index: 48;
+	overflow: hidden;
+	transition: left 1s, top 1.5s;
+}
+
 /* =====================
    == FILE CONTAINERS ==
    =====================*/
 .image-container{
-	position: absolute;
+	position: relative;
 	top: 0px;
 	left: 0px;
 	right: 0px;
@@ -46,7 +148,7 @@ body{
 
 .text-container{
 	background: #333 none;
-	position: absolute;
+	position: relative;
 	overflow-y: scroll;
 	overflow-x: auto;
 	text-align: left;
@@ -94,22 +196,6 @@ body{
    || TOOLBAR COMPONENTS ||
    ======================== */
 
-#toolbar {
-	position: absolute;
-	width: 8em;
-	z-index: 52;
-	overflow: hidden;
-	float: left;
-	background-color: var(--background_color);
-	left: 0;
-	bottom: 0;
-	top: 0;
-	padding: 0;
-	text-align: left;
-	border-right: 2px ridge var(--highlight_color);
-	box-shadow: 2px 2px 8px var(--shadow_color);
-	transition: left 1s, top 1.5s;
-}
 
 /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
 #toolbar > div {
@@ -129,14 +215,6 @@ body{
 	height: auto;
 }
 
-#button-expand-toolbar{
-	position: absolute;
-	left: 0;
-	top: 0;
-	cursor: pointer;
-	z-index: 51;
-}
-
 .toolbar_button{
 	text-align: left;
 }
@@ -153,38 +231,13 @@ body{
 	padding-left: 10px;
 	font-size: 0.8em;
 	line-height: 0.7em;
-}
-
-#sponsors{
-	position: relative;
-	height: 600px;
-	width: 8em;
-	margin: 0;
-	border: none;
-	z-index: 9;
+	margin-top: 0.5em;
 }
 
 /* =========================
    || SHAREBAR COMPONENTS ||
    ========================= */
 
-#sharebar{
-	position: absolute;
-	width: 7em;
-	left: -8em;
-	bottom: 0;
-	top: 0;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	float: left;
-	background-color: var(--background_color);
-	box-shadow: 2px 2px 8px var(--shadow_color);
-	text-align: center;
-	border-right: 2px ridge var(--highlight_color);
-	z-index: 50;
-	overflow: hidden;
-	transition: left 1s, top 1.5s;
-}
 .sharebar-button {text-align: center;}
 
 /* =====================
@@ -192,7 +245,7 @@ body{
    ===================== */
 
 .popup {
-	position: fixed;
+	position: absolute;
 	visibility: hidden;
 	display: flex;
 	flex-direction: column;
@@ -202,9 +255,9 @@ body{
 	border-color: var(--accent_color_dark_border);
 	max-height: 100%;
 	max-width: 100%;
-	top: 10%;
+	top: 20%;
 	left: 50%;
-	transform: translate(-50%, -10%);
+	transform: translate(-50%, -20%);
 	padding: 0;
 	box-sizing: border-box;
 	text-align: left;
@@ -222,12 +275,12 @@ body{
 .details_popup{
 	width: 1500px;
 	height: 800px;
-	z-index: 100;
+	z-index: 200;
 }
 .captcha_popup{
 	height: auto;
 	width: 450px;
-	z-index: 101;
+	z-index: 201;
 }
 #captcha_popup_captcha > div {
 	display: inline-block;
@@ -287,24 +340,9 @@ table > tbody > tr {border: none !important;}
 	border: none;
 }
 
-#listNavigator{
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: -100px;
-	height: 98px;
-	background-color: #000;
-	box-shadow: 2px 2px 8px #000000;
-	border-bottom: 2px ridge var(--highlight_color);
-	text-align: center;
-	overflow-x: hidden;
-	overflow-y: hidden;
-	z-index: 50;
-	transition: top 1.5s;
-}
 
 #listNavigatorItems{
-	position: absolute;
+	position: relative;
 	top: 0;
 	left: 0;
 	right: 0;
@@ -313,7 +351,7 @@ table > tbody > tr {border: none !important;}
 	overflow-x: scroll;
 	overflow-y: hidden;
 	border: none;
-	padding: 0 40px;
+	padding: 0;
 }
 
 .listItem{
@@ -323,11 +361,15 @@ table > tbody > tr {border: none !important;}
 	width: 100px;
 	margin-right: 5px;
 	text-align: center;
-	border: #333 solid 2px;
+	border: var(--input_color) solid 2px;
+	border-radius: 2px;
 	font-size: 12px;
 	overflow: hidden;
 	cursor: pointer;
 }
+.list_item_selected{
+	border: var(--highlight_color) solid 2px;
+}
 
 .listItemThumbnail{
 	position: relative;
@@ -335,23 +377,3 @@ table > tbody > tr {border: none !important;}
 	max-height: 84%;
 	margin: 0;
 }
-
-#arrow-left,
-#arrow-right{
-	position: absolute;
-	display: block;
-	border-top: 30px solid transparent;
-	border-bottom: 30px solid transparent;
-	height: 0;
-	width: 0;
-	top: 20px;
-	cursor: pointer;
-}
-#arrow-left{
-	border-right: 40px solid var(--highlight_color);
-	left: 10px;
-}
-#arrow-right{
-	border-left: 40px solid var(--highlight_color);
-	right: 10px;
-}
diff --git a/res/template/account/file_manager.html b/res/template/account/file_manager.html
index 464103d..ff2a990 100644
--- a/res/template/account/file_manager.html
+++ b/res/template/account/file_manager.html
@@ -7,7 +7,7 @@
 		<style>
 			.file_manager {
 				position: absolute;
-				padding: 0px 8px 0px 8px;
+				padding: 0;
 				background-color: var(--body_color);
 				box-shadow: #000000 8px 8px 50px 5px;
 				left:100px;
@@ -25,7 +25,7 @@
 			.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
 			.file_manager > .status_bar             {text-align: left;}
 			.file_manager > .directory_area {
-				margin: 0 -8px 0 -8px;
+				margin: 0;
 				padding: 5px;
 				max-height: 500px;
 				overflow-x: hidden;
@@ -47,7 +47,7 @@
 		{{template "menu" .}}
 		<br/>
 		<div class="file_manager">
-			<div class="nav_bar highlight_light border_top border_bottom">
+			<div class="nav_bar highlight_light">
 				<button>⇐</button>
 				<button>⇑</button>
 				<button style="margin-right: 16px;">⇒</button>
@@ -68,7 +68,7 @@
 				</a>
 				{{end}}
 			</div>
-			<div class="status_bar highlight_light border_top border_bottom">
+			<div class="status_bar highlight_light">
 				13 items (5 directories, 7 files). Total size: 1.23 GB
 			</div>
 		</div>
diff --git a/res/template/account/logout.html b/res/template/account/logout.html
index e05f4f4..defbbd1 100644
--- a/res/template/account/logout.html
+++ b/res/template/account/logout.html
@@ -9,7 +9,7 @@
 			{{template "menu" .}}
 
 			<h1>Please confirm that you want to log out of your pixeldrain account</h1>
-			<form method="POST" action="/logout" class="highlight_light border_top border_bottom">
+			<form method="POST" action="/logout" class="highlight_light">
 				<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
 			</form>
 			<br/>
diff --git a/res/template/account/register.html b/res/template/account/register.html
deleted file mode 100644
index dcdcbb9..0000000
--- a/res/template/account/register.html
+++ /dev/null
@@ -1,137 +0,0 @@
-{{define "register"}}<!DOCTYPE html>
-<html>
-	<head>
-		{{template "meta_tags" "Register"}}
-		{{template "user_style" .}}
-		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
-		<script src='https://www.google.com/recaptcha/api.js'></script>
-	</head>
-
-	<body>
-		<div id='body' class="body">
-			{{template "menu" .}}
-
-			<h1>Register a new Pixeldrain account</h1>
-			<div id="submit_result"></div>
-			<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
-				<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
-					<tr class="form">
-						<td>Username</td>
-						<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
-					</tr>
-					<tr class="form"><td colspan="2">used for logging into your account<br/><hr/></td></tr>
-					<tr class="form">
-						<td>E-mail address</td>
-						<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
-					</tr>
-					<tr class="form"><td colspan="2">
-						not required. your e-mail address will only be used for
-						password resets and important account notifications<br/>
-						<hr/>
-					</td></tr>
-					<tr class="form">
-						<td>Password</td>
-						<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
-					</tr>
-					<tr class="form">
-						<td>Password verification</td>
-						<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
-					</tr>
-					<tr class="form">
-						<td colspan="2">
-							you need to enter your password twice so we can
-							verify that you have not made any typing errors<br/>
-							<hr/>
-						</td>
-					</tr>
-					{{if ne .Other "none"}}<tr class="form">
-						<td>
-							Turing test<br/>
-							(Click the white box)
-						</td>
-						<td style="text-align: center;">
-							<div class="g-recaptcha" data-theme="dark" data-sitekey="{{.Other}}"></div>
-						</td>
-					</tr>
-					<tr class="form">
-						<td colspan="2">
-							the reCaptcha turing test verifies that you are not
-							an evil robot that is trying to flood the website
-							with fake accounts<br/><hr/>
-						</td>
-					</tr>{{end}}
-					<tr class="form">
-						<td colspan="2" style="text-align: right;">
-							<input type="submit" value="Register" class="button_highlight"/>
-						</td>
-					</tr>
-				</table>
-			</form>
-			<br/>
-			Welcome to the club!<br/>
-			{{template "footer"}}
-		</div>
-
-		<script type="text/javascript">
-		function submitForm(){
-			var uname   = document.getElementById("register_username").value;
-			var email   = document.getElementById("register_email").value;
-			var passwd1 = document.getElementById("register_password1").value;
-			var passwd2 = document.getElementById("register_password2").value;
-			var capt;
-			try {
-				capt = grecaptcha.getResponse();
-			} catch (err) {
-				console.log("Error occurred while reading captcha: "+err);
-			}
-
-			if (passwd1 !== passwd2) {
-				alert("Passwords do not match! Good thing we checked.");
-				return false;
-			}
-
-			var req = new XMLHttpRequest();
-			req.onreadystatechange = function(){
-				if (this.readyState === 4) {
-					var response = JSON.parse(req.responseText);
-					var resultDiv = document.getElementById("submit_result");
-					if (response.success) {
-						resultDiv.className = "border_top border_bottom highlight_green";
-						resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
-							+ "We're glad to have you on board, have fun sharing!";
-					} else {
-						resultDiv.className = "border_top border_bottom highlight_red";
-						var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
-						for (err in response.errors) {
-							resultHtml += "<li>"+ response.errors[err].message +"</li>";
-						}
-						resultHtml += "</ul>";
-						resultDiv.innerHTML = resultHtml;
-					}
-
-					// On small screens the whole form won't fit on the screen,
-					// so we need to scroll up to show the user the result of
-					// the form submission
-					window.scrollTo(0, 0);
-
-					console.log(response);
-				}
-			}
-
-			req.open("POST", apiEndpoint+"/user/register", true);
-
-			var data = new FormData();
-			data.append("username", uname);
-			data.append("email", email);
-			data.append("password", passwd1);
-			data.append("recaptcha_response", capt);
-			req.send(data);
-
-			return false;
-		}
-		</script>
-
-		{{template "analytics"}}
-	</body>
-</html>
-{{end}}
diff --git a/res/template/account/user_files.html b/res/template/account/user_files.html
index 8246a3c..7e27ade 100644
--- a/res/template/account/user_files.html
+++ b/res/template/account/user_files.html
@@ -8,7 +8,7 @@
 
 	<body>
 		{{template "menu" .}}
-		<div class="highlight_middle border_bottom">
+		<div class="highlight_middle">
 			These files were uploaded while logged in to your pixeldrain account,
 			<a href="/history">click here</a> to view files uploaded anonymously
 			in this browser.
diff --git a/res/template/account/user_home.html b/res/template/account/user_home.html
index 292e301..01c0def 100644
--- a/res/template/account/user_home.html
+++ b/res/template/account/user_home.html
@@ -10,7 +10,7 @@
 		<div id='body' class="body">
 			{{template "menu" .}}
 
-			<h1 class="highlight_middle border_bottom">Welcome home, {{.Username}}!</h1>
+			<h1 class="highlight_middle">Welcome home, {{.Username}}!</h1>
 
 			<h2>Actions</h2>
 			<ul>
@@ -19,7 +19,7 @@
 			</ul>
 
 			<h2>Your most recently uploaded files:</h2>
-			<div class="highlight_dark border_top border_bottom">
+			<div class="highlight_dark">
 				{{$files := .PixelAPI.UserFiles 0 18}}
 				{{range $files.Files}}
 					<a class="file_button" href="/u/{{.ID}}" target="_blank">
@@ -33,7 +33,7 @@
 				<a href="/user/files" class="button">...All my files</a>
 			</div>
 			<h2>Your most recently created lists:</h2>
-			<div class="highlight_dark border_top border_bottom">
+			<div class="highlight_dark">
 				{{$lists := .PixelAPI.UserLists 0 18}}
 				{{range $lists.Lists}}
 					<a class="file_button" href="/l/{{.ID}}" target="_blank">
diff --git a/res/template/admin.html b/res/template/admin.html
index d68d562..cb4984c 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -112,7 +112,6 @@
 			);
 
 			function setData(){
-				this.class = "button_highlight";
 				$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
 					console.log(response);
 					if (response.success) {
diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html
index 55802db..05b5e92 100644
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -6,15 +6,13 @@
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 		{{template "user_style" .}}
-		<link rel="stylesheet" href="/res/style/viewer.css?v2"/>
-		<link rel="stylesheet" href="/res/style/layout.css?v2"/>
+		<link rel="stylesheet" href="/res/style/viewer.css?v3"/>
+		<link rel="stylesheet" href="/res/style/layout.css?v3"/>
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>
 		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
 		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
 		<meta name="theme-color" content="#75AD38"/>
 
-		<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
-
 		{{template "bgpattern"}}
 
 		{{.OGData}}
@@ -26,81 +24,90 @@
 	</head>
 
 	<body>
-		<div id="listNavigator">
-			<div id="listNavigatorItems"></div>
-			<div id="arrow-left" alt="Previous Item" onClick="ListNavigator.previousItem();"></div>
-			<div id="arrow-right" alt="Next Item" onClick="ListNavigator.nextItem();"></div>
-		</div>
-		<button id="button-expand-toolbar" onClick="Toolbar.toggle();">Show Toolbar</button>
-		<div id="toolbar">
-			<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
-			<div>
-				<div>
-					<button class="toolbar_button button_full_width" onClick="Toolbar.toggle();">Hide Toolbar</button>
+		<div id="file_viewer" class="file_viewer">
+			<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/tray32.png" alt="Back to the Home page" style="height: 1em;"/>
+					<!-- Yo -->
+				</a>
+				<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
+				<div id="list_navigator_buttons" class="list_navigator_buttons"></div>
+				<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button>
+			</div>
+			<div id="listNavigator" class="list_navigator">
+				<div id="listNavigatorItems"></div>
+			</div>
+			<div id="file_viewer_window" class="file_viewer_window">
+				<div id="toolbar" class="file_viewer_toolbar">
+					<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
+					<div>
+						<div>
+							<div id="stat_views_label" class="toolbar_label">Views</div>
+							<div id="stat_views" style="text-align: center;">N/A</div>
+							<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
+							<div id="stat_downloads" style="text-align: center;">N/A</div>
 
-					<div id="stat_views_label" class="toolbar_label">Views</div>
-					<div id="stat_views" style="text-align: center;">N/A</div>
-					<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
-					<div id="stat_downloads" style="text-align: center;">N/A</div>
+							<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
+								<img src="/res/img/floppy_small.png" alt="Download this file"/>
+								<span>Download</span>
+							</button>
+							<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
+								<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
+								<span>Copy</span>
+							</button>
+							<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
+								<img src="/res/img/share_small.png" alt="Share this file on social media"/>
+								<span>Share</span>
+							</button>
+							<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
+								<img src="/res/img/info_small.png" alt="Help"/>
+								<span>Details</span>
+							</button>
+							{{template "advertisement" .}}
 
-					<a href="/" id="btnHome" class="toolbar_button button_full_width button">
-						<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
-						<span>Home</span>
-					</a>
-					<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
-						<img src="/res/img/floppy_small.png" alt="Download this file"/>
-						<span>Download</span>
-					</button>
-					<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
-						<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
-						<span>Copy</span>
-					</button>
-					<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
-						<img src="/res/img/share_small.png" alt="Share this file on social media"/>
-						<span>Share</span>
-					</button>
-					<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
-						<img src="/res/img/info_small.png" alt="Help"/>
-						<span>Details</span>
-					</button>
-					{{template "advertisement" .}}
+							<!-- This frame will load the download URL when a download button is pressed -->
+							<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
+						</div>
+					</div>
+				</div>
 
-					<!-- This frame will load the download URL when a download button is pressed -->
-					<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
+				<div id="sharebar" class="file_viewer_sharebar">
+					Share on:<br/>
+					<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
+						<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
+						<br/>E-Mail
+					</button>
+					<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
+						<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
+						<br/>Reddit
+					</button>
+					<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
+						<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
+						<br/>Twitter
+					</button>
+					<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
+						<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
+						<br/>Facebook
+					</button>
+					<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
+						<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
+						<br/>Tumblr
+					</button>
+					<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
+						<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
+						<br/>Voat
+					</button>
+				</div>
+
+				<div id="filepreview" class="file_viewer_file_preview">
+					<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
 				</div>
 			</div>
 		</div>
 
-		<div id="sharebar" class="sidebar">
-			Share on:<br/>
-			<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
-				<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
-				<br/>E-Mail
-			</button>
-			<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
-				<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
-				<br/>Reddit
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
-				<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
-				<br/>Twitter
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-				<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
-				<br/>Facebook
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
-				<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
-				<br/>Tumblr
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
-				<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
-				<br/>Voat
-			</button>
-		</div>
-
-		<div id="details_popup" class="popup details_popup border_bottom">
-			<div id="details_popup_title" class="highlight_light border_top border_bottom">
+		<div id="details_popup" class="popup details_popup">
+			<div id="details_popup_title" class="highlight_headerbar">
 				File Info
 				<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
 			</div>
@@ -147,23 +154,19 @@
 				</span>
 			</div>
 		</div>
-		<div id="captcha_popup" class="popup captcha_popup border_bottom">
-			<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>
+		<div id="captcha_popup" class="popup captcha_popup">
+			<div id="captcha_popup_title" class="highlight_headerbar"></div>
 			<div id="captcha_popup_content" class="content_area"></div>
 			<br/>
 			<div id="captcha_popup_captcha" style="text-align: center;"></div>
 		</div>
 
-		<div id="filepreview">
-			<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
-		</div>
-
 		<script src="/res/misc/chartjs/Chart.min.js"></script>
 		<script src="/res/script/jquery.js"></script>
 		<script src="/res/script/Keyboard.js"></script>
-		<script src="/res/script/Toolbar.js?v1"></script>
-		<script src="/res/script/Viewer.js?v1"></script>
-		<script src="/res/script/ListNavigator.js"></script>
+		<script src="/res/script/Toolbar.js?v2"></script>
+		<script src="/res/script/Viewer.js?v2"></script>
+		<script src="/res/script/ListNavigator.js?v2"></script>
 
 		<script>
 			// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
diff --git a/res/template/fragments/footer.html b/res/template/fragments/footer.html
index 0240205..9497e84 100644
--- a/res/template/fragments/footer.html
+++ b/res/template/fragments/footer.html
@@ -1,6 +1,6 @@
 {{define "footer"}}
 <br/>
-<div class="highlight_dark border_top border_bottom">
+<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>
diff --git a/res/template/fragments/form.html b/res/template/fragments/form.html
index 08e61df..48bd6c3 100644
--- a/res/template/fragments/form.html
+++ b/res/template/fragments/form.html
@@ -3,11 +3,11 @@
 	{{.PreFormHTML}}
 	{{if eq .Submitted true}}
 		{{if eq .SubmitSuccess true}}
-			<div id="submit_result" class="highlight_green border_top border_bottom">
+			<div id="submit_result" class="highlight_green">
 				{{index .SubmitMessages 0}}
 			</div>
 		{{else}}
-			<div id="submit_result" class="highlight_red border_top border_bottom">
+			<div id="submit_result" class="highlight_red">
 				Something went wrong, please correct these errors before continuing:<br/>
 				<ul>
 					{{range $msg := .SubmitMessages}}
@@ -18,7 +18,7 @@
 		{{end}}
 	{{end}}
 
-	<form class="highlight_dark border_top border_bottom" method="POST">
+	<form class="highlight_dark" method="POST">
 		<input type="text" name="form" value="{{.Name}}" style="display: none;" readonly="readonly"/>
 		{{if ne .Username ""}}
 			<!-- The invisible username field is so browsers know which user the form was for -->
diff --git a/res/template/fragments/menu.html b/res/template/fragments/menu.html
index 312ec8d..7e2cf7c 100644
--- a/res/template/fragments/menu.html
+++ b/res/template/fragments/menu.html
@@ -1,5 +1,5 @@
 {{define "menu"}}
-<div id="navigation" class="highlight_light border_top border_bottom navigation">
+<div id="navigation" class="highlight_headerbar navigation">
 	<a href="/">Home</a>
 	<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
 	{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}
diff --git a/res/template/history.html b/res/template/history.html
index aa82831..da07081 100644
--- a/res/template/history.html
+++ b/res/template/history.html
@@ -12,12 +12,13 @@
 	<body>
 		<div id='body' class="body">
 			{{template "menu" .}}
-			<br/>
+			<p>
 			Here are all files you have previously uploaded to PixelDrain using this computer.
 			This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
-			<br/><br/>
+			</p>
+			<br/>
 
-			<div id="uploadedFiles" class="highlight_dark border_top border_bottom"></div>
+			<div id="uploadedFiles" class="highlight_dark"></div>
 			{{template "footer"}}
 		</div>
 		<script src="/res/script/history.js"></script>
diff --git a/res/template/home.html b/res/template/home.html
index 8ef094f..0f03255 100644
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -22,7 +22,7 @@
 		<br/>
 		<div id="body" class="body">
 			{{template "menu" .}}
-			<div class="highlight_middle border_bottom">
+			<div class="highlight_middle">
 				<input id="file_input_field" type="file" name="file" multiple="multiple"/>
 				<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
 				<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
@@ -31,7 +31,7 @@
 
 				<div id="uploads_queue"></div>
 			</div>
-			<div class="highlight_dark border_bottom">
+			<div class="highlight_dark">
 				<button id="btn_create_list">Create list with uploaded files</button>
 				<button id="btn_copy_links">Copy links to clipboard</button>
 				<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
@@ -55,8 +55,8 @@
 				<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_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/>
 			</div>
 
 			<h2>Questions and Answers</h2>
diff --git a/res/template/maintenance.html b/res/template/maintenance.html
index d581f38..434a8a3 100644
--- a/res/template/maintenance.html
+++ b/res/template/maintenance.html
@@ -9,7 +9,7 @@
 		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
 		<br/>
 		<div id='body' class="body">
-			<div id="header" class="highlight_light border_top border_bottom" style="font-size: 2em; line-height: 1.2em;">
+			<div id="header" class="highlight_light" style="font-size: 2em; line-height: 1.2em;">
 				Pixeldrain is under maintenanace
 			</div>
 			<p>
diff --git a/res/template/widgets.html b/res/template/widgets.html
index 0a4280c..a52e7aa 100644
--- a/res/template/widgets.html
+++ b/res/template/widgets.html
@@ -19,13 +19,13 @@
 			<h5>Size 5 header</h5>
 			<h6>Size 6 header</h6>
 
-			<div class="highlight_light border_top">Light highlight</div>
+			<div class="highlight_light">Light highlight</div>
 			<div class="highlight_middle">Middle highlight</div>
-			<div class="highlight_dark border_bottom">Dark highlight</div>
+			<div class="highlight_dark">Dark highlight</div>
 			<br/>
-			<div class="highlight_light border_bottom border_top">Light highlight with borders</div>
-			<div class="highlight_middle border_bottom border_top">Middle highlight with borders</div>
-			<div class="highlight_dark  border_bottom border_top">Dark highlight with borders</div>
+			<div class="highlight_light">Light highlight with borders</div>
+			<div class="highlight_middle">Middle highlight with borders</div>
+			<div class="highlight_dark ">Dark highlight with borders</div>
 			<br/>
 			Link <a href="#">A link to someplace</a>.
 			<hr/>
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go
index fd00e67..59e1e75 100644
--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -49,12 +49,10 @@ func userStyle(r *http.Request) (style template.CSS) {
 
 	--background_color:           %s;
 	--body_color:                 %s;
+	--accent_color_headerbar:     %s;
 	--accent_color_dark:          %s;
-	--accent_color_dark_border:   %s;
 	--accent_color_medium:        %s;
-	--accent_color_medium_border: %s;
 	--accent_color_light:         %s;
-	--accent_color_light_border:  %s;
 
 	--shadow_color:     %s;
 	--shadow_spread:    %s;
@@ -62,24 +60,22 @@ func userStyle(r *http.Request) (style template.CSS) {
 }`,
 		selectedStyle.TextColor.cssString(),
 		selectedStyle.InputColor.cssString(),
-		selectedStyle.InputColor.add(0, 0, -.05).cssString(),
+		selectedStyle.InputColor.add(0, 0, -.03).cssString(),
 		selectedStyle.InputTextColor.cssString(),
 		selectedStyle.HighlightColor.cssString(),
-		selectedStyle.HighlightColor.add(0, 0, -.05).cssString(),
+		selectedStyle.HighlightColor.add(0, 0, -.03).cssString(),
 		selectedStyle.HighlightTextColor.cssString(),
 		selectedStyle.DangerColor.cssString(),
-		selectedStyle.DangerColor.add(0, 0, -.05).cssString(),
+		selectedStyle.DangerColor.add(0, 0, -.03).cssString(),
 		selectedStyle.FileBackgroundColor.cssString(),
 		selectedStyle.ScrollbarForegroundColor.cssString(),
 		selectedStyle.ScrollbarBackgroundColor.cssString(),
 		selectedStyle.BackgroundColor.cssString(),
 		selectedStyle.BodyColor.cssString(),
+		selectedStyle.AccentColorHeaderbar.cssString(),
 		selectedStyle.AccentColorDark.cssString(),
-		selectedStyle.AccentColorDark.add(0, 0, .1).cssString(),
 		selectedStyle.AccentColorMedium.cssString(),
-		selectedStyle.AccentColorMedium.add(0, 0, .1).cssString(),
 		selectedStyle.AccentColorLight.cssString(),
-		selectedStyle.AccentColorLight.add(0, 0, .1).cssString(),
 		selectedStyle.ShadowColor.cssString(),
 		fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
 		fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
@@ -97,11 +93,12 @@ type pixeldrainStyleSheet struct {
 	ScrollbarForegroundColor hsl
 	ScrollbarBackgroundColor hsl
 
-	BackgroundColor   hsl
-	BodyColor         hsl
-	AccentColorDark   hsl
-	AccentColorMedium hsl
-	AccentColorLight  hsl
+	BackgroundColor      hsl
+	BodyColor            hsl
+	AccentColorHeaderbar hsl
+	AccentColorDark      hsl
+	AccentColorMedium    hsl
+	AccentColorLight     hsl
 
 	ShadowColor     hsl
 	ShadowSpread    int // Pixels
@@ -164,11 +161,12 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{0, 0, .30},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{0, 0, .07},
-	AccentColorDark:   hsl{0, 0, .11},
-	AccentColorMedium: hsl{0, 0, .13},
-	AccentColorLight:  hsl{0, 0, .14},
+	BackgroundColor:      hsl{0, 0, 0},
+	BodyColor:            hsl{0, 0, .07},
+	AccentColorHeaderbar: hsl{0, 0, .14},
+	AccentColorDark:      hsl{0, 0, .11},
+	AccentColorMedium:    hsl{0, 0, .13},
+	AccentColorLight:     hsl{0, 0, .14},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -186,11 +184,12 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{0, 0, .30},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{0, 0, 1},
-	AccentColorDark:   hsl{0, 0, 1},
-	AccentColorMedium: hsl{0, 0, 1},
-	AccentColorLight:  hsl{0, 0, 1},
+	BackgroundColor:      hsl{0, 0, 0},
+	BodyColor:            hsl{0, 0, 1},
+	AccentColorHeaderbar: hsl{0, 0, .14},
+	AccentColorDark:      hsl{0, 0, 1},
+	AccentColorMedium:    hsl{0, 0, 1},
+	AccentColorLight:     hsl{0, 0, 1},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -208,11 +207,12 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{192, .95, .30},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{192, 1, .05},
-	BodyColor:         hsl{192, 1, .11},
-	AccentColorDark:   hsl{192, .87, .09},
-	AccentColorMedium: hsl{192, .81, .14},
-	AccentColorLight:  hsl{192, .95, .17},
+	BackgroundColor:      hsl{192, 1, .05},
+	BodyColor:            hsl{192, .81, .14}, // hsl(192, 81%, 14%)
+	AccentColorHeaderbar: hsl{192, 1, .11},   // hsl(192, 100%, 11%)
+	AccentColorDark:      hsl{192, .87, .09},
+	AccentColorMedium:    hsl{192, .81, .14},
+	AccentColorLight:     hsl{192, .95, .17},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -230,11 +230,12 @@ var maroonStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{0, .75, .2},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{0, 1, .05},
-	BodyColor:         hsl{0, .6, .1},
-	AccentColorDark:   hsl{0, .5, .07},
-	AccentColorMedium: hsl{0, .8, .15},
-	AccentColorLight:  hsl{0, .9, .2},
+	BackgroundColor:      hsl{0, 1, .05},
+	BodyColor:            hsl{0, .6, .1},
+	AccentColorHeaderbar: hsl{0, .5, .07},
+	AccentColorDark:      hsl{0, .5, .07},
+	AccentColorMedium:    hsl{0, .8, .15},
+	AccentColorLight:     hsl{0, .9, .2},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -252,11 +253,12 @@ var hackerStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{0, 0, .25},
 	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{0, 0, 0},
-	AccentColorDark:   hsl{120, .1, .05},
-	AccentColorMedium: hsl{120, .2, .10},
-	AccentColorLight:  hsl{120, .3, .15},
+	BackgroundColor:      hsl{0, 0, 0},
+	BodyColor:            hsl{0, 0, 0},
+	AccentColorHeaderbar: hsl{0, 0, .14},
+	AccentColorDark:      hsl{120, .1, .05},
+	AccentColorMedium:    hsl{120, .2, .10},
+	AccentColorLight:     hsl{120, .3, .15},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -274,11 +276,12 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForegroundColor: hsl{150, .02, .78},
 	ScrollbarBackgroundColor: hsl{170, .05, .26},
 
-	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{172, .06, .25},
-	AccentColorDark:   hsl{170, .06, .21},
-	AccentColorMedium: hsl{160, .04, .31},
-	AccentColorLight:  hsl{170, .02, .47},
+	BackgroundColor:      hsl{0, 0, 0},
+	BodyColor:            hsl{172, .06, .25},
+	AccentColorHeaderbar: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
+	AccentColorDark:      hsl{170, .06, .21},
+	AccentColorMedium:    hsl{160, .04, .31},
+	AccentColorLight:     hsl{170, .02, .47},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,
@@ -286,21 +289,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 }
 
 var arcPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .9},
-	InputColor:               hsl{219, .1, .27},
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{212, .54, .58},
-	HighlightTextColor:       hsl{0, 0, 1},
-	DangerColor:              hsl{357, .41, .55},
+	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%)
 	FileBackgroundColor:      hsl{219, .1, .2},
-	ScrollbarForegroundColor: hsl{150, .02, .78},
-	ScrollbarBackgroundColor: hsl{170, .05, .26},
+	ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
+	ScrollbarBackgroundColor: hsl{223, .12, .29}, // hsl(223, 12%, 29%)
 
-	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{223, .08, .33},
-	AccentColorDark:   hsl{219, .1, .27},
-	AccentColorMedium: hsl{223, .09, .3},
-	AccentColorLight:  hsl{223, .08, .33},
+	BackgroundColor:      hsl{0, 0, 0},
+	BodyColor:            hsl{223, .12, .29},
+	AccentColorHeaderbar: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
+	AccentColorDark:      hsl{215, .17, .19},
+	AccentColorMedium:    hsl{227, .14, .25}, // hsl(227, 14%, 25%)
+	AccentColorLight:     hsl{223, .12, .29},
 
 	ShadowColor:     hsl{0, 0, 0},
 	ShadowSpread:    10,