improve styles

This commit is contained in:
marlon-erler
2024-08-01 23:44:21 +02:00
parent 3f6ed2c975
commit 5ae8f46bd9
3 changed files with 16 additions and 16 deletions
+8 -8
View File
@@ -145,7 +145,7 @@ main {
} }
[color]:not([color=standard]).subtle-background { [color]:not([color=standard]).subtle-background {
--luma: var(--subtle-luma); --luma: var(--subtle-luma);
background: hsl(var(--hue), 30%, var(--luma)); background: hsl(var(--hue), 100%, var(--luma), 50%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[color]:not([color=standard]).subtle-background { [color]:not([color=standard]).subtle-background {
@@ -164,7 +164,7 @@ main {
--accent-text-luma: 100%; --accent-text-luma: 100%;
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 10%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -175,7 +175,7 @@ main {
--accent-text-luma: 0%; --accent-text-luma: 0%;
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 10%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -186,7 +186,7 @@ main {
--accent-text-luma: 100%; --accent-text-luma: 100%;
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 9%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -197,7 +197,7 @@ main {
--accent-text-luma: 0%; --accent-text-luma: 0%;
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 8%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -208,7 +208,7 @@ main {
--accent-text-luma: 100%; --accent-text-luma: 100%;
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 10%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -219,7 +219,7 @@ main {
--accent-text-luma: 100%; --accent-text-luma: 100%;
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 12%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
} }
@@ -258,7 +258,7 @@ body[showing-chat] #chat-page-wrapper {
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background-color: var(--background); background-color: var(--background-glass);
z-index: 2; z-index: 2;
} }
#chat-page { #chat-page {
+1 -1
View File
@@ -16,7 +16,7 @@ body[showing-chat] #chat-page-wrapper {
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background-color: var(--background); background-color: var(--background-glass);
z-index: 2; z-index: 2;
} }
+7 -7
View File
@@ -89,7 +89,7 @@
/* subtle */ /* subtle */
[color]:not([color="standard"]).subtle-background { [color]:not([color="standard"]).subtle-background {
--luma: var(--subtle-luma); --luma: var(--subtle-luma);
background: hsl(var(--hue), 30%, var(--luma)); background: hsl(var(--hue), 100%, var(--luma), 50%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -115,7 +115,7 @@
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 10%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
@@ -131,7 +131,7 @@
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 10%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
@@ -147,7 +147,7 @@
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 9%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
@@ -163,7 +163,7 @@
--accent-text-luma-dark: 0%; --accent-text-luma-dark: 0%;
--background-luma: 85%; --background-luma: 85%;
--background-luma-dark: 8%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
@@ -179,7 +179,7 @@
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 10%; --background-luma-dark: 12%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;
@@ -195,7 +195,7 @@
--accent-text-luma-dark: 100%; --accent-text-luma-dark: 100%;
--background-luma: 90%; --background-luma: 90%;
--background-luma-dark: 12%; --background-luma-dark: 11%;
--subtle-luma: 95%; --subtle-luma: 95%;
--subtle-luma-dark: 5%; --subtle-luma-dark: 5%;