change background gradients
This commit is contained in:
marlon-erler
Vendored
+66
-52
@@ -5,7 +5,7 @@
|
||||
#chat-page #main > div {
|
||||
animation: slide-up var(--animation-duration) ease;
|
||||
}
|
||||
#background {
|
||||
#background-wrapper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: var(--safe-area-left);
|
||||
@@ -14,70 +14,84 @@
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
opacity: 0.2;
|
||||
opacity: 0.3;
|
||||
}
|
||||
main {
|
||||
z-index: 2;
|
||||
}
|
||||
#background::after,
|
||||
#background::before {
|
||||
#background-wrapper div {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
filter: blur(60px);
|
||||
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-wrapper #grass-1 {
|
||||
--color-1: hsl(120, 50%, 50%);
|
||||
--color-2: hsl(120, 50%, 40%);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
350deg,
|
||||
var(--color-1),
|
||||
var(--color-2) 30%,
|
||||
transparent 40%);
|
||||
}
|
||||
#background-wrapper #grass-2 {
|
||||
--color-1: hsl(110, 100%, 40%);
|
||||
--color-2: hsl(110, 100%, 35%);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
4deg,
|
||||
var(--color-1),
|
||||
var(--color-2) 25%,
|
||||
transparent 30%);
|
||||
}
|
||||
#background-wrapper #sun {
|
||||
top: -20%;
|
||||
left: -200%;
|
||||
right: -100%;
|
||||
bottom: -50%;
|
||||
--color-1: hsl(23, 100%, 50%);
|
||||
--color-2: hsl(36.5, 100%, 50%);
|
||||
--color-3: hsl(44.9, 100%, 50%);
|
||||
background-image:
|
||||
radial-gradient(
|
||||
var(--color-1),
|
||||
var(--color-2) 10%,
|
||||
var(--color-3) 20%,
|
||||
transparent 40%);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#background {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 60%),
|
||||
hsla(210, 100%, 50%, 55%),
|
||||
transparent 60%);
|
||||
#background-wrapper {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
@media (display-mode: standalone) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#background {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 80%),
|
||||
hsla(210, 100%, 50%, 75%),
|
||||
transparent 60%);
|
||||
#background-wrapper #sky {
|
||||
--color-1: hsl(188, 100%, 30%);
|
||||
--color-2: hsl(194, 72%, 24%);
|
||||
}
|
||||
#background-wrapper #grass-1 {
|
||||
--color-1: hsl(120, 30%, 30%);
|
||||
--color-2: hsl(120, 30%, 24%);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
#background {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 60%),
|
||||
hsla(210, 100%, 50%, 30%));
|
||||
#background-wrapper #grass-2 {
|
||||
--color-1: hsl(110, 60%, 30%);
|
||||
--color-2: hsl(110, 50%, 24%);
|
||||
}
|
||||
#background::before {
|
||||
top: -130%;
|
||||
left: -150%;
|
||||
right: -800%;
|
||||
bottom: -20%;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
transparent 60%,
|
||||
hsla(110, 100%, 40%, 50%) 60%,
|
||||
hsla(110, 100%, 20%, 40%));
|
||||
}
|
||||
#background::after {
|
||||
top: -100%;
|
||||
left: 0%;
|
||||
right: -500%;
|
||||
bottom: -50%;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
transparent 70%,
|
||||
hsla(110, 100%, 30%, 90%) 70%,
|
||||
hsla(110, 100%, 10%, 70%));
|
||||
#background-wrapper #sun {
|
||||
--color-1: hsl(9, 100%, 50%);
|
||||
--color-2: hsl(36.5, 100%, 40%);
|
||||
--color-3: hsl(44.9, 100%, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,7 +120,7 @@ main {
|
||||
|
||||
120deg,
|
||||
hsl(var(--hue), 100%, var(--gradient-luma-1)),
|
||||
hsl(var(--hue), 100%, var(--gradient-luma-2)) );
|
||||
hsla(var(--hue), 100%, var(--gradient-luma-2), 50%) );
|
||||
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
|
||||
--surface-active: hsl(var(--hue), 100%, var(--active-luma));
|
||||
--text-normal: hsl(var(--hue), 100%, var(--text-luma));
|
||||
|
||||
Vendored
+3
-1
@@ -1811,7 +1811,9 @@
|
||||
chatListViewModel.selectedChat.value != void 0
|
||||
);
|
||||
});
|
||||
document.body.append(/* @__PURE__ */ createElement("div", { id: "background" }));
|
||||
document.body.append(
|
||||
/* @__PURE__ */ createElement("div", { id: "background-wrapper" }, /* @__PURE__ */ createElement("div", { id: "sky" }), /* @__PURE__ */ createElement("div", { id: "sun" }), /* @__PURE__ */ createElement("div", { id: "grass-1" }), /* @__PURE__ */ createElement("div", { id: "grass-2" }))
|
||||
);
|
||||
document.querySelector("main").append(
|
||||
HomePage(settingsViewModel, connectionViewModel, chatListViewModel),
|
||||
ChatPageWrapper(chatListViewModel),
|
||||
|
||||
+82
-61
@@ -8,7 +8,7 @@
|
||||
|
||||
/* Gradient */
|
||||
|
||||
#background {
|
||||
#background-wrapper {
|
||||
position: fixed;
|
||||
|
||||
top: 0px;
|
||||
@@ -21,81 +21,102 @@
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0.2;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
main {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#background::after,
|
||||
#background::before {
|
||||
#background-wrapper div {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
|
||||
filter: blur(60px);
|
||||
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-wrapper #grass-1 {
|
||||
--color-1: hsl(120, 50%, 50%);
|
||||
--color-2: hsl(120, 50%, 40%);
|
||||
|
||||
background-image: linear-gradient(
|
||||
350deg,
|
||||
var(--color-1),
|
||||
var(--color-2) 30%,
|
||||
transparent 40%
|
||||
);
|
||||
}
|
||||
|
||||
#background-wrapper #grass-2 {
|
||||
--color-1: hsl(110, 100%, 40%);
|
||||
--color-2: hsl(110, 100%, 35%);
|
||||
|
||||
background-image: linear-gradient(
|
||||
4deg,
|
||||
var(--color-1),
|
||||
var(--color-2) 25%,
|
||||
transparent 30%
|
||||
);
|
||||
}
|
||||
|
||||
#background-wrapper #sun {
|
||||
top: -20%;
|
||||
left: -200%;
|
||||
right: -100%;
|
||||
bottom: -50%;
|
||||
|
||||
--color-1: hsl(23, 100%, 50%);
|
||||
--color-2: hsl(36.5, 100%, 50%);
|
||||
--color-3: hsl(44.9, 100%, 50%);
|
||||
|
||||
background-image: radial-gradient(
|
||||
var(--color-1),
|
||||
var(--color-2) 10%,
|
||||
var(--color-3) 20%,
|
||||
transparent 40%
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#background {
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 60%),
|
||||
hsla(210, 100%, 50%, 55%),
|
||||
transparent 60%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (display-mode: standalone) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#background {
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 80%),
|
||||
hsla(210, 100%, 50%, 75%),
|
||||
transparent 60%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
#background {
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
hsla(210, 100%, 50%, 60%),
|
||||
hsla(210, 100%, 50%, 30%)
|
||||
);
|
||||
}
|
||||
|
||||
#background::before {
|
||||
top: -130%;
|
||||
left: -150%;
|
||||
right: -800%;
|
||||
bottom: -20%;
|
||||
|
||||
background-image: radial-gradient(
|
||||
transparent 60%,
|
||||
hsla(110, 100%, 40%, 50%) 60%,
|
||||
hsla(110, 100%, 20%, 40%)
|
||||
);
|
||||
}
|
||||
|
||||
#background::after {
|
||||
top: -100%;
|
||||
left: 0%;
|
||||
right: -500%;
|
||||
bottom: -50%;
|
||||
|
||||
background-image: radial-gradient(
|
||||
transparent 70%,
|
||||
hsla(110, 100%, 30%, 90%) 70%,
|
||||
hsla(110, 100%, 10%, 70%)
|
||||
);
|
||||
#background-wrapper {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
#background-wrapper #sky {
|
||||
--color-1: hsl(188, 100%, 30%);
|
||||
--color-2: hsl(194, 72%, 24%);
|
||||
}
|
||||
|
||||
#background-wrapper #grass-1 {
|
||||
--color-1: hsl(120, 30%, 30%);
|
||||
--color-2: hsl(120, 30%, 24%);
|
||||
}
|
||||
|
||||
#background-wrapper #grass-2 {
|
||||
--color-1: hsl(110, 60%, 30%);
|
||||
--color-2: hsl(110, 50%, 24%);
|
||||
}
|
||||
|
||||
#background-wrapper #sun {
|
||||
--color-1: hsl(9, 100%, 50%);
|
||||
--color-2: hsl(36.5, 100%, 40%);
|
||||
--color-3: hsl(44.9, 100%, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -28,7 +28,7 @@
|
||||
--surface: linear-gradient(
|
||||
120deg,
|
||||
hsl(var(--hue), 100%, var(--gradient-luma-1)),
|
||||
hsl(var(--hue), 100%, var(--gradient-luma-2))
|
||||
hsla(var(--hue), 100%, var(--gradient-luma-2), 50%)
|
||||
);
|
||||
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
|
||||
--surface-active: hsl(var(--hue), 100%, var(--active-luma));
|
||||
|
||||
+8
-1
@@ -43,7 +43,14 @@ chatListViewModel.selectedChat.subscribe(() => {
|
||||
);
|
||||
});
|
||||
|
||||
document.body.append(<div id="background"></div>);
|
||||
document.body.append(
|
||||
<div id="background-wrapper">
|
||||
<div id="sky"></div>
|
||||
<div id="sun"></div>
|
||||
<div id="grass-1"></div>
|
||||
<div id="grass-2"></div>
|
||||
</div>
|
||||
);
|
||||
document
|
||||
.querySelector("main")!
|
||||
.append(
|
||||
|
||||
Reference in New Issue
Block a user