robin/shelve
1
0
Fork 0
mirror of https://codeberg.org/icewind/shelve.git synced 2026-06-03 20:14:08 +02:00
Code Issues Releases Wiki Activity

dark mode

Browse source
This commit is contained in:
Robin Appelman 2022-07-16 13:31:38 +02:00
commit 5a618114f3
1 changed files with 44 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

54
templates/index.html
View file

@ -4,6 +4,30 @@
<link rel="shortcut icon" href="icon.svg"/> <link rel="shortcut icon" href="icon.svg"/>
<title>Shelve</title> <title>Shelve</title>
<style> <style>
:root {
--bg-color: #e5edf1;
--bg-color-accent: white;
--outline-color: #92b0b3;
--text-color: #0f3c4b;
--highlight-outline-color: #c8dadf;
--highlight-background-color: #fff;
--label-color: #39bfd3;
--input-text-color: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: rgb(26, 41, 49);
--bg-color-accent: rgb(24, 26, 27);
--outline-color: rgb(69, 75, 77);
--text-color: rgb(204, 199, 192);
--highlight-outline-color: rgb(47, 74, 81);
--highlight-background-color: rgb(24, 26, 27);
--label-color: #164b53;
--input-text-color: rgb(204, 199, 192);
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -21,8 +45,8 @@
align-content: stretch; align-content: stretch;
flex-direction: column; flex-direction: column;
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
color: #0f3c4b; color: var(--text-color);
background-color: #e5edf1; background-color: var(--bg-color);
} }
#uploads { #uploads {
@ -39,6 +63,12 @@
width: 400px; width: 400px;
} }
#expire, #token {
color: var(--input-text-color);
background-color: var(--bg-color-accent);
padding: 4px;
}
p { p {
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
@ -59,7 +89,7 @@
font-size: 1.25rem; /* 20 */ font-size: 1.25rem; /* 20 */
position: relative; position: relative;
padding: 100px 20px; padding: 100px 20px;
background-color: white; background-color: var(--bg-color-accent);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -68,15 +98,15 @@
} }
.dropbox.has-advanced-upload { .dropbox.has-advanced-upload {
outline: 2px dashed #92b0b3; outline: 2px dashed var(--outline-color);
outline-offset: -10px; outline-offset: -10px;
transition: outline-offset .15s ease-in-out, background-color .15s linear; transition: outline-offset .15s ease-in-out, background-color .15s linear;
} }
.dropbox.is-dragover { .dropbox.is-dragover {
outline-offset: -20px; outline-offset: -20px;
outline-color: #c8dadf; outline-color: var(--highlight-outline-color);
background-color: #fff; background-color: var(--highlight-background-color);
} }
.box__dragndrop, .box__dragndrop,
@ -91,7 +121,7 @@
.dropbox.has-advanced-upload .box__icon { .dropbox.has-advanced-upload .box__icon {
width: 100%; width: 100%;
height: 80px; height: 80px;
fill: #92b0b3; fill: var(--outline-color);
display: block; display: block;
margin-bottom: 40px; margin-bottom: 40px;
} }
@ -176,12 +206,12 @@
.js .box__file + label:hover strong, .js .box__file + label:hover strong,
.box__file:focus + label strong, .box__file:focus + label strong,
.box__file.has-focus + label strong { .box__file.has-focus + label strong {
color: #39bfd3; color: var(--label-color);
} }
.js .box__file:focus + label, .js .box__file:focus + label,
.js .box__file.has-focus + label { .js .box__file.has-focus + label {
outline: 1px dotted #000; outline: 1px dotted var(--text-primary);
outline: -webkit-focus-ring-color auto 5px; outline: -webkit-focus-ring-color auto 5px;
} }
@ -199,8 +229,8 @@
.box__button { .box__button {
font-weight: 700; font-weight: 700;
color: #e5edf1; color: var(--highlight-outline-color);
background-color: #39bfd3; background-color: var(--label-color);
display: none; display: none;
padding: 8px 16px; padding: 8px 16px;
margin: 40px auto 0; margin: 40px auto 0;
@ -208,7 +238,7 @@
.box__button:hover, .box__button:hover,
.box__button:focus { .box__button:focus {
background-color: #0f3c4b; background-color: var(--text-primary);
} }
#box { #box {