From 467e92c7a3fdfa8a66a29cc9ecb4d1157cfdca2f Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 21 Jun 2022 14:00:03 +0200 Subject: [PATCH] Replace some shadows with borders --- res/static/style/layout.css | 47 +-- res/template/appearance.html | 2 - res/template/history.html | 42 +++ res/template/home.html | 2 + svelte/src/file_viewer/FileViewer.svelte | 18 +- svelte/src/file_viewer/GalleryView.svelte | 12 +- svelte/src/file_viewer/ListNavigator.svelte | 51 +++- svelte/src/file_viewer/viewers/Image.svelte | 2 +- svelte/src/file_viewer/viewers/Text.svelte | 6 +- svelte/src/file_viewer/viewers/Video.svelte | 3 +- svelte/src/home_page/UploadWidget.svelte | 316 ++++++++++---------- webcontroller/filesystem.go | 5 + webcontroller/style.go | 10 +- 13 files changed, 275 insertions(+), 241 deletions(-) diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 1f7c2ec..9f3b81c 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -85,7 +85,7 @@ footer, header, footer { - box-shadow: inset 0 0 3px -1px var(--shadow_color); + border: 2px solid var(--separator); border-radius: 12px; text-align: center; overflow: hidden; @@ -101,7 +101,7 @@ footer>.footer_content { background-color: var(--shaded_background); display: inline-block; border-radius: 8px; - margin: 300px 0 69px 0; + margin: 200px 0 60px 0; } /* Page layout elements */ @@ -173,11 +173,12 @@ footer>.footer_content { section { position: relative; - display: inline-block; + display: block; max-width: 1000px; width: 100%; height: auto; padding: 0; + margin: auto; text-align: initial; clear: both; } @@ -367,46 +368,6 @@ pre { overflow-x: auto; } -.file_button { - position: relative; - width: 400px; - max-width: 90%; - height: 3.6em; - margin: 8px; - padding: 0; - overflow: hidden; - border-radius: 6px; - background: var(--input_background); - color: var(--body_text_color); - word-break: break-all; - text-align: left; - line-height: 1.2em; - display: inline-block; - transition: box-shadow 0.3s, opacity 2s, background 0.2s; - white-space: normal; - text-overflow: ellipsis; - text-decoration: none; - vertical-align: top; - cursor: pointer; -} - -.file_button:hover { - text-decoration: none; - background: var(--input_hover_background); -} - -.file_button>img { - max-height: 100%; - max-width: 25%; - margin-right: 5px; - float: left; - display: block; -} - -.file_button>.file_button_title { - color: var(--link_color); -} - /* API documentation markup */ details { diff --git a/res/template/appearance.html b/res/template/appearance.html index 005978b..23c0aad 100644 --- a/res/template/appearance.html +++ b/res/template/appearance.html @@ -25,8 +25,6 @@

- Hue: -

(Inspired by Solarized) diff --git a/res/template/history.html b/res/template/history.html index 73ec726..6db09ef 100644 --- a/res/template/history.html +++ b/res/template/history.html @@ -2,6 +2,48 @@ {{template "meta_tags" "Upload History"}} + + {{template "page_top" .}} diff --git a/res/template/home.html b/res/template/home.html index 0e5ce36..65bad74 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -15,6 +15,8 @@ background-position: center top; background-size: cover; color: #ffffff; + box-shadow: inset 0 0 2px 0 var(--shadow_color); + border: none; } diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte index e14f691..9f03c73 100644 --- a/svelte/src/file_viewer/FileViewer.svelte +++ b/svelte/src/file_viewer/FileViewer.svelte @@ -429,7 +429,7 @@ const keyboard_event = evt => {
{#if view === "file"} -
+
{/if} {#if file.abuse_type === "" && view === "file"} @@ -514,7 +514,7 @@ const keyboard_event = evt => { {/if} -
+
{#if file.can_edit || list.can_edit} + + - - text_fields - Upload Text - + + text_fields + Upload Text + +
+

+ By uploading files to pixeldrain you acknowledge and accept our + content policy. +

+ +

+ 2 + Wait for the files to finish uploading
-

- By uploading files to pixeldrain you acknowledge and accept our - content policy. -

- -

- 2 - Wait for the files to finish uploading -
-
-
Size {formatDataVolume(total_size, 3)}
-
Progress {(total_progress*100).toPrecision(3)}%
-
ETA {formatDuration(remaining_time, 0)}
-
Rate {formatDataVolume(total_rate, 3)}/s
-
- - -
- -
- Gimme gimme gimme!
- Drop your files to upload them +
+
Size {formatDataVolume(total_size, 3)}
+
Progress {(total_progress*100).toPrecision(3)}%
+
ETA {formatDuration(remaining_time, 0)}
+
Rate {formatDataVolume(total_rate, 3)}/s
-
- {#each upload_queue as file} - - {/each} + +
-
-
- 3 - Share the files -
-
- - {#if upload_queue.length > 1} - You can create an album to group your files together into one link
- Name: -
- - -
-

- Other sharing methods: -
- {/if} - - - - - - -
- {#if qr_visible} - QR code -
- {/if} - - - -
- - {#if window.user.subscription.name === ""} -
-
- 4 - Support me on Patreon! -
-

- Pixeldrain is struggling to get by financially. Because anyone - can upload anything it's hard to find reputable advertisers who - want to advertise on pixeldrain. Every month the ad revenue just - barely covers the bandwidth costs. If this continues I will have - to reduce the file size and bandwidth limits even more. That's - not something I would like to do. -

-

- Pro costs only €20 per year or €2 per month. You will get - some nice benefits and more features are on the way. You can - help with making pixeldrain the easiest and fastest way to share - files online! -

-
-
- - arrow_downward - Check out Pro - arrow_downward - -
-
- {/if} - -
+
+ Gimme gimme gimme!
+ Drop your files to upload them
+
+ +{#each upload_queue as file} + +{/each} + +
+
+ 3 + Share the files +
+
+ +{#if upload_queue.length > 1} + You can create an album to group your files together into one link
+ Name: +
+ + +
+

+ Other sharing methods: +
+{/if} + + + + + + +
+{#if qr_visible} + QR code +
+{/if} + + + +
+ +{#if window.user.subscription.name === ""} +
+
+ 4 + Support me on Patreon! +
+

+ Pixeldrain is struggling to get by financially. Because anyone + can upload anything it's hard to find reputable advertisers who + want to advertise on pixeldrain. Every month the ad revenue just + barely covers the bandwidth costs. If this continues I will have + to reduce the file size and bandwidth limits even more. That's + not something I would like to do. +

+

+ Pro costs only €20 per year or €2 per month. You will get + some nice benefits and more features are on the way. You can + help with making pixeldrain the easiest and fastest way to share + files online! +

+
+
+ + arrow_downward + Check out Pro + arrow_downward + +
+
+{/if} + +