corkine/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw synced 2025-07-25 13:58:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

liquid glass

Browse Source
This commit is contained in:
dwelle
2025-06-10 23:10:10 +02:00
parent a7b64f02b3
commit 0d34177761
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/excalidraw/components/Island.scss
View File

@ -3,6 +3,8 @@
--padding: 0; --padding: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--island-bg-color); background-color: var(--island-bg-color);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
padding: calc(var(--padding) * var(--space-factor)); padding: calc(var(--padding) * var(--space-factor));

9
packages/excalidraw/css/styles.scss
View File

@ -386,6 +386,9 @@ body.excalidraw-cursor-resize * {
width: 12.5rem; width: 12.5rem;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
background: transparent !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
} }
.dropdown-select { .dropdown-select {
@ -648,14 +651,16 @@ body.excalidraw-cursor-resize * {
.App-mobile-menu, .App-mobile-menu,
.App-menu__left { .App-menu__left {
--button-border: transparent; --button-border: transparent;
--button-bg: var(--color-surface-mid); // --button-bg: var(--color-surface-mid);
--button-bg: rgba(255, 255, 255, 0.3);
} }
@at-root .excalidraw.theme--dark#{&} { @at-root .excalidraw.theme--dark#{&} {
.App-mobile-menu, .App-mobile-menu,
.App-menu__left { .App-menu__left {
--button-hover-bg: #363541; --button-hover-bg: #363541;
--button-bg: var(--color-surface-high); // --button-bg: var(--color-surface-high);
--button-bg: rgba(0, 0, 0, 0.15);
} }
} }

9
packages/excalidraw/css/theme.scss
View File

@ -19,7 +19,7 @@
--input-border-color: #{$oc-gray-4}; --input-border-color: #{$oc-gray-4};
--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: #ffffff; --island-bg-color: transparent !important;
--keybinding-color: var(--color-gray-40); --keybinding-color: var(--color-gray-40);
--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)};
@ -154,11 +154,11 @@
--color-on-surface: #1b1b1f; --color-on-surface: #1b1b1f;
--color-brand-hover: #5753d0; --color-brand-hover: #5753d0;
--color-on-primary-container: #030064; --color-on-primary-container: #030064;
--color-surface-primary-container: #e0dfff; --color-surface-primary-container: rgba(224, 223, 255, 0.7);
--color-brand-active: #4440bf; --color-brand-active: #4440bf;
--color-border-outline: #767680; --color-border-outline: #767680;
--color-border-outline-variant: #c5c5d0; --color-border-outline-variant: #c5c5d0;
--color-surface-primary-container: #e0dfff; // --color-surface-primary-container: #e0dfff;
--color-badge: #0b6513; --color-badge: #0b6513;
--background-color-badge: #d3ffd2; --background-color-badge: #d3ffd2;
@ -259,10 +259,9 @@
--color-on-surface: #e3e3e8; --color-on-surface: #e3e3e8;
--color-brand-hover: #bbb8ff; --color-brand-hover: #bbb8ff;
--color-on-primary-container: #e0dfff; --color-on-primary-container: #e0dfff;
--color-surface-primary-container: #403e6a; --color-surface-primary-container: rgba(64, 62, 106, 0.7);
--color-brand-active: #d0ccff; --color-brand-active: #d0ccff;
--color-border-outline: #8e8d9c; --color-border-outline: #8e8d9c;
--color-border-outline-variant: #46464f; --color-border-outline-variant: #46464f;
--color-surface-primary-container: #403e6a;
} }
} }

4
packages/excalidraw/css/variables.module.scss
View File

@ -79,6 +79,10 @@
color: var(--button-color, var(--color-on-surface)); color: var(--button-color, var(--color-on-surface));
font-family: var(--ui-font); font-family: var(--ui-font);
// background: transparent !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
svg { svg {
width: var(--button-width, var(--lg-icon-size)); width: var(--button-width, var(--lg-icon-size));
height: var(--button-height, var(--lg-icon-size)); height: var(--button-height, var(--lg-icon-size));