feat(css): ♿ improve contrast with new translucent color
This commit is contained in:
parent
8c5e03f885
commit
99f100540e
|
@ -20,7 +20,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(--_gap) var(--_gap-half);
|
padding: var(--_gap) var(--_gap-half);
|
||||||
backdrop-filter: blur(var(--_blur));
|
backdrop-filter: blur(var(--_blur));
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent-bg);
|
||||||
border-bottom: 1px solid currentColor;
|
border-bottom: 1px solid currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
padding: var(--_gap-half);
|
padding: var(--_gap-half);
|
||||||
backdrop-filter: blur(var(--_blur));
|
backdrop-filter: blur(var(--_blur));
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent-bg);
|
||||||
border-bottom: 1px solid currentColor;
|
border-bottom: 1px solid currentColor;
|
||||||
|
|
||||||
& > a::before {
|
& > a::before {
|
||||||
|
@ -80,7 +80,7 @@
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
padding: var(--_gap-half);
|
padding: var(--_gap-half);
|
||||||
backdrop-filter: blur(var(--_blur));
|
backdrop-filter: blur(var(--_blur));
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent-bg);
|
||||||
border-bottom: 1px solid currentColor;
|
border-bottom: 1px solid currentColor;
|
||||||
|
|
||||||
& > span::before {
|
& > span::before {
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
& > * {
|
& > * {
|
||||||
border: none;
|
border: none;
|
||||||
padding: var(--_gap-half);
|
padding: var(--_gap-half);
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.components__member_card__content {
|
.components__member_card__content {
|
||||||
background-color: var(--_translucent);
|
background-color: var(--_translucent-bg);
|
||||||
backdrop-filter: blur(var(--_blur));
|
backdrop-filter: blur(var(--_blur));
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
/* color */
|
/* color */
|
||||||
--_accent-color: var(--lime-6);
|
--_accent-color: var(--lime-6);
|
||||||
--_translucent: hsl(from var(--_font-color) h s l / 0.1);
|
--_translucent: hsl(from var(--_font-color) h s l / 0.1);
|
||||||
|
--_translucent-bg: hsl(from var(--_background-color) h s l / .6);
|
||||||
|
|
||||||
/* other */
|
/* other */
|
||||||
--_background-color: var(--sand-0);
|
--_background-color: var(--sand-0);
|
||||||
|
|
Loading…
Reference in a new issue