improve ui

This commit is contained in:
marlon-erler
2024-07-20 22:16:37 +02:00
parent 757dbf9947
commit 5df6577a8e
5 changed files with 70 additions and 32 deletions
+31 -14
View File
@@ -1,18 +1,4 @@
/* src/base.css */
#home-page {
--background-transparent: hsla(0, 0%, 100%, 40%);
--surface: hsla(0, 0%, 100%, 40%);
--surface-hover: hsla(0, 0%, 91%, 40%);
--surface-active: hsla(0, 0%, 78%, 40%);
}
@media (prefers-color-scheme: dark) {
#home-page {
--background-transparent: hsla(0, 0%, 5%, 30%);
--surface: hsla(0, 0%, 5%, 30%);
--surface-hover: hsla(0, 0%, 20%, 30%);
--surface-active: hsla(0, 0%, 44%, 30%);
}
}
#background {
position: fixed;
top: 0px;
@@ -101,6 +87,22 @@ main {
--accent-text-luma: var(--accent-text-luma-dark);
}
}
#home-page,
[color]:not([color=standard]).subtle-background {
--background-transparent: hsla(0, 0%, 0%, 5%);
--surface: hsla(0, 0%, 0%, 5%);
--surface-hover: hsla(0, 0%, 5%, 10%);
--surface-active: hsla(0, 0%, 5%, 15%);
}
@media (prefers-color-scheme: dark) {
#home-page,
[color]:not([color=standard]).subtle-background {
--background-transparent: hsla(0, 0%, 100%, 5%);
--surface: hsla(0, 0%, 100%, 5%);
--surface-hover: hsla(0, 0%, 100%, 10%);
--surface-active: hsla(0, 0%, 100%, 15%);
}
}
[color]:not([color=standard]).tile {
--gradient-luma-1: 70%;
--gradient-luma-2: 90%;
@@ -134,6 +136,21 @@ main {
color: var(--primary);
background-color: var(--surface);
}
[color]:not([color=standard]).subtle-background {
--gradient-luma-1: 97%;
--gradient-luma-2: 92%;
background-image:
linear-gradient(
120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsl(var(--hue), 100%, var(--gradient-luma-2)));
}
@media (prefers-color-scheme: dark) {
[color]:not([color=standard]).subtle-background {
--gradient-luma-1: 2%;
--gradient-luma-2: 6%;
}
}
[color=coral] {
--hue: 20;
--accent-luma: 50%;
+1 -1
View File
@@ -1059,7 +1059,7 @@
return mainContent.value = MessagePage(chatViewModel);
}
});
return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color, class: "subtle-background" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
"button",
{
class: "ghost",