add macos vibrancy

dist/styles.css

@@ -45,9 +45,6 @@ html, body {
     overflow: hidden;
     margin: 0;
 }
-body {
-    background-color: var(--neutralLighterAlt);
-}
 #root {
     height: 100%;
 }
@@ -263,7 +260,7 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
 
 .settings-container {
     position: fixed;
-    z-index: 5;
+    z-index: 7;
     left: 0;
     top: 0;
     width: 100%;
@@ -295,7 +292,7 @@ div[role="tabpanel"] {
     width: 100%;
     height: 100%;
     background-color: #fffa;
-    z-index: 6;
+    z-index: 8;
 }
 .settings .loading .ms-Spinner {
     margin-top: 180px;
@@ -346,16 +343,18 @@ img.favicon {
 }
 
 .main {
-    height: calc(100% - 32px);
-    overflow-y: scroll;
+    margin-top: -32px;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--neutralLighterAlt);
 }
 .main::before {
     content: "";
     display: block;
     position: sticky;
-    top: 0;
+    top: 32px;
     left: 0;
-    width: 100%;
+    width: calc(100% - 16px);
     height: 32px;
     margin-bottom: -32px;
     background: linear-gradient(var(--neutralLighterAlt), #faf9f800);
@@ -390,10 +389,15 @@ img.favicon {
     }
     .menu-container {
         width: 280px;
+        background: none;
+        backdrop-filter: none;
     }
     .menu-container .menu {
         background-color: var(--neutralLight);
     }
+    body.darwin .menu-container .menu {
+        background: none;
+    }
     .menu-container .menu::after {
         content: "";
         display: block;
@@ -564,6 +568,9 @@ img.favicon {
     flex-wrap: wrap;
     justify-content: space-around;
     padding: 12px;
+    height: calc(100% - 56px);
+    overflow: hidden scroll;
+    margin-top: 32px;
 }
 .cards-feed-container > div.load-more-wrapper, .flex-fix {
     text-align: center;

src/electron.ts

@@ -29,7 +29,8 @@ function createWindow() {
     // Create the browser window.
     mainWindow = new BrowserWindow({
         title: "Fluent Reader",
-        backgroundColor: nativeTheme.shouldUseDarkColors ? "#282828" : "#faf9f8",
+        backgroundColor: process.platform === "darwin" ? "#00000000" : (nativeTheme.shouldUseDarkColors ? "#282828" : "#faf9f8"),
+        vibrancy: "sidebar",
         x: mainWindowState.x,
         y: mainWindowState.y,
         width: mainWindowState.width,
@@ -55,7 +56,7 @@ function createWindow() {
     mainWindow.loadFile((app.isPackaged ? "dist/" : "") + "index.html")
 }
 
-if (process.platform === 'darwin') {
+if (process.platform === "darwin") {
     const template = [
         {
             label: "Application",

src/scripts/models/app.ts

@@ -199,6 +199,7 @@ export function initIntl(): AppThunk<Promise<void>> {
 
 export function initApp(): AppThunk {
     return (dispatch) => {
+        document.body.classList.add(process.platform)
         dispatch(initIntl()).then(() =>
             dispatch(initSources())
         ).then(() =>