Improve file viewer style consistnecy

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -1,8 +1,8 @@
 <script>
 import { onMount } from "svelte"
-    import Mastodon from "../icons/Mastodon.svelte";
+import Mastodon from "../icons/Mastodon.svelte";
-    import Reddit from "../icons/Reddit.svelte";
+import Reddit from "../icons/Reddit.svelte";
-    import Twitter from "../icons/Twitter.svelte";
+import Twitter from "../icons/Twitter.svelte";
 import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
@@ -149,7 +149,7 @@ head.valueimpression_loaded.subscribe(v => {
 		<img bind:this={banner} usemap="#socials_map" class="banner" src="/res/img/advertising/pixeldrain_socials.webp" style="display: inline-block; width: 728px; height: 90px;" alt="Pixeldrain social media"/>
 
 	{:else if ad_type === "patreon_support"}
-		<div class="banner highlight_green" style="font-size: 1.1em; border-radius: 0;">
+		<div class="banner support_banner">
 			<span style="display: block; margin-bottom: 2px;">
 				No ads today. Pixeldrain is currently funded by our subscribers!
 			</span>
@@ -193,4 +193,9 @@ head.valueimpression_loaded.subscribe(v => {
 	margin: auto;
 	transform-origin: 0 0;
 }
+.support_banner {
+	font-size: 1.2em;
+	text-align: center;
+	padding: 2px;
+}
 </style>

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -10,9 +10,9 @@ let file = {
 }
 </script>
 
-<br/>
+<h1>{file.name}</h1>
-<TextBlock width="750px">
+<TextBlock>
-	<h1>Unavailable for legal reasons</h1>
+	<h2>Unavailable for legal reasons</h2>
 	<p>
 		This file has been removed for violating pixeldrain's
 		<a href="/about#content-policy">content policy</a>. Type of abuse:

svelte/src/file_viewer/viewers/BandwidthUsage.svelte

@@ -12,7 +12,7 @@ $: transfer_left = download_limits.transfer_limit = download_limits.transfer_lim
 </script>
 
 {#if $download_limits.loaded}
-	<TextBlock width="700px" center={true}>
+	<TextBlock center={true}>
 		{#if file.size > transfer_left}
 			<div class="highlight_yellow">
 				This file is too large to download completely with your current

svelte/src/file_viewer/viewers/File.svelte

@@ -1,7 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
-import TextBlock from "./TextBlock.svelte";
+import IconBlock from "./IconBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -17,8 +17,7 @@ let file = {
 </script>
 
 <h1>{file.name}</h1>
-<img src={file.icon_href} alt="File icon" class="icon">
+<IconBlock icon_href={file.icon_href}>
-<TextBlock width="600px">
 	Type: {file.mime_type}<br/>
 	No preview is available for this file type. Download to view it locally.
 	<br/>
@@ -26,9 +25,8 @@ let file = {
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
-</TextBlock>
+</IconBlock>
-
+<br/>
-<br/><br/>
 {#if file.show_ads}
 	<BandwidthUsage file={file} on:reload/>
 {/if}

svelte/src/file_viewer/viewers/IconBlock.svelte

@@ -0,0 +1,36 @@
+<script>
+export let icon_href = ""
+export let width = "750px"
+</script>
+
+<div class="block" style="width: {width}; max-width: 100%">
+	<img src={icon_href} alt="File icon" class="icon">
+	<div class="description">
+		<slot></slot>
+	</div>
+</div>
+
+<style>
+.block {
+	display: inline-flex;
+	flex-direction: row;
+}
+.icon {
+	flex: 0 0 auto;
+	margin-right: 8px;
+	border-radius: 8px;
+	/* Prevent icon from being stretched if text content is too large */
+	object-fit: contain;
+}
+.description {
+	flex: 1 1 auto;
+	display: inline-block;
+	text-align: initial;
+	padding-left: 8px;
+	vertical-align: middle;
+
+	background-color: var(--shaded_background);
+	border-radius: 8px;
+	padding: 8px;
+}
+</style>

svelte/src/file_viewer/viewers/SpeedLimit.svelte

@@ -15,7 +15,7 @@ export let file = {
 </script>
 
 <br/>
-<TextBlock width="800px">
+<TextBlock>
 	<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
 	<p>
 		Pixeldrain's free tier is supported by advertisements. There's only so

svelte/src/file_viewer/viewers/TextBlock.svelte

@@ -1,9 +1,9 @@
 <script>
-export let width = "800px"
+export let width = "750px"
 export let center = false
 </script>
 
-<div class="block" class:center style="max-width: {width};">
+<div class="block" class:center style="width: {width};">
 	<slot></slot>
 </div>
 
@@ -13,6 +13,7 @@ export let center = false
 	text-align: initial;
 	padding-left: 8px;
 	vertical-align: middle;
+	max-width: 100%;
 
 	background-color: var(--shaded_background);
 	border-radius: 8px;

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -3,6 +3,7 @@ import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
 import { copy_text } from "../../util/Util.svelte";
+import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 
@@ -79,8 +80,7 @@ const copy_magnet = () => {
 </script>
 
 <h1>{file.name}</h1>
-<img src={file.icon_href} alt="File icon" class="icon">
+<IconBlock icon_href={file.icon_href}>
-<TextBlock width="650px">
 	{#if status === "finished"}
 		Created by: {torrent.created_by}<br/>
 		Comment: {torrent.comment}<br/>
@@ -120,12 +120,10 @@ const copy_magnet = () => {
 		<i class="icon">download</i>
 		<span>Download torrent file</span>
 	</button>
-</TextBlock>
+</IconBlock>
-
+<br/>
 {#if status === "finished"}
-	<br/>
+	<TextBlock>
-	<br/>
-	<TextBlock width="1000px">
 		<h2>Files in this torrent</h2>
 		<TorrentItem item={torrent.files} />
 	</TextBlock>

svelte/src/file_viewer/viewers/Video.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
-import TextBlock from "./TextBlock.svelte";
+import IconBlock from "./IconBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export let is_list = false
@@ -163,8 +163,7 @@ const fullscreen = () => {
 	{/if}
 {:else}
 	<h1>{file.name}</h1>
-	<img src={file.icon_href} class="video_icon" alt="Video icon">
+	<IconBlock icon_href={file.icon_href}>
-	<TextBlock width="600px">
 		The online video player on pixeldrain is only available for registered
 		users, or when the uploader of the video has a Pro account. You can
 		still download the video and watch it locally on your computer without
@@ -179,9 +178,8 @@ const fullscreen = () => {
 		<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button" rel="noreferrer">
 			<i class="icon">bolt</i> Get Pixeldrain Pro
 		</a>
-	</TextBlock>
+	</IconBlock>
-
+	<br/>
-	<br/><br/>
 	{#if file.show_ads}
 		<BandwidthUsage file={file} on:reload/>
 	{/if}
@@ -226,11 +224,6 @@ h1 {
 	max-width: 100%;
 	max-height: 100%;
 }
-.video_icon {
-	display: inline-block;
-	vertical-align: middle;
-	border-radius: 8px;
-}
 @media(max-height: 500px) {
 	.container {
 		flex-direction: row;

svelte/src/file_viewer/viewers/Zip.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
+import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ZipItem from "./ZipItem.svelte";
 
@@ -20,6 +21,7 @@ let zip = {
 	children: null,
 }
 let uncomp_size = 0
+let comp_ratio = 0
 
 export const set_file = async f => {
 	file = f
@@ -37,6 +39,7 @@ export const set_file = async f => {
 		zip = await resp.json()
 
 		uncomp_size = recursive_size(zip)
+		comp_ratio = (uncomp_size / file.size)
 	} catch (err) {
 		console.error(err)
 	} finally {
@@ -64,34 +67,30 @@ const recursive_size = (file) => {
 
 <h1>{file.name}</h1>
 
-<img src={file.icon_href} alt="File icon" class="icon">
+<IconBlock icon_href={file.icon_href}>
-<TextBlock width="600px">
 	Compressed size: {formatDataVolume(file.size, 3)}<br/>
-	Uncompressed size: {formatDataVolume(uncomp_size, 3)}<br/>
+	Uncompressed size: {formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
 	Uploaded on: {formatDate(file.date_upload, true, true, true)}
 	<br/>
 	<button class="button_highlight" on:click={() => {dispatch("download")}}>
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
-</TextBlock>
+</IconBlock>
-<br/><br/>
+<br/>
-
+{#if status === "finished"}
-{#if status === "parse_failed"}
+	<TextBlock>
-	<TextBlock width="650px">
+		<h2>Files in this zip archive</h2>
+		<ZipItem item={zip} />
+	</TextBlock>
+{:else if status === "parse_failed"}
+	<TextBlock>
 		<p>
 			Zip archive could not be parsed. It may be corrupted.
 		</p>
 	</TextBlock>
 {/if}
 
-{#if status === "finished"}
-	<TextBlock width="1000px">
-		<h2>Files in this zip archive</h2>
-		<ZipItem item={zip} />
-	</TextBlock>
-{/if}
-
 <style>
 h1 {
 	text-shadow: 1px 1px 3px var(--shadow_color);

webcontroller/style.go

@@ -260,7 +260,7 @@ func (s styleSheet) String() string {
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.5).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.6).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),