Another bunch of styling fixes

res/include/style/layout.css

@@ -77,7 +77,7 @@ header > h1 {
 	margin-bottom: 69px;
 }
 footer > .footer_content {
-	background-color: rgba(0, 0, 0, 0.2);
+	background-color: var(--shaded_background);
 	display: inline-block;
 	border-radius: 8px;
 	margin: 300px 0 69px 0;
@@ -180,18 +180,11 @@ section {
 	text-decoration: none;
 }
 
-.highlight_dark,
+.highlight_shaded,
-.highlight_middle,
-.highlight_light,
-.highlight_lighter,
 .highlight_green,
 .highlight_blue,
 .highlight_yellow,
-.highlight_red,
+.highlight_red {
-.highlight_1,
-.highlight_2,
-.highlight_3,
-.highlight_4 {
 	position: relative;
 	width: auto;
 	height: auto;
@@ -200,18 +193,8 @@ section {
 	padding: 4px;
 	border-radius: 8px;
 }
-.highlight_dark, .highlight_1 {
+.highlight_shaded {
-	background-color: var(--layer_1_color);
+	background: var(--shaded_background);
-	color: var(--layer_1_text_color);
-}
-.highlight_middle, .highlight_2 {
-	background-color: var(--layer_2_color);
-}
-.highlight_light, .highlight_3 {
-	background-color: var(--layer_3_color);
-}
-.highlight_lighter, .highlight_4 {
-	background-color: var(--layer_4_color);
 }
 .highlight_green {
 	background-color: rgba(0, 255, 0, 0.05);
@@ -490,7 +473,7 @@ button > svg,
 	overflow-y: hidden;
 	white-space: nowrap;
 	text-align: center;
-	background-color: var(--layer_1_color);
+	background-color: var(--shaded_background);
 	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
 }
 .tab_bar > button,

res/template/apps.html

@@ -39,7 +39,7 @@
 				pixeldrain to upload your files.
 			</p>
 
-			<div class="highlight_dark" style="clear: right;">
+			<div class="highlight_shaded" style="clear: right;">
 				<a href="/misc/sharex/pixeldrain.com.sxcu" class="button button_highlight">
 					<i class="icon small">save</i>
 					Download ShareX Uploader

res/template/fragments/form.html

@@ -1,6 +1,6 @@
 {{define "form"}}
 	{{.PreFormHTML}}
-	<form class="highlight_dark" method="POST">
+	<form class="highlight_shaded" method="POST">
 		{{if eq .Submitted true}}
 			{{if eq .SubmitSuccess true}}
 				<div id="submit_result" class="highlight_green">

res/template/maintenance.html

@@ -9,7 +9,7 @@
 		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
 		<br/>
 		<div id='body' class="body">
-			<div id="header" class="highlight_light" style="font-size: 2em; line-height: 1.2em;">
+			<div id="header" class="highlight_shaded" style="font-size: 2em; line-height: 1.2em;">
 				Pixeldrain is under maintenanace
 			</div>
 			<p>

res/template/widgets.html

@@ -18,10 +18,7 @@
 			<h5>Size 5 header</h5>
 			<h6>Size 6 header</h6>
 
-			<div class="highlight_dark">Dark highlight</div>
+			<div class="highlight_shaded">Shaded highlight</div>
-			<div class="highlight_middle">Middle highlight</div>
-			<div class="highlight_light">Light highlight</div>
-			<div class="highlight_lighter">Lighter highlight</div>
 			<br/>
 			Link <a href="#">A link to someplace</a>.
 			<hr/>

svelte/src/admin_panel/AbuseReporterTable.svelte

@@ -16,7 +16,7 @@ export let reporters = []
 		<td>Created</td>
 		<td></td>
 	</tr>
-	{#each reporters as rep (rep.from_address, rep.mail_server)}
+	{#each reporters as rep}
 		<tr>
 			<td>
 				{rep.from_address}<br/>

svelte/src/admin_panel/AbuseReporters.svelte

@@ -136,7 +136,7 @@ onMount(get_reporters);
 		</button>
 	</div>
 	{#if creating}
-		<div class="highlight_light">
+		<div class="highlight_shaded">
 			<form on:submit|preventDefault={create_reporter}>
 				<table class="form">
 					<tr>

svelte/src/admin_panel/BlockFiles.svelte

@@ -71,7 +71,7 @@ onMount(() => {
 	<p>
 		Paste any pixeldrain file links in here to remove them
 	</p>
-	<div class="highlight_dark">
+	<div class="highlight_shaded">
 		<Form config={block_form}></Form>
 	</div>
 </section>

svelte/src/admin_panel/Home.svelte

@@ -162,7 +162,7 @@ onDestroy(() => {
 <section>
 	<h3>Bandwidth usage and file views</h3>
 </section>
-<div class="highlight_dark" style="margin-bottom: 6px;">
+<div class="highlight_shaded" style="margin-bottom: 6px;">
 	<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
 	<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
 	<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</button>
@@ -174,7 +174,7 @@ onDestroy(() => {
 </div>
 <Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
 <Chart bind:this={graphViews} data_type="number" legend={false} />
-<div class="highlight_dark">
+<div class="highlight_shaded">
 	Total usage from {start_time} to {end_time}<br/>
 	{formatDataVolume(total_bandwidth, 3)} bandwidth,
 	{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,

svelte/src/admin_panel/IPBans.svelte

@@ -100,7 +100,7 @@ onMount(get_bans);
 		</button>
 	</div>
 	{#if creating}
-		<div class="highlight_light">
+		<div class="highlight_shaded">
 			<form on:submit|preventDefault={create_ban}>
 				<table class="form">
 					<tr>

svelte/src/admin_panel/Subscriptions.svelte

@@ -184,17 +184,17 @@ onMount(get_coupons)
 		This adds credit to a user's account. You only need to enter one of
 		the user id, username or email.
 	</p>
-	<div class="highlight_dark">
+	<div class="highlight_shaded">
 		<Form config={credit_form}></Form>
 	</div>
 
 	<h2>Impersonate user</h2>
-	<div class="highlight_dark">
+	<div class="highlight_shaded">
 		<Form config={impersonate_form}></Form>
 	</div>
 
 	<h2>Create coupon codes</h2>
-	<div class="highlight_dark">
+	<div class="highlight_shaded">
 		<Form config={coupon_form}></Form>
 	</div>
 

svelte/src/file_viewer/EmbedWindow.svelte

@@ -157,6 +157,11 @@ const update_example = () => {
 			<ThemePicker on:theme_change={e => set_style(e.detail)}></ThemePicker>
 		{:else}
 			<h3>Direct link</h3>
+			<p>
+				Hotlinking is only supported on <a href="/#pro">Pro</a>
+				accounts. If this file was not uploaded with a Pro account the
+				download will be blocked.
+			</p>
 			<p>
 				You can directly download the file from this link without using the
 				file viewer:

svelte/src/file_viewer/viewers/TextBlock.svelte

@@ -14,8 +14,7 @@ export let center = false
 	padding-left: 8px;
 	vertical-align: middle;
 
-	color: var(--layer_1_text_color);
+	background-color: var(--shaded_background);
-	background-color: rgba(0, 0, 0, 0.5);
 	border-radius: 8px;
 	padding: 8px;
 }

svelte/src/filesystem/filemanager/CreateDirectory.svelte

@@ -26,7 +26,7 @@ let create_dir = () => {
 onMount(() => { name_input.focus() })
 </script>
 
-<form class="create_dir highlight_dark" on:submit|preventDefault={create_dir}>
+<form class="create_dir highlight_shaded" on:submit|preventDefault={create_dir}>
 	<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
 	<input class="dirname" type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} />
 	<input class="submit" type="submit" value="create"/>

svelte/src/home_page/FeatureTable.svelte

@@ -52,11 +52,6 @@ onMount(() => {
 			Transfer limit of <span class="text_highlight">1 terabyte</span> per
 			month. If the transfer limit is exceeded the restrictions of the
 			free plan will apply
-			<br/>
-			<button class="round" on:click={direct_linking.toggle}>
-				<i class="icon">info</i>
-				More information
-			</button>
 		</div>
 	</div>
 	<div>
@@ -72,6 +67,24 @@ onMount(() => {
 			account
 		</div>
 	</div>
+	<div>
+		<div class="feat_label">
+			Hotlinking / embedding files
+		</div>
+		<div class="feat_normal">
+			Hotlinking is not allowed, files which are being hotlinked will be
+			blocked
+		</div>
+		<div class="feat_pro">
+			<span class="text_highlight">Hotlinking is allowed</span> within
+			your data cap
+			<br/>
+			<button class="round" on:click={direct_linking.toggle}>
+				<i class="icon">info</i>
+				More information
+			</button>
+		</div>
+	</div>
 	<div>
 		<div class="feat_label">
 			Adver&shy;tise&shy;ments
@@ -149,55 +162,53 @@ onMount(() => {
 
 <Modal bind:this={file_expiry} title="File Expiry Postponing" padding>
 	<p>
-		Files on pixeldrain have to expire eventually. If we didn't do
+		Files on pixeldrain have to expire eventually. If we didn't do this the
-		this the website would keep growing forever and we would run out
+		website would keep growing forever and we would run out of money pretty
-		of money pretty quickly.
+		quickly.
 	</p>
 	<p>
-		Unlike most other sharing sites pixeldrain uses a postponing
+		Unlike most other sharing sites pixeldrain uses a postponing system for
-		system for expiring files. When a file is freshly uploaded it
+		expiring files. When a file is freshly uploaded it gets 30 days by
-		gets 30 days by default (90 days if you have the pro plan).
+		default (90 days if you have the pro plan). After these 30 days we will
-		After these 30 days we will check when the file was last viewed.
+		check when the file was last viewed. Files which are regularly viewed
-		Files which are regularly viewed could still bring new users to
+		could still bring new users to the platform, it would be rude to show
-		the platform, it would be rude to show these people a File Not
+		these people a File Not Found page. So if the file was viewed in the
-		Found page. So if the file was viewed in the last 30 days we
+		last 30 days we will simply postpone the next check a month. If the file
-		will simply postpone the next check a month. If the file was not
+		was not viewed however it will immediately be removed.
-		viewed however it will immediately be removed.
 	</p>
 	<p>
-		Views are only counted when someone visits the download page in
+		Views are only counted when someone visits the download page in a web
-		a web browser. This makes sure that users can see that the file
+		browser. This makes sure that users can see that the file comes from
-		comes from pixeldrain.
+		pixeldrain.
 	</p>
 	<p>
-		This way we can minimize dead links, and you won't have to tell
+		This way we can minimize dead links, and you won't have to tell your
-		your friends to 'hurry and download this before it expires'.
+		friends to 'hurry and download this before it expires'.
 	</p>
 </Modal>
 
 <Modal bind:this={direct_linking} title="Hotlinking Bandwidth" padding>
 	<p>
-		Paying for bandwidth is the most expensive part of running
+		Paying for bandwidth is the most expensive part of running pixeldrain.
-		pixeldrain. Because of this we have to limit what can be
+		Because of this we have to limit what can be downloaded and by who.
-		downloaded and by who.
 	</p>
 	<p>
-		Normally when you view a file it's on pixeldrain's file viewer.
+		Normally when you view a file it's on pixeldrain's file viewer. The file
-		The file viewer is the page with the download button, the name
+		viewer is the page with the download button, the name of the file and a
-		of the file and a frame where you can view the file if it's an
+		frame where you can view the file if it's an image, video, audio, PDF or
-		image, video, audio, PDF or text file.
+		text file.
 	</p>
 	<h3>Rate limiting</h3>
 	<p>
-		It's also possible to link directly to a file instead of the
+		It's also possible to link directly to a file instead of the download
-		download page. This circumvents our advertisers and branding and
+		page. This circumvents our advertisers and branding and thus we lose
-		thus we lose money when people do this. That's why I added 'rate
+		money when people do this. That's why I added 'hotlink protection mode'
-		limiting mode' to files. This mode is enabled when a file has
+		to files. This mode is enabled when a file has been downloaded five
-		been downloaded three times more than it has been viewed through
+		times more than it has been viewed through the file viewer. When hotlink
-		the file viewer. When rate limiting mode is activated a file
+		protection mode is activated a file cannot be downloaded through the
-		cannot be downloaded through the API, the request needs to come
+		API, the request needs to come from the file viewer page. On the file
-		from the file viewer page. On the file viewer you will see a
+		viewer you will see a CAPTCHA to fill in when you click the download
-		CAPTCHA to fill in when you click the download button.
+		button.
 	</p>
 	<p>
 		More information about <a
@@ -206,43 +217,41 @@ onMount(() => {
 	</p>
 	<h3>Hotlinking with a Pro subscription</h3>
 	<p>
-		When you have a Pro subscription you will get a monthly data
+		When you have a Pro subscription you will get a monthly data transfer
-		transfer limit for all the files on your account combined. Files
+		limit for all the files on your account combined. Files you download
-		you download from pixeldrain are subtracted from the data cap.
+		from pixeldrain are subtracted from the data cap. If you have <a
-		If you have <a href="/user/subscription">Bandwidth sharing</a>
+		href="/user/subscription">Bandwidth sharing</a>
 		enabled your data cap is also used when other people download
 		your files.
 	</p>
 	<p>
-		In principle there is always someone who pays for the bandwidth
+		In principle there is always someone who pays for the bandwidth usage
-		usage when a file is being downloaded:
+		when a file is being downloaded:
 	</p>
 	<ol>
 		<li>
-			If the person downloading the file has a Pro subscription
+			If the person downloading the file has a Pro subscription their data
-			their data cap is used.
+			cap is used.
 		</li>
 		<li>
-			If the person who uploaded the file has a Pro subscription
+			If the person who uploaded the file has a Pro subscription and
-			and Bandwidth sharing is enabled on their account, then the
+			Bandwidth sharing is enabled on their account, then the uploader's
-			uploader's data cap is used.
+			data cap is used.
 		</li>
 		<li>
-			If neither the uploader nor the downloader has a Pro
+			If neither the uploader nor the downloader has a Pro subscription
-			subscription the download will be supported by
+			the download will be supported by advertisements on the download
-			advertisements on the download page.
+			page.
 		</li>
 	</ol>
 	<p>
-		The bandwidth cap on your account is a 30 day rolling window.
+		The bandwidth cap on your account is a 30 day rolling window. This means
-		This means that bandwidth usage will expire 30 days after it was
+		that bandwidth usage will expire 30 days after it was used. Your counter
-		used. Your counter will not reset at the start of the next
+		will not reset at the start of the next month.
-		month.
 	</p>
 	<p>
-		When a list of files is downloaded with the 'DL all files'
+		When a list of files is downloaded with the 'DL all files' button each
-		button each file in the resulting zip file will be counted
+		file in the resulting zip file will be counted separately.
-		separately.
 	</p>
 </Modal>
 

svelte/src/text_upload/TextUpload.svelte

@@ -67,7 +67,7 @@ const keydown = e => {
 <svelte:window on:keydown={keydown}></svelte:window>
 
 <div id="text_editor" class="text_editor">
-	<div id="headerbar" class="highlight_2 headerbar">
+	<div id="headerbar" class="headerbar">
 		<a href="/" class="button round">
 			<i class="icon">arrow_back</i>
 		</a>
@@ -119,6 +119,9 @@ const keydown = e => {
 	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
+	padding: 4px;
+	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 }
 .headerbar > * {
 	flex: 0 0 auto;
@@ -133,9 +136,10 @@ const keydown = e => {
 }
 .textarea {
 	position: relative;
+	display: block;
 	height: 100%;
 	width: 100%;
-	background: var(--layer_1_color);
+	background: var(--body_background);
 	color: var(--text_color);
 	margin: 0;
 	border-radius: 0;

svelte/src/user_buckets/UserBuckets.svelte

@@ -57,7 +57,7 @@ onMount(get_buckets);
 		</button>
 	</div>
 	{#if creating_bucket}
-		<div class="highlight_light">
+		<div class="highlight_shaded">
 			<form on:submit|preventDefault={create_bucket}>
 				<table class="form">
 					<tr>

svelte/src/user_home/AccountSettings.svelte

@@ -267,7 +267,7 @@ onMount(() => {
 		Remove
 	</button>
 	{#if header_image_id}
-		<div class="highlight_dark">
+		<div class="highlight_shaded">
 			<img class="banner_preview" src="/api/file/{header_image_id}" alt="Custom file viewer header"/>
 		</div>
 	{/if}
@@ -288,7 +288,7 @@ onMount(() => {
 		Remove
 	</button>
 	{#if background_image_id}
-		<div class="highlight_dark">
+		<div class="highlight_shaded">
 			<img class="background_preview" src="/api/file/{background_image_id}" alt="Custom file viewer background"/>
 		</div>
 	{/if}
@@ -307,7 +307,7 @@ onMount(() => {
 		Remove
 	</button>
 	{#if footer_image_id}
-		<div class="highlight_dark">
+		<div class="highlight_shaded">
 			<img class="banner_preview" src="/api/file/{footer_image_id}" alt="Custom file viewer footer"/>
 		</div>
 	{/if}

svelte/src/user_home/Home.svelte

@@ -251,7 +251,7 @@ onDestroy(() => {
 	</p>
 </section>
 
-<div class="highlight_light">
+<div class="highlight_shaded">
 	<button
 		on:click={() => { update_graphs(1440, 1, true) }}
 		class:button_highlight={graph_timespan == 1440}>

webcontroller/style.go

@@ -79,6 +79,7 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 	setDefaultColor(&s.ParallaxSlider, s.Layer1)
 	setDefaultColor(&s.Navigation, NoColor)
 	setDefaultColor(&s.Body, s.Layer2)
+	setDefaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
 
 	return s
 }
@@ -101,6 +102,7 @@ type pixeldrainStyleSheet struct {
 	ParallaxSlider    Color
 	Navigation        Color
 	Body              Color
+	Shaded            Color
 	Layer1            hsl // Deepest and darkest layer
 	Layer1Text        hsl // Based on Text if undefined
 	Layer2            hsl
@@ -140,6 +142,7 @@ func (s pixeldrainStyleSheet) String() string {
 	--parallax_slider_color:    %s;
 	--navigation_background:    %s;
 	--body_background:          %s;
+	--shaded_background:        %s;
 	--layer_1_color:            %s;
 	--layer_1_color_border:     %s;
 	--layer_1_text_color:       %s;
@@ -176,6 +179,7 @@ func (s pixeldrainStyleSheet) String() string {
 		s.ParallaxSlider.CSS(),
 		s.Navigation.CSS(),
 		s.Body.CSS(),
+		s.Shaded.CSS(),
 		s.Layer1.CSS(),
 		s.Layer1.Add(0, 0, .05).CSS(),
 		s.Layer1Text.CSS(),
@@ -235,7 +239,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarForeground: hsl{266, .85, .40},
 	ScrollbarHover:      hsl{266, .85, .50},
 
-	Background:        NewGradient(120, hsl{225, .9, .12}, hsl{274, .85, .16}, hsl{274, .85, .16}, hsl{310, .8, .12}),
+	Background:        NewGradient(120, hsl{240, .9, .14}, hsl{274, .9, .14}, hsl{310, .8, .12}),
 	BackgroundPattern: NoColor,
 	ParallaxSlider:    hsl{275, .8, .1},
 	Navigation:        RGBA{0, 0, 0, 0.1},
@@ -422,6 +426,7 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
 	ScrollbarHover:      hsl{193, .43, .76},
 
 	ParallaxSlider:    hsl{220, .17, .20}, // Layer 1 but darker
+	Shaded:            RGBA{255, 255, 255, 0.3},
 	Layer1:            hsl{220, .17, .32}, // hsl(220, 17%, 32%)
 	Layer1Text:        hsl{219, .28, .88},
 	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)