Improve UI continuity behind panels (#1435)

* Add variable for island color

* Make islands semi-transparent

This preserves the notion of the infinite canvas and helps
maintain context, especially on smaller screens.
This commit is contained in:
Tom Hicks 2020-04-15 18:42:07 +01:00 committed by GitHub
parent fbcb3ee6ff
commit 3b357d8332
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 1 deletions

View File

@ -1,6 +1,7 @@
.Island { .Island {
--padding: 0; --padding: 0;
background-color: var(--bg-color-main); background-color: var(--bg-color-island);
backdrop-filter: saturate(180%) blur(20px);
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

@ -2,6 +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);
--border-radius-m: 4px; --border-radius-m: 4px;
--space-factor: 0.25rem; --space-factor: 0.25rem;
} }