xenofem/transbeam
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Wiki Activity

dark mode

Browse source
This commit is contained in:
xenofem 2022-05-25 20:34:53 -04:00
parent 6d19c2b967
commit 7f03bbe78b
6 changed files with 85 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/404.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/transbeam.css"/> <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
<link rel="stylesheet" type="text/css" href="css/colors.css"/>
<link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/> <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
<link rel="manifest" href="manifest.json"/> <link rel="manifest" href="manifest.json"/>
<script src="js/download.js"></script> <script src="js/download.js"></script>

57
static/css/colors.css Normal file
View file

@ -0,0 +1,57 @@
@media not all and (prefers-color-scheme: dark) {
:root {
color-scheme: light;
--success-primary: #060;
--success-secondary: #0a0;
--failure-primary: #d00;
--failure-secondary: #f24;
--progress-primary: #27f;
--progress-secondary: #48f;
--progress-tertiary: #7af;
--border: #ddd;
--border-active: #777;
--icon-primary: #333;
--icon-primary-active: #000;
--icon-secondary: #888;
--icon-warning: #f00;
--icon-ready: #33f;
--icon-ready-active: #00b;
--icon-unavailable: #999;
--button-text: #000;
--button-background: #ccc;
--button-background-active: #aaa;
--button-border: #bbb;
--button-disabled-text: #666;
--button-disabled-background: #eee;
--button-disabled-border: #ddd;
}
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--success-primary: #0d0;
--success-secondary: #080;
--failure-primary: #f34;
--failure-secondary: #a00;
--progress-primary: #37f;
--progress-secondary: #25d;
--progress-tertiary: #36c;
--border: #555;
--border-active: #999;
--icon-primary: #bbb;
--icon-primary-active: #fff;
--icon-secondary: #777;
--icon-warning: #f00;
--icon-ready: #35f;
--icon-ready-active: #47f;
--icon-unavailable: #444;
--button-text: #fff;
--button-background: #444;
--button-background-active: #666;
--button-border: #666;
--button-disabled-text: #888;
--button-disabled-background: #222;
--button-disabled-border: #333;
}
}

10
static/css/states.css
View file

@ -25,13 +25,13 @@ body.uploads_closed #upload { display: none; }
#message { display: none; } #message { display: none; }
body.completed #message { body.completed #message {
display: revert; display: revert;
color: #060; color: var(--success-primary);
border-color: #0a0; border-color: var(--success-secondary);
} }
body.error #message { body.error #message {
display: revert; display: revert;
color: #d00; color: var(--failure-primary);
border-color: #f24; border-color: var(--failure-secondary);
} }
#upload_password_form { display: none; } #upload_password_form { display: none; }
@ -49,7 +49,7 @@ body.selecting #download_code_container { display: none; }
body.uploading #progress_container { display: revert; } body.uploading #progress_container { display: revert; }
body.no_files #file_list { display: none; } body.no_files #file_list { display: none; }
body.completed #file_list { background-color: #7af; } body.completed #file_list { background-color: var(--progress-tertiary); }
.delete_button { display: none; } .delete_button { display: none; }
body.selecting .delete_button { display: revert; } body.selecting .delete_button { display: revert; }

41
static/css/transbeam.css
View file

@ -9,7 +9,6 @@ body {
#header h1 { #header h1 {
margin-top: 5px; margin-top: 5px;
color: black;
} }
#header a { #header a {
@ -52,14 +51,14 @@ body {
#progress_bar { #progress_bar {
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #48f; border: 1px solid var(--progress-secondary);
background-image: linear-gradient(0deg, #27f, #27f); background-image: linear-gradient(0deg, var(--progress-primary), var(--progress-primary));
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0; background-size: 0;
} }
#download_code_container { #download_code_container {
border: 1px solid #ddd; border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
@ -69,7 +68,7 @@ body {
} }
#download_code_container:hover { #download_code_container:hover {
border-color: #777; border-color: var(--border-active);
} }
#download_code_main { #download_code_main {
@ -81,14 +80,14 @@ body {
.copy_button { .copy_button {
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: #333; background-color: var(--icon-primary);
mask-image: url("../images/feather-icons/copy.svg"); mask-image: url("../images/feather-icons/copy.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
} }
#download_code_container:hover .copy_button { #download_code_container:hover .copy_button {
background-color: #000; background-color: var(--icon-primary-active);
} }
#copied_message { #copied_message {
@ -117,13 +116,13 @@ table {
} }
tr { tr {
background-image: linear-gradient(0deg, #7af, #7af); background-image: linear-gradient(0deg, var(--progress-tertiary), var(--progress-tertiary));
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0; background-size: 0;
} }
tr + tr td { tr + tr td {
border-top: 1px solid #ddd; border-top: 1px solid var(--border);
} }
td { td {
@ -143,7 +142,7 @@ tr.unavailable td.file_download {
} }
.delete_button { .delete_button {
background-color: #888; background-color: var(--icon-secondary);
mask-image: url("../images/feather-icons/x.svg"); mask-image: url("../images/feather-icons/x.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -154,7 +153,7 @@ tr.unavailable td.file_download {
} }
.delete_button:hover { .delete_button:hover {
background-color: #f00; background-color: var(--icon-warning);
} }
#download_toplevel { #download_toplevel {
@ -203,7 +202,7 @@ td.file_download {
} }
.download_button { .download_button {
background-color: #33f; background-color: var(--icon-ready);
mask-image: url("../images/feather-icons/download.svg"); mask-image: url("../images/feather-icons/download.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -214,7 +213,7 @@ td.file_download {
} }
.download_button:hover { .download_button:hover {
background-color: #00b; background-color: var(--icon-ready-active);
} }
summary { summary {
@ -222,7 +221,7 @@ summary {
} }
.file_unavailable { .file_unavailable {
background-color: #999; background-color: var(--icon-unavailable);
mask-image: url("../images/feather-icons/clock.svg"); mask-image: url("../images/feather-icons/clock.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -250,9 +249,9 @@ input[type="file"] {
button, .fake_button, input[type="submit"] { button, .fake_button, input[type="submit"] {
font-size: 18px; font-size: 18px;
color: #000; color: var(--button-text);
background-color: #ccc; background-color: var(--button-background);
border: 1px solid #bbb; border: 1px solid var(--button-border);
border-radius: 4px; border-radius: 4px;
padding: 6px 12px; padding: 6px 12px;
cursor: pointer; cursor: pointer;
@ -260,13 +259,13 @@ button, .fake_button, input[type="submit"] {
} }
button:hover, .fake_button:hover, input[type="submit"]:hover { button:hover, .fake_button:hover, input[type="submit"]:hover {
background-color: #aaa; background-color: var(--button-background-active);
} }
button:disabled, input:disabled + .fake_button, input[type="submit"]:disabled { button:disabled, input:disabled + .fake_button, input[type="submit"]:disabled {
color: #666; color: var(--button-disabled-text);
background-color: #eee; background-color: var(--button-disabled-background);
border-color: #ddd; border-color: var(--button-disabled-border);
cursor: not-allowed; cursor: not-allowed;
} }

1
static/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/transbeam.css"/> <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
<link rel="stylesheet" type="text/css" href="css/states.css"/> <link rel="stylesheet" type="text/css" href="css/states.css"/>
<link rel="stylesheet" type="text/css" href="css/colors.css"/>
<link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/> <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
<link rel="manifest" href="manifest.json"/> <link rel="manifest" href="manifest.json"/>
<script src="js/util.js"></script> <script src="js/util.js"></script>

1
templates/download.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/transbeam.css"/> <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
<link rel="stylesheet" type="text/css" href="css/colors.css"/>
<link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/> <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
<link rel="manifest" href="manifest.json"/> <link rel="manifest" href="manifest.json"/>
<script src="js/util.js"></script> <script src="js/util.js"></script>