gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

canvas: apply blur backdrop on other components as well

Browse Source
This commit is contained in:
Adorian Doran 2025-10-17 17:10:39 +03:00
parent bf53744609
commit 3ec7ccd6dc
2 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/client/src/stylesheets/theme-next/notes/canvas.css
View File

@ -45,6 +45,23 @@
--background: var(--hover-item-background-color); --background: var(--hover-item-background-color);
} }
/* Backdrop blur pseudo-element */
.Island:not(.App-menu__left)::before,
.excalidraw .picker::before,
:root .App-menu__left > .panelColumn > fieldset::before,
:root .App-menu__left > .panelColumn > label::before,
:root .App-menu__left > .panelColumn > div:has(> *)::before {
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
backdrop-filter: blur(10px) saturate(6);
z-index: -1;
}
/* Note's root */ /* Note's root */
@ -52,6 +69,12 @@
--floating-buttons-vert-offset: 20px; --floating-buttons-vert-offset: 20px;
} }
/* Islands (main menu, toolbar, panel, sidebar) */
.Island {
backdrop-filter: none;
}
/* Context menus */ /* Context menus */
/* Context menu - outer wrapper */ /* Context menu - outer wrapper */
@ -141,7 +164,6 @@
/* Panels */ /* Panels */
.excalidraw .Island:not(.App-menu__left),
.excalidraw .zoom-actions, .excalidraw .zoom-actions,
.undo-redo-buttons { .undo-redo-buttons {
box-shadow: 1px 1px 1px var(--floating-button-shadow-color); box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
@ -194,23 +216,10 @@ body[dir=rtl] .excalidraw .Island.App-menu__left {
box-shadow: 1px 1px 1px var(--floating-button-shadow-color); box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
background: var(--floating-button-background-color); background: var(--floating-button-background-color);
padding: 8px 12px; padding: 8px 12px;
}
:root .App-menu__left > .panelColumn > fieldset::before,
:root .App-menu__left > .panelColumn > label::before,
:root .App-menu__left > .panelColumn > div:has(> *)::before {
/* backdrop: blur() creates a new stacking context that prevents some popovers like the /* backdrop: blur() creates a new stacking context that prevents some popovers like the
* arrowheads picker from being positioned correctly. To workaround this, the backdrop blur * arrowheads picker from being positioned correctly. To workaround this, the backdrop blur
* effect is applyed using a pseudo-element instead. */ * effect is applyed using a pseudo-element instead. */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(10px) saturate(6);
z-index: -1;
} }
/* Options panel card title */ /* Options panel card title */
@ -243,4 +252,10 @@ body[dir=rtl] .excalidraw .exc-stats {
.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons { .split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
/* Hide the floating buttons when the sidebar is open */ /* Hide the floating buttons when the sidebar is open */
display: none; display: none;
}
/* Pickers */
.excalidraw .picker {
position: relative;
} }

4
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -1784,10 +1784,6 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
--border-radius-lg: 6px; --border-radius-lg: 6px;
} }
.excalidraw .Island {
backdrop-filter: var(--dropdown-backdrop-filter);
}
.excalidraw .Island.App-toolbar { .excalidraw .Island.App-toolbar {
--island-bg-color: var(--floating-button-background-color); --island-bg-color: var(--floating-button-background-color);
--shadow-island: 1px 1px 1px var(--floating-button-shadow-color); --shadow-island: 1px 1px 1px var(--floating-button-shadow-color);