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 */ /* 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 { #home-page {
--background-transparent: hsla(0, 0%, 100%, 40%); --background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 100%, 40%); --surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 91%, 40%); --surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 78%, 40%); --surface-active: hsla(0, 0%, 44%, 30%);
}
@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 { #background {
position: fixed; position: fixed;
top: -120px; top: 0px;
left: -120px; left: var(--safe-area-left);
right: -120px; right: var(--safe-area-right);
bottom: -120px; bottom: 0px;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
filter: blur(60px); overflow: hidden;
opacity: 0.2; opacity: 0.2;
} }
main { main {
@@ -32,9 +30,10 @@ main {
#background::after, #background::after,
#background::before { #background::before {
content: ""; content: "";
position: fixed; position: absolute;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
filter: blur(60px);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#background { #background {
src/base.css
+21 -20
View File
@@ -1,33 +1,32 @@
@media (display-mode: browser) { #home-page {
#home-page { --background-transparent: hsla(0, 0%, 100%, 40%);
--background-transparent: hsla(0, 0%, 100%, 40%); --surface: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%); --surface-hover: hsla(0, 0%, 91%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%); --surface-active: hsla(0, 0%, 78%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%); }
}
@media (prefers-color-scheme: dark) { @media (display-mode: browser) and (prefers-color-scheme: dark) {
#home-page { #home-page {
--background-transparent: hsla(0, 0%, 5%, 30%); --background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%); --surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%); --surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%); --surface-active: hsla(0, 0%, 44%, 30%);
}
} }
} }
#background { #background {
position: fixed; position: fixed;
top: -120px; top: 0px;
left: -120px; left: var(--safe-area-left);
right: -120px; right: var(--safe-area-right);
bottom: -120px; bottom: 0px;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
filter: blur(60px); overflow: hidden;
opacity: 0.2; opacity: 0.2;
} }
@@ -39,10 +38,12 @@ main {
#background::before { #background::before {
content: ""; content: "";
position: fixed; position: absolute;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
filter: blur(60px);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {