From a2f6857d201b77d579d3a772edba0df94113be80 Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 22 Mar 2022 23:02:47 +0100 Subject: [PATCH] Another bunch of styling fixes --- res/include/style/layout.css | 29 +--- res/template/apps.html | 2 +- res/template/fragments/form.html | 2 +- res/template/maintenance.html | 2 +- res/template/widgets.html | 5 +- .../src/admin_panel/AbuseReporterTable.svelte | 2 +- svelte/src/admin_panel/AbuseReporters.svelte | 2 +- svelte/src/admin_panel/BlockFiles.svelte | 2 +- svelte/src/admin_panel/Home.svelte | 4 +- svelte/src/admin_panel/IPBans.svelte | 2 +- svelte/src/admin_panel/Subscriptions.svelte | 6 +- svelte/src/file_viewer/EmbedWindow.svelte | 5 + .../src/file_viewer/viewers/TextBlock.svelte | 3 +- .../filemanager/CreateDirectory.svelte | 2 +- svelte/src/home_page/FeatureTable.svelte | 127 ++++++++++-------- svelte/src/text_upload/TextUpload.svelte | 8 +- svelte/src/user_buckets/UserBuckets.svelte | 2 +- svelte/src/user_home/AccountSettings.svelte | 6 +- svelte/src/user_home/Home.svelte | 2 +- webcontroller/style.go | 7 +- 20 files changed, 111 insertions(+), 109 deletions(-) diff --git a/res/include/style/layout.css b/res/include/style/layout.css index 5cf652d..13137b1 100644 --- a/res/include/style/layout.css +++ b/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_middle, -.highlight_light, -.highlight_lighter, +.highlight_shaded, .highlight_green, .highlight_blue, .highlight_yellow, -.highlight_red, -.highlight_1, -.highlight_2, -.highlight_3, -.highlight_4 { +.highlight_red { position: relative; width: auto; height: auto; @@ -200,18 +193,8 @@ section { padding: 4px; border-radius: 8px; } -.highlight_dark, .highlight_1 { - background-color: var(--layer_1_color); - 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_shaded { + background: var(--shaded_background); } .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, diff --git a/res/template/apps.html b/res/template/apps.html index d1207ea..8933f0e 100644 --- a/res/template/apps.html +++ b/res/template/apps.html @@ -39,7 +39,7 @@ pixeldrain to upload your files.

-
+
save Download ShareX Uploader diff --git a/res/template/fragments/form.html b/res/template/fragments/form.html index 8e26a63..2fe4013 100644 --- a/res/template/fragments/form.html +++ b/res/template/fragments/form.html @@ -1,6 +1,6 @@ {{define "form"}} {{.PreFormHTML}} -
+ {{if eq .Submitted true}} {{if eq .SubmitSuccess true}}
diff --git a/res/template/maintenance.html b/res/template/maintenance.html index 8c6dba4..032153e 100644 --- a/res/template/maintenance.html +++ b/res/template/maintenance.html @@ -9,7 +9,7 @@ Header image
- {#if creating} -
+
diff --git a/svelte/src/admin_panel/BlockFiles.svelte b/svelte/src/admin_panel/BlockFiles.svelte index 1aa3db6..accf9f0 100644 --- a/svelte/src/admin_panel/BlockFiles.svelte +++ b/svelte/src/admin_panel/BlockFiles.svelte @@ -71,7 +71,7 @@ onMount(() => {

Paste any pixeldrain file links in here to remove them

-
+
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte index 8827899..b23135e 100644 --- a/svelte/src/admin_panel/Home.svelte +++ b/svelte/src/admin_panel/Home.svelte @@ -162,7 +162,7 @@ onDestroy(() => {

Bandwidth usage and file views

-
+
@@ -174,7 +174,7 @@ onDestroy(() => {
-
+
Total usage from {start_time} to {end_time}
{formatDataVolume(total_bandwidth, 3)} bandwidth, {formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth, diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte index 5340f2d..24e1a98 100644 --- a/svelte/src/admin_panel/IPBans.svelte +++ b/svelte/src/admin_panel/IPBans.svelte @@ -100,7 +100,7 @@ onMount(get_bans);
{#if creating} -
+
diff --git a/svelte/src/admin_panel/Subscriptions.svelte b/svelte/src/admin_panel/Subscriptions.svelte index 4a36b08..2479f31 100644 --- a/svelte/src/admin_panel/Subscriptions.svelte +++ b/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.

-
+

Impersonate user

-
+

Create coupon codes

-
+
diff --git a/svelte/src/file_viewer/EmbedWindow.svelte b/svelte/src/file_viewer/EmbedWindow.svelte index c145c9b..feb5c76 100644 --- a/svelte/src/file_viewer/EmbedWindow.svelte +++ b/svelte/src/file_viewer/EmbedWindow.svelte @@ -157,6 +157,11 @@ const update_example = () => { set_style(e.detail)}> {:else}

Direct link

+

+ Hotlinking is only supported on Pro + accounts. If this file was not uploaded with a Pro account the + download will be blocked. +

You can directly download the file from this link without using the file viewer: diff --git a/svelte/src/file_viewer/viewers/TextBlock.svelte b/svelte/src/file_viewer/viewers/TextBlock.svelte index 90408ae..f23aa57 100644 --- a/svelte/src/file_viewer/viewers/TextBlock.svelte +++ b/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: rgba(0, 0, 0, 0.5); + background-color: var(--shaded_background); border-radius: 8px; padding: 8px; } diff --git a/svelte/src/filesystem/filemanager/CreateDirectory.svelte b/svelte/src/filesystem/filemanager/CreateDirectory.svelte index 286ca0a..6fbc0f7 100644 --- a/svelte/src/filesystem/filemanager/CreateDirectory.svelte +++ b/svelte/src/filesystem/filemanager/CreateDirectory.svelte @@ -26,7 +26,7 @@ let create_dir = () => { onMount(() => { name_input.focus() }) -
+ icon diff --git a/svelte/src/home_page/FeatureTable.svelte b/svelte/src/home_page/FeatureTable.svelte index 9e87383..9c2f1cd 100644 --- a/svelte/src/home_page/FeatureTable.svelte +++ b/svelte/src/home_page/FeatureTable.svelte @@ -52,11 +52,6 @@ onMount(() => { Transfer limit of 1 terabyte per month. If the transfer limit is exceeded the restrictions of the free plan will apply -
-

@@ -72,6 +67,24 @@ onMount(() => { account
+
+
+ Hotlinking / embedding files +
+
+ Hotlinking is not allowed, files which are being hotlinked will be + blocked +
+
+ Hotlinking is allowed within + your data cap +
+ +
+
Adver­tise­ments @@ -149,55 +162,53 @@ onMount(() => {

- Files on pixeldrain have to expire eventually. If we didn't do - this the website would keep growing forever and we would run out - of money pretty quickly. + Files on pixeldrain have to expire eventually. If we didn't do this the + website would keep growing forever and we would run out of money pretty + quickly.

- Unlike most other sharing sites pixeldrain uses a postponing - system for expiring files. When a file is freshly uploaded it - gets 30 days by default (90 days if you have the pro plan). - After these 30 days we will check when the file was last viewed. - Files which are regularly viewed could still bring new users to - the platform, it would be rude to show these people a File Not - Found page. So if the file was viewed in the last 30 days we - will simply postpone the next check a month. If the file was not - viewed however it will immediately be removed. + Unlike most other sharing sites pixeldrain uses a postponing system for + expiring files. When a file is freshly uploaded it gets 30 days by + default (90 days if you have the pro plan). After these 30 days we will + check when the file was last viewed. Files which are regularly viewed + could still bring new users to the platform, it would be rude to show + these people a File Not Found page. So if the file was viewed in the + last 30 days we will simply postpone the next check a month. If the file + was not viewed however it will immediately be removed.

- Views are only counted when someone visits the download page in - a web browser. This makes sure that users can see that the file - comes from pixeldrain. + Views are only counted when someone visits the download page in a web + browser. This makes sure that users can see that the file comes from + pixeldrain.

- This way we can minimize dead links, and you won't have to tell - your friends to 'hurry and download this before it expires'. + This way we can minimize dead links, and you won't have to tell your + friends to 'hurry and download this before it expires'.

- Paying for bandwidth is the most expensive part of running - pixeldrain. Because of this we have to limit what can be - downloaded and by who. + Paying for bandwidth is the most expensive part of running pixeldrain. + Because of this we have to limit what can be downloaded and by who.

- Normally when you view a file it's on pixeldrain's file viewer. - The file viewer is the page with the download button, the name - of the file and a frame where you can view the file if it's an - image, video, audio, PDF or text file. + Normally when you view a file it's on pixeldrain's file viewer. The file + viewer is the page with the download button, the name of the file and a + frame where you can view the file if it's an image, video, audio, PDF or + text file.

Rate limiting

- It's also possible to link directly to a file instead of the - download page. This circumvents our advertisers and branding and - thus we lose money when people do this. That's why I added 'rate - limiting mode' to files. This mode is enabled when a file has - been downloaded three times more than it has been viewed through - the file viewer. When rate limiting mode is activated a file - cannot be downloaded through the API, the request needs to come - from the file viewer page. On the file viewer you will see a - CAPTCHA to fill in when you click the download button. + It's also possible to link directly to a file instead of the download + page. This circumvents our advertisers and branding and thus we lose + money when people do this. That's why I added 'hotlink protection mode' + to files. This mode is enabled when a file has been downloaded five + times more than it has been viewed through the file viewer. When hotlink + protection mode is activated a file cannot be downloaded through the + API, the request needs to come from the file viewer page. On the file + viewer you will see a CAPTCHA to fill in when you click the download + button.

More information about {

Hotlinking with a Pro subscription

- When you have a Pro subscription you will get a monthly data - transfer limit for all the files on your account combined. Files - you download from pixeldrain are subtracted from the data cap. - If you have Bandwidth sharing + When you have a Pro subscription you will get a monthly data transfer + limit for all the files on your account combined. Files you download + from pixeldrain are subtracted from the data cap. If you have Bandwidth sharing enabled your data cap is also used when other people download your files.

- In principle there is always someone who pays for the bandwidth - usage when a file is being downloaded: + In principle there is always someone who pays for the bandwidth usage + when a file is being downloaded:

  1. - If the person downloading the file has a Pro subscription - their data cap is used. + If the person downloading the file has a Pro subscription their data + cap is used.
  2. - If the person who uploaded the file has a Pro subscription - and Bandwidth sharing is enabled on their account, then the - uploader's data cap is used. + If the person who uploaded the file has a Pro subscription and + Bandwidth sharing is enabled on their account, then the uploader's + data cap is used.
  3. - If neither the uploader nor the downloader has a Pro - subscription the download will be supported by - advertisements on the download page. + If neither the uploader nor the downloader has a Pro subscription + the download will be supported by advertisements on the download + page.

- The bandwidth cap on your account is a 30 day rolling window. - This means that bandwidth usage will expire 30 days after it was - used. Your counter will not reset at the start of the next - month. + The bandwidth cap on your account is a 30 day rolling window. This means + that bandwidth usage will expire 30 days after it was used. Your counter + will not reset at the start of the next month.

- When a list of files is downloaded with the 'DL all files' - button each file in the resulting zip file will be counted - separately. + When a list of files is downloaded with the 'DL all files' button each + file in the resulting zip file will be counted separately.

diff --git a/svelte/src/text_upload/TextUpload.svelte b/svelte/src/text_upload/TextUpload.svelte index c47ec01..0f74b83 100644 --- a/svelte/src/text_upload/TextUpload.svelte +++ b/svelte/src/text_upload/TextUpload.svelte @@ -67,7 +67,7 @@ const keydown = e => {
-
+
arrow_back @@ -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; diff --git a/svelte/src/user_buckets/UserBuckets.svelte b/svelte/src/user_buckets/UserBuckets.svelte index a80f765..6bacd7c 100644 --- a/svelte/src/user_buckets/UserBuckets.svelte +++ b/svelte/src/user_buckets/UserBuckets.svelte @@ -57,7 +57,7 @@ onMount(get_buckets);
{#if creating_bucket} -
+
diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte index 8f3acef..0bb290e 100644 --- a/svelte/src/user_home/AccountSettings.svelte +++ b/svelte/src/user_home/AccountSettings.svelte @@ -267,7 +267,7 @@ onMount(() => { Remove {#if header_image_id} -
+
{/if} @@ -288,7 +288,7 @@ onMount(() => { Remove {#if background_image_id} -
+
Custom file viewer background
{/if} @@ -307,7 +307,7 @@ onMount(() => { Remove {#if footer_image_id} -
+
{/if} diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte index edbdbbc..9005a3c 100644 --- a/svelte/src/user_home/Home.svelte +++ b/svelte/src/user_home/Home.svelte @@ -251,7 +251,7 @@ onDestroy(() => {

-
+