increase visual transparency

This commit is contained in:
marlon-erler
2026-04-08 09:53:50 +00:00
parent d2c8003eb7
commit 00e6dcf32d
3 changed files with 12 additions and 12 deletions
+6 -6
View File
@@ -14,7 +14,7 @@
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
opacity: 0.3; opacity: 0.4;
} }
main { main {
z-index: 2; z-index: 2;
@@ -59,7 +59,7 @@ main {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#background-wrapper { #background-wrapper {
opacity: 0.2; opacity: 0.5;
} }
#background-wrapper #sky { #background-wrapper #sky {
--color-1: hsl(188, 100%, 30%); --color-1: hsl(188, 100%, 30%);
@@ -106,7 +106,7 @@ main {
120deg, 120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)), hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsla(var(--hue), 100%, var(--gradient-luma-2), 90%) ); hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma)); --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
--surface-active: hsl(var(--hue), 100%, var(--active-luma)); --surface-active: hsl(var(--hue), 100%, var(--active-luma));
--text-normal: hsl(var(--hue), 100%, var(--text-luma)); --text-normal: hsl(var(--hue), 100%, var(--text-luma));
@@ -130,13 +130,13 @@ main {
@media (min-width: 1024px) { @media (min-width: 1024px) {
[color]:not([color=standard]).background { [color]:not([color=standard]).background {
--luma: var(--background-luma); --luma: var(--background-luma);
--sat: 80%; --sat: 100%;
background: hsl(var(--hue), var(--sat), var(--luma)); background: hsl(var(--hue), var(--sat), var(--luma), 40%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[color]:not([color=standard]).background { [color]:not([color=standard]).background {
--luma: var(--background-luma-dark); --luma: var(--background-luma-dark);
--sat: 40%; --sat: 100%;
} }
} }
[color=standard].background { [color=standard].background {
+2 -2
View File
@@ -21,7 +21,7 @@
overflow: hidden; overflow: hidden;
opacity: 0.3; opacity: 0.4;
} }
main { main {
@@ -78,7 +78,7 @@ main {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#background-wrapper { #background-wrapper {
opacity: 0.2; opacity: 0.5;
} }
#background-wrapper #sky { #background-wrapper #sky {
+4 -4
View File
@@ -36,7 +36,7 @@
--surface: linear-gradient( --surface: linear-gradient(
120deg, 120deg,
hsl(var(--hue), 100%, var(--gradient-luma-1)), hsl(var(--hue), 100%, var(--gradient-luma-1)),
hsla(var(--hue), 100%, var(--gradient-luma-2), 90%) hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
); );
--surface-hover: hsl(var(--hue), 100%, var(--hover-luma)); --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
--surface-active: hsl(var(--hue), 100%, var(--active-luma)); --surface-active: hsl(var(--hue), 100%, var(--active-luma));
@@ -70,14 +70,14 @@
@media (min-width: 1024px) { @media (min-width: 1024px) {
[color]:not([color="standard"]).background { [color]:not([color="standard"]).background {
--luma: var(--background-luma); --luma: var(--background-luma);
--sat: 80%; --sat: 100%;
background: hsl(var(--hue), var(--sat), var(--luma)); background: hsl(var(--hue), var(--sat), var(--luma), 40%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[color]:not([color="standard"]).background { [color]:not([color="standard"]).background {
--luma: var(--background-luma-dark); --luma: var(--background-luma-dark);
--sat: 40%; --sat: 100%;
} }
} }