Make menu darker again

res/include/script/dependencies/Modal.js

@@ -23,7 +23,7 @@ function Modal(parent, closeCallback, title, width, height) {
 	this.window.addEventListener("click", e => { e.stopPropagation() })
 
 	this.header = document.createElement("div")
-	this.header.classList = "modal_header highlight_1"
+	this.header.classList = "modal_header"
 
 	this.titleDiv = document.createElement("div")
 	this.titleDiv.classList = "modal_title"

res/include/style/layout.css

@@ -53,7 +53,7 @@ body{
 	font-size: 17px;
 	line-height: 1.8em;
 	color: var(--text_color);
-	background-color: var(--layer_2_color);
+	background-color: var(--layer_1_color);
 	padding: 0;
 }
 .checkers {
@@ -66,7 +66,7 @@ body{
 .inset {
 	padding-top: 70px;
 	box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
-	border-radius: 16px;
+	border-radius: 12px;
 	text-align: center;
 	overflow: hidden;
 }
@@ -106,7 +106,6 @@ body{
 	height: 100%;
 	left: 0;
 	float: left;
-	background-color: var(--layer_2_color);
 	padding: 20px 10px 10px 0;
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -124,6 +123,9 @@ body{
 	overflow-y: auto;
 	overflow-x: hidden;
 	background-color: var(--layer_2_color);
+	border-top-left-radius: 12px;
+	border-bottom-left-radius: 12px;
+	padding: 8px;
 	transition: left 0.5s;
 }
 @media (max-width: 1000px) {
@@ -133,6 +135,7 @@ body{
 	.page_body {
 		left: 0;
 		width: 100%;
+		padding: 4px;
 	}
 }
 .limit_width {
@@ -240,7 +243,7 @@ body{
 
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1em;
-	margin: 0.5em 10px;
+	margin: 0.5em 0;
 	font-weight: normal;
 	font-weight: lighter;
 	font-family: sans-serif;
@@ -270,9 +273,8 @@ h5 {
 h6 {
 	font-size: 1em;
 }
-
+.indent {
-p, .indent {
+	margin: 8px;
-	margin: 10px;
 }
 
 hr {
@@ -484,7 +486,7 @@ select:disabled , select.disabled {
 	white-space: nowrap;
 	text-align: center;
 	background-color: var(--layer_1_color);
-	box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
+	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
 }
 .tab_bar > button,
 .tab_bar > .button {

res/include/style/modal.css

@@ -32,6 +32,7 @@
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
+	background: var(--layer_1_color);
 	padding: 1px;
 }
 

svelte/src/file_viewer/DetailsWindow.svelte

@@ -88,7 +88,7 @@ onMount(() => {
 })
 </script>
 
-<div>
+<div class="indent">
 	<table>
 		<tr>
 			<td>Name</td>

svelte/src/file_viewer/EditWindow.svelte

@@ -138,7 +138,7 @@ let delete_list = async e => {
 
 </script>
 
-<div>
+<div class="indent">
 	{#if loading}
 		<div class="spinner_container">
 			<Spinner></Spinner>
@@ -153,7 +153,7 @@ let delete_list = async e => {
 	{#if list.can_edit}
 		<h3>Edit album</h3>
 		<h4>Rename</h4>
-		<form on:submit={rename_list} class="indent" style="display: flex;">
+		<form on:submit={rename_list} style="display: flex;">
 			<input bind:value={list_name} type="text" style="flex: 1 1 auto"/>
 			<button type="submit" style="flex: 0 0 auto">
 				<i class="icon">save</i> Save
@@ -164,17 +164,15 @@ let delete_list = async e => {
 			When you delete an album the files in the album will not be deleted,
 			only the album itself.
 		</p>
-		<div class="indent">
+		<button on:click={delete_list} class="button_red">
-			<button on:click={delete_list} class="button_red">
+			<i class="icon small">delete</i> Delete album
-				<i class="icon small">delete</i> Delete album
+		</button>
-			</button>
-		</div>
 	{/if}
 
 	{#if file.can_edit}
 		<h3>Edit file</h3>
 		<h4>Rename</h4>
-		<form on:submit={rename_file} class="indent" style="display: flex;">
+		<form on:submit={rename_file} style="display: flex;">
 			<input bind:value={file_name} type="text" style="flex: 1 1 auto"/>
 			<button type="submit" style="flex: 0 0 auto">
 				<i class="icon">save</i> Save
@@ -187,11 +185,9 @@ let delete_list = async e => {
 			stop working. The file will also disappear from any
 			lists it's contained in.
 		</p>
-		<div class="indent">
+		<button on:click={delete_file} class="button_red">
-			<button on:click={delete_file} class="button_red">
+			<i class="icon small">delete</i> Delete file
-				<i class="icon small">delete</i> Delete file
+		</button>
-			</button>
-		</div>
 	{/if}
 </div>
 

svelte/src/file_viewer/EmbedWindow.svelte

@@ -101,24 +101,27 @@ const example = () => {
 </script>
 
 <div class="container">
-	<p>
+	<div class="indent">
-		If you have a website you can embed pixeldrain files in your own
+		<p>
-		webpages here.
+			If you have a website you can embed pixeldrain files in your own
-	</p>
+			webpages here.
-	<p>
+		</p>
-		The IFrame embed gives you a frame with a slightly more minimalistic
+		<p>
-		file viewer in it. The embedded file viewer has a fullscreen button and
+			The IFrame embed gives you a frame with a slightly more minimalistic
-		the toolbar is collapsed by default. If you do not have a pixeldrain Pro
+			file viewer in it. The embedded file viewer has a fullscreen button
-		account the frame will also have advertisements in it.
+			and the toolbar is collapsed by default. If you do not have a
-	</p>
+			pixeldrain Pro account the frame will also have advertisements in
-	<p>
+			it.
-		The hotlink embed option only works for single files uploaded with a Pro
+		</p>
-		account. You can use this to directly embed a video player, audio
+		<p>
-		player, photo element or a download button in your site. Make sure you
+			The hotlink embed option only works for single files uploaded with a
-		have bandwidth sharing enabled on your
+			Pro account. You can use this to directly embed a video player,
-		<a href="/user/subscription">subscription page</a> or the embed will not
+			audio player, photo element or a download button in your site. Make
-		work.
+			sure you have bandwidth sharing enabled on your
-	</p>
+			<a href="/user/subscription">subscription page</a> or the embed will
+			not work.
+		</p>
+	</div>
 	<div class="tab_bar">
 		<button on:click={embed_iframe} class:button_highlight={tab === "iframe"}>
 			<i class="icon">code</i>
@@ -132,70 +135,72 @@ const example = () => {
 		{/if}
 	</div>
 
-	{#if tab === "iframe"}
+	<div class="indent">
-		<h3>Appearance</h3>
+		{#if tab === "iframe"}
+			<h3>Appearance</h3>
+			<p>
+				You can change the pixeldrain theme for your embedded file. Try the
+				available themes <a href="/appearance">here</a>.
+			</p>
+			<div class="center">
+				<button class:button_highlight={style===""} on:click={() => {set_style("")}}>
+					Default
+				</button>
+				<button class:button_highlight={style==="classic"} on:click={() => {set_style("classic")}}>
+					Classic
+				</button>
+				<button class:button_highlight={style==="solarized_dark"} on:click={() => {set_style("solarized_dark")}}>
+					Solarized
+				</button>
+				<button class:button_highlight={style==="maroon"} on:click={() => {set_style("maroon")}}>
+					Maroon
+				</button>
+				<button class:button_highlight={style==="hacker"} on:click={() => {set_style("hacker")}}>
+					Hacker
+				</button>
+				<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
+					Canta
+				</button>
+				<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
+					Arc
+				</button>
+				<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
+					Deep sea
+				</button>
+			</div>
+		{:else}
+			<h3>Direct link</h3>
+			<p>
+				You can directly download the file from this link without using the
+				file viewer:
+				<br/>
+				{domain_url()}{file.get_href}
+			</p>
+		{/if}
+
+		<h3>Code</h3>
 		<p>
-			You can change the pixeldrain theme for your embedded file. Try the
+			Put this code in your website to embed the file.
-			available themes <a href="/appearance">here</a>.
 		</p>
 		<div class="center">
-			<button class:button_highlight={style===""} on:click={() => {set_style("")}}>
+			<textarea bind:value={embed_html} style="width: 99%; height: 4em;"></textarea>
-				Default
+			<br/>
+			<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
+				<i class="icon">content_copy</i>
+				{#if copy_status === "success"}
+					Copied!
+				{:else if copy_status === "error"}
+					Error!
+				{:else}
+					Copy HTML
+				{/if}
 			</button>
-			<button class:button_highlight={style==="classic"} on:click={() => {set_style("classic")}}>
+			<button on:click={example}>
-				Classic
+				<i class="icon">visibility</i> Show example
-			</button>
-			<button class:button_highlight={style==="solarized_dark"} on:click={() => {set_style("solarized_dark")}}>
-				Solarized
-			</button>
-			<button class:button_highlight={style==="maroon"} on:click={() => {set_style("maroon")}}>
-				Maroon
-			</button>
-			<button class:button_highlight={style==="hacker"} on:click={() => {set_style("hacker")}}>
-				Hacker
-			</button>
-			<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
-				Canta
-			</button>
-			<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
-				Arc
-			</button>
-			<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
-				Deep sea
 			</button>
 		</div>
-	{:else}
+		<h3>Example</h3>
-		<h3>Direct link</h3>
-		<p>
-			You can directly download the file from this link without using the
-			file viewer:
-			<br/>
-			{domain_url()}{file.get_href}
-		</p>
-	{/if}
-
-	<h3>Code</h3>
-	<p>
-		Put this code in your website to embed the file.
-	</p>
-	<div class="center">
-		<textarea bind:value={embed_html} style="width: 96%; height: 4em;"></textarea>
-		<br/>
-		<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
-			<i class="icon">content_copy</i>
-			{#if copy_status === "success"}
-				Copied!
-			{:else if copy_status === "error"}
-				Error!
-			{:else}
-				Copy HTML
-			{/if}
-		</button>
-		<button on:click={example}>
-			<i class="icon">visibility</i> Show example
-		</button>
 	</div>
-	<h3>Example</h3>
 	<div bind:this={preview_area} style="text-align: center;"></div>
 </div>
 

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -373,6 +373,8 @@ const node_click = (index) => {
 	padding: 0;
 	overflow-x: auto;
 	text-align: left;
+	background-color: var(--layer_2_color);
+	border-radius: 16px;
 }
 #node_container {
 	display: block;

svelte/src/user_file_manager/FileManager.svelte

@@ -256,16 +256,8 @@ onMount(() => {
 
 <svelte:window on:keydown={keydown} on:hashchange={hashChange} />
 
-<svetle:head>
-	<style>
-		#footer {
-			border-top-left-radius: 16px;
-		}
-	</style>
-</svetle:head>
-
 <div id="file_manager" class="file_manager">
-	<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
+	<div id="nav_bar" class="nav_bar">
 		<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
 		<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
 			<i class="icon">select_all</i> Select
@@ -349,18 +341,14 @@ is collapsed */
 	height:           100%;
 	display:          flex;
 	flex-direction:   column;
+	background-color: var(--layer_1_color);
 }
 .nav_bar {
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
-	border-bottom-left-radius: 16px;
-	background-color: var(--layer_1_color);
 	padding: 4px;
 }
-.nav_bar.expanded {
-	border-bottom-left-radius: 0;
-}
 .nav_bar > button {
 	flex-shrink: 0;
 }

svelte/src/user_home/Router.svelte

@@ -76,6 +76,7 @@ onMount(() => {
 		{/if}
 	</div>
 </div>
+<br/>
 
 {#if page === "home"}
 	<Home/>

svelte/src/util/Modal.svelte

@@ -48,7 +48,7 @@ const keydown = e => {
 {#if visible}
 <div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
 	<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
-		<div class="header highlight_1">
+		<div class="header">
 			<slot name="title">
 				<div class="title">{title}</div>
 				<button class="button button_red round" on:click={hide}>
@@ -97,6 +97,7 @@ const keydown = e => {
 	display: flex;
 	flex-direction: row;
 	padding: 1px;
+	background-color: var(--layer_1_color);
 }
 .title {
 	flex-grow: 1;