Finish new style

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);

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");

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;}

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%;

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");