improve ui

This commit is contained in:
marlon-erler
2024-07-20 22:16:37 +02:00
parent 757dbf9947
commit 5df6577a8e
5 changed files with 70 additions and 32 deletions
+31 -14
View File
@@ -1,18 +1,4 @@
/* src/base.css */
#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 {
position: fixed;
top: 0px;
@@ -101,6 +87,22 @@ main {
--accent-text-luma: var(--accent-text-luma-dark);
}
}
#home-page,
[color]:not([color=standard]).subtle-background {
--background-transparent: hsla(0, 0%, 0%, 5%);
--surface: hsla(0, 0%, 0%, 5%);
--surface-hover: hsla(0, 0%, 5%, 10%);
--surface-active: hsla(0, 0%, 5%, 15%);
}
@media (prefers-color-scheme: dark) {
#home-page,
[color]:not([color=standard]).subtle-background {
--background-transparent: hsla(0, 0%, 100%, 5%);
--surface: hsla(0, 0%, 100%, 5%);
--surface-hover: hsla(0, 0%, 100%, 10%);
--surface-active: hsla(0, 0%, 100%, 15%);
}
}
[color]:not([color=standard]).tile {
--gradient-luma-1: 70%;
--gradient-luma-2: 90%;
@@ -134,6 +136,21 @@ main {
color: var(--primary);
background-color: var(--surface);
}
[color]:not([color=standard]).subtle-background {
--gradient-luma-1: 97%;
--gradient-luma-2: 92%;
background-image:
linear-gradient(
120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsl(var(--hue), 100%, var(--gradient-luma-2)));
}
@media (prefers-color-scheme: dark) {
[color]:not([color=standard]).subtle-background {
--gradient-luma-1: 2%;
--gradient-luma-2: 6%;
}
}
[color=coral] {
--hue: 20;
--accent-luma: 50%;