More styling fixes, and fix the file not found page

res/static/script/Toolbar.js

@@ -215,7 +215,7 @@ var DetailsWindow = {
 					$("#info_file_details").html(
 						"<table>"
 						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
-						+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+						+ "<tr><td>URL<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
 						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
 						+ "<tr><td>ID<td><td>" + data.id + "</td></tr>"
 						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"

res/static/style/layout.css

@@ -254,15 +254,13 @@ pre{
 }
 
 .big_button{
-	height: 1.3em;
 	width: 40%;
 	min-width: 200px;
 	max-width: 400px;
 	margin: 10px !important;
 	border-radius: 5px;
-	font-size: 1.9em;
+	font-size: 1.8em;
 	font-weight: normal;
-	line-height: 8px;
 }
 
 .progress_bar{
@@ -347,13 +345,13 @@ select{
 	border: none;
 	margin: 3px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
-	padding: 6px 8px 6px 8px;
+	padding: .4em .5em .4em .5em;
 	box-shadow: 2px 2px 6px -3px var(--shadow_color);
-	font-weight: bold;
-	font-size: 0.85em;
+	font-size: 0.9em;
+	line-height: 1em;
 	overflow: hidden;
-	line-height: 1;
 	text-decoration: none;
+	font-family: inherit;
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	outline: 0;
@@ -386,7 +384,7 @@ 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: 10px 4px 2px 12px; /* Exactly 4px offset compared to the inactive padding to give a depth effect */
+	padding: .6em .3em .2em .7em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
 }
 .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;}

res/static/style/viewer.css

@@ -7,6 +7,7 @@ body{
 	overflow: hidden;
 }
 
+/* Viewer container */
 .file_viewer {
 	position: absolute;
 	display: flex;
@@ -17,6 +18,8 @@ body{
 	left: 0;
 	overflow: hidden;
 }
+
+/* Headerbar (row 1) */
 .file_viewer > .highlight_headerbar {
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -25,20 +28,15 @@ body{
 	text-align: left;
 	padding: 0.2em;
 }
-.file_viewer > .highlight_headerbar > .button_group {
+
+/* Headerbar components */
+.file_viewer > .highlight_headerbar > * {
 	flex-grow: 0;
 	flex-shrink: 0;
+	margin-left: .4em;
+	margin-right: .4em;
 	display: inline-flex;
 }
-.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;
@@ -47,11 +45,8 @@ body{
 	line-height: 2em;
 	text-overflow: ellipsis;
 }
-.file_viewer > .highlight_headerbar > .button_close_file_viewer {
-	flex-grow: 0;
-	flex-shrink: 0;
-	margin-left: .5em;
-}
+
+/* List Navigator (row 2) */
 .file_viewer > .list_navigator {
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -71,6 +66,8 @@ body{
 	height: 40px !important;
 	width: 250px !important;
 }
+
+/* File preview area (row 3) */
 .file_viewer > .file_viewer_window {
 	flex-grow: 1;
 	flex-shrink: 1;