Added window transparency ans styles

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;

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;

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 {

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%),
+            background: radial-gradient(ellipse 92px 32px at bottom, rgba(118, 255, 53, 0.3) 0%, transparent 100%),
-                radial-gradient(ellipse at bottom, rgba(117, 255, 53, 0.135) 0%, transparent 90%);
+                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 {
+        .name {
-            position: absolute;
+            color: white;
-            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;
         }
     }
 

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}

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 {

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;