From e012cc16e67fa9d4e23b591a9e2b563e777147e3 Mon Sep 17 00:00:00 2001
From: Jarek Ceborski <jaroslaw.ceborski@gmail.com>
Date: Fri, 12 Jul 2024 21:12:34 +0200
Subject: [PATCH] Added window transparency ans styles

---
 emain/emain.ts                        |  3 ++-
 frontend/app/app.less                 |  2 +-
 frontend/app/block/block.less         |  4 +--
 frontend/app/tab/tab.less             | 39 +++++++--------------------
 frontend/app/tab/tab.tsx              |  2 --
 frontend/app/tab/tabbar.less          |  1 -
 frontend/app/workspace/workspace.less |  2 --
 7 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/emain/emain.ts b/emain/emain.ts
index e92d2eccc..d1cbc4a6b 100644
--- a/emain/emain.ts
+++ b/emain/emain.ts
@@ -23,6 +23,7 @@ const WaveSrvReadySignalPidVarName = "WAVETERM_READY_SIGNAL_PID";
 const AuthKeyFile = "waveterm.authkey";
 const DevServerEndpoint = "http://127.0.0.1:8190";
 const ProdServerEndpoint = "http://127.0.0.1:1719";
+electron.nativeTheme.themeSource = "dark";
 
 type WaveBrowserWindow = Electron.BrowserWindow & { waveWindowId: string; readyPromise: Promise<void> };
 
@@ -257,7 +258,7 @@ function createBrowserWindow(clientId: string, waveWindow: WaveWindow): WaveBrow
         },
         show: false,
         autoHideMenuBar: true,
-        backgroundColor: "#000000",
+        vibrancy: "sidebar",
     });
     (bwin as any).waveWindowId = waveWindow.oid;
     let readyResolve: (value: void) => void;
diff --git a/frontend/app/app.less b/frontend/app/app.less
index 3f1439bbb..22f42cd3d 100644
--- a/frontend/app/app.less
+++ b/frontend/app/app.less
@@ -9,7 +9,7 @@ body {
     flex-direction: row;
     width: 100vw;
     height: 100vh;
-    background-color: var(--main-bg-color);
+    background-color: rgba(0, 0, 0, 0.2);
     color: var(--main-text-color);
     font: var(--base-font);
     overflow: hidden;
diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index b24be11f3..0c6758a54 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -59,7 +59,7 @@
         padding: 2px;
 
         .block-frame-default-inner {
-            background-color: rgba(255, 255, 255, 0.05);
+            background-color: rgba(0, 0, 0, 0.5);
             width: 100%;
             height: 100%;
             border-radius: 8px;
@@ -74,7 +74,7 @@
                 gap: 8px;
                 align-self: stretch;
                 font: var(--header-font);
-                background-color: rgba(255, 255, 255, 0.1);
+                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                 border-radius: 8px 8px 0 0;
 
                 .block-frame-preicon-button {
diff --git a/frontend/app/tab/tab.less b/frontend/app/tab/tab.less
index 77f9a2fad..66eb6a797 100644
--- a/frontend/app/tab/tab.less
+++ b/frontend/app/tab/tab.less
@@ -4,7 +4,7 @@
 .tab {
     position: absolute;
     width: 130px;
-    height: 100%;
+    height: calc(100% - 1px);
     padding: 6px 3px 0px;
     box-sizing: border-box;
     font-weight: bold;
@@ -16,7 +16,7 @@
         height: 100%;
         white-space: nowrap;
         border-radius: 6px;
-        background: rgba(35, 35, 35, 0.8);
+        background: rgba(255, 255, 255, 0.05);
     }
 
     &.animate {
@@ -26,36 +26,17 @@
     }
 
     &.active {
-        .base-bg {
-            background: rgba(0, 0, 0, 0.6);
-            position: absolute;
-            top: 6px;
-            left: 3px;
-            right: 3px;
-            bottom: 6px;
-        }
-
         .tab-inner {
-            background: radial-gradient(ellipse at top, rgba(118, 255, 53, 0.1) 0%, transparent 120%),
-                radial-gradient(ellipse at bottom, rgba(117, 255, 53, 0.135) 0%, transparent 90%);
+            background: radial-gradient(ellipse 92px 32px at bottom, rgba(118, 255, 53, 0.3) 0%, transparent 100%),
+                rgba(255, 255, 255, 0.1);
+            box-shadow:
+                inset 0 1px 0 0 hsla(0, 0%, 100%, 0.05),
+                0 0 0 0.5px hsla(0, 0%, 100%, 0.35),
+                inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
         }
 
-        .mask {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(
-                to bottom,
-                rgb(57, 56, 56) 25%,
-                rgba(255, 255, 255, 0.201) 90%,
-                rgba(255, 255, 255, 0.215) 100%
-            );
-            opacity: 0.95;
-            border-radius: 5px;
-            z-index: 2;
-            pointer-events: none;
+        .name {
+            color: white;
         }
     }
 
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 2224b3756..9fe76862f 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -127,7 +127,6 @@ const Tab = React.memo(
                     onContextMenu={handleContextMenu}
                     data-tab-id={id}
                 >
-                    {active && <div className="base-bg" />}
                     <div className="tab-inner">
                         <div
                             ref={editableRef}
@@ -140,7 +139,6 @@ const Tab = React.memo(
                         >
                             {tabData?.name}
                         </div>
-                        {active && <div className="mask" />}
                         <Button
                             className="secondary ghost close"
                             onClick={onClose}
diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less
index 797c121d7..7e4f359f7 100644
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@@ -29,7 +29,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--main-bg-color);
         opacity: 0.5;
 
         &:hover {
diff --git a/frontend/app/workspace/workspace.less b/frontend/app/workspace/workspace.less
index 4c4d89fc6..8d77dcca5 100644
--- a/frontend/app/workspace/workspace.less
+++ b/frontend/app/workspace/workspace.less
@@ -20,8 +20,6 @@
         flex-direction: column;
         width: 50px;
         overflow: hidden;
-        background-color: var(--panel-bg-color);
-        border-left: 1px solid var(--border-color);
 
         .widget {
             display: flex;