More styling options and small fixes

res/include/style/layout.css

@@ -86,7 +86,7 @@ footer {
 .button_toggle_navigation {
 	position: fixed;
 	backface-visibility: hidden;
-	z-index: 300;
+	z-index: 10;
 	top: 0;
 	left: 0;
 	padding: 10px 20px 15px 10px;
@@ -459,7 +459,7 @@ input[type="submit"]:disabled, input[type="submit"].disabled,
 input[type="button"]:disabled, input[type="button"].disabled,
 input[type="color"]:disabled, input[type="color"].disabled,
 select:disabled , select.disabled {
-	background: var(--layer_1_color);
+	background: var(--input_disabled_color);
 	color: var(--input_color);
 	box-shadow: none;
 	transition: none;
@@ -542,7 +542,7 @@ input[type="password"]:disabled,
 input[type="email"]:disabled,
 input[type="number"]:disabled,
 input[type="date"]:disabled{
-	background: var(--layer_1_color);
+	background: var(--input_disabled_color);
 	color: var(--input_color);
 	box-shadow: none;
 	transition: none;

res/template/home.html

@@ -39,19 +39,16 @@
 		.feat_table > div > .feat_normal {
 			background-color: var(--layer_3_color);
 			box-shadow: 1px 1px 4px -2px var(--shadow_color);
-			text-shadow: 1px 1px 2px var(--shadow_color);
 		}
 		.feat_table > div > .feat_pro {
 			background-color: var(--layer_4_color);
 			box-shadow: 1px 1px 4px -1px var(--shadow_color);
-			text-shadow: 1px 1px 4px var(--shadow_color);
 		}
 		.feat_table > div > .feat_highlight {
 			border: 1px solid var(--link_color)
 		}
 		.text_highlight {
 			color: var(--link_color);
-			text-shadow: 0 0 4px var(--shadow_color);
 			font-size: 1.1em;
 			font-weight: bold;
 		}

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -13,13 +13,16 @@ onMount(() => {
 		return
 	}
 
-	switch (Math.floor(Math.random()*2)) {
+	switch (Math.floor(Math.random()*3)) {
 		case 0:
 			set_ad_type("ads.plus")
 			break
 		case 1:
 			set_ad_type("valueimpression")
 			break
+		case 2:
+			set_ad_type("pixfuture")
+			break
 	}
 })
 
@@ -130,7 +133,7 @@ head.valueimpression_loaded.subscribe(v => {
 		</div>
 	{:else if ad_type === "pixfuture"}
 		<!-- AuctionX Display platform tag START -->
-		<div bind:this={banner} class="banner" id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%" style="display: block; margin: auto;"></div>
+		<div bind:this={banner} class="banner" id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%"></div>
 		<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27517x728x90x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
 		<!-- AuctionX Display platform tag END -->
 	{:else if ad_type === "adaround"}

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -31,13 +31,16 @@ onMount(() => {
 		return
 	}
 
-	switch (Math.floor(Math.random()*2)) {
+	switch (Math.floor(Math.random()*3)) {
 		case 0:
 			set_ad_type("ads.plus")
 			break
 		case 1:
 			set_ad_type("valueimpression")
 			break
+		case 2:
+			set_ad_type("pixfuture")
+			break
 	}
 })
 

svelte/src/file_viewer/FileViewer.svelte

@@ -273,50 +273,51 @@ const keyboard_event = evt => {
 		return // Prevent shortcuts from interfering with input fields
 	}
 
-	console.debug("Key pressed: " + evt.keyCode)
+	console.debug("Key pressed: " + evt.key)
-	switch (evt.keyCode) {
+	switch (evt.key) {
-		case 65: // A or left arrow key go to previous file
+		case "a": // A or left arrow key go to previous file
-		case 37:
+		case "ArrowLeft":
 			if (list_navigator) {
 				list_navigator.prev()
 			}
 			break
-		case 68: // D or right arrow key go to next file
+		case "d": // D or right arrow key go to next file
-		case 39:
+		case "ArrowRight":
 			if (list_navigator) {
 				list_navigator.next()
 			}
 			break
-		case 83:
+		case "s":
+		case "S":
 			if (evt.shiftKey) {
 				downloader.download_list() // SHIFT + S downloads all files in list
 			} else {
 				downloader.download_file() // S to download the current file
 			}
 			break
-		case 82: // R to toggle list shuffle
+		case "r": // R to toggle list shuffle
 			if (list_navigator) {
 				toggle_shuffle()
 			}
 			break
-		case 67: // C to copy to clipboard
+		case "c": // C to copy to clipboard
 			copy_url()
 			break
-		case 73: // I to open the details window
+		case "i": // I to open the details window
 			details_window.toggle()
 			break
-		case 69: // E to open the edit window
+		case "e": // E to open the edit window
-			if (file.can_edit) {
+			if (file.can_edit || list.can_edit) {
 				edit_window.toggle()
 			}
 			break
-		case 77: // M to open the embed window
+		case "m": // M to open the embed window
 			embed_window.toggle()
 			break
-		case 71: // G to grab this file
+		case "g": // G to grab this file
 			this.grabFile()
 			break
-		case 81: // Q to close the window
+		case "q": // Q to close the window
 			window.close()
 			break
 	}

svelte/src/util/Modal.svelte

@@ -71,7 +71,7 @@ const keydown = e => {
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.7);
+	background-color: rgba(0, 0, 0, 0.6);
 }
 .window {
 	position: absolute;
@@ -89,7 +89,6 @@ const keydown = e => {
 	border-radius: 20px 20px 16px 16px;
 	overflow: hidden;
 	text-align: left;
-	/* box-shadow: var(--shadow_color) 0px 0px 50px; Does not work with light theme */
 }
 .header {
 	flex-grow: 0;

webcontroller/file_viewer.go

@@ -81,7 +81,6 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,
 		templateData.Title = fmt.Sprintf("%d files on pixeldrain", len(files))
 		vd.Type = "list"
 		vd.APIResponse = pixelapi.ListInfo{
-			Success:     true,
 			Title:       "Multiple files",
 			DateCreated: time.Now(),
 			Files:       files,

webcontroller/user_style.go

@@ -53,6 +53,7 @@ type pixeldrainStyleSheet struct {
 	Link                hsl // Based on Highlight if undefined
 	Input               hsl // Buttons, text fields
 	InputText           hsl
+	InputDisabled       hsl
 	Highlight           hsl // Links, highlighted buttons, list navigation
 	HighlightText       hsl // Text on buttons
 	Danger              hsl
@@ -75,6 +76,9 @@ func (s pixeldrainStyleSheet) String() string {
 	if s.Link == noColor {
 		s.Link = s.Highlight.Add(0, 0, -.05)
 	}
+	if s.InputDisabled == noColor {
+		s.InputDisabled = s.Input.Add(0, -.2, -.2)
+	}
 	if s.ScrollbarForeground == noColor {
 		s.ScrollbarForeground = s.Input
 	}
@@ -92,6 +96,7 @@ func (s pixeldrainStyleSheet) String() string {
 	--input_color:                #%s;
 	--input_color_dark:           #%s;
 	--input_text_color:           #%s;
+	--input_disabled_color:       #%s;
 	--highlight_color:            #%s;
 	--highlight_color_dark:       #%s;
 	--highlight_text_color:       #%s;
@@ -118,6 +123,7 @@ func (s pixeldrainStyleSheet) String() string {
 		s.Input.RGB(),
 		s.Input.Add(0, 0, -.02).RGB(),
 		s.InputText.RGB(),
+		s.InputDisabled.RGB(),
 		s.Highlight.RGB(),
 		s.Highlight.Add(0, 0, -.02).RGB(),
 		s.HighlightText.RGB(),
@@ -431,7 +437,7 @@ var nordPixeldrainStyle = pixeldrainStyleSheet{
 
 var snowstormPixeldrainStyle = pixeldrainStyleSheet{
 	Text:                hsl{220, .16, .36}, // hsl(220, 16%, 36%)
-	Link:                hsl{92, .28, .40},
+	Link:                hsl{92, .40, .40},
 	Input:               hsl{193, .43, .67}, // hsl(193, 43%, 67%)
 	InputText:           hsl{180, .19, .23},
 	Highlight:           hsl{92, .28, .65}, // hsl(92, 28%, 65%)
@@ -440,7 +446,7 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForeground: hsl{193, .43, .67},
 	ScrollbarHover:      hsl{193, .43, .76},
 
-	Layer1:     hsl{220, .16, .36}, // hsl(220, 16%, 36%)
+	Layer1:     hsl{220, .17, .32}, // hsl(220, 17%, 32%)
 	Layer1Text: hsl{219, .28, .88},
 	Layer2:     hsl{219, .28, .88}, // hsl(219, 28%, 88%)
 	Layer3:     hsl{218, .27, .92}, // hsl(218, 27%, 92%)