tweak blurry bg for legibility & remove from modals (#1436)

This commit is contained in:
David Luzar 2020-04-15 21:20:35 +02:00 committed by GitHub
parent 3b357d8332
commit 75e0163dd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 2 deletions

View File

@ -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));

View File

@ -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%;
} }

View File

@ -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;
} }