VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 15:35:10 +02:00
parent 3c686e8879
commit 256f9a4066
2 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+18 -19
View File
@@ -1,29 +1,27 @@
/* src/base.css */
@media (display-mode: browser) {
#home-page {
--background-transparent: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%);
}
@media (display-mode: browser) and (prefers-color-scheme: dark) {
#home-page {
--background-transparent: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%);
}
@media (prefers-color-scheme: dark) {
#home-page {
--background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%);
}
--background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%);
}
}
#background {
position: fixed;
top: -120px;
left: -120px;
right: -120px;
bottom: -120px;
top: 0px;
left: var(--safe-area-left);
right: var(--safe-area-right);
bottom: 0px;
z-index: 1;
pointer-events: none;
filter: blur(60px);
overflow: hidden;
opacity: 0.2;
}
main {
@@ -32,9 +30,10 @@ main {
#background::after,
#background::before {
content: "";
position: fixed;
position: absolute;
z-index: -1;
pointer-events: none;
filter: blur(60px);
}
@media (prefers-color-scheme: dark) {
#background {
src/base.css
+21 -20
View File
@@ -1,33 +1,32 @@
@media (display-mode: browser) {
#home-page {
--background-transparent: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%);
}
#home-page {
--background-transparent: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%);
}
@media (prefers-color-scheme: dark) {
#home-page {
--background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%);
}
@media (display-mode: browser) and (prefers-color-scheme: dark) {
#home-page {
--background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%);
}
}
#background {
position: fixed;
top: -120px;
left: -120px;
right: -120px;
bottom: -120px;
top: 0px;
left: var(--safe-area-left);
right: var(--safe-area-right);
bottom: 0px;
z-index: 1;
pointer-events: none;
filter: blur(60px);
overflow: hidden;
opacity: 0.2;
}
@@ -39,10 +38,12 @@ main {
#background::before {
content: "";
position: fixed;
position: absolute;
z-index: -1;
pointer-events: none;
filter: blur(60px);
}
@media (prefers-color-scheme: dark) {