diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js index bad74c698..2621592e1 100644 --- a/src/public/app/desktop.js +++ b/src/public/app/desktop.js @@ -48,16 +48,18 @@ 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(); + const style = window.getComputedStyle(document.body); + + initTransparencyEffects(style, currentWindow); + if (options.get("nativeTitleBarVisible") !== "true") { - initTitleBarButtons(); - } + initTitleBarButtons(style, currentWindow); + } } -function initTitleBarButtons() { - const electronRemote = utils.dynamicRequire("@electron/remote"); - const currentWindow = electronRemote.getCurrentWindow(); - const style = window.getComputedStyle(document.body); - +function initTitleBarButtons(style, currentWindow) { if (window.glob.platform === "win32") { const applyWindowsOverlay = () => { const color = style.getPropertyValue("--native-titlebar-background"); @@ -80,3 +82,10 @@ function initTitleBarButtons() { currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset }); } } + +function initTransparencyEffects(style, currentWindow) { + if (window.glob.platform === "win32") { + const material = style.getPropertyValue("--background-material"); + currentWindow.setBackgroundMaterial(material); + } +} \ No newline at end of file diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 8d0a667a1..356e4fd02 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()) @@ -141,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 d2946b9be..26e58ebd2 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -412,6 +412,43 @@ body.layout-horizontal { --native-titlebar-darwin-y-offset: 14 !important; } +/* #region Mica */ +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; +} + +@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); + } +} + +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; +} + +body.electron.platform-win32, +body.electron.platform-win32 #root-widget, +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-vertical #vertical-main-container { + background-color: var(--root-background); +} +/* #endregion */ + /* Matches when the left pane is collapsed */ :has(#left-pane.hidden-int) { --center-pane-border-radius: 0; @@ -849,16 +886,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); } diff --git a/src/services/window.ts b/src/services/window.ts index 72a337d9a..f15958676 100644 --- a/src/services/window.ts +++ b/src/services/window.ts @@ -131,6 +131,11 @@ function getWindowExtraOpts() { } } + // Window effects (Mica) + if (isWindows) { + extraOpts.backgroundMaterial = "auto"; + } + return extraOpts; }