Gradients

svelte/src/file_viewer/FileViewer.svelte

@@ -642,7 +642,7 @@ const keyboard_event = evt => {
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 }
 
 /* Headerbar (row 1) */
@@ -731,7 +731,6 @@ const keyboard_event = evt => {
 	padding: 0;
 	text-align: left;
 	transition: left 0.5s, right 0.5s;
-	background-color: var(--layer_2_color);
 	z-index: 1;
 }
 .toolbar.toolbar_visible { left: 0; }

svelte/src/file_viewer/Sharebar.svelte

@@ -75,9 +75,13 @@ const share_tumblr = () => {
 	border-radius: 16px;
 	text-align: center;
 	overflow: hidden;
-	transition: left 0.5s;
+	opacity: 0;
+	transition: left 0.4s, opacity 0.4s;
+}
+.visible {
+	left: 8em;
+	opacity: 1;
 }
-.visible { left: 8em; }
 .button_full_width {
 	width: calc(100% - 6px);
 }

svelte/src/file_viewer/viewers/Text.svelte

@@ -103,7 +103,7 @@ const code = async file => {
 
 <style>
 .container {
-	background: var(--layer_3_color);
+	background: var(--body_background);
 	position: relative;
 	text-align: left;
 	height: 100%;

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -89,7 +89,8 @@ const node_icon = node => {
 	text-decoration: none;
 }
 .selected {
-	background-color: var(--highlight_color_dark);
+	background: var(--highlight_background);
+	color: var(--highlight_text_color);
 }
 .icon_container {
 	width: 100%;

svelte/src/home_page/UploadProgressBar.svelte

@@ -293,7 +293,7 @@ export const start = () => {
 	height: 2px;
 }
 .progress_bar {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 0.25s, opacity 3s;

svelte/src/home_page/UploadWidget.svelte

@@ -577,7 +577,7 @@ const keydown = (e) => {
 	line-height: 1em;
 	text-align: center;
 	display: inline-block;
-	background: var(--highlight_color);
+	background: var(--highlight_background);
 	color: var(--highlight_text_color);
 	border-radius: 30px;
 	padding: 0.15em;
@@ -609,7 +609,7 @@ const keydown = (e) => {
 	height: 3px;
 }
 .progress_bar_inner {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 0.5s;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -300,12 +300,12 @@ const node_click = (index) => {
 <svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
 
 <div id="directory_element">
+	<div bind:this={directorySorters} id="sorters" class="directory_sorters">
+		{#each tableColumns as col}
+			<div on:click={sortBy(col.field)} style="min-width: {col.width}">{col.name}</div>
+		{/each}
+	</div>
 	<div bind:this={directoryArea} on:scroll={onScroll} id="directory_area" class="directory_area">
-		<div bind:this={directorySorters} id="sorters" class="directory_sorters">
-			{#each tableColumns as col}
-				<div on:click={sortBy(col.field)} style="min-width: {col.width}">{col.name}</div>
-			{/each}
-		</div>
 		<div bind:this={nodeContainer} id="node_container" class="directory_node_container">
 			{#each allFiles as file, index}
 				{#if file.visible && !file.filtered}
@@ -345,17 +345,17 @@ const node_click = (index) => {
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
+	text-align: left;
 }
 
 #sorters {
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
-	position: sticky;
 	overflow: hidden;
-	top: 0;
-	z-index: 1;
-	background-color: var(--layer_2_color);
+	background: var(--body_background);
 	min-width: 850px;
+	border-top-left-radius: 16px;
 }
 #sorters > div {
 	display: inline-block;
@@ -381,9 +381,8 @@ const node_click = (index) => {
 	margin: 0;
 	padding: 0;
 	overflow-x: auto;
-	text-align: left;
-	background-color: var(--layer_2_color);
-	border-radius: 16px;
+	background: var(--body_background);
+	border-bottom-left-radius: 16px;
 }
 #node_container {
 	display: block;
@@ -392,8 +391,6 @@ const node_click = (index) => {
 
 #footer {
 	flex-shrink: 0;
-	text-align: left;
-	background-color: var(--layer_1_color);
 	color: var(--layer_1_text_color);
 	padding: 4px;
 }
@@ -419,7 +416,7 @@ const node_click = (index) => {
 	text-decoration: none;
 }
 .node_selected {
-	background-color: var(--highlight_color_dark);
+	background: var(--highlight_background);
 	color: var(--highlight_text_color);
 }
 .node > div {

svelte/src/user_file_manager/FileManager.svelte

@@ -328,8 +328,9 @@ onMount(() => {
 
 <style>
 :global(#page_body) {
-	height: 100%;
+	height: 100vh;
 	padding: 0;
+	background: none;
 }
 
 /* Override the menu button so it doesn't overlap the file manager when the menu
@@ -345,7 +346,6 @@ is collapsed */
 	height:           100%;
 	display:          flex;
 	flex-direction:   column;
-	background-color: var(--layer_1_color);
 }
 .nav_bar {
 	flex-shrink: 0;