fixed light mode

main
Johannes Bülow 2023-01-12 17:26:40 +01:00
parent deaa313129
commit cf9bb7b4bf
Signed by untrusted user who does not match committer: jmb
GPG Key ID: B56971CF7B8F83A6
5 changed files with 61 additions and 2 deletions

View File

@ -3,6 +3,8 @@ ROOTDIR = $(dir $(CURDIR))
HEAD=$(shell git rev-parse --short HEAD) HEAD=$(shell git rev-parse --short HEAD)
all: build docker
dev: dev:
$(JSPKGMAN) run vite dev $(JSPKGMAN) run vite dev
@ -23,7 +25,6 @@ docker:
podman push docker.io/jmbitci/crypttool podman push docker.io/jmbitci/crypttool
podman push docker.io/jmbitci/crypttool:$(HEAD) podman push docker.io/jmbitci/crypttool:$(HEAD)
all: build docker
#TODO get rid of -f and check whether files exist instead #TODO get rid of -f and check whether files exist instead

View File

@ -4,7 +4,7 @@
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: dark, light;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #242424; background-color: #242424;
@ -57,6 +57,7 @@ div.container {
button { button {
border-radius: 8px; border-radius: 8px;
color: rgba(255, 255, 255, 0.87);
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; font-size: 1em;

View File

@ -83,6 +83,22 @@
width: 10em; width: 10em;
margin: auto; margin: auto;
} }
@media (prefers-color-scheme: light) {
.upload-button {
background-color: #f9f9f9;
border: #424242;
border-width: 3px;
border-style: solid;
}
button {
border: #424242;
border-width: 1px;
border-style: solid;
color: #1a1a1a;
}
}
</style> </style>

View File

@ -63,6 +63,22 @@
margin: auto; margin: auto;
margin-right: 1em; margin-right: 1em;
} }
@media (prefers-color-scheme: light) {
.upload-button {
background-color: #f9f9f9;
border: #424242;
border-width: 3px;
border-style: solid;
}
button {
border: #424242;
color: #1a1a1a;
border-width: 1px;
border-style: solid;
}
}
</style> </style>

View File

@ -45,8 +45,33 @@ function updatePassword(e: Event) {
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a; background-color: #1a1a1a;
color: rgba(255, 255, 255, 0.87);
transition: border-color 0.25s; transition: border-color 0.25s;
} }
@media (prefers-color-scheme: light) {
.password-field {
background-color: #f9f9f9;
border: #424242;
border-width: 3px;
border-style: solid;
}
button {
border: #424242;
color: #1a1a1a;
border-width: 1px;
border-style: solid;
}
input {
background-color: #f9f9f9;
border:#424242;
color: #1a1a1a;
border-width: 1px;
border-style: solid;
}
}
</style> </style>
<div class=password-field> <div class=password-field>