tweak blurry bg for legibility & remove from modals (#1436)
This commit is contained in:
parent
3b357d8332
commit
75e0163dd1
@ -1,7 +1,7 @@
|
|||||||
.Island {
|
.Island {
|
||||||
--padding: 0;
|
--padding: 0;
|
||||||
background-color: var(--bg-color-island);
|
background-color: var(--bg-color-island);
|
||||||
backdrop-filter: saturate(180%) blur(20px);
|
backdrop-filter: saturate(100%) blur(10px);
|
||||||
box-shadow: var(--shadow-island);
|
box-shadow: var(--shadow-island);
|
||||||
border-radius: var(--border-radius-m);
|
border-radius: var(--border-radius-m);
|
||||||
padding: calc(var(--padding) * var(--space-factor));
|
padding: calc(var(--padding) * var(--space-factor));
|
||||||
|
@ -35,6 +35,10 @@
|
|||||||
animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
|
animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// for modals, reset blurry bg
|
||||||
|
background: #fff;
|
||||||
|
backdrop-filter: none;
|
||||||
|
|
||||||
@media #{$media-query} {
|
@media #{$media-query} {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
--text-color-primary: #343a40;
|
--text-color-primary: #343a40;
|
||||||
--bg-color-main: #fff;
|
--bg-color-main: #fff;
|
||||||
--shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
|
--shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||||
--bg-color-island: rgba(255, 255, 255, 0.7);
|
--bg-color-island: rgba(255, 255, 255, 0.9);
|
||||||
--border-radius-m: 4px;
|
--border-radius-m: 4px;
|
||||||
--space-factor: 0.25rem;
|
--space-factor: 0.25rem;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user