Update shaded background color

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -15,7 +15,7 @@ onMount(() => {
 		return
 	}
 
-	if (document.body.clientWidth < 700) {
+	if (document.body.clientWidth < 700 || document.body.clientHeight < 700) {
 		visible = false
 		dispatch("visibility", false)
 		return

svelte/src/file_viewer/FileViewer.svelte

@@ -644,7 +644,6 @@ const keyboard_event = evt => {
 	display: flex;
 	flex-direction: row;
 	text-align: left;
-	box-shadow: none;
 	padding: 4px;
 }
 .headerbar.embedded {

svelte/src/file_viewer/viewers/Audio.svelte

@@ -9,6 +9,7 @@ export let file = {
 	mime_type: "",
 	get_href: "",
 	show_ads: false,
+	download_speed_limit: 0,
 }
 
 $: loop = file.name.includes(".loop.")
@@ -90,7 +91,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 
 	<br/><br/>
 	{#if file.show_ads}
-		<BandwidthUsage/>
+		<BandwidthUsage file={file}/>
 	{/if}
 </div>
 

svelte/src/file_viewer/viewers/BandwidthUsage.svelte

@@ -4,6 +4,9 @@ import { formatDataVolume } from "../../util/Formatting.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ProgressBar from "../../util/ProgressBar.svelte";
 
+export let file = {
+	download_speed_limit: 0,
+}
 let limits = {
 	download_limit: 0,
 	download_limit_used: 0,
@@ -30,18 +33,19 @@ onMount(async () => {
 </script>
 
 {#if limits.transfer_limit_used > 0}
-	<TextBlock width="700px" center={true}>
+	<TextBlock width="800px" center={true}>
 		<p>
 			You have used {formatDataVolume(limits.transfer_limit_used, 3)} of
-			your daily {formatDataVolume(limits.transfer_limit, 3)} download
+			your daily {formatDataVolume(limits.transfer_limit, 3)} transfer
-			limit. When the limit is exceeded your download speed will be
+			limit. Your download speed is currently limited to
-			reduced.
+			{file.download_speed_limit/(1<<20)} MiB/s. When the transfer limit
+			is exceeded your download speed will be reduced.
 		</p>
 		<p>
 			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
 				Support Pixeldrain on Patreon
 			</a>
-			to disable the download limit.
+			to disable the transfer and speed limits
 		</p>
 
 		<ProgressBar total={limits.transfer_limit} used={limits.transfer_limit_used}></ProgressBar>

svelte/src/file_viewer/viewers/File.svelte

@@ -12,6 +12,7 @@ let file = {
 	mime_type: "",
 	icon_href: "",
 	show_ads: false,
+	download_speed_limit: 0,
 }
 </script>
 
@@ -29,7 +30,7 @@ let file = {
 
 <br/><br/>
 {#if file.show_ads}
-	<BandwidthUsage/>
+	<BandwidthUsage file={file}/>
 {/if}
 
 <style>

svelte/src/file_viewer/viewers/Video.svelte

@@ -13,6 +13,7 @@ let file = {
 	icon_href: "",
 	allow_video_player: true,
 	show_ads: false,
+	download_speed_limit: 0,
 }
 
 $: loop = file.name.includes(".loop.")
@@ -151,23 +152,26 @@ const fullscreen = () => {
 {:else}
 	<h1>{file.name}</h1>
 	<img src={file.icon_href} class="video_icon" alt="Video icon">
-	<TextBlock width="600px">
+	<TextBlock width="650px">
-		The online video player on pixeldrain is only available when the
+		The online video player on pixeldrain is only available for registered
-		uploader of the file is a Patreon supporter, or if you are a Patreon
+		users, or when the uploader of the video has a Pro account. You can
-		supporter. You can still download the video and watch it locally on your
+		still download the video and watch it locally on your computer without
-		computer.
+		an account.
 		<br/>
+		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" target="_blank" class="button button_highlight">
+			<i class="icon">bolt</i> Get Pixeldrain Pro
+		</a>
 		<button on:click={download}>
 			<i class="icon">download</i> Download
 		</button>
-		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
+		<a href="/register" class="button">
-			<i class="icon">bolt</i> Support Pixeldrain on Patreon
+			<i class="icon">how_to_reg</i> Sign up
 		</a>
 	</TextBlock>
 
 	<br/><br/>
 	{#if file.show_ads}
-		<BandwidthUsage/>
+		<BandwidthUsage file={file}/>
 	{/if}
 {/if}
 

svelte/src/filesystem/Filesystem.svelte

@@ -494,7 +494,7 @@ const share = () => {
 	vertical-align: middle;
 	transition: left 0.5s;
 	overflow: hidden;
-	box-shadow: inset 2px 2px 8px var(--shadow_color);
+	box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
 }
 
 /* Toolbar */

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -74,7 +74,7 @@ const node_icon = node => {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: 1px 1px 6px 0 var(--shadow_color);
+	box-shadow: 1px 1px 4px -1px var(--shadow_color);
 	background: var(--input_background);
 	text-align: center;
 	line-height: 1.2em;

svelte/src/home_page/FeatureTable.svelte

@@ -279,7 +279,7 @@ onMount(() => {
 .feat_table > div > .feat_label {
 	border-top-left-radius: 0.5em;
 	border-bottom-left-radius: 0.5em;
-	background: var(--shaded_background);
+	border: 2px solid var(--separator);
 }
 .feat_table > div > .feat_normal {
 	background-color: var(--card_color);

svelte/src/user_home/Subscription.svelte

@@ -288,14 +288,14 @@ onMount(load_tranfer_used)
 .feat_table > div > .feat_label {
 	border-top-left-radius: 0.5em;
 	border-bottom-left-radius: 0.5em;
-	background: var(--shaded_background);
+	border: 2px solid var(--separator);
 	font-size: 1.1em;
 }
 .feat_table > div > .feat_normal {
 	background: var(--card_color);
 }
 .feat_table > div > .feat_highlight {
-	border: 1px solid var(--highlight_color)
+	border: 2px solid var(--highlight_color)
 }
 
 .feat_table > div > div.round_tr { border-top-right-radius:    0.5em; }

webcontroller/style.go

@@ -81,7 +81,6 @@ type styleSheet struct {
 	BodyBackground    Color
 	BodyText          hsl
 	Separator         Color
-	Shaded            Color
 	CardColor         hsl
 	CardText          hsl
 
@@ -120,7 +119,6 @@ func (s styleSheet) withDefaults() styleSheet {
 	defaultColor(&s.BodyBackground, s.BodyColor)
 	defaultHSL(&s.BackgroundText, s.BodyText)
 	defaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
-	defaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
 
 	return s
 }
@@ -184,7 +182,7 @@ func (s styleSheet) String() string {
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.Shaded.CSS(),
+		s.BodyColor.WithAlpha(0.5).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),
@@ -393,7 +391,6 @@ var nordLightStyle = styleSheet{
 	ParallaxSlider:    hsl{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
 	BodyColor:         hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
 	BodyText:          hsl{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
-	Shaded:            RGBA{255, 255, 255, 0.4},
 	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
 	CardColor:         hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
 
@@ -448,7 +445,6 @@ var adwaitaLightStyle = styleSheet{
 	BackgroundColor: hsl{0, 0, .92},
 	BodyColor:       hsl{0, 0, .98},
 	BodyText:        hsl{0, 0, .2},
-	Shaded:          RGBA{0, 0, 0, 0.04},
 	CardColor:       hsl{0, 0, 1},
 
 	Shadow: hsl{0, 0, 0.36},
@@ -485,7 +481,6 @@ var solarizedLightStyle = styleSheet{
 	BodyColor:       hsl{44, .87, .94},  // hsl(44, 87%, 94%)
 	BodyText:        hsl{194, .14, .40}, // hsl(194, 14%, 40%)
 	Separator:       RGBA{0, 0, 0, 0.05},
-	Shaded:          RGBA{255, 255, 255, 0.2},
 	CardColor:       hsl{44, .87, .96},
 
 	Shadow: hsl{0, 0, 0.36},

webcontroller/style_colors.go

@@ -94,6 +94,22 @@ func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
 	return new
 }
 
+func (h hsl) WithAlpha(alpha float64) HSLA {
+	return HSLA{h, alpha}
+}
+
+type HSLA struct {
+	hsl
+	Alpha float64
+}
+
+func (hsla HSLA) CSS() string {
+	return fmt.Sprintf(
+		"hsla(%d, %.2f%%, %.2f%%, %.2f)",
+		hsla.Hue, hsla.Saturation*100, hsla.Lightness*100, hsla.Alpha,
+	)
+}
+
 type RGB struct {
 	R uint8
 	G uint8