add dynamic theme
This commit is contained in:
Vendored
+12
-16
@@ -172,14 +172,12 @@ body[theme=dark] [color]:not([color=standard]).subtle-background {
|
||||
}
|
||||
#background-wrapper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: var(--safe-area-left);
|
||||
right: var(--safe-area-right);
|
||||
bottom: 0px;
|
||||
inset: -80px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
opacity: 0.4;
|
||||
filter: blur(40px);
|
||||
}
|
||||
main {
|
||||
z-index: 2;
|
||||
@@ -187,24 +185,20 @@ main {
|
||||
#background-wrapper div {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
left: -80px;
|
||||
right: -80px;
|
||||
bottom: -80px;
|
||||
inset: 0px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
filter: blur(40px);
|
||||
}
|
||||
#background-wrapper #sky {
|
||||
left: -100%;
|
||||
bottom: -50%;
|
||||
--color-1: hsl(188, 100%, 83%);
|
||||
--color-2: hsl(194, 72%, 56%);
|
||||
background-image: radial-gradient(var(--color-1), var(--color-2));
|
||||
background-image: radial-gradient(var(--sky-1), var(--sky-2));
|
||||
}
|
||||
#background-wrapper #grass-1 {
|
||||
--color-1: hsl(150, 100%, 30%);
|
||||
--color-2: hsl(150, 100%, 25%);
|
||||
--color-1: hsl(150, 60%, 30%);
|
||||
--color-2: hsl(150, 60%, 25%);
|
||||
filter: var(--backdrop-grass-filter);
|
||||
opacity: .7;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
350deg,
|
||||
@@ -213,8 +207,10 @@ main {
|
||||
transparent 40%);
|
||||
}
|
||||
#background-wrapper #grass-2 {
|
||||
--color-1: hsl(110, 100%, 40%);
|
||||
--color-2: hsl(110, 100%, 35%);
|
||||
--color-1: hsl(110, 60%, 40%);
|
||||
--color-2: hsl(110, 60%, 35%);
|
||||
filter: var(--backdrop-grass-filter);
|
||||
opacity: .7;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
9deg,
|
||||
|
||||
Reference in New Issue
Block a user