Put modal in flexbox to stop text blurring from css transformations

res/static/style/layout.css

@@ -571,16 +571,12 @@ button>svg,
 
 .tab_bar>button,
 .tab_bar>.button {
-	margin: 10px 0 0 10px;
+	margin: .5em .4em 0 .4em;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
 	min-width: 5em;
 }
 
-.tab_bar>*:last-child {
-	margin-right: 10px;
-}
-
 /* Dropdown list of the select tag */
 option {
 	background: var(--input_background);

svelte/src/file_viewer/FileViewer.svelte

@@ -597,7 +597,7 @@ const keyboard_event = evt => {
 		<CustomBanner src={custom_footer} link={custom_footer_link}></CustomBanner>
 	{/if}
 
-	<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1200px">
+	<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1000px">
 		<DetailsWindow file={file}></DetailsWindow>
 	</Modal>
 
@@ -609,7 +609,7 @@ const keyboard_event = evt => {
 		<EditWindow file={file} list={list} on:reload={reload}></EditWindow>
 	</Modal>
 
-	<Modal bind:this={embed_window} on:is_visible={e => {embed_visible = e.detail}} title="Embed file" width="850px">
+	<Modal bind:this={embed_window} on:is_visible={e => {embed_visible = e.detail}} title="Embed file" width="820px">
 		<EmbedWindow file={file} list={list}></EmbedWindow>
 	</Modal>
 

svelte/src/file_viewer/Sharebar.svelte

@@ -71,14 +71,15 @@ const share_tumblr = () => {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	background: var(--shaded_background);
-	border-radius: 16px;
+	border-top-left-radius: 16px;
+	border-bottom-left-radius: 16px;
 	text-align: center;
 	overflow: hidden;
 	opacity: 0;
 	transition: left 0.4s, opacity 0.4s;
 }
 .visible {
-	left: 8em;
+	left: calc(8em + 2px);
 	opacity: 1;
 }
 .button_full_width {

svelte/src/home_page/FeatureTable.svelte

@@ -15,7 +15,7 @@ onMount(() => {
 	<div>
 		<div></div>
 		<div class="feat_normal round_tl">Free</div>
-		<div class="feat_pro feat_highlight round_tr">Pro</div>
+		<div class="feat_pro round_tr">Pro</div>
 	</div>
 	<div>
 		<div class="feat_label">Size limit per file</div>
@@ -122,7 +122,7 @@ onMount(() => {
 	<div>
 		<div></div>
 		<div class="feat_normal round_bl">Free</div>
-		<div class="feat_pro feat_highlight round_br">
+		<div class="feat_pro round_br">
 			{#if window.user.subscription.id === "patreon_1"}
 				You have this plan<br/>
 				Thank you for supporting pixeldrain!
@@ -254,7 +254,7 @@ onMount(() => {
 }
 .feat_table > div > div {
 	flex: 1 1 0;
-	margin: 0.25em;
+	margin: 0.2em;
 	padding: 0.5em;
 	text-align: center;
 	word-wrap: break-word;
@@ -263,21 +263,17 @@ onMount(() => {
 .feat_table > div > .feat_label {
 	border-top-left-radius: 0.5em;
 	border-bottom-left-radius: 0.5em;
-	border: 2px solid var(--separator);
+	border: 1px solid var(--separator);
 }
 .feat_table > div > .feat_normal {
 	background-color: var(--card_color);
+	border: 1px solid var(--separator);
 }
 .feat_table > div > .feat_pro {
 	background-color: var(--card_color);
-	box-shadow: 1px 1px 2px -1px var(--shadow_color);
+	border: 1px solid var(--highlight_color);
-}
-.feat_table > div > .feat_highlight {
-	border: 1px solid var(--link_color)
 }
 .text_highlight {
-	color: var(--link_color);
-	font-size: 1.1em;
 	font-weight: bold;
 }
 

svelte/src/home_page/OtherPlans.svelte

@@ -126,7 +126,7 @@
 }
 .feat_table > div > div {
 	flex: 1 1 0;
-	margin: 0.25em;
+	margin: 0.2em;
 	padding: 0.5em;
 	text-align: center;
 	word-wrap: break-word;
@@ -134,11 +134,9 @@
 }
 .feat_table > div > .feat_pro {
 	background-color: var(--card_color);
-	box-shadow: 1px 1px 2px -1px var(--shadow_color);
+	border: 1px solid var(--highlight_color);
 }
 .text_highlight {
-	color: var(--link_color);
-	font-size: 1.1em;
 	font-weight: bold;
 }
 .feat_table > div > .cell_background {
@@ -151,7 +149,7 @@
 	text-align: left;
 	font-size: 1.2em;
 	color: #ffffff;
-	text-shadow: 1px 1px 3px #000000;
+	text-shadow: 1px 1px 2px #000000;
 }
 
 .feat_table > div > div.round_tr { border-top-right-radius:    0.5em; }

svelte/src/user_home/PageBranding.svelte

@@ -133,7 +133,7 @@ onMount(() => {
 	<p>
 		Will be shown above the file. Maximum height is 90px. Will be shrunk if
 		larger. You can also add a link to open when the visitor clicks the
-		image. The link need to start with 'https://'.
+		image. The link needs to start with 'https://'.
 	</p>
 	<button on:click={() => {select_file("header")}}>
 		<i class="icon">add_photo_alternate</i>

svelte/src/util/Modal.svelte

@@ -48,6 +48,7 @@ const keydown = e => {
 
 {#if visible}
 <div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
+	<div class="top_padding"></div>
 	<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
 		<div class="header">
 			<slot name="title">
@@ -61,31 +62,37 @@ const keydown = e => {
 			<slot></slot>
 		</div>
 	</div>
+	<div class="bottom_padding"></div>
 </div>
 {/if}
 
 <style>
 .background {
 	position: fixed;
-	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
 	background-color: rgba(0, 0, 0, 0.6);
 }
+/* The modal looks weird when it's in the dead center of the page, so we use
+these padding divs to move it 25% up */
+.top_padding { flex: 1 1 25%; }
+.bottom_padding { flex: 1 1 75%; }
+
 .window {
-	position: absolute;
+	position: relative;
 	z-index: inherit;
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: column;
 	background: var(--body_color);
 	max-height: 100%;
 	max-width: 100%;
-	margin: 0 auto;
-	top: 20%;
-	left: 50%;
-	transform: translate(-50%, -20%);
 	padding: 0;
 	border-radius: 20px 20px 12px 12px;
 	overflow: hidden;