Add a little bit of depth

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
-		is not shared yet it will be made shared so it can be publicly
-		downloaded.
+		directory. The image will be picked from your filesystem. The image will
+		get a shared file link. You can move and rename the file like normal,
+		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>
-			<label for="file_name">Name:</label>
-			<input form="file_edit_form" bind:value={file_name} id="file_name" type="text" class="form_input"/>
-			<span class="header">Delete</span>
+			<h2>File settings</h2>
+			{#if is_root_dir}
+				<div class="highlight_yellow">
+					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(() => {
-	fs_navigator.open_node(window.initial_node, false)
-})
+onMount(() => 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
-	}
-	if (document.activeElement.type && document.activeElement.type === "text") {
+	} else 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 => {
-	loading = e.detail
-}
+const loading_evt = e => 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 => {
-	custom_css = branding_from_path(path)
-}
+const update_css = path => document.documentElement.style = 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 => {
-			custom_css = branding_from_node(e.detail)
-		}}
+		on:style_change={e => document.documentElement.style = 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);