add background gradient

dist/index.css

@@ -1,3 +1,76 @@
+/* src/base.css */
+#home-page {
+  --surface: hsla(0, 0%, 100%, 50%);
+  --surface-hover: hsla(0, 0%, 91%, 50%);
+  --surface-active: hsla(0, 0%, 78%, 50%);
+}
+@media (prefers-color-scheme: dark) {
+  #home-page {
+    --surface: hsla(0, 0%, 5%, 30%);
+    --surface-hover: hsla(0, 0%, 20%, 30%);
+    --surface-active: hsla(0, 0%, 44%, 30%);
+  }
+}
+#background {
+  position: fixed;
+  top: -120px;
+  left: -120px;
+  right: -120px;
+  bottom: -120px;
+  z-index: -1;
+  pointer-events: none;
+  filter: blur(60px);
+  opacity: 0.4;
+}
+#background::after,
+#background::before {
+  content: "";
+  position: fixed;
+  z-index: -1;
+  pointer-events: none;
+}
+@media (prefers-color-scheme: dark) {
+  #background {
+    background-image:
+      linear-gradient(
+        120deg,
+        hsla(210, 100%, 50%, 25%),
+        hsla(210, 100%, 50%, 15%),
+        transparent 70%);
+  }
+}
+@media (prefers-color-scheme: light) {
+  #background {
+    background-image:
+      linear-gradient(
+        120deg,
+        hsla(210, 100%, 50%, 25%),
+        hsla(210, 100%, 50%, 15%));
+  }
+  #background::before {
+    top: -150%;
+    left: -50%;
+    right: -500%;
+    bottom: -50%;
+    background-image:
+      radial-gradient(
+        transparent 60%,
+        hsla(110, 100%, 40%, 20%) 60%,
+        hsla(110, 100%, 20%, 40%));
+  }
+  #background::after {
+    top: -300%;
+    left: -50%;
+    right: -400%;
+    bottom: -50%;
+    background-image:
+      radial-gradient(
+        transparent 70%,
+        hsla(110, 100%, 30%, 30%) 70%,
+        hsla(110, 100%, 30%, 40%));
+  }
+}
+
 /* src/View/chatPage.css */
 #chat-page-wrapper {
   display: none;

dist/index.js

@@ -1177,6 +1177,7 @@
   var settingsViewModel = new SettingsViewModel(storageModel);
   var connectionViewModel = new ConnectionViewModel(storageModel);
   var chatListViewModel = new ChatListViewModel(storageModel);
+  document.body.append(/* @__PURE__ */ createElement("div", { id: "background" }));
   document.querySelector("main").append(
     HomePage(settingsViewModel, connectionViewModel, chatListViewModel),
     ChatPageWrapper(chatListViewModel),

dist/styles.css

@@ -26,9 +26,9 @@ COLORS
 
   --layer: hsla(0, 0%, 96%, 60%);
 
-  --surface: #f4f4f4;
+  --surface: hsla(0, 0%, 96%, 100%);
-  --surface-hover: #e8e8e8;
+  --surface-hover: hsla(0, 0%, 91%, 100%);
-  --surface-active: #c6c6c6;
+  --surface-active: hsla(0, 0%, 78%, 100%);
 
   --border: hsla(0, 0%, 0%, 10%);
   --surface-border: #8d8d8d;
@@ -63,9 +63,9 @@ COLORS
 
     --layer: hsla(0, 0%, 15%, 60%);
 
-    --surface: #262626;
+    --surface: hsla(0, 0%, 15%, 100%);
-    --surface-hover: #333333;
+    --surface-hover: hsla(0, 0%, 20%, 100%);
-    --surface-active: #6f6f6f;
+    --surface-active: hsla(0, 0%, 44%, 100%);
 
     --border: hsla(0, 0%, 100%, 10%);
     --surface-border: #6f6f6f;
@@ -138,11 +138,11 @@ a {
 }
 
 /* controls */
-button,
+button:not(.tile *),
-footer,
+footer:not(.tile *),
-input,
+input:not(.tile *),
-textarea,
+textarea:not(.tile *),
-select,
+select:not(.tile *),
 .surface,
 .tile {
   background-color: var(--surface);
@@ -166,6 +166,7 @@ button.tile.ghost:active,
 [selected]:active {
   background-color: var(--surface-hover);
 }
+.tile *,
 header button {
   background-color: transparent;
 }
@@ -302,6 +303,12 @@ select {
 }
 
 /* backdrop-filter */
+.tile,
+.surface {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
 header,
 menu {
   backdrop-filter: blur(70px);

src/base.css

@@ -0,0 +1,85 @@
+#home-page {
+  --surface: hsla(0, 0%, 100%, 50%);
+  --surface-hover: hsla(0, 0%, 91%, 50%);
+  --surface-active: hsla(0, 0%, 78%, 50%);
+}
+
+@media (prefers-color-scheme: dark) {
+  #home-page {
+    --surface: hsla(0, 0%, 5%, 30%);
+    --surface-hover: hsla(0, 0%, 20%, 30%);
+    --surface-active: hsla(0, 0%, 44%, 30%);
+  }
+}
+
+#background {
+  position: fixed;
+
+  top: -120px;
+  left: -120px;
+  right: -120px;
+  bottom: -120px;
+
+  z-index: -1;
+  pointer-events: none;
+
+  filter: blur(60px);
+  opacity: 0.4;
+}
+
+#background::after,
+#background::before {
+  content: "";
+
+  position: fixed;
+
+  z-index: -1;
+  pointer-events: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  #background {
+    background-image: linear-gradient(
+        120deg,
+        hsla(210, 100%, 50%, 25%),
+        hsla(210, 100%, 50%, 15%),
+        transparent 70%
+    );
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  #background {
+    background-image: linear-gradient(
+      120deg,
+      hsla(210, 100%, 50%, 25%),
+      hsla(210, 100%, 50%, 15%)
+    );
+  }
+
+  #background::before {
+    top: -150%;
+    left: -50%;
+    right: -500%;
+    bottom: -50%;
+
+    background-image: radial-gradient(
+      transparent 60%,
+      hsla(110, 100%, 40%, 20%) 60%,
+      hsla(110, 100%, 20%, 40%)
+    );
+  }
+
+  #background::after {
+    top: -300%;
+    left: -50%;
+    right: -400%;
+    bottom: -50%;
+
+    background-image: radial-gradient(
+      transparent 70%,
+      hsla(110, 100%, 30%, 30%) 70%,
+      hsla(110, 100%, 30%, 40%)
+    );
+  }
+}

src/index.tsx

@@ -1,3 +1,7 @@
+import "./base.css";
+
+import * as React from "bloatless-react";
+
 import ChatListViewModel from "./ViewModel/chatListViewModel";
 import { ChatPageWrapper } from "./View/chatPageWrapper";
 import { ConnectionModal } from "./View/Modals/connectionModal";
@@ -16,6 +20,7 @@ const connectionViewModel = new ConnectionViewModel(storageModel);
 const chatListViewModel = new ChatListViewModel(storageModel);
 
 // view
+document.body.append(<div id="background"></div>);
 document
   .querySelector("main")!
   .append(