Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-01 03:59:15 +01:00
Code Issues Packages Projects Releases Activity

feat(desktop): integrate vibrancy

Browse Source
This commit is contained in:
Elian Doran
2026-01-26 23:21:40 +02:00
parent 120b767a68
commit 6856a98d50
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/desktop.ts
View File

@@ -99,9 +99,8 @@ function initFullScreenDetection(currentWindow: Electron.BrowserWindow) {
}
function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
const material = style.getPropertyValue("--background-material");
if (window.glob.platform === "win32") {
const material = style.getPropertyValue("--background-material");
// TriliumNextTODO: find a nicer way to make TypeScript happy – unfortunately TS did not like Array.includes here
const bgMaterialOptions = ["auto", "none", "mica", "acrylic", "tabbed"] as const;
const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
if (foundBgMaterialOption) {
@@ -110,7 +109,11 @@ function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Elec
}
if (window.glob.platform === "darwin") {
currentWindow.setVibrancy("under-window");
const bgMaterialOptions = [ "popover", "tooltip", "titlebar", "selection", "menu", "sidebar", "header", "sheet", "window", "hud", "fullscreen-ui", "content", "under-window", "under-page" ] as const;
const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
if (foundBgMaterialOption) {
currentWindow.setVibrancy(foundBgMaterialOption);
}
}
}

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

@@ -46,7 +46,11 @@ body.background-effects.platform-win32 {
--background-material: tabbed;
}
body.background-effects.theme-supports-background-effects.platform-win32 {
body.background-effects.platform-darwin {
--background-material: under-window;
}
body.background-effects.theme-supports-background-effects {
--launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
--launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
--launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx);
@@ -60,29 +64,29 @@ body.background-effects.platform-win32.layout-vertical {
--background-material: mica;
}
body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical {
body.background-effects.theme-supports-background-effects.layout-vertical {
--left-pane-background-color: var(--window-background-color-bgfx);
--center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx);
--right-pane-background-color: var(--right-pane-background-color-bgfx);
}
body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal {
body.background-effects.theme-supports-background-effects.layout-horizontal {
--center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
--gutter-color: var(--left-pane-background-color);
}
body.background-effects.theme-supports-background-effects.platform-win32,
body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
body.background-effects.theme-supports-background-effects,
body.background-effects.theme-supports-background-effects #root-widget {
background: var(--window-background-color-bgfx) !important;
}
body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container,
body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container {
body.background-effects.theme-supports-background-effects.layout-horizontal #horizontal-main-container,
body.background-effects.theme-supports-background-effects.layout-vertical #vertical-main-container {
background-color: var(--root-background);
}
/* Note split with background effects */
body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx {
body.background-effects.theme-supports-background-effects #center-pane .note-split.bgfx {
--note-split-background-color: var(--center-pane-background-color-bgfx);
}
@@ -1054,7 +1058,7 @@ body.layout-horizontal .tab-row-widget-container {
overflow: hidden;
}
body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-layout {
body.desktop:not(.background-effects) #root-widget.horizontal-layout {
background-color: var(--root-background) !important;
}