From 8cd2c69e3f3d047a469fdf2eece1b6ea5cdc96b2 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:56:19 +0200 Subject: [PATCH 01/22] feat(mica): enable by default --- src/services/window.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/services/window.ts b/src/services/window.ts index 72a337d9a..3df960f9c 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -131,6 +131,10 @@ function getWindowExtraOpts() { } } + // Window effects (Mica) + // TODO: Apply only on Windows and allow the user to choose whether to activate it or not. + extraOpts.backgroundMaterial = "mica"; + return extraOpts; } From cdae9f075c84feac0e996a28b3ffda1c27d94544 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 00:56:27 +0200 Subject: [PATCH 02/22] feat(mica): pass CSS class --- src/routes/index.ts | 1 + src/views/desktop.ejs | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/index.ts b/src/routes/index.ts index a37965b4c..5c8f39904 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -37,6 +37,7 @@ function index(req: Request, res: Response) { platform: process.platform, isElectron, hasNativeTitleBar: (isElectron && options.nativeTitleBarVisible === "true"), + hasBackgroundEffects: true, // TODO: Replace with option mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 29afdcfd3..64c851b1b 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -6,7 +6,7 @@ TriliumNext Notes - + From e21e0c6b38c65ae532f9ecaa2eaa934e398fdac9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 01:07:23 +0200 Subject: [PATCH 03/22] style(mica): apply heavy transparency --- src/public/stylesheets/theme-next.css | 8 ++++++++ src/services/window.ts | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index a4e42de50..a6a645485 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -412,6 +412,14 @@ body.layout-horizontal { --native-titlebar-darwin-y-offset: 14 !important; } +body.background-effects, +body.background-effects #root-widget { + background: transparent !important; + --launcher-pane-background-color: transparent; + --tab-background-color: transparent; + --active-tab-background-color: transparent; +} + /* Matches when the left pane is collapsed */ :has(#left-pane.hidden-int) { --center-pane-border-radius: 0; diff --git a/src/services/window.ts b/src/services/window.ts index 3df960f9c..a7cf1ff5a 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -133,7 +133,7 @@ function getWindowExtraOpts() { // Window effects (Mica) // TODO: Apply only on Windows and allow the user to choose whether to activate it or not. - extraOpts.backgroundMaterial = "mica"; + extraOpts.backgroundMaterial = "tabbed"; return extraOpts; } From d35da7250591070589bc2cd3f157ecd9deefd587 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 01:13:39 +0200 Subject: [PATCH 04/22] style(next): apply tint for mica --- src/public/stylesheets/theme-next.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index a6a645485..f7cf991d8 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -415,9 +415,13 @@ body.layout-horizontal { body.background-effects, body.background-effects #root-widget { background: transparent !important; - --launcher-pane-background-color: transparent; + --launcher-pane-background-color: rgba(255, 255, 255, 0.055); --tab-background-color: transparent; - --active-tab-background-color: transparent; + --active-tab-background-color: var(--launcher-pane-background-color); +} + +body.background-effects #launcher-pane .launcher-button { + background-color: transparent; } /* Matches when the left pane is collapsed */ From 3ceba62dbe8aba7d129cf8290cde3db1f8a04ebf Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 01:17:17 +0200 Subject: [PATCH 05/22] style(next): fix gutter background color in mica --- src/public/app/layouts/desktop_layout.js | 1 + src/public/stylesheets/theme-next.css | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 8d0a667a1..ab8a6d452 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -124,6 +124,7 @@ export default class DesktopLayout { .optChild(launcherPaneIsHorizontal, launcherPane) .child(new FlexContainer('row') .css("flex-grow", "1") + .id("horizontal-main-container") .optChild(!launcherPaneIsHorizontal, launcherPane) .child(new LeftPaneContainer() .optChild(!launcherPaneIsHorizontal, new QuickSearchWidget()) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index f7cf991d8..58bf0bf19 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -424,6 +424,10 @@ body.background-effects #launcher-pane .launcher-button { background-color: transparent; } +body.background-effects #horizontal-main-container { + background-color: var(--root-background); +} + /* Matches when the left pane is collapsed */ :has(#left-pane.hidden-int) { --center-pane-border-radius: 0; From b2430419667464227ba46d08b7ef719faa6a36aa Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:01:27 +0200 Subject: [PATCH 06/22] style(next): fix tab bottom border on mica --- src/public/stylesheets/theme-next.css | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 58bf0bf19..53f9e1d8f 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -824,16 +824,37 @@ div.quick-search .search-button.show { position: relative; } -body.layout-horizontal .tab-row-container:after { +/* #region Apply a border to the tab bar that avoids the current tab but also allows a transparent active tab. */ +body.layout-horizontal .tab-row-widget, +body.layout-horizontal .tab-row-widget-container, +body.layout-horizontal .tab-row-container .note-tab[active] { + overflow: visible !important; +} + +body.layout-horizontal .tab-row-container .note-tab[active]:before { content: ""; position: absolute; bottom: 0; - left: 0; - right: 0; + left: -100vw; + top: var(--tab-height); + right: calc(100% - 1px); height: 1px; border-bottom: 1px solid var(--launcher-pane-horizontal-border-color); } +body.layout-horizontal .tab-row-container .note-tab[active]:after { + content: ""; + position: absolute; + bottom: 0; + left: 100%; + top: var(--tab-height); + right: 0; + width: 100vw; + height: 1px; + border-bottom: 1px solid var(--launcher-pane-horizontal-border-color); +} +/* #endregion */ + body.layout-vertical.electron.platform-darwin .tab-row-container { border-bottom: 1px solid var(--subtle-border-color); } From 3fac2a1ef1ebf662e9cb653715146a462d25daeb Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:01:35 +0200 Subject: [PATCH 07/22] style(next): improve bottom border on mica --- src/public/stylesheets/theme-next.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 53f9e1d8f..9a00a5b27 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -412,12 +412,14 @@ body.layout-horizontal { --native-titlebar-darwin-y-offset: 14 !important; } +/* #region Mica */ body.background-effects, body.background-effects #root-widget { background: transparent !important; --launcher-pane-background-color: rgba(255, 255, 255, 0.055); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); + --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); } body.background-effects #launcher-pane .launcher-button { @@ -427,6 +429,7 @@ body.background-effects #launcher-pane .launcher-button { body.background-effects #horizontal-main-container { background-color: var(--root-background); } +/* #endregion */ /* Matches when the left pane is collapsed */ :has(#left-pane.hidden-int) { From ed98d0ce495a54f8ecf3654d89cdab6947abf6be Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:06:15 +0200 Subject: [PATCH 08/22] feat(mica): apply to vertical layout as well --- src/public/stylesheets/theme-next.css | 3 ++- src/services/window.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 9a00a5b27..2c23997c2 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -426,7 +426,8 @@ body.background-effects #launcher-pane .launcher-button { background-color: transparent; } -body.background-effects #horizontal-main-container { +body.layout-vertical #rest-pane, +body.layout-horizontal.background-effects #horizontal-main-container { background-color: var(--root-background); } /* #endregion */ diff --git a/src/services/window.ts b/src/services/window.ts index a7cf1ff5a..142ea3cd3 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -133,7 +133,8 @@ function getWindowExtraOpts() { // Window effects (Mica) // TODO: Apply only on Windows and allow the user to choose whether to activate it or not. - extraOpts.backgroundMaterial = "tabbed"; + const isHorizontalLayout = (optionService.getOption("layoutOrientation") === "horizontal"); + extraOpts.backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica"; return extraOpts; } From 47256e1718ec45a18db79b2bca0c2cf8fc52d9e9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:12:55 +0200 Subject: [PATCH 09/22] style(next): apply mica to tree on vertical layout --- src/public/stylesheets/theme-next.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 2c23997c2..611951cd7 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -422,12 +422,16 @@ body.background-effects #root-widget { --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); } +body.background-effects.layout-vertical { + --left-pane-background-color: transparent; +} + body.background-effects #launcher-pane .launcher-button { background-color: transparent; } -body.layout-vertical #rest-pane, -body.layout-horizontal.background-effects #horizontal-main-container { +body.background-effects.layout-vertical #rest-pane, +body.background-effects.layout-horizontal #horizontal-main-container { background-color: var(--root-background); } /* #endregion */ From c02462bf81691afc75d1a464244be36fda2a3a57 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:16:44 +0200 Subject: [PATCH 10/22] style(next): apply mica to tabs on vertical layout --- src/public/stylesheets/theme-next.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 611951cd7..c7aa567f8 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -430,7 +430,6 @@ body.background-effects #launcher-pane .launcher-button { background-color: transparent; } -body.background-effects.layout-vertical #rest-pane, body.background-effects.layout-horizontal #horizontal-main-container { background-color: var(--root-background); } From 6365682ae1ca07df50b3f220d26783ba72a3fa3f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:19:33 +0200 Subject: [PATCH 11/22] style(next): tweak horizontal layout mica intensity --- src/public/stylesheets/theme-next.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index c7aa567f8..c32abc2bd 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -416,7 +416,7 @@ body.layout-horizontal { body.background-effects, body.background-effects #root-widget { background: transparent !important; - --launcher-pane-background-color: rgba(255, 255, 255, 0.055); + --launcher-pane-background-color: rgba(255, 255, 255, 0.09); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); From ae23a2e73e5ae428de12ba3c9799f357955cb420 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:31:47 +0200 Subject: [PATCH 12/22] style(next): fix launcher pane mica for vertical layout --- src/public/stylesheets/theme-next.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index c32abc2bd..1bb66a364 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -413,17 +413,21 @@ body.layout-horizontal { } /* #region Mica */ -body.background-effects, -body.background-effects #root-widget { - background: transparent !important; +body.background-effects { --launcher-pane-background-color: rgba(255, 255, 255, 0.09); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); } +body.background-effects, +body.background-effects #root-widget { + background: transparent !important; +} + body.background-effects.layout-vertical { --left-pane-background-color: transparent; + --launcher-pane-background-color: rgba(255, 255, 255, 0.055); } body.background-effects #launcher-pane .launcher-button { From 3f104ca663cb98eb57cdfe6944b1f81d4a2229a7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:34:28 +0200 Subject: [PATCH 13/22] style(next): fix native buttons background for mica --- src/public/stylesheets/theme-next.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 1bb66a364..10f50c9b4 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -418,6 +418,7 @@ body.background-effects { --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); + --native-titlebar-background: #00000000; } body.background-effects, From 407448476bcbf181d5ec77925eed250cd36e24f7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 02:48:10 +0200 Subject: [PATCH 14/22] refactor(mica): remove background effects system --- src/public/stylesheets/theme-next.css | 17 +++++++---------- src/routes/index.ts | 1 - src/views/desktop.ejs | 3 +-- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 10f50c9b4..f9aa91101 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -413,7 +413,7 @@ body.layout-horizontal { } /* #region Mica */ -body.background-effects { +body.electron.platform-win32 { --launcher-pane-background-color: rgba(255, 255, 255, 0.09); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); @@ -421,21 +421,18 @@ body.background-effects { --native-titlebar-background: #00000000; } -body.background-effects, -body.background-effects #root-widget { - background: transparent !important; -} - -body.background-effects.layout-vertical { +body.electron.platform-win32.layout-vertical { --left-pane-background-color: transparent; --launcher-pane-background-color: rgba(255, 255, 255, 0.055); } -body.background-effects #launcher-pane .launcher-button { - background-color: transparent; +body.electron.platform-win32, +body.electron.platform-win32 #root-widget, +body.electron.platform-win32 #launcher-pane .launcher-button { + background: transparent !important; } -body.background-effects.layout-horizontal #horizontal-main-container { +body.electron.platform-win32.layout-horizontal #horizontal-main-container { background-color: var(--root-background); } /* #endregion */ diff --git a/src/routes/index.ts b/src/routes/index.ts index 5c8f39904..a37965b4c 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -37,7 +37,6 @@ function index(req: Request, res: Response) { platform: process.platform, isElectron, hasNativeTitleBar: (isElectron && options.nativeTitleBarVisible === "true"), - hasBackgroundEffects: true, // TODO: Replace with option mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 64c851b1b..29afdcfd3 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -6,7 +6,7 @@ TriliumNext Notes - + From 57d2b0ebf59a5c15f107ffc52009fc8c76073347 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 03:15:39 +0200 Subject: [PATCH 15/22] fix(mica): apply correct mica when switching layouts --- src/public/app/desktop.js | 21 ++++++++++++++++----- src/services/window.ts | 2 +- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index bad74c698..5cb52f136 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -48,14 +48,17 @@ function initOnElectron() { const electron = utils.dynamicRequire('electron'); electron.ipcRenderer.on('globalShortcut', async (event, actionName) => appContext.triggerCommand(actionName)); + const electronRemote = utils.dynamicRequire("@electron/remote"); + const currentWindow = electronRemote.getCurrentWindow(); + + initTransparencyEffects(currentWindow); + if (options.get("nativeTitleBarVisible") !== "true") { - initTitleBarButtons(); - } + initTitleBarButtons(currentWindow); + } } -function initTitleBarButtons() { - const electronRemote = utils.dynamicRequire("@electron/remote"); - const currentWindow = electronRemote.getCurrentWindow(); +function initTitleBarButtons(currentWindow) { const style = window.getComputedStyle(document.body); if (window.glob.platform === "win32") { @@ -80,3 +83,11 @@ function initTitleBarButtons() { currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); } } + +function initTransparencyEffects(currentWindow) { + if (window.glob.platform === "win32") { + const isHorizontalLayout = (options.get("layoutOrientation") === "horizontal"); + const backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica"; + currentWindow.setBackgroundMaterial(backgroundMaterial); + } +} \ No newline at end of file diff --git a/src/services/window.ts b/src/services/window.ts index 142ea3cd3..1555d79ae 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -132,7 +132,7 @@ function getWindowExtraOpts() { } // Window effects (Mica) - // TODO: Apply only on Windows and allow the user to choose whether to activate it or not. + // TODO: Deduplicate with src/public/app/desktop.js#initTransparencyEffects const isHorizontalLayout = (optionService.getOption("layoutOrientation") === "horizontal"); extraOpts.backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica"; From 043f47dbd2e47350c907822a1dff632a3b7b7cf5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 09:37:09 +0200 Subject: [PATCH 16/22] style(next): fix mica leak in right sidebar gutter --- src/public/app/layouts/desktop_layout.js | 1 + src/public/stylesheets/theme-next.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index ab8a6d452..356e4fd02 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -142,6 +142,7 @@ export default class DesktopLayout { .child(new FlexContainer('row') .filling() .collapsible() + .id("vertical-main-container") .child(new FlexContainer('column') .filling() .collapsible() diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 2bf276cdd..3d500e521 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -432,7 +432,8 @@ body.electron.platform-win32 #launcher-pane .launcher-button { background: transparent !important; } -body.electron.platform-win32.layout-horizontal #horizontal-main-container { +body.electron.platform-win32.layout-horizontal #horizontal-main-container, +body.electron.platform-win32.layout-vertical #vertical-main-container { background-color: var(--root-background); } /* #endregion */ From 4faf22b9885c91a35e0bcadc24b08166bbf46fba Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 09:40:11 +0200 Subject: [PATCH 17/22] style(next): fix mica on light theme for horizontal layout --- src/public/stylesheets/theme-next.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 3d500e521..77897b6ec 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -417,10 +417,16 @@ body.electron.platform-win32 { --launcher-pane-background-color: rgba(255, 255, 255, 0.09); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); - --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); + --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); --native-titlebar-background: #00000000; } +@media (prefers-color-scheme: dark) { + body.electron.platform-win32 { + --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); + } +} + body.electron.platform-win32.layout-vertical { --left-pane-background-color: transparent; --launcher-pane-background-color: rgba(255, 255, 255, 0.055); From 43101620aff30748ba59893cf298ebc6c45d828b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 09:54:00 +0200 Subject: [PATCH 18/22] style(next): improve mica for light theme horzontal layout --- src/public/stylesheets/theme-next.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 77897b6ec..9231849f3 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -414,16 +414,17 @@ body.layout-horizontal { /* #region Mica */ body.electron.platform-win32 { - --launcher-pane-background-color: rgba(255, 255, 255, 0.09); + --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); + --launcher-pane-background-color: rgba(255, 255, 255, 0.7); --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); - --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); --native-titlebar-background: #00000000; } @media (prefers-color-scheme: dark) { body.electron.platform-win32 { --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); + --launcher-pane-background-color: rgba(255, 255, 255, 0.09); } } From 5d07c3049deb5d92f44b40faad2b519672af20cd Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 09:58:41 +0200 Subject: [PATCH 19/22] fix(mica): mica flicker when loading classic theme --- src/services/window.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/services/window.ts b/src/services/window.ts index 1555d79ae..f15958676 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -132,9 +132,9 @@ function getWindowExtraOpts() { } // Window effects (Mica) - // TODO: Deduplicate with src/public/app/desktop.js#initTransparencyEffects - const isHorizontalLayout = (optionService.getOption("layoutOrientation") === "horizontal"); - extraOpts.backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica"; + if (isWindows) { + extraOpts.backgroundMaterial = "auto"; + } return extraOpts; } From 5a5a3ab5080742ab92531a667108419abbb319ab Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 10:02:56 +0200 Subject: [PATCH 20/22] feat(mica): define material at CSS level --- src/public/app/desktop.js | 16 +++++++--------- src/public/stylesheets/theme-next.css | 2 ++ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index 5cb52f136..2621592e1 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -50,17 +50,16 @@ function initOnElectron() { const electronRemote = utils.dynamicRequire("@electron/remote"); const currentWindow = electronRemote.getCurrentWindow(); + const style = window.getComputedStyle(document.body); - initTransparencyEffects(currentWindow); + initTransparencyEffects(style, currentWindow); if (options.get("nativeTitleBarVisible") !== "true") { - initTitleBarButtons(currentWindow); + initTitleBarButtons(style, currentWindow); } } -function initTitleBarButtons(currentWindow) { - const style = window.getComputedStyle(document.body); - +function initTitleBarButtons(style, currentWindow) { if (window.glob.platform === "win32") { const applyWindowsOverlay = () => { const color = style.getPropertyValue("--native-titlebar-background"); @@ -84,10 +83,9 @@ function initTitleBarButtons(currentWindow) { } } -function initTransparencyEffects(currentWindow) { +function initTransparencyEffects(style, currentWindow) { if (window.glob.platform === "win32") { - const isHorizontalLayout = (options.get("layoutOrientation") === "horizontal"); - const backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica"; - currentWindow.setBackgroundMaterial(backgroundMaterial); + const material = style.getPropertyValue("--background-material"); + currentWindow.setBackgroundMaterial(material); } } \ No newline at end of file diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 9231849f3..7df983712 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -419,6 +419,7 @@ body.electron.platform-win32 { --tab-background-color: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --native-titlebar-background: #00000000; + --background-material: tabbed; } @media (prefers-color-scheme: dark) { @@ -431,6 +432,7 @@ body.electron.platform-win32 { body.electron.platform-win32.layout-vertical { --left-pane-background-color: transparent; --launcher-pane-background-color: rgba(255, 255, 255, 0.055); + --background-material: mica; } body.electron.platform-win32, From f5a21e47d52fbb81f00bbf8ec05d92589e932e2a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 10:05:51 +0200 Subject: [PATCH 21/22] style(next): remove new tab background on mica --- src/public/stylesheets/theme-next.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 7df983712..900ff6943 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -417,6 +417,7 @@ body.electron.platform-win32 { --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); --launcher-pane-background-color: rgba(255, 255, 255, 0.7); --tab-background-color: transparent; + --new-tab-button-background: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --native-titlebar-background: #00000000; --background-material: tabbed; From 8b96320e413923d9d4a4374b19f91f2a8dcaeaac Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 7 Dec 2024 10:13:22 +0200 Subject: [PATCH 22/22] style(next): improve left pane hover on mica vertical --- src/public/stylesheets/theme-next.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 900ff6943..26e58ebd2 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -420,7 +420,7 @@ body.electron.platform-win32 { --new-tab-button-background: transparent; --active-tab-background-color: var(--launcher-pane-background-color); --native-titlebar-background: #00000000; - --background-material: tabbed; + --background-material: tabbed; } @media (prefers-color-scheme: dark) { @@ -433,6 +433,7 @@ body.electron.platform-win32 { body.electron.platform-win32.layout-vertical { --left-pane-background-color: transparent; --launcher-pane-background-color: rgba(255, 255, 255, 0.055); + --left-pane-item-hover-background: rgba(127, 127, 127, 0.05); --background-material: mica; }