From f7cc3db25a5471fb37432b48db027d0ecdf7d37c Mon Sep 17 00:00:00 2001 From: neri Date: Wed, 8 Feb 2023 12:34:24 +0100 Subject: [PATCH] feat: update styling and layout --- .gitignore | 1 + static/index.css | 47 ++++++++++++++++++++++++++----------------- template/auth-hide.js | 26 ++++++++++++------------ template/index.html | 14 ++++++------- 4 files changed, 50 insertions(+), 38 deletions(-) diff --git a/.gitignore b/.gitignore index c198eed..0b41c58 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /target /files /static/index.html +/static/auth-hide.js docker-push.sh diff --git a/static/index.css b/static/index.css index 3017522..d8155c0 100644 --- a/static/index.css +++ b/static/index.css @@ -1,11 +1,13 @@ :root { - --bg: #222222; - --bg-alt: #444444; + --bg: #262824; + --bg-alt: #434742; --accent: #007600; --accent-alt: #228b22; - --fg: #e9e9e9; - --fg-light: #b6b6b6; + --fg: #dfe1de; + --fg-light: #afb3ab; --radius: 5px; + --separators: 1px; + --separators-wide: 2px; } html { @@ -33,7 +35,7 @@ main { width: 100%; max-width: 1000px; margin: 0 auto; - padding: 1rem; + padding: 1em; } h1 > a, @@ -60,13 +62,13 @@ select, textarea, .button { display: inline-block; - background-color: var(--bg); + background-color: var(--bg-alt); color: var(--fg); - padding: 0.5rem; - border: 2px solid var(--fg); + padding: 0.5em; + border: var(--separators) solid var(--fg-light); border-radius: var(--radius); - margin-bottom: 1rem; - max-width: calc(100vw - 2rem); + margin-bottom: 1.5em; + max-width: calc(100vw - 2em); } details { @@ -75,6 +77,11 @@ details { details summary { cursor: pointer; + padding: 0.5em; +} + +details[open] summary { + border-bottom: var(--separators) solid var(--fg-light); } input:focus-within, @@ -83,7 +90,7 @@ textarea:focus-within, .button:focus-within, details:focus-within, a:focus-within { - outline: solid cornflowerblue 2px; + outline: solid cornflowerblue var(--separators); border-radius: var(--radius); } @@ -101,17 +108,19 @@ h1 + textarea { } input[type='checkbox'] { - margin-bottom: 1.5rem; + margin-top: 0.5em; + margin-bottom: 1.5em; } .button { cursor: pointer; font-family: sans-serif; font-weight: normal; - font-size: 1rem; - margin-right: 0.5rem; - margin-top: 1rem; + font-size: 1em; + margin-right: 0.5em; + margin-top: 1em; user-select: none; + border-width: var(--separators-wide); } a.button { @@ -124,6 +133,7 @@ a.button:visited { .button:hover { background-color: var(--bg-alt); + border-color: var(--fg); } .button.main { @@ -137,6 +147,7 @@ a.button:visited { .usage { margin-top: 2em; overflow: auto; + color: var(--fg-light); } .large-link { @@ -145,7 +156,7 @@ a.button:visited { max-height: 60vh; overflow-y: auto; - font-size: clamp(1rem, 3vw, 1.5rem); + font-size: clamp(1em, 3vw, 1.5em); overflow-wrap: anywhere; } @@ -153,11 +164,11 @@ footer { flex-shrink: 0; display: flex; justify-content: flex-end; - padding: 0.5rem; + padding: 0.5em; } .repo { - padding: 0.5rem; + padding: 0.5em; color: var(--fg-light); text-decoration: none; } diff --git a/template/auth-hide.js b/template/auth-hide.js index bc76821..525623f 100644 --- a/template/auth-hide.js +++ b/template/auth-hide.js @@ -1,11 +1,11 @@ -const fileUpload = document.getElementById("file-upload"); -const textUpload = document.getElementById("text-upload"); -const keepFor = document.getElementById("keep_for"); -const passwordInput = document.getElementById("password-input"); +const fileUpload = document.getElementById('file-upload'); +const textUpload = document.getElementById('text-upload'); +const keepFor = document.getElementById('keep_for'); +const passwordInput = document.getElementById('password-input'); -const maxTime = Number("{no_auth_max_time}"); -const largeFileMaxTime = Number("{no_auth_large_file_max_time}"); -const largeFileSize = Number("{no_auth_large_file_size}"); +const maxTime = Number('{no_auth_max_time}'); +const largeFileMaxTime = Number('{no_auth_large_file_max_time}'); +const largeFileSize = Number('{no_auth_large_file_size}'); let keep = Number(keepFor.value); let size = fileUpload.files[0] @@ -13,26 +13,26 @@ let size = fileUpload.files[0] : textUpload.value.length; const updatePasswordInput = () => { - const requirePassword = keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime); - passwordInput.className = requirePassword ? "" : "hidden"; + const requirePassword = + keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime); + passwordInput.className = requirePassword ? '' : 'hidden'; }; updatePasswordInput(); -fileUpload.addEventListener("change", () => { +fileUpload.addEventListener('change', () => { size = fileUpload.files[0] ? fileUpload.files[0].size : textUpload.value.length; updatePasswordInput(); }); -textUpload.addEventListener("input", () => { +textUpload.addEventListener('input', () => { if (!fileUpload.files[0]) { size = textUpload.value.length; updatePasswordInput(); } }); -keepFor.addEventListener("change", () => { +keepFor.addEventListener('change', () => { keep = Number(keepFor.value); updatePasswordInput(); }); - diff --git a/template/index.html b/template/index.html index 2f0d382..6f23305 100644 --- a/template/index.html +++ b/template/index.html @@ -19,6 +19,13 @@

+ + +
-
- -
{auth_snippet}