v0.4.0
fixed sorting and added dark theme
This commit is contained in:
Borna Rajković committed
1 parent
76ef62bb96
commit
8fbdffc965
7 files changed
+143
-57
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 633 KiB |
+129
-43
@@ -4,8 +4,62 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #f3ebe6;
|
||||
--background: #ffffff;
|
||||
--color: #000;
|
||||
--border: #dddddd;
|
||||
|
||||
--form-label: #999;
|
||||
--form-border: #bbb;
|
||||
--form-focus: #333;
|
||||
|
||||
--dialog-border: #5f9ea07f;
|
||||
--dialog-backdrop: #979f9f63;
|
||||
|
||||
--dropdown-background: #f0f0f0;
|
||||
|
||||
--primary: #5f9ea0;
|
||||
--primary-contrast: #ffffff;
|
||||
--primary-accent: #6a7579;
|
||||
|
||||
--code-background: #aaa;
|
||||
--code-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #f3ebe6;
|
||||
--background: #333;
|
||||
--color: #f0f0f0;
|
||||
--border: #666;
|
||||
|
||||
--form-label: #999;
|
||||
--form-border: #555;
|
||||
--form-focus: #ccc;
|
||||
|
||||
--dialog-border: rgba(16, 173, 173, 0.5);
|
||||
--dialog-backdrop: rgba(1, 70, 70, 0.39);
|
||||
|
||||
--dropdown-background: #222;
|
||||
|
||||
--primary: #0e8d93;
|
||||
--primary-contrast: #333;
|
||||
--primary-accent: #08363a;
|
||||
|
||||
--code-background: #444;
|
||||
--code-color: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
color: var(--color);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
background: #f3ebe6;
|
||||
background: var(--background-color);
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
@@ -15,11 +69,11 @@ header {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
background: var(--background);
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
@@ -29,8 +83,8 @@ header {
|
||||
|
||||
.dialog {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--background);
|
||||
margin: auto;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
@@ -55,6 +109,21 @@ header {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.background-image {
|
||||
min-width: 100vw;
|
||||
min-height: 100dvh;
|
||||
|
||||
max-width: 100vw;
|
||||
max-height: 100dvh;
|
||||
background: url("/assets/background-dark.jpg");
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Quicksand;
|
||||
src: url(fonts/Quicksand-Light.ttf);
|
||||
@@ -108,13 +177,13 @@ h3 {
|
||||
}
|
||||
.form-field label {
|
||||
display: block;
|
||||
color: #999;
|
||||
color: var(--form-label);
|
||||
}
|
||||
.form-field input, .form-field textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-bottom: 1px solid var(--form-border);
|
||||
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
@@ -127,47 +196,57 @@ h3 {
|
||||
.form-field input[type=checkbox] {
|
||||
width: inherit;
|
||||
margin-left: 1em;
|
||||
accent-color: #6a7579;
|
||||
accent-color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.form-field input:focus, .form-field textarea:focus {
|
||||
color: cadetblue;
|
||||
border-bottom: 1px solid cadetblue;
|
||||
color: var(--primary);
|
||||
border-bottom: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.form-field input:not(focus), .form-field textarea:not(focus) {
|
||||
color: #333;
|
||||
color: var(--form-focus);
|
||||
}
|
||||
|
||||
.form-field select {
|
||||
all: unset;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-bottom: 1px solid var(--form-border);
|
||||
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-field select:focus {
|
||||
color: cadetblue;
|
||||
border-bottom: 1px solid cadetblue;
|
||||
color: var(--primary);
|
||||
border-bottom: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.form-field select:not(focus) {
|
||||
color: #333;
|
||||
color: var(--form-focus);
|
||||
}
|
||||
|
||||
.form-field:focus-within label {
|
||||
color: cadetblue;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.button.primary, button.primary {
|
||||
padding: 0.75em 1em;
|
||||
background-color: cadetblue;
|
||||
background-color: var(--primary);
|
||||
font-family: Quicksand, Arial, sans-serif;
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--primary-contrast);
|
||||
font-size: 1rem;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.button.secondary, button.secondary {
|
||||
padding: 0.75em 1em;
|
||||
background-color: var(--primary-contrast);
|
||||
font-family: Quicksand, Arial, sans-serif;
|
||||
border: 1px solid var(--primary);
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
margin-top: 1em;
|
||||
}
|
||||
@@ -175,19 +254,17 @@ h3 {
|
||||
.button.primary, button.primary:hover {
|
||||
filter: contrast(140%);
|
||||
}
|
||||
|
||||
.button.secondary, button.secondary {
|
||||
padding: 0.75em 1em;
|
||||
background-color: white;
|
||||
font-family: Quicksand, Arial, sans-serif;
|
||||
border: 1px solid cadetblue;
|
||||
color: cadetblue;
|
||||
font-size: 1rem;
|
||||
margin-top: 1em;
|
||||
.button.secondary:hover, button.secondary:hover {
|
||||
filter: contrast(80%);
|
||||
}
|
||||
|
||||
.button.secondary:hover, button.secondary:hover {
|
||||
filter: contrast(140%);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button.primary, button.primary:hover {
|
||||
filter: brightness(140%);
|
||||
}
|
||||
.button.secondary:hover, button.secondary:hover {
|
||||
filter: brightness(140%);
|
||||
}
|
||||
}
|
||||
|
||||
/*index.html*/
|
||||
@@ -197,7 +274,6 @@ h3 {
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
@@ -218,7 +294,6 @@ h3 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-bottom: 40px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.results-dialog table {
|
||||
@@ -249,7 +324,6 @@ h3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
@@ -263,7 +337,8 @@ h3 {
|
||||
|
||||
.documentation-dialog #result-content {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background: #aaa;
|
||||
background: var(--code-background);
|
||||
color: var(--code-color);
|
||||
padding: 1em;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -280,9 +355,9 @@ section.radio-group div label {
|
||||
display: inline-block;
|
||||
padding: 0.75em 1em;
|
||||
border: none;
|
||||
color: black;
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
background: #ddd;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
section.radio-group div label {
|
||||
@@ -303,8 +378,8 @@ section.radio-group div label:last-of-type {
|
||||
}
|
||||
|
||||
section.radio-group div input:checked+label {
|
||||
background: cadetblue;
|
||||
color: white;
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
}
|
||||
|
||||
.documentation-dialog .range-selector {
|
||||
@@ -362,7 +437,18 @@ section.radio-group div input:checked+label {
|
||||
}
|
||||
}
|
||||
|
||||
img.icon, button.icon svg {
|
||||
.edit-icon {
|
||||
mask: url(/assets/icons/edit.svg) no-repeat;
|
||||
mask-size: contain;
|
||||
background: var(--color);
|
||||
}
|
||||
.delete-icon {
|
||||
mask: url(/assets/icons/trash-delete.svg) no-repeat;
|
||||
mask-size: contain;
|
||||
background: var(--color);
|
||||
}
|
||||
|
||||
img.icon, button.icon svg, span.icon {
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
}
|
||||
@@ -378,16 +464,16 @@ button.icon, a.icon {
|
||||
}
|
||||
|
||||
button.icon svg, button.icon svg * {
|
||||
fill: white;
|
||||
color: white;
|
||||
stroke: white;
|
||||
fill: var(--primary-contrast);
|
||||
color: var(--primary-contrast);
|
||||
stroke: var(--primary-contrast);
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: 1px solid rgba(95, 158, 160, 0.5);
|
||||
border: 1px solid var(--dialog-border);
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(151, 159, 159, 0.39);
|
||||
background: var(--dialog-backdrop);
|
||||
}
|
||||
dialog {
|
||||
width: 400px;
|
||||
|
||||
Reference in new issue
Block a user