Add a little bit of depth

res/static/style/layout.css

@@ -493,6 +493,7 @@ select {
 	overflow: hidden;
 	color: var(--input_text);
 	cursor: pointer;
+	box-shadow: 1px 1px 0px 0px var(--shadow_color);
 	transition: padding 0.1s, box-shadow 0.1s, background 0.1s;
 
 	/* Align content vertically in relation to the container */
@@ -647,6 +648,7 @@ input[type="datetime-local"] {
 	border-radius: 6px;
 	background: var(--input_background);
 	padding: 3px 5px;
+	box-shadow: inset 1px 1px 0px 0px var(--shadow_color);
 	/* override user-agent style */
 	min-width: 100px;
 	color: var(--input_text);

svelte/src/file_viewer/GalleryView.svelte

@@ -184,6 +184,7 @@ const drop = (e, index) => {
 	vertical-align: top;
 	color: var(--body_text_color);
 	transition: background 0.2s, padding 0.2s, box-shadow 0.2s;
+	box-shadow: 1px 1px 0px 0px var(--shadow_color);
 }
 .file:hover {
 	background: var(--input_hover_background);

svelte/src/file_viewer/HomeButton.svelte

@@ -40,6 +40,7 @@ export let nobg = false
 	background: none;
 	margin: 0;
 	color: var(--body_text_color);
+	box-shadow: none;
 }
 
 @media (max-width: 600px) {

svelte/src/file_viewer/ListNavigator.svelte

@@ -138,6 +138,7 @@ export const set_item = idx => {
 	border-width: 2px;
 	border-style: solid;
 	border-color: var(--input_background);
+	box-shadow: 1px 1px 0px 0px var(--shadow_color);
 }
 
 .file_button:hover {

svelte/src/filesystem/BrandingOptions.svelte

@@ -39,13 +39,12 @@ const add_styles = (style, properties) => {
 		style.input_background = properties.brand_input_color
 		style.input_hover_background = properties.brand_input_color
 		style.input_text = add_light(properties.brand_input_color, 70)
-		style.shadow_color = add_light(properties.brand_input_color, 20)
 	}
 	if (properties.brand_highlight_color) {
 		style.highlight_color = properties.brand_highlight_color
 		style.highlight_background = properties.brand_highlight_color
 		style.highlight_text_color = add_light(properties.brand_highlight_color, 70)
-		style.link_color = add_light(properties.brand_highlight_color, 10)
+		style.link_color = properties.brand_highlight_color
 	}
 	if (properties.brand_danger_color) {
 		style.danger_color = properties.brand_danger_color
@@ -55,6 +54,7 @@ const add_styles = (style, properties) => {
 		style.background_color = properties.brand_background_color
 		style.background = properties.brand_background_color
 		style.background_text_color = add_light(properties.brand_background_color, 70)
+		style.background_pattern_color = properties.brand_background_color
 	}
 	if (properties.brand_body_color) {
 		style.body_color = properties.brand_body_color
@@ -62,6 +62,7 @@ const add_styles = (style, properties) => {
 		style.body_text_color = add_light(properties.brand_body_color, 70)
 		style.shaded_background = set_alpha(properties.brand_body_color, 0.8)
 		style.separator = add_light(properties.brand_body_color, 5)
+		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
 	if (properties.brand_card_color) {
 		style.card_color = properties.brand_card_color
@@ -76,13 +77,24 @@ const add_styles = (style, properties) => {
 
 const add_light = (color, amt) => {
 	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
-	if (hsl[2] < 50) {
+	// If the lightness is less than 30 it is considered a dark colour. This
+	// threshold is 30 instead of 50 because overall dark text is more legible
+	if (hsl[2] < 30) {
 		hsl[2] = hsl[2]+amt // Dark color, add lightness
 	} else {
 		hsl[2] = hsl[2]-amt // Light color, remove lightness
 	}
 	return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
 }
+
+// Darken and desaturate. Only used for shadows
+const darken = (color, percent) => {
+	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
+	hsl[1] = hsl[1]*percent
+	hsl[2] = hsl[2]*percent
+	return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
+}
+
 const set_alpha = (color, amt) => {
 	let rgb = parse(color)
 	rgb.push(amt)
@@ -200,9 +212,10 @@ const handle_picker = async e => {
 		<hr/>
 
 		You can choose an image to show above or behind the files in this
-		directory. The image will be picked from your filesystem. If the image
+		directory. The image will be picked from your filesystem. The image will
-		is not shared yet it will be made shared so it can be publicly
+		get a shared file link. You can move and rename the file like normal,
-		downloaded.
+		but if you remove the shared file property your branding will stop
+		working.
 	</div>
 	<div>Header image ID</div>
 	<button on:click={() => pick_image("brand_header_image")}>

svelte/src/filesystem/EditWindow.svelte

@@ -4,6 +4,7 @@ import Modal from "../util/Modal.svelte";
 import { createEventDispatcher } from "svelte";
 import Button from "../layout/Button.svelte";
 import BrandingOptions from "./BrandingOptions.svelte";
+import PathLink from "./util/PathLink.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -16,6 +17,8 @@ let file = {
 	properties: {},
 };
 
+$: is_root_dir = file.path === "/"+file.id
+
 export let visible
 export const edit = (f, oae = false, t = "file") => {
 	file = f
@@ -124,11 +127,11 @@ const delete_file = async e => {
 }
 </script>
 
-<Modal bind:visible={visible} title="Edit {file.name}" width="700px" form="file_edit_form">
+<Modal bind:visible={visible} title="Edit {file.name}" width="700px" form="edit_form">
 	<div class="tab_bar">
 		<button class:button_highlight={tab === "file"} on:click={() => tab = "file"}>
 			<i class="icon">edit</i>
-			Edit file
+			Properties
 		</button>
 		<button class:button_highlight={tab === "share"} on:click={() => tab = "share"}>
 			<i class="icon">share</i>
@@ -140,13 +143,24 @@ const delete_file = async e => {
 		</button>
 	</div>
 
-	<form id="file_edit_form" on:submit|preventDefault={save}></form>
+	<form id="edit_form" on:submit|preventDefault={save}></form>
+
 	{#if tab === "file"}
 		<div class="tab_content">
-			<span class="header">File settings</span>
+			<h2>File settings</h2>
-			<label for="file_name">Name:</label>
+			{#if is_root_dir}
-			<input form="file_edit_form" bind:value={file_name} id="file_name" type="text" class="form_input"/>
+				<div class="highlight_yellow">
-			<span class="header">Delete</span>
+					Filesystem root cannot be renamed. If this shared directory
+					is in
+					<PathLink nav={fs_navigator} path="/me">your filesystem</PathLink>
+					you can rename it from there
+				</div>
+			{/if}
+			<div class="form_grid">
+				<label for="file_name">Name</label>
+				<input form="edit_form" bind:value={file_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
+			</div>
+			<h2>Delete</h2>
 			<p>
 				Delete this file or directory. If this is a directory then all
 				subfiles will be deleted as well. This action cannot be undone.
@@ -155,6 +169,7 @@ const delete_file = async e => {
 		</div>
 	{:else if tab === "share"}
 		<div class="tab_content">
+			<h2>Share this file/directory</h2>
 			<p>
 				When a file or directory is shared it can be accessed
 				through a unique link. You can get the URL with the 'Copy
@@ -163,7 +178,7 @@ const delete_file = async e => {
 				within the directory are also accessible from the link.
 			</p>
 			<div>
-				<input bind:checked={shared} id="shared" type="checkbox" class="form_input"/>
+				<input form="edit_form" bind:checked={shared} id="shared" type="checkbox" class="form_input"/>
 				<label for="shared">Share this file or directory</label>
 			</div>
 		</div>
@@ -175,11 +190,6 @@ const delete_file = async e => {
 </Modal>
 
 <style>
-.header {
-	margin-top: 1em;
-	font-size: 1.5em;
-	border-bottom: 1px var(--separator) solid;
-}
 .tab_bar {
 	border-bottom: 2px solid var(--separator);
 }
@@ -188,4 +198,9 @@ const delete_file = async e => {
 	flex-direction: column;
 	padding: 8px;
 }
+.form_grid {
+	display: grid;
+	grid-template-columns: 1fr 10fr;
+	align-items: center;
+}
 </style>

svelte/src/filesystem/Filesystem.svelte

@@ -35,15 +35,12 @@ let state = {
 	shuffle: false,
 }
 
-onMount(() => {
+onMount(() => fs_navigator.open_node(window.initial_node, false))
-	fs_navigator.open_node(window.initial_node, false)
-})
 
 const keydown = e => {
 	if (e.ctrlKey || e.altKey || e.metaKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts
-	}
+	} else if (document.activeElement.type && document.activeElement.type === "text") {
-	if (document.activeElement.type && document.activeElement.type === "text") {
 		return // Prevent shortcuts from interfering with input fields
 	}
 
@@ -101,17 +98,12 @@ const search = async () => {
 	view = "search"
 }
 
-const loading_evt = e => {
+const loading_evt = e => loading = e.detail
-	loading = e.detail
-}
 
 // Custom CSS rules for the whole viewer. This is updated by either the
 // navigation_complete event or the style_change event
-let custom_css = ""
 $: update_css(state.path)
-const update_css = path => {
+const update_css = path => document.documentElement.style = branding_from_path(path)
-	custom_css = branding_from_path(path)
-}
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -122,7 +114,7 @@ const update_css = path => {
 	on:loading={loading_evt}
 />
 
-<div class="file_viewer" style={custom_css}>
+<div class="file_viewer">
 	<div class="headerbar">
 		<div>
 			<HomeButton nobg/>
@@ -187,9 +179,7 @@ const update_css = path => {
 		bind:visible={edit_visible}
 		fs_navigator={fs_navigator}
 		on:loading={loading_evt}
-		on:style_change={e => {
+		on:style_change={e => document.documentElement.style = branding_from_node(e.detail)}
-			custom_css = branding_from_node(e.detail)
-		}}
 	/>
 
 	<UploadWidget

svelte/src/filesystem/Toolbar.svelte

@@ -116,7 +116,7 @@ let expand = e => {
 			<span>Deta<u>i</u>ls</span>
 		</button>
 
-		{#if state.path.length > 1}
+		{#if state.base.id !== "me" && state.permissions.update === true}
 			<button on:click={() => edit_window.edit(state.base, true)} class:button_highlight={edit_visible}>
 				<i class="icon">edit</i>
 				<span><u>E</u>dit</span>

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -52,6 +52,7 @@ export let large_icons = false
 	transition: background 0.2s;
 	text-decoration: none;
 	padding: 3px;
+	box-shadow: 1px 1px 0px 0px var(--shadow_color);
 }
 .file.large_icons {
 	width: 200px;

svelte/src/filesystem/filemanager/ListView.svelte

@@ -121,6 +121,7 @@ td {
 	margin: 0;
 	background: none;
 	color: var(--body_text_color);
+	box-shadow: none;
 }
 .hidden {
 	display: none;

svelte/src/filesystem/util/PathLink.svelte

@@ -0,0 +1,8 @@
+<script>
+export let nav
+export let path = ""
+</script>
+
+<a href={"/d"+path} on:click|preventDefault={() => {nav.navigate(path, true)}}>
+	<slot></slot>
+</a>

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -367,6 +367,7 @@ const node_click = (index) => {
 	margin: 4px 10px;
 	text-align: initial;
 	background: none;
+	box-shadow: none;
 }
 .sorter_button:hover {
 	background: var(--input_hover_background);

webcontroller/style.go

@@ -134,8 +134,6 @@ type styleSheet struct {
 	Chart1 HSL
 	Chart2 HSL
 	Chart3 HSL
-
-	Shadow HSL
 }
 
 func (s styleSheet) withDefaults() styleSheet {
@@ -197,7 +195,6 @@ func (s styleSheet) withHue(hue int) styleSheet {
 	s.Separator.Hue = hue
 	s.CardColor.Hue = hue
 	s.CardText.Hue = hue
-	s.Shadow.Hue = hue
 	return s
 }
 
@@ -265,7 +262,7 @@ func (s styleSheet) String() string {
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
 		s.Chart3.CSS(),
-		s.Shadow.CSS(),
+		s.BodyColor.Darken(0.7).CSS(),
 	)
 }
 
@@ -328,8 +325,6 @@ var purpleDrainStyle = styleSheet{
 	BodyBackground:    NewGradient(120, HSL{255, .84, .18}, HSL{300, .85, .16}),
 	BodyText:          HSL{0, 0, .8},
 	CardColor:         HSL{275, .8, .18},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var classicStyle = styleSheet{
@@ -345,8 +340,6 @@ var classicStyle = styleSheet{
 	BodyColor:       HSL{0, 0, .12},
 	BodyText:        HSL{0, 0, .8},
 	CardColor:       HSL{0, 0, .16},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var maroonStyle = styleSheet{
@@ -362,8 +355,6 @@ var maroonStyle = styleSheet{
 	BodyColor:       HSL{0, .8, .08}, // HSL{0, .8, .15},
 	BodyText:        HSL{0, 0, .8},
 	CardColor:       HSL{0, .9, .14},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var hackerStyle = styleSheet{
@@ -379,8 +370,6 @@ var hackerStyle = styleSheet{
 	BodyColor:       HSL{0, 0, .03},
 	BodyText:        HSL{0, 0, .8},
 	CardColor:       HSL{120, .4, .05},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var cantaPixeldrainStyle = styleSheet{
@@ -396,8 +385,6 @@ var cantaPixeldrainStyle = styleSheet{
 	BodyColor:       HSL{168, .05, .21},
 	BodyText:        HSL{0, 0, .8},
 	CardColor:       HSL{170, .05, .26},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var skeuosPixeldrainStyle = styleSheet{
@@ -413,8 +400,6 @@ var skeuosPixeldrainStyle = styleSheet{
 	BodyColor:       HSL{229, .14, .16}, // hsl(229, 14%, 16%)
 	BodyText:        HSL{60, .06, .93},  // hsl(60, 6%, 93%)
 	CardColor:       HSL{225, .14, .17}, // hsl(225, 14%, 17%)
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var (
@@ -446,8 +431,6 @@ var nordDarkStyle = styleSheet{
 	BodyColor:       nord1,
 	BodyText:        nord4,
 	CardColor:       nord2,
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var nordLightStyle = styleSheet{
@@ -469,8 +452,6 @@ var nordLightStyle = styleSheet{
 	Separator:         nord4,
 	BackgroundPattern: nord4,
 	CardColor:         nord5,
-
-	Shadow: HSL{220, .16, .36},
 }
 
 var sweetPixeldrainStyle = styleSheet{
@@ -486,8 +467,6 @@ var sweetPixeldrainStyle = styleSheet{
 	BodyColor:       HSL{228, .25, .12}, // hsl(228, 25%, 12%)
 	BodyText:        HSL{223, .13, .79}, // hsl(223, 13%, 79%)
 	CardColor:       HSL{229, .25, .14}, // hsl(229, 25%, 14%)
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var adwaitaDarkStyle = styleSheet{
@@ -503,8 +482,6 @@ var adwaitaDarkStyle = styleSheet{
 	BodyColor:       HSL{0, 0, .14},
 	BodyText:        HSL{0, 0, 1},
 	CardColor:       HSL{0, 0, .21},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var adwaitaLightStyle = styleSheet{
@@ -521,8 +498,6 @@ var adwaitaLightStyle = styleSheet{
 	BodyText:        HSL{0, 0, .2},
 	Separator:       HSL{0, 0, .86},
 	CardColor:       HSL{0, 0, 1},
-
-	Shadow: HSL{0, 0, 0.36},
 }
 
 var solarizedDarkStyle = styleSheet{
@@ -538,8 +513,6 @@ var solarizedDarkStyle = styleSheet{
 	BodyColor:       HSL{192, .81, .14}, // hsl(192, 81%, 14%)
 	BodyText:        HSL{180, .07, .60}, // hsl(180, 7%, 60%)
 	CardColor:       HSL{192, .81, .16},
-
-	Shadow: HSL{0, 0, 0},
 }
 
 var solarizedLightStyle = styleSheet{
@@ -557,6 +530,4 @@ var solarizedLightStyle = styleSheet{
 	BodyText:        HSL{194, .14, .40}, // hsl(194, 14%, 40%)
 	Separator:       HSL{46, .42, .88},
 	CardColor:       HSL{44, .87, .92},
-
-	Shadow: HSL{0, 0, 0.36},
 }

webcontroller/style_colors.go

@@ -99,6 +99,12 @@ func (hsl HSL) Add(hue int, saturation float64, lightness float64) HSL {
 	return new
 }
 
+func (hsl HSL) Darken(percent float64) HSL {
+	hsl.Lightness = hsl.Lightness * percent
+	hsl.Saturation = hsl.Saturation * percent
+	return hsl
+}
+
 func (hsl HSL) WithAlpha(alpha float64) HSLA {
 	return HSLA{hsl.Hue, hsl.Saturation, hsl.Lightness, alpha}
 }