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

make elements more transparent

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 22:48:57 +02:00
parent 6b586224c4
commit 378c1b97a1
5 changed files with 15 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
-16
View File
@@ -87,22 +87,6 @@ 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%;
dist/index.js
Vendored
+1 -1
View File
@@ -838,7 +838,7 @@
// src/View/translations.ts
var englishTranslations = {
general: {
closeButtonAudioLabel: "close",
closeButtonAudioLabel: "Close",
deleteItemButtonAudioLabel: "delete item",
setButton: "Set"
},
dist/styles.css
Vendored
+13 -10
View File
@@ -20,15 +20,16 @@ COLORS
/* definition */
:root {
--background: hsla(0, 0%, 100%, 100%);
--background-transparent: hsla(0, 0%, 100%, 60%);
--background-glass: hsla(0, 0%, 100%, 40%);
--background-transparent: hsla(0, 0%, 0%, 5%);
--background-hover: hsla(0, 0%, 55%, 12%);
--background-active: hsla(0, 0%, 55%, 12%);
--layer: hsla(0, 0%, 96%, 60%);
--surface: hsla(0, 0%, 96%, 100%);
--surface-hover: hsla(0, 0%, 91%, 100%);
--surface-active: hsla(0, 0%, 78%, 100%);
--surface: hsla(0, 0%, 0%, 5%);
--surface-hover: hsla(0, 0%, 5%, 10%);
--surface-active: hsla(0, 0%, 5%, 15%);
--border: hsla(0, 0%, 0%, 10%);
--surface-border: #8d8d8d;
@@ -57,15 +58,16 @@ COLORS
@media (prefers-color-scheme: dark) {
:root {
--background: hsla(0, 0%, 9%, 100%);
--background-transparent: hsla(0, 0%, 9%, 60%);
--background-glass: hsla(0, 0%, 9%, 40%);
--background-transparent: hsla(0, 0%, 100%, 5%);
--background-hover: hsla(0, 0%, 55%, 16%);
--background-active: hsla(0, 0%, 55%, 40%);
--layer: hsla(0, 0%, 15%, 60%);
--surface: hsla(0, 0%, 15%, 100%);
--surface-hover: hsla(0, 0%, 20%, 100%);
--surface-active: hsla(0, 0%, 44%, 100%);
--surface: hsla(0, 0%, 100%, 5%);
--surface-hover: hsla(0, 0%, 100%, 10%);
--surface-active: hsla(0, 0%, 100%, 15%);
--border: hsla(0, 0%, 100%, 10%);
--surface-border: #6f6f6f;
@@ -106,7 +108,7 @@ html {
}
.modal > div {
background: var(--background);
background: var(--background-glass);
}
menu,
@@ -314,7 +316,8 @@ select {
}
header,
menu {
menu,
.modal > div {
backdrop-filter: blur(70px);
-webkit-backdrop-filter: blur(70px);
}
src/View/translations.ts
+1 -1
View File
@@ -1,6 +1,6 @@
const englishTranslations = {
general: {
closeButtonAudioLabel: "close",
closeButtonAudioLabel: "Close",
deleteItemButtonAudioLabel: "delete item",
setButton: "Set",
src/colors.css
-18
View File
@@ -12,24 +12,6 @@
}
}
#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%;