diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2023-01-16 23:21:18 +0100 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2023-01-16 23:21:18 +0100 |
| commit | 09c70699384472c121912c8dc36dfe4b02539fe7 (patch) | |
| tree | f3bb6074bb64972ea917172ba34d5eeffc390e62 | |
| parent | 90d6d9510a8df2eab03de71eb4f4d37a15521a2b (diff) | |
| download | blob-bin-09c70699384472c121912c8dc36dfe4b02539fe7.tar.xz blob-bin-09c70699384472c121912c8dc36dfe4b02539fe7.zip | |
refactor: Style changes
| -rw-r--r-- | src/wwwroot/index.css | 69 | ||||
| -rw-r--r-- | src/wwwroot/index.html | 39 |
2 files changed, 48 insertions, 60 deletions
diff --git a/src/wwwroot/index.css b/src/wwwroot/index.css index 83d19bb..a35096c 100644 --- a/src/wwwroot/index.css +++ b/src/wwwroot/index.css @@ -19,62 +19,39 @@ form { flex-wrap: wrap; } -#forms .wrapper { - width: 300px; +@media (max-width: 476px) { + form { + max-width: 100%; + } } -textarea { - overflow-y: hidden; - min-height: calc(1.5em + .75rem + 2px); - resize: vertical; -} - -.btn { - padding: 4px 12px; - min-width: 88px; - border: none; - font: inherit; - color: #373030; - border-radius: 4px; - outline: none; - text-decoration: none; - cursor: default; - font-weight: 400; - background: #fff; - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4); -} - -.btn:active { - background: linear-gradient(#4faefc, #006bff); - color: #fff; - position: relative; -} - -.btn.btn-blue { - color: #fff; - background: linear-gradient(#81c5fd, #3389ff); +.flex-end { + display: flex; + align-items: end; + flex-direction: column; } -.btn.btn-blue:active { - background: linear-gradient(#4faefc, #006bff); +legend { + font-weight: 600; } -.btn.btn-red { - color: #fff; - background: linear-gradient(#fd6c6f, #e70307); +textarea { + overflow-y: hidden; + min-height: calc(1.5em + .75rem + 2px); + min-width: 260.5px; } -.btn.btn-red:active { - background: linear-gradient(#fc2125, #b50206); +button { + background: #e9e9ed; + border: 1px solid #8f8f9d; + cursor: pointer; + width: fit-content; } -.btn.btn-green { - color: #fff; - background: linear-gradient(#89e36b, #44ae21); +button:active { + background: #d1d1d5; } -.btn.btn-green:active { - background: linear-gradient(#56d72b, #338319); -} +input { -.text-input {}
\ No newline at end of file +}
\ No newline at end of file diff --git a/src/wwwroot/index.html b/src/wwwroot/index.html index 429b3a1..0bc9484 100644 --- a/src/wwwroot/index.html +++ b/src/wwwroot/index.html @@ -3,16 +3,19 @@ <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/index.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Blobbin</title> </head> <body> <h1>Blobbin</h1> <p>This is a web service you can upload files and texts to.</p> <main id="forms"> - <div class="wrapper"> - <h2>Upload a file</h2> + <fieldset> + <legend>Upload a file</legend> <form action="/file" enctype="multipart/form-data" id="file-form" method="post" autocomplete="off" autocapitalize="off"> + <label for="file">File</label> <input type="file" maxlength="104857600" id="file" name="files" required> <label for="file-password">Password (optional)</label> <input type="password" name="password" id="file-password"> @@ -24,15 +27,20 @@ <input type="text" id="file-auto-delete" name="autoDeleteAfter"> - <label for="file-singleton"> - <input type="checkbox" name="singleton" id="file-singleton"> - Delete after first open</label> - <button class="btn" type="submit">Start upload</button> + <div class="flex-end"> + <label for="file-singleton" style="margin-bottom: 5px"> + <input type="checkbox" name="singleton" id="file-singleton"> + Delete after first open + </label> + <button class="btn" type="submit">Start upload</button> + </div> </form> - </div> - <div class="wrapper"> - <h2>Upload some text</h2> + </fieldset> + + <fieldset> + <legend>Upload some text</legend> <form action="/text" method="post" id="text-form" autocomplete="off" autocapitalize="off"> + <label for="text">Content</label> <textarea id="text" name="content" required></textarea> <label for="text-mimetype">Mimetype (default: text/plain)</label> <input type="text" name="mime" id="text-mimetype"> @@ -46,12 +54,15 @@ <input type="text" id="text-auto-delete" name="autoDeleteAfter"> - <label for="text-singleton"> - <input type="checkbox" id="text-singleton" name="singleton"> - Delete after first open</label> - <button class="btn" type="submit">Start upload</button> + <div class="flex-end"> + <label for="text-singleton" style="margin-bottom: 5px"> + <input type="checkbox" id="text-singleton" name="singleton"> + Delete after first open + </label> + <button class="btn" type="submit">Start upload</button> + </div> </form> - </div> + </fieldset> </main> <script> document.addEventListener("DOMContentLoaded", () => { |