From 81929bb0167ba14190f0856f028425d46e2abacb Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Mon, 5 Dec 2022 15:01:04 +0100
Subject: [PATCH] Styling fixes

---
 res/static/style/layout.css                   | 14 ++-
 res/template/fragments/page_wrap.html         | 18 ++--
 svelte/src/file_viewer/FilePicker.svelte      |  4 +-
 svelte/src/file_viewer/FileViewer.svelte      |  2 +-
 svelte/src/file_viewer/ListNavigator.svelte   |  6 +-
 svelte/src/layout/Footer.svelte               |  6 +-
 .../user_file_manager/DirectoryElement.svelte |  4 +-
 svelte/src/util/Modal.svelte                  |  2 +-
 webcontroller/style.go                        | 94 +++++++++----------
 9 files changed, 73 insertions(+), 77 deletions(-)

diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index 97702ac..99593fe 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -98,6 +98,10 @@ footer>.footer_content {
 	background-color: var(--body_background);
 	color: var(--body_text_color);
 	display: inline-block;
+	width: 1000px;
+	max-width: 100%;
+	padding-top: 10px;
+	padding-bottom: 10px;
 	border-radius: 8px;
 	margin: 120px 0 60px 0;
 }
@@ -155,8 +159,8 @@ footer>.footer_content {
 
 .page_content {
 	background: var(--body_background);
-	border-top-left-radius: 12px;
-	border-bottom-left-radius: 12px;
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
 	transition: border-top-left-radius 1s, border-bottom-left-radius 1s;
 }
 
@@ -643,9 +647,9 @@ input[type=file] {
 /* Webkit Scrollbars */
 
 ::-webkit-scrollbar {
-	width: 18px;
+	width: 16px;
 	/* for vertical scrollbars */
-	height: 18px;
+	height: 16px;
 	/* for horizontal scrollbars */
 }
 
@@ -656,7 +660,7 @@ input[type=file] {
 ::-webkit-scrollbar-thumb {
 	background-color: var(--scrollbar_foreground_color);
 	border-radius: 10px;
-	border: 5px solid var(--body_color);
+	border: 4px solid var(--body_color);
 	height: 40px;
 	width: 40px;
 }
diff --git a/res/template/fragments/page_wrap.html b/res/template/fragments/page_wrap.html
index 553610d..bfc7f48 100644
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -34,14 +34,18 @@ function toggleMenu() {
 		// Menu is visible, hide it
 		nav.style.left = -nav.offsetWidth + "px";
 		body.style.marginLeft = "0";
-		content.style.borderTopLeftRadius = "0"
-		content.style.borderBottomLeftRadius = "0"
+		if (content) {
+			content.style.borderTopLeftRadius = "0"
+			content.style.borderBottomLeftRadius = "0"
+		}
 	} else {
 		// Menu is hidden, show it
 		nav.style.left = "0";
 		body.style.marginLeft = nav.offsetWidth + "px";
-		content.style.borderTopLeftRadius = "12px"
-		content.style.borderBottomLeftRadius = "12px"
+		if (content) {
+			content.style.borderTopLeftRadius = "8px"
+			content.style.borderBottomLeftRadius = "8px"
+		}
 	}
 }
 function resetMenu() {
@@ -54,17 +58,15 @@ function resetMenu() {
 {{define "footer"}}
 <footer>
 	<div class="footer_content">
-		<div style="display: inline-block; margin: 0 8px 0 8px;">
+		<div style="display: inline-block; margin: 0 8px;">
 			Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
 		</div>
-		<div style="display: inline-block; margin: 0 8px 0 8px;">
-			(
+		<div style="display: inline-block; margin: 0 8px;">
 			<a href="https://www.patreon.com/pixeldrain" target="_blank">{{template `patreon.svg` .}} Patreon</a> |
 			<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
 			<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
 			<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
 			<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
-			)
 		</div>
 		<br/>
 		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
diff --git a/svelte/src/file_viewer/FilePicker.svelte b/svelte/src/file_viewer/FilePicker.svelte
index 6e7d590..36a2f63 100644
--- a/svelte/src/file_viewer/FilePicker.svelte
+++ b/svelte/src/file_viewer/FilePicker.svelte
@@ -116,7 +116,7 @@ const keydown = (e) => {
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	font-size: 1.2em;
+	font-size: 1em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -125,12 +125,14 @@ const keydown = (e) => {
 	flex-grow: 1;
 	flex-shrink: 1;
 	text-align: center;
+	font-size: 1.2em;
 }
 .search {
 	min-width: 100px;
 	max-width: 300px;
 	flex-grow: 1;
 	flex-shrink: 1;
+	align-self: stretch;
 }
 @media(max-width: 700px) {
 	.title {
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 895d16f..0e6170b 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -684,7 +684,7 @@ const keyboard_event = evt => {
 	transition: left 0.5s;
 	overflow: auto;
 	text-align: center;
-	border-radius: 12px;
+	border-radius: 8px;
 	border: 2px solid var(--separator);
 }
 .file_preview.toolbar_visible { left: 8.2em; }
diff --git a/svelte/src/file_viewer/ListNavigator.svelte b/svelte/src/file_viewer/ListNavigator.svelte
index d5c3d96..77def90 100644
--- a/svelte/src/file_viewer/ListNavigator.svelte
+++ b/svelte/src/file_viewer/ListNavigator.svelte
@@ -105,7 +105,7 @@ export const set_item = idx => {
 .nav_button{
 	flex-grow: 0;
 	flex-shrink: 0;
-	margin: 6px;
+	margin: 4px;
 }
 
 .list_navigator {
@@ -118,9 +118,9 @@ export const set_item = idx => {
 
 .file_button {
 	position: relative;
-	height: 50px;
+	height: 48px;
 	width: 220px;
-	margin: 6px;
+	margin: 4px 3px;
 	padding: 0;
 	overflow: hidden;
 	border-radius: 6px;
diff --git a/svelte/src/layout/Footer.svelte b/svelte/src/layout/Footer.svelte
index f04cd7f..78a0f0d 100644
--- a/svelte/src/layout/Footer.svelte
+++ b/svelte/src/layout/Footer.svelte
@@ -8,11 +8,10 @@ import Twitter from "../icons/Twitter.svelte";
 
 <footer>
 	<div class="footer_content">
-		<div style="display: inline-block; margin: 0 8px 0 8px;">
+		<div style="display: inline-block; margin: 0 8px;">
 			Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
 		</div>
-		<div style="display: inline-block; margin: 0 8px 0 8px;">
-			(
+		<div style="display: inline-block; margin: 0 8px;">
 			<a href="https://www.patreon.com/pixeldrain" target="_blank">
 				<Patreon style="color: var(--body_text_color);"/> Patreon
 			</a> |
@@ -28,7 +27,6 @@ import Twitter from "../icons/Twitter.svelte";
 			<a href="https://mastodon.social/web/@fornax" target="_blank">
 				<Mastodon style="color: var(--body_text_color);"/> Mastodon
 			</a>
-			)
 		</div>
 		<br/>
 		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
diff --git a/svelte/src/user_file_manager/DirectoryElement.svelte b/svelte/src/user_file_manager/DirectoryElement.svelte
index 2af6617..fe0e6b4 100644
--- a/svelte/src/user_file_manager/DirectoryElement.svelte
+++ b/svelte/src/user_file_manager/DirectoryElement.svelte
@@ -357,7 +357,7 @@ const node_click = (index) => {
 	overflow: hidden;
 	background: var(--body_background);
 	min-width: 850px;
-	border-top-left-radius: 16px;
+	border-top-left-radius: 8px;
 	border-bottom: 1px solid var(--separator);
 }
 .sorter_button {
@@ -387,7 +387,7 @@ const node_click = (index) => {
 	padding: 0;
 	overflow-x: auto;
 	background: var(--body_background);
-	border-bottom-left-radius: 16px;
+	border-bottom-left-radius: 8px;
 }
 #node_container {
 	display: block;
diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte
index 579a841..b1bf220 100644
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -94,7 +94,7 @@ these padding divs to move it 25% up */
 	max-height: 100%;
 	max-width: 100%;
 	padding: 0;
-	border-radius: 20px 20px 12px 12px;
+	border-radius: 20px 20px 8px 8px;
 	overflow: hidden;
 	text-align: left;
 }
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 3a54744..c6285fe 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -115,7 +115,7 @@ type styleSheet struct {
 	Highlight           HSL // Links, highlighted buttons, list navigation
 	HighlightText       HSL // Text on buttons
 	Danger              HSL
-	ScrollbarForeground CSS // Based on Highlight if undefined
+	ScrollbarForeground CSS // Based on Input if undefined
 	ScrollbarHover      CSS // Based on ScrollbarForeground if undefined
 
 	BackgroundColor   HSL
@@ -153,7 +153,7 @@ func (s styleSheet) withDefaults() styleSheet {
 	}
 	defaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
 	defaultCSS(&s.ScrollbarForeground, s.Input)
-	defaultCSS(&s.ScrollbarHover, s.Highlight)
+	defaultCSS(&s.ScrollbarHover, s.InputHover)
 	defaultHSL(&s.Chart1, s.Highlight)
 	defaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
 	defaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
@@ -333,15 +333,13 @@ var purpleDrainStyle = styleSheet{
 }
 
 var classicStyle = styleSheet{
-	Input:               HSL{0, 0, .18},
-	InputHover:          HSL{0, 0, .22},
-	InputText:           HSL{0, 0, .9},
-	InputDisabledText:   HSL{0, 0, .4},
-	Highlight:           HSL{89, .60, .45},
-	HighlightText:       HSL{0, 0, 0},
-	Danger:              HSL{339, .65, .31},
-	ScrollbarForeground: HSL{0, 0, .40},
-	ScrollbarHover:      HSL{0, 0, .50},
+	Input:             HSL{0, 0, .18},
+	InputHover:        HSL{0, 0, .22},
+	InputText:         HSL{0, 0, .9},
+	InputDisabledText: HSL{0, 0, .4},
+	Highlight:         HSL{89, .60, .45},
+	HighlightText:     HSL{0, 0, 0},
+	Danger:            HSL{339, .65, .31},
 
 	BackgroundColor: HSL{0, 0, .08},
 	BodyColor:       HSL{0, 0, .12},
@@ -352,15 +350,13 @@ var classicStyle = styleSheet{
 }
 
 var maroonStyle = styleSheet{
-	Input:               HSL{0, .8, .20}, // hsl(0, 87%, 40%)
-	InputHover:          HSL{0, .8, .24},
-	InputText:           HSL{0, 0, 1},
-	InputDisabledText:   HSL{0, 0, .5},
-	Highlight:           HSL{137, 1, .37}, //hsl(137, 100%, 37%)
-	HighlightText:       HSL{0, 0, 0},
-	Danger:              HSL{9, .96, .42}, //hsl(9, 96%, 42%)
-	ScrollbarForeground: HSL{0, .75, .3},
-	ScrollbarHover:      HSL{0, .75, .4},
+	Input:             HSL{0, .8, .20}, // hsl(0, 87%, 40%)
+	InputHover:        HSL{0, .8, .25},
+	InputText:         HSL{0, 0, 1},
+	InputDisabledText: HSL{0, 0, .5},
+	Highlight:         HSL{137, 1, .37}, //hsl(137, 100%, 37%)
+	HighlightText:     HSL{0, 0, 0},
+	Danger:            HSL{9, .96, .42}, //hsl(9, 96%, 42%)
 
 	BackgroundColor: HSL{0, .7, .05},
 	BodyColor:       HSL{0, .8, .08}, // HSL{0, .8, .15},
@@ -371,15 +367,13 @@ var maroonStyle = styleSheet{
 }
 
 var hackerStyle = styleSheet{
-	Input:               HSL{0, 0, .1},
-	InputHover:          HSL{0, 0, .14},
-	InputText:           HSL{0, 0, 1},
-	InputDisabledText:   HSL{0, 0, .5},
-	Highlight:           HSL{120, .8, .5},
-	HighlightText:       HSL{0, 0, 0},
-	Danger:              HSL{0, 1, .4},
-	ScrollbarForeground: HSL{120, .5, .25},
-	ScrollbarHover:      HSL{120, .5, .35},
+	Input:             HSL{0, 0, .1},
+	InputHover:        HSL{0, 0, .15},
+	InputText:         HSL{0, 0, 1},
+	InputDisabledText: HSL{0, 0, .5},
+	Highlight:         HSL{120, .8, .5},
+	HighlightText:     HSL{0, 0, 0},
+	Danger:            HSL{0, 1, .4},
 
 	BackgroundColor: HSL{0, 0, 0},
 	BodyColor:       HSL{0, 0, .03},
@@ -390,15 +384,13 @@ var hackerStyle = styleSheet{
 }
 
 var cantaPixeldrainStyle = styleSheet{
-	Input:               HSL{167, .06, .30}, // hsl(167, 6%, 30%)
-	InputHover:          HSL{167, .06, .34}, // hsl(167, 6%, 30%)
-	InputText:           HSL{0, 0, 1},
-	InputDisabledText:   HSL{0, 0, .5},
-	Highlight:           HSL{165, 1, .40}, // hsl(165, 100%, 40%)
-	HighlightText:       HSL{0, 0, 0},
-	Danger:              HSL{40, 1, .5},     // hsl(40, 100%, 50%)
-	ScrollbarForeground: HSL{204, .05, .78}, // hsl(204, 5%, 78%)
-	ScrollbarHover:      HSL{204, .05, .88},
+	Input:             HSL{167, .06, .30}, // hsl(167, 6%, 30%)
+	InputHover:        HSL{167, .06, .35}, // hsl(167, 6%, 30%)
+	InputText:         HSL{0, 0, 1},
+	InputDisabledText: HSL{0, 0, .5},
+	Highlight:         HSL{165, 1, .40}, // hsl(165, 100%, 40%)
+	HighlightText:     HSL{0, 0, 0},
+	Danger:            HSL{40, 1, .5}, // hsl(40, 100%, 50%)
 
 	BackgroundColor: HSL{180, .04, .16},
 	BodyColor:       HSL{168, .05, .21},
@@ -409,15 +401,13 @@ var cantaPixeldrainStyle = styleSheet{
 }
 
 var skeuosPixeldrainStyle = styleSheet{
-	Input:               HSL{226, .15, .23}, //hsl(226, 15%, 23%)
-	InputHover:          HSL{226, .15, .27},
-	InputText:           HSL{60, .06, .93},
-	InputDisabledText:   HSL{0, 0, .5},
-	Highlight:           HSL{282, .65, .54}, // hsl(282, 65%, 54%)
-	HighlightText:       HSL{0, 0, 1},
-	Danger:              HSL{0, .79, .43},   // hsl(0, 79%, 43%)
-	ScrollbarForeground: HSL{220, .02, .62}, // hsl(220, 2%, 62%)
-	ScrollbarHover:      HSL{220, .02, .80},
+	Input:             HSL{226, .15, .23}, //hsl(226, 15%, 23%)
+	InputHover:        HSL{226, .15, .28},
+	InputText:         HSL{60, .06, .93},
+	InputDisabledText: HSL{0, 0, .5},
+	Highlight:         HSL{282, .65, .54}, // hsl(282, 65%, 54%)
+	HighlightText:     HSL{0, 0, 1},
+	Danger:            HSL{0, .79, .43}, // hsl(0, 79%, 43%)
 
 	BackgroundColor: HSL{232, .14, .11}, //hsl(232, 14%, 11%)
 	BodyColor:       HSL{229, .14, .16}, // hsl(229, 14%, 16%)
@@ -485,7 +475,7 @@ var nordLightStyle = styleSheet{
 
 var sweetPixeldrainStyle = styleSheet{
 	Input:             HSL{229, .25, .18}, // hsl(229, 25%, 14%)
-	InputHover:        HSL{229, .25, .22}, // hsl(229, 25%, 14%)
+	InputHover:        HSL{229, .25, .23}, // hsl(229, 25%, 14%)
 	InputText:         HSL{223, .13, .79},
 	InputDisabledText: HSL{0, 0, .5},
 	Highlight:         HSL{296, .88, .44},
@@ -502,7 +492,7 @@ var sweetPixeldrainStyle = styleSheet{
 
 var adwaitaDarkStyle = styleSheet{
 	Input:             RGBA{255, 255, 255, .06},
-	InputHover:        RGBA{255, 255, 255, .1},
+	InputHover:        RGBA{255, 255, 255, .11},
 	InputText:         HSL{0, 0, 1},
 	InputDisabledText: HSL{0, 0, .5},
 	Highlight:         HSL{152, .62, .39}, // hsl(152, 62%, 39%)
@@ -519,7 +509,7 @@ var adwaitaDarkStyle = styleSheet{
 
 var adwaitaLightStyle = styleSheet{
 	Input:             RGBA{0, 0, 0, .06},
-	InputHover:        RGBA{0, 0, 0, .1},
+	InputHover:        RGBA{0, 0, 0, .11},
 	InputText:         HSL{0, 0, .2},
 	InputDisabledText: HSL{0, 0, .7},
 	Highlight:         HSL{152, .62, .47}, // hsl(152, 62%, 47%)
@@ -537,7 +527,7 @@ var adwaitaLightStyle = styleSheet{
 
 var solarizedDarkStyle = styleSheet{
 	Input:             HSL{192, .81, .18}, // hsl(194, 14%, 40%)
-	InputHover:        HSL{192, .81, .22}, // hsl(196, 13%, 45%)
+	InputHover:        HSL{192, .81, .23}, // hsl(196, 13%, 45%)
 	InputText:         HSL{180, .07, .80}, // hsl(44, 87%, 94%)
 	InputDisabledText: HSL{194, .14, .30}, // hsl(194, 14%, 40%)
 	Highlight:         HSL{68, 1, .30},    // hsl(68, 100%, 30%)
@@ -554,7 +544,7 @@ var solarizedDarkStyle = styleSheet{
 
 var solarizedLightStyle = styleSheet{
 	Input:             HSL{46, .42, .84},
-	InputHover:        HSL{46, .42, .82},
+	InputHover:        HSL{46, .42, .80},
 	InputText:         HSL{194, .14, .20}, // hsl(192, 81%, 14%)
 	InputDisabledText: HSL{44, .87, .94},
 	Highlight:         HSL{68, 1, .30}, // hsl(68, 100%, 30%)