make the UI more colorful
This commit is contained in:
+29
-6
@@ -60,16 +60,22 @@
|
||||
|
||||
/* background */
|
||||
[color]:not([color="standard"]).background {
|
||||
--luma: var(--subtle-luma);
|
||||
background: hsl(var(--hue), 90%, var(--luma));
|
||||
--luma: var(--background-luma);
|
||||
--sat: 80%;
|
||||
background: hsl(var(--hue), var(--sat), var(--luma));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[color]:not([color="standard"]).background {
|
||||
--luma: var(--subtle-luma-dark);
|
||||
--luma: var(--background-luma-dark);
|
||||
--sat: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
[color="standard"].background {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* subtle */
|
||||
[color]:not([color="standard"]).subtle-background {
|
||||
--luma: var(--subtle-luma);
|
||||
@@ -92,6 +98,9 @@
|
||||
--accent-text-luma: 100%;
|
||||
--accent-text-luma-dark: 100%;
|
||||
|
||||
--background-luma: 90%;
|
||||
--background-luma-dark: 10%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
}
|
||||
@@ -105,6 +114,9 @@
|
||||
--accent-text-luma: 0%;
|
||||
--accent-text-luma-dark: 0%;
|
||||
|
||||
--background-luma: 85%;
|
||||
--background-luma-dark: 10%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
}
|
||||
@@ -118,6 +130,9 @@
|
||||
--accent-text-luma: 100%;
|
||||
--accent-text-luma-dark: 0%;
|
||||
|
||||
--background-luma: 85%;
|
||||
--background-luma-dark: 9%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
}
|
||||
@@ -128,8 +143,11 @@
|
||||
--accent-luma: 40%;
|
||||
--accent-luma-dark: 60%;
|
||||
|
||||
--accent-text-luma: 100%;
|
||||
--accent-text-luma-dark: 0%;
|
||||
--accent-text-luma: 0%;
|
||||
--accent-text-luma-dark: 100%;
|
||||
|
||||
--background-luma: 85%;
|
||||
--background-luma-dark: 8%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
@@ -144,6 +162,9 @@
|
||||
--accent-text-luma: 100%;
|
||||
--accent-text-luma-dark: 100%;
|
||||
|
||||
--background-luma: 90%;
|
||||
--background-luma-dark: 10%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
}
|
||||
@@ -157,7 +178,9 @@
|
||||
--accent-text-luma: 100%;
|
||||
--accent-text-luma-dark: 100%;
|
||||
|
||||
|
||||
--background-luma: 90%;
|
||||
--background-luma-dark: 12%;
|
||||
|
||||
--subtle-luma: 95%;
|
||||
--subtle-luma-dark: 5%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user