From 8a91135794a9dd367146cd4931ec54d8a102f79f Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Wed, 18 Aug 2021 13:00:07 +0200 Subject: [PATCH] Round some more corners --- res/include/style/layout.css | 15 ++++++++------- res/include/style/viewer.css | 11 +++++++---- res/template/advertisements.html | 2 +- res/template/file_not_found.html | 20 ++++++++++++++------ res/template/home.html | 18 +++++++++++------- svelte/src/admin_panel/AbuseReport.svelte | 1 + svelte/src/user_buckets/UserBucket.svelte | 2 ++ svelte/src/util/Expandable.svelte | 2 ++ 8 files changed, 46 insertions(+), 25 deletions(-) diff --git a/res/include/style/layout.css b/res/include/style/layout.css index 4ac1279..3905388 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -33,7 +33,7 @@ font-family: 'Material Icons'; font-weight: normal; font-style: normal; - font-size: 1.6em; + font-size: 1.5em; display: inline-block; line-height: 1; text-transform: none; @@ -177,7 +177,7 @@ body, .checkers { color: #b2b2b2; /* Fallback */ color: var(--text_color); text-align: center; - padding: 6px 6px; + padding: 4px; margin: 0.3em 15px 0.3em 15px; font-family: "light", sans-serif; font-size: 1.6em; @@ -217,7 +217,7 @@ body, .checkers { box-sizing: border-box; overflow: hidden; text-align: center; - padding: 8px; + padding: 4px; } .highlight_dark, .highlight_1 { background-color: var(--layer_1_color); @@ -309,7 +309,7 @@ hr{ height: 1px; border: none; background-color: var(--input_color); - margin: 16px 16px 16px 16px; + margin: 12px; } a { @@ -354,7 +354,7 @@ pre { width: 400px; max-width: 90%; height: 3.6em; - margin: 10px; + margin: 8px; padding: 0; overflow: hidden; border-radius: 6px; @@ -431,7 +431,7 @@ select { border: none; margin: 3px; background: linear-gradient(var(--input_color), var(--input_color_dark)); - padding: 6px 7px 6px 7px; + padding: 5px 5px 5px 5px; box-shadow: 1px 1px 5px -3px var(--shadow_color); line-height: 1em; overflow: hidden; @@ -442,6 +442,7 @@ select { color: var(--input_text_color); outline: 0; vertical-align: middle; + align-items: center; cursor: pointer; transition: padding 0.2s, box-shadow 0.2s; } @@ -471,7 +472,7 @@ select:active{ background: linear-gradient(var(--input_color_dark), var(--input_color)); box-shadow: inset 4px 4px 8px var(--shadow_color); /* Exactly 4px offset compared to the inactive padding to give a depth effect */ - padding: 10px 3px 2px 11px; + padding: 9px 1px 1px 9px; } .button_full_width {width: calc(100% - 6px);} .button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;} diff --git a/res/include/style/viewer.css b/res/include/style/viewer.css index 9bc202c..fc7bc5d 100644 --- a/res/include/style/viewer.css +++ b/res/include/style/viewer.css @@ -25,7 +25,7 @@ text-align: left; z-index: 10; box-shadow: none; - padding: 6px; + padding: 4px; } .file_viewer > .file_viewer_headerbar_embedded { padding: 2px; @@ -35,8 +35,8 @@ .file_viewer > .file_viewer_headerbar > * { flex-grow: 0; flex-shrink: 0; - margin-left: 6px; - margin-right: 6px; + margin-left: 4px; + margin-right: 4px; display: inline; } .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title { @@ -50,6 +50,9 @@ text-overflow: ellipsis; justify-content: center; } +.file_viewer > .file_viewer_headerbar > .button_toggle_toolbar > .icon { + font-size: 1.6em; +} .file_viewer > .file_viewer_headerbar > .button_home > svg { height: 1.6em; width: 1.6em; @@ -75,7 +78,7 @@ position: relative; display: none; /* Becomes visible if the page is a list */ width: 100%; - background-color: var(--layer_1_color); + border-top: 1px solid var(--layer_2_color_border); text-align: center; line-height: 1em; overflow-x: auto; diff --git a/res/template/advertisements.html b/res/template/advertisements.html index 18947ae..b1c4b80 100644 --- a/res/template/advertisements.html +++ b/res/template/advertisements.html @@ -3,7 +3,7 @@ diff --git a/res/template/file_not_found.html b/res/template/file_not_found.html index 2ca788c..2f64c20 100644 --- a/res/template/file_not_found.html +++ b/res/template/file_not_found.html @@ -14,10 +14,20 @@ reasons for this are:

I'm sorry for the inconvenience. @@ -47,8 +57,6 @@

I'm sorry for the inconvenience. diff --git a/res/template/home.html b/res/template/home.html index 514c091..7570c68 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -185,9 +185,13 @@ Thank you for supporting pixeldrain! {{else}} Only - € 2 per month + + € 2 per month + or - € 20 per year! + + € 20 per year! +
(Excluding tax)
@@ -213,7 +217,7 @@ You have this plan
Thank you for supporting pixeldrain! {{else}} - € 4 + € 4 {{end}} @@ -228,7 +232,7 @@ You have this plan
Thank you for supporting pixeldrain! {{else}} - € 8 + € 8 {{end}} @@ -243,7 +247,7 @@ You have this plan
Thank you for supporting pixeldrain! {{else}} - € 16 + € 16 {{end}} @@ -258,7 +262,7 @@ You have this plan
Thank you for supporting pixeldrain! {{else}} - € 32 + € 32 {{end}} @@ -273,7 +277,7 @@ You have this plan
Thank you for supporting pixeldrain! {{else}} - € 64 + € 64 {{end}} diff --git a/svelte/src/admin_panel/AbuseReport.svelte b/svelte/src/admin_panel/AbuseReport.svelte index 0841d76..e2c205a 100644 --- a/svelte/src/admin_panel/AbuseReport.svelte +++ b/svelte/src/admin_panel/AbuseReport.svelte @@ -114,6 +114,7 @@ let set_status = async (action, report_type) => { .title { flex: 1 1 auto; align-self: center; + word-break: break-all; } .stats { flex: 0 0 auto; diff --git a/svelte/src/user_buckets/UserBucket.svelte b/svelte/src/user_buckets/UserBucket.svelte index 2416ae9..13345c3 100644 --- a/svelte/src/user_buckets/UserBucket.svelte +++ b/svelte/src/user_buckets/UserBucket.svelte @@ -75,6 +75,8 @@ const delete_bucket = async () => { transition: box-shadow 0.5s; box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); margin: 1em 0; + border-radius: 8px; + overflow: hidden; } .bucket_header { display: flex; diff --git a/svelte/src/util/Expandable.svelte b/svelte/src/util/Expandable.svelte index 7a5b239..2c9eadd 100644 --- a/svelte/src/util/Expandable.svelte +++ b/svelte/src/util/Expandable.svelte @@ -31,6 +31,8 @@ export const toggle = () => { transition: box-shadow 0.5s; box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); margin: 1em 0; + border-radius: 8px; + overflow: hidden; } .header { display: flex;