VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+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%;
dist/index.js
Vendored
+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",
src/View/chatPage.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function ChatPage(chatViewModel: ChatViewModel) {
});
return (
<article id="chat-page" set:color={chatViewModel.color}>
<article id="chat-page" set:color={chatViewModel.color} class="subtle-background">
<div>
<div id="ribbon">
<button
src/base.css
-16
View File
@@ -1,19 +1,3 @@
#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;
src/colors.css
+37
View File
@@ -12,6 +12,24 @@
}
}
#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%);
}
}
/* tile */
[color]:not([color="standard"]).tile {
--gradient-luma-1: 70%;
@@ -56,6 +74,25 @@
background-color: var(--surface);
}
/* subtle */
[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%;
}
}
/* definitions */
[color="coral"] {
--hue: 20;