Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-17 12:01:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next)/formatting toolbar: fix backdrop blur on dropdowns

Browse Source
This commit is contained in:
Adorian Doran 2025-05-23 16:33:30 +03:00
parent ac1d56b1d6
commit 20c4fbc8ac
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/stylesheets/theme-next/base.css
View File

@ -110,7 +110,8 @@ body.mobile .dropdown-menu .dropdown-menu {
border-radius: unset !important;
}
body.desktop .dropdown-menu::before {
body.desktop .dropdown-menu::before,
:root .ck.ck-dropdown__panel::before {
content: "";
backdrop-filter: var(--dropdown-backdrop-filter);
border-radius: var(--dropdown-border-radius);

29
apps/client/src/stylesheets/theme-next/notes/text.css
View File

@ -86,10 +86,37 @@
border: 1px solid var(--ck-editor-popup-border-color) !important;
border-radius: var(--dropdown-border-radius) !important;
background: var(--menu-background-color) !important;
backdrop-filter: var(--dropdown-backdrop-filter);
padding: var(--ck-editor-popup-padding);
}
/*
* Backdrop blur pseudo-element
*
* Since .ck-balloon-panel already uses the :after and :before pseudo-elements, there is no other
* option than using a :before on the children element to apply the backdrop blur.
* This pseudoelement will overflow and cover the entire surface of .ck-balloon-panel.
*/
:root .ck-balloon-panel > .ck-toolbar,
:root .ck-balloon-panel > .ck-balloon-rotator {
position: relative;
}
:root .ck-balloon-panel > .ck-toolbar::before,
:root .ck-balloon-panel > .ck-balloon-rotator::before {
--negative-padding: calc(0px - var(--ck-editor-popup-padding)); /* Compensate the parent's padding */
content: "";
position: absolute;
top: var(--negative-padding);
right: var(--negative-padding);
bottom: var(--negative-padding);
left: var(--negative-padding);
border-radius: var(--dropdown-border-radius);
backdrop-filter: var(--dropdown-backdrop-filter);
z-index: -1;
}
:root .ck.ck-dropdown__panel {
--ck-editor-popup-padding: var(--menu-padding-size);
}