dark mode

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

View file

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