sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove backdrop-filter to improve perf (#3506)

Browse Source 
* feat: remove `backdrop-filter` to improve perf

* remove `backdrop-filter` from Modal
This commit is contained in:
David Luzar 2021-04-27 10:55:59 +02:00 committed by GitHub
parent 81108bf580
commit 12e8cc853f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Island.scss
View File

@ -2,7 +2,6 @@
.Island { .Island {
--padding: 0; --padding: 0;
background-color: var(--island-bg-color); background-color: var(--island-bg-color);
backdrop-filter: saturate(100%) blur(10px);
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
border-radius: 4px; border-radius: 4px;
padding: calc(var(--padding) * var(--space-factor)); padding: calc(var(--padding) * var(--space-factor));

4
src/components/Modal.scss
View File

@ -26,8 +26,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
background-color: transparentize($oc-black, 0.7); background-color: transparentize($oc-black, 0.3);
backdrop-filter: blur(2px);
} }
.Modal__content { .Modal__content {
@ -45,7 +44,6 @@
// for modals, reset blurry bg // for modals, reset blurry bg
background: var(--island-bg-color); background: var(--island-bg-color);
backdrop-filter: none;
border: 1px solid var(--dialog-border-color); border: 1px solid var(--dialog-border-color);
box-shadow: 0 2px 10px transparentize($oc-black, 0.75); box-shadow: 0 2px 10px transparentize($oc-black, 0.75);

4
src/css/theme.scss
View File

@ -18,7 +18,7 @@
--input-border-color: #{$oc-gray-3}; --input-border-color: #{$oc-gray-3};
--input-hover-bg-color: #{$oc-gray-1}; --input-hover-bg-color: #{$oc-gray-1};
--input-label-color: #{$oc-gray-7}; --input-label-color: #{$oc-gray-7};
--island-bg-color: rgba(255, 255, 255, 0.9); --island-bg-color: rgba(255, 255, 255, 0.96);
--keybinding-color: #{$oc-gray-5}; --keybinding-color: #{$oc-gray-5};
--link-color: #{$oc-blue-7}; --link-color: #{$oc-blue-7};
--overlay-bg-color: #{transparentize($oc-white, 0.12)}; --overlay-bg-color: #{transparentize($oc-white, 0.12)};
@ -60,7 +60,7 @@
--input-border-color: #2e2e2e; --input-border-color: #2e2e2e;
--input-hover-bg-color: #181818; --input-hover-bg-color: #181818;
--input-label-color: #{$oc-gray-2}; --input-label-color: #{$oc-gray-2};
--island-bg-color: #1e1e1e; --island-bg-color: rgba(30, 30, 30, 0.98);
--keybinding-color: #{$oc-gray-6}; --keybinding-color: #{$oc-gray-6};
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)}; --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
--popup-bg-color: #2c2c2c; --popup-bg-color: #2c2c2c;