change background gradients

dist/index.css

@@ -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-wrapper div {
-#background::before {
   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-wrapper {
-    background-image:
+    opacity: 0.2;
-      linear-gradient(
-        120deg,
-        hsla(210, 100%, 50%, 60%),
-        hsla(210, 100%, 50%, 55%),
-        transparent 60%);
   }
-}
+  #background-wrapper #sky {
-@media (display-mode: standalone) {
+    --color-1: hsl(188, 100%, 30%);
-  @media (prefers-color-scheme: dark) {
+    --color-2: hsl(194, 72%, 24%);
-    #background {
-      background-image:
-        linear-gradient(
-          120deg,
-          hsla(210, 100%, 50%, 80%),
-          hsla(210, 100%, 50%, 75%),
-          transparent 60%);
   }
+  #background-wrapper #grass-1 {
+    --color-1: hsl(120, 30%, 30%);
+    --color-2: hsl(120, 30%, 24%);
   }
-}
+  #background-wrapper #grass-2 {
-@media (prefers-color-scheme: light) {
+    --color-1: hsl(110, 60%, 30%);
-  #background {
+    --color-2: hsl(110, 50%, 24%);
-    background-image:
-      linear-gradient(
-        120deg,
-        hsla(210, 100%, 50%, 60%),
-        hsla(210, 100%, 50%, 30%));
   }
-  #background::before {
+  #background-wrapper #sun {
-    top: -130%;
+    --color-1: hsl(9, 100%, 50%);
-    left: -150%;
+    --color-2: hsl(36.5, 100%, 40%);
-    right: -800%;
+    --color-3: hsl(44.9, 100%, 30%);
-    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%));
   }
 }
 
@@ -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));

dist/index.js

@@ -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),

src/base.css

@@ -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-wrapper div {
-#background::before {
   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-wrapper {
-    background-image: linear-gradient(
+    opacity: 0.2;
-      120deg,
+  }
-      hsla(210, 100%, 50%, 60%),
+
-      hsla(210, 100%, 50%, 55%),
+  #background-wrapper #sky {
-      transparent 60%
+    --color-1: hsl(188, 100%, 30%);
-    );
+    --color-2: hsl(194, 72%, 24%);
-  }
+  }
-}
+
-
+  #background-wrapper #grass-1 {
-@media (display-mode: standalone) {
+    --color-1: hsl(120, 30%, 30%);
-  @media (prefers-color-scheme: dark) {
+    --color-2: hsl(120, 30%, 24%);
-    #background {
+  }
-      background-image: linear-gradient(
+
-        120deg,
+  #background-wrapper #grass-2 {
-        hsla(210, 100%, 50%, 80%),
+    --color-1: hsl(110, 60%, 30%);
-        hsla(210, 100%, 50%, 75%),
+    --color-2: hsl(110, 50%, 24%);
-        transparent 60%
+  }
-      );
+
-    }
+  #background-wrapper #sun {
-  }
+    --color-1: hsl(9, 100%, 50%);
-}
+    --color-2: hsl(36.5, 100%, 40%);
-
+    --color-3: hsl(44.9, 100%, 30%);
-@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%)
-    );
   }
 }

src/colors.css

@@ -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));

src/index.tsx

@@ -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(