improve ui
This commit is contained in:
Vendored
+31
-14
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user