Make button margins consistent, and some other fixes

svelte/src/filesystem/Toolbar.svelte

@@ -75,8 +75,10 @@ let expand = e => {
 </script>
 
 <div class="toolbar" class:expanded>
+	<div class="separator hidden_horizontal" style="margin-top: 6px;"></div>
+
 	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
-		<button class="button_expand" on:click={expand}>
+		<button class="button_expand hidden_vertical" on:click={expand}>
 			{#if expanded}
 				<i class="icon">expand_more</i>
 			{:else}
@@ -108,6 +110,8 @@ let expand = e => {
 			</button>
 		{/if}
 
+		<div class="separator hidden_horizontal"></div>
+
 		{#if state.base.type === "file"}
 			<button on:click={() => dispatch("download")}>
 				<i class="icon">save</i>
@@ -142,6 +146,8 @@ let expand = e => {
 			<span>Fullscreen</span>
 		</button>
 
+		<div class="separator hidden_horizontal"></div>
+
 		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
 			<i class="icon">help</i>
 			<span>Deta<u>i</u>ls</span>
@@ -169,6 +175,7 @@ let expand = e => {
 }
 .separator {
 	height: 2px;
+	margin: 4px 0;
 	width: 100%;
 	background-color: var(--separator);
 }
@@ -187,10 +194,16 @@ let expand = e => {
 	flex-direction: column;
 }
 .button_expand {
-	display: none;
 	line-height: 1em;
 }
 
+.hidden_vertical {
+	display: none;
+}
+.hidden_horizontal {
+	display: block;
+}
+
 /* This max-width needs to be synced with the .viewer_area max-width in
 Toolbar.svelte and the .label max-width in FileStats.svelte */
 @media (max-width: 800px) {
@@ -200,13 +213,21 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
 	}
 	.toolbar.expanded {
 		overflow-y: scroll;
-		max-height: 25vh;
+		max-height: 30vh;
 	}
 	.stats_container {
 		flex-direction: row;
 	}
-	.button_expand {
-		display: inline-block;
+	.separator {
+		margin: 2px 0;
+	}
+
+
+	.hidden_vertical {
+		display: block;
+	}
+	.hidden_horizontal {
+		display: none;
 	}
 }
 

svelte/src/filesystem/edit_window/Branding.js

@@ -37,12 +37,12 @@ const add_styles = (style, properties) => {
 	if (properties.brand_input_color) {
 		style.input_background = properties.brand_input_color
 		style.input_hover_background = properties.brand_input_color
-		style.input_text = add_contrast(properties.brand_input_color, 70)
+		style.input_text = add_contrast(properties.brand_input_color, 75)
 	}
 	if (properties.brand_highlight_color) {
 		style.highlight_color = properties.brand_highlight_color
 		style.highlight_background = properties.brand_highlight_color
-		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 70)
+		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
 
 		// If we have a body colour to compare it to we use the highlight colour
 		// to generate the link colour
@@ -52,20 +52,20 @@ const add_styles = (style, properties) => {
 	}
 	if (properties.brand_danger_color) {
 		style.danger_color = properties.brand_danger_color
-		style.danger_text_color = add_contrast(properties.brand_danger_color, 70)
+		style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
 	}
 	if (properties.brand_background_color) {
 		style.background_color = properties.brand_background_color
 		style.background = properties.brand_background_color
-		style.background_text_color = add_contrast(properties.brand_background_color, 70)
+		style.background_text_color = add_contrast(properties.brand_background_color, 75)
 		style.background_pattern_color = properties.brand_background_color
 	}
 	if (properties.brand_body_color) {
 		style.body_color = properties.brand_body_color
 		style.body_background = properties.brand_body_color
-		style.body_text_color = add_contrast(properties.brand_body_color, 70)
+		style.body_text_color = add_contrast(properties.brand_body_color, 75)
 		style.shaded_background = set_alpha(properties.brand_body_color, 0.8)
-		style.separator = add_contrast(properties.brand_body_color, 6)
+		style.separator = add_contrast(properties.brand_body_color, 7)
 		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
 	if (properties.brand_card_color) {

svelte/src/filesystem/viewers/CustomBanner.svelte

@@ -34,7 +34,6 @@ const update_links = (path) => {
 
 <style>
 .container {
-	margin: 6px 0;
 	text-align: center;
 }
 .link {