TheCloud/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-08-03 10:16:26 -04: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
Show Stats 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;
box-sizing: border-box;
background-color: var(--island-bg-color);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
box-shadow: var(--shadow-island);
border-radius: var(--border-radius-lg);
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;
box-sizing: border-box;
position: absolute;
background: transparent !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
.dropdown-select {
@ -648,14 +651,16 @@ body.excalidraw-cursor-resize * {
.App-mobile-menu,
.App-menu__left {
--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#{&} {
.App-mobile-menu,
.App-menu__left {
--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-hover-bg-color: #{$oc-gray-1};
--input-label-color: #{$oc-gray-7};
--island-bg-color: #ffffff;
--island-bg-color: transparent !important;
--keybinding-color: var(--color-gray-40);
--link-color: #{$oc-blue-7};
--overlay-bg-color: #{transparentize($oc-white, 0.12)};
@ -154,11 +154,11 @@
--color-on-surface: #1b1b1f;
--color-brand-hover: #5753d0;
--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-border-outline: #767680;
--color-border-outline-variant: #c5c5d0;
--color-surface-primary-container: #e0dfff;
// --color-surface-primary-container: #e0dfff;
--color-badge: #0b6513;
--background-color-badge: #d3ffd2;
@ -259,10 +259,9 @@
--color-on-surface: #e3e3e8;
--color-brand-hover: #bbb8ff;
--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-border-outline: #8e8d9c;
--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));
font-family: var(--ui-font);
// background: transparent !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
svg {
width: var(--button-width, var(--lg-icon-size));
height: var(--button-height, var(--lg-icon-size));