💄 https://github.com/siyuan-note/siyuan/issues/6197

app/appearance/themes/daylight/theme.css

@@ -26,6 +26,11 @@
     --b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
     --b3-font-family-math: KaTeX_Math;
 
+    /* 顶部工具栏 */
+    --b3-toolbar-background: #292a2d;
+    --b3-toolbar-blur-background: #3f4041;
+    --b3-toolbar-color: #9aa0a6;
+
     /* 线条 */
     --b3-border-color: rgba(0, 0, 0, .06);
 

app/appearance/themes/midnight/theme.css

@@ -26,8 +26,13 @@
     --b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
     --b3-font-family-math: KaTeX_Math;
 
+    /* 顶部工具栏 */
+    --b3-toolbar-background: #292a2d;
+    --b3-toolbar-blur-background: #3f4041;
+    --b3-toolbar-color: #9aa0a6;
+
     /* 线条 */
-    --b3-border-color: rgba(230, 230, 230, .06);
+    --b3-border-color: #0e0f10;
 
     /* 滚动条 */
     --b3-scroll-color: rgba(230, 230, 230, .2);

app/src/assets/scss/_block.scss

@@ -95,10 +95,6 @@
     height: 30px;
     flex-shrink: 0;
 
-    &--active {
-      background-color: var(--b3-list-hover);
-    }
-
     &--border {
       background-color: var(--b3-theme-surface);
     }

app/src/assets/scss/_layout.scss

@@ -1,7 +1,7 @@
 .layout {
   &__wnd--active {
     .layout-tab-bar .item--focus {
-      box-shadow: inset 0 2px 0 0 var(--b3-theme-background-light) !important;
+      box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary) !important;
 
       & > .item__text {
         color: var(--b3-theme-on-background);
@@ -9,6 +9,17 @@
     }
   }
 
+  &__tab--active {
+    .b3-list--background .b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
+      background-color: var(--b3-theme-primary-lightest);
+    }
+
+    .graph__svg,
+    .inbox__list {
+      background-color: var(--b3-theme-background);
+    }
+  }
+
   &__resize {
     cursor: row-resize;
     margin: -3px 0;
@@ -130,7 +141,6 @@
         &:hover:not(.item--focus):not(.item--readonly) {
           background-color: var(--b3-list-hover);
           box-shadow: none;
-          border-radius: 4px 4px 0 0;
 
           .item__text::after {
             background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-list-hover));
@@ -160,7 +170,6 @@
         &--focus {
           background-color: var(--b3-theme-background);
           box-shadow: none !important;
-          border-radius: 4px 4px 0 0;
 
           .item__text::after {
             background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-theme-background));

app/src/assets/scss/_list.scss

@@ -8,6 +8,7 @@
     &:hover:not(.b3-list-item--focus),
     &--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
       background-color: var(--b3-list-hover);
+      border-radius: 4px;
     }
   }
 

app/src/assets/scss/_protyle.scss

@@ -168,7 +168,7 @@
     padding: 4px;
     line-height: 16px;
     height: 16px;
-    border-radius: 2px;
+    border-radius: 4px;
     margin: 3px 0;
     color: var(--b3-theme-on-surface);
     max-width: 70%;

app/src/assets/scss/_reset.scss

@@ -19,6 +19,10 @@ body {
   max-height: 100%;
   overflow: hidden;
 
+  &.body--blur .toolbar {
+    background: var(--b3-toolbar-blur-background);
+  }
+
   &.body--win32 {
     -webkit-font-smoothing: auto;
 
@@ -26,10 +30,6 @@ body {
       padding-left: 0;
     }
 
-    &.body--blur {
-      border-top-color: var(--b3-theme-surface);
-    }
-
     .fullscreen {
       & > .protyle-breadcrumb,
       & > .block__icons {

app/src/assets/scss/_scroll.scss

@@ -1,6 +1,6 @@
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
-  height: 10px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-corner {
@@ -10,10 +10,10 @@
 ::-webkit-scrollbar-thumb {
   box-sizing: content-box;
   border: 3px solid transparent;
-  border-radius: 1024px;
+  border-radius: 4px;
-  box-shadow: inset 0 0 6px 6px var(--b3-scroll-color);
+  box-shadow: inset 0 0 4px 4px var(--b3-scroll-color);
 
   &:hover {
-    border-width: 1.5px;
+    border-width: 1px;
   }
 }

app/src/assets/scss/base.scss

@@ -159,11 +159,12 @@ progressLoading: 400
 }
 
 .toolbar {
-  background-color: #292a2d;
+  background-color: var(--b3-toolbar-background);
   box-sizing: border-box;
   height: 42px;
   line-height: 22px;
   padding-left: 84px;
+  box-shadow: inset 0px -1px 1px 0px var(--b3-border-color);
 
   &--browser {
     padding-left: 0;
@@ -183,7 +184,7 @@ progressLoading: 400
   #drag {
     -webkit-app-region: drag;
     font-size: 14px;
-    color: #9aa0a6;
+    color: var(--b3-toolbar-color);
     user-select: none;
     text-align: center;
     white-space: nowrap;
@@ -193,7 +194,7 @@ progressLoading: 400
   &__item {
     flex-shrink: 0;
     cursor: pointer;
-    color: #9aa0a6;
+    color: var(--b3-toolbar-color);
     padding: 12px;
     box-sizing: border-box;
     transition: var(--b3-transition);

app/src/layout/dock/Backlink.ts

@@ -233,7 +233,7 @@ export class Backlink extends Model {
             if (this.type === "local") {
                 setPanelFocus(this.element.parentElement.parentElement);
             } else {
-                setPanelFocus(this.element.firstElementChild);
+                setPanelFocus(this.element);
             }
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
@@ -298,7 +298,7 @@ export class Backlink extends Model {
         this.searchBacklinks(true);
 
         if (this.type === "pin") {
-            setPanelFocus(this.element.firstElementChild);
+            setPanelFocus(this.element);
         }
     }
 

app/src/layout/dock/Bookmark.ts

@@ -178,7 +178,7 @@ export class Bookmark extends Model {
             this.tree.expandAll();
         });
         this.element.addEventListener("click", (event) => {
-            setPanelFocus(this.element.firstElementChild);
+            setPanelFocus(this.element);
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
                 if (target.classList.contains("block__icon")) {
@@ -197,7 +197,7 @@ export class Bookmark extends Model {
         });
 
         this.update();
-        setPanelFocus(this.element.firstElementChild);
+        setPanelFocus(this.element);
     }
 
     public update() {

app/src/layout/dock/Files.ts

@@ -93,7 +93,7 @@ export class Files extends Model {
         this.element = this.actionsElement.nextElementSibling as HTMLElement;
         this.closeElement = options.tab.panelElement.lastElementChild as HTMLElement;
         this.closeElement.addEventListener("click", (event) => {
-            setPanelFocus(this.actionsElement);
+            setPanelFocus(this.element.parentElement);
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.closeElement)) {
                 const type = target.getAttribute("data-type");
@@ -180,7 +180,7 @@ export class Files extends Model {
                 }
                 target = target.parentElement;
             }
-            setPanelFocus(this.actionsElement);
+            setPanelFocus(this.element.parentElement);
         });
         let clickTimeout: number;
         this.element.addEventListener("click", (event) => {
@@ -245,7 +245,7 @@ export class Files extends Model {
                                     }
                                 } else if (target.getAttribute("data-type") === "navigation-root") {
                                     this.getLeaf(target, notebookId);
-                                    setPanelFocus(this.actionsElement);
+                                    setPanelFocus(this.element.parentElement);
                                 }
                             }, Constants.TIMEOUT_DBLCLICK);
                         } else if (event.detail === 2) {
@@ -262,7 +262,7 @@ export class Files extends Model {
                 }
             }
             if (needFocus) {
-                setPanelFocus(this.actionsElement);
+                setPanelFocus(this.element.parentElement);
             }
         });
         // b3-list-item--focus 样式会遮挡拖拽排序的上下线条
@@ -467,7 +467,7 @@ export class Files extends Model {
             newElement.classList.remove("dragover", "dragover__bottom", "dragover__top");
         });
         this.init();
-        setPanelFocus(this.actionsElement);
+        setPanelFocus(this.element.parentElement);
     }
 
     private genNotebook(item: INotebook) {

app/src/layout/dock/Graph.ts

@@ -293,7 +293,7 @@ export class Graph extends Model {
             if (this.type === "local") {
                 setPanelFocus(this.element.parentElement.parentElement);
             } else {
-                setPanelFocus(this.element.firstElementChild);
+                setPanelFocus(this.element);
             }
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
@@ -364,7 +364,7 @@ export class Graph extends Model {
         });
         this.searchGraph(options.type !== "global");
         if (this.type !== "local") {
-            setPanelFocus(this.element.firstElementChild);
+            setPanelFocus(this.element);
         }
     }
 

app/src/layout/dock/Inbox.ts

@@ -54,7 +54,7 @@ export class Inbox extends Model {
         const detailsElement = this.element.querySelector(".inbox__details");
         const selectAllElement = this.element.querySelector(".block__icons input") as HTMLInputElement;
         this.element.addEventListener("click", (event: MouseEvent) => {
-                setPanelFocus(this.element.firstElementChild);
+                setPanelFocus(this.element);
                 let target = event.target as HTMLElement;
                 while (target && !target.isEqualNode(this.element)) {
                     const typeElement = hasClosestByAttribute(target, "data-type", null);
@@ -160,7 +160,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             }
         );
         this.update();
-        setPanelFocus(this.element.firstElementChild);
+        setPanelFocus(this.element);
     }
 
     private updateAction() {

app/src/layout/dock/Outline.ts

@@ -121,7 +121,7 @@ export class Outline extends Model {
             if (this.type === "local") {
                 setPanelFocus(options.tab.panelElement.parentElement.parentElement);
             } else {
-                setPanelFocus(options.tab.panelElement.firstElementChild);
+                setPanelFocus(options.tab.panelElement);
             }
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(options.tab.panelElement)) {
@@ -163,7 +163,7 @@ export class Outline extends Model {
         });
 
         if (this.type === "pin") {
-            setPanelFocus(options.tab.panelElement.firstElementChild);
+            setPanelFocus(options.tab.panelElement);
         }
     }
 

app/src/layout/dock/Tag.ts

@@ -130,7 +130,7 @@ export class Tag extends Model {
             this.tree.expandAll();
         });
         this.element.addEventListener("click", (event: MouseEvent) => {
-            setPanelFocus(this.element.firstElementChild);
+            setPanelFocus(this.element);
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
                 if (target.classList.contains("block__icon")) {
@@ -202,7 +202,7 @@ export class Tag extends Model {
             }
         });
         this.update();
-        setPanelFocus(this.element.firstElementChild);
+        setPanelFocus(this.element);
     }
 
     private update() {

app/src/layout/dock/index.ts

@@ -92,7 +92,7 @@ export class Dock {
     public toggleModel(type: TDockType, show = false, close = false) {
         const target = this.element.querySelector(`[data-type="${type}"]`) as HTMLElement;
         if (show && target.classList.contains("dock__item--active")) {
-            target.classList.remove("dock__item--active");
+            target.classList.remove("dock__item--active", "dock__item--activefocus");
         }
         const index = parseInt(target.getAttribute("data-index"));
         const wnd = this.layout.children[index] as Wnd;
@@ -101,8 +101,8 @@ export class Dock {
                 let needFocus = false;
                 Array.from(wnd.element.querySelector(".layout-tab-container").children).find(item => {
                     if (item.getAttribute("data-id") === target.getAttribute("data-id")) {
-                        if (!item.firstElementChild.classList.contains("block__icons--active")) {
+                        if (!item.classList.contains("layout__tab--active")) {
-                            setPanelFocus(item.firstElementChild);
+                            setPanelFocus(item);
                             needFocus = true;
                         }
                         return true;
@@ -113,7 +113,7 @@ export class Dock {
                 }
             }
 
-            target.classList.remove("dock__item--active");
+            target.classList.remove("dock__item--active", "dock__item--activefocus");
             // dock 隐藏
             if (this.element.querySelectorAll(".dock__item--active").length === 0) {
                 if (this.position === "Left" || this.position === "Right") {
@@ -128,9 +128,9 @@ export class Dock {
             }
         } else {
             this.element.querySelectorAll(`.dock__item--active[data-index="${index}"]`).forEach(item => {
-                item.classList.remove("dock__item--active");
+                item.classList.remove("dock__item--active", "dock__item--activefocus");
             });
-            target.classList.add("dock__item--active");
+            target.classList.add("dock__item--active", "dock__item--activefocus");
             if (!target.getAttribute("data-id")) {
                 let editor: Protyle;
                 const models = getAllModels();
@@ -226,7 +226,7 @@ export class Dock {
                 Array.from(wnd.element.querySelector(".layout-tab-container").children).forEach(item => {
                     if (item.getAttribute("data-id") === target.getAttribute("data-id")) {
                         item.classList.remove("fn__none");
-                        setPanelFocus(item.firstElementChild);
+                        setPanelFocus(item);
                     } else {
                         item.classList.add("fn__none");
                     }

app/src/layout/util.ts

@@ -28,11 +28,11 @@ import {pdfResize} from "../asset/renderAssets";
 import {Backlink} from "./dock/Backlink";
 
 export const setPanelFocus = (element: Element) => {
-    if (element.classList.contains("block__icons--active") || element.classList.contains("layout__wnd--active")) {
+    if (element.classList.contains("layout__tab--active") || element.classList.contains("layout__wnd--active")) {
         return;
     }
-    document.querySelectorAll(".block__icons--active").forEach(item => {
+    document.querySelectorAll(".layout__tab--active").forEach(item => {
-        item.classList.remove("block__icons--active");
+        item.classList.remove("layout__tab--active");
     });
     document.querySelectorAll(".dock__item--activefocus").forEach(item => {
         item.classList.remove("dock__item--activefocus");
@@ -40,10 +40,12 @@ export const setPanelFocus = (element: Element) => {
     document.querySelectorAll(".layout__wnd--active").forEach(item => {
         item.classList.remove("layout__wnd--active");
     });
-    if (element.classList.contains("block__icons")) {
+    if (element.getAttribute("data-type") === "wnd") {
-        element.classList.add("block__icons--active");
+        element.classList.add("layout__wnd--active");
+    } else {
+        element.classList.add("layout__tab--active");
         ["file", "inbox", "backlink", "tag", "bookmark", "graph", "globalGraph", "outline"].find(item => {
-            if (element.parentElement.classList.contains("sy__" + item)) {
+            if (element.classList.contains("sy__" + item)) {
                 document.querySelector(`.dock__item[data-type="${item}"]`).classList.add("dock__item--activefocus");
                 return true;
             }
@@ -55,8 +57,6 @@ export const setPanelFocus = (element: Element) => {
                 editElement.blur();
             }
         }
-    } else {
-        element.classList.add("layout__wnd--active");
     }
 };
 

app/src/protyle/index.ts

@@ -195,8 +195,8 @@ export class Protyle {
                         updatePanelByEditor(this.protyle, false);
                     } else {
                         // 悬浮层应移除其余面板高亮，否则按键会被面板监听到
-                        document.querySelectorAll(".block__icons--active").forEach(item => {
+                        document.querySelectorAll(".layout__tab--active").forEach(item => {
-                            item.classList.remove("block__icons--active");
+                            item.classList.remove("layout__tab--active");
                         });
                         document.querySelectorAll(".layout__wnd--active").forEach(item => {
                             item.classList.remove("layout__wnd--active");

app/src/util/globalShortcut.ts

@@ -573,7 +573,7 @@ export const globalShortcut = () => {
 
         // 面板折叠展开操作
         if (!event.repeat && (matchHotKey(window.siyuan.config.keymap.editor.general.collapse.custom, event) || matchHotKey(window.siyuan.config.keymap.editor.general.expand.custom, event))) {
-            let activePanelElement = document.querySelector(".block__icons--active");
+            let activePanelElement = document.querySelector(".layout__tab--active");
             if (!activePanelElement) {
                 Array.from(document.querySelectorAll(".layout__wnd--active .layout-tab-container > div")).forEach(item => {
                     if (!item.classList.contains("fn__none")) {
@@ -602,10 +602,10 @@ export const globalShortcut = () => {
         if (matchHotKey(window.siyuan.config.keymap.general.closeTab.custom, event) && !event.repeat) {
             event.preventDefault();
             event.stopPropagation();
-            let activeTabElement = document.querySelector(".block__icons--active");
+            let activeTabElement = document.querySelector(".layout__tab--active");
             if (activeTabElement && activeTabElement.getBoundingClientRect().width > 0) {
                 let type: TDockType;
-                Array.from(activeTabElement.parentElement.classList).find(item => {
+                Array.from(activeTabElement.classList).find(item => {
                     if (item.startsWith("sy__")) {
                         type = item.replace("sy__", "") as TDockType;
                         return true;
@@ -756,9 +756,9 @@ const editKeydown = (event: KeyboardEvent) => {
         }
         protyle = editor.editor.protyle;
     }
-    const activePanelElement = document.querySelector(".block__icons--active");
+    const activePanelElement = document.querySelector(".layout__tab--active");
     let isFileFocus = false;
-    if (activePanelElement && activePanelElement.parentElement.classList.contains("sy__file")) {
+    if (activePanelElement && activePanelElement.classList.contains("sy__file")) {
         isFileFocus = true;
     }
     let searchKey = "";
@@ -858,7 +858,7 @@ const fileTreeKeydown = (event: KeyboardEvent) => {
         dockFile.toggleModel("file", true);
         return;
     }
-    if (!files.element.previousElementSibling.classList.contains("block__icons--active")) {
+    if (!files.element.parentElement.classList.contains("layout__tab--active")) {
         return false;
     }
     let liElement = files.element.querySelector(".b3-list-item--focus");

app/src/util/onGetConfig.ts

@@ -15,7 +15,6 @@ import {fetchPost} from "./fetch";
 import {mountHelp, newDailyNote} from "./mount";
 import {MenuItem} from "../menus/Menu";
 import {initAssets, loadAssets, renderSnippet, setInlineStyle, setMode} from "./assets";
-import {goBack, goForward} from "./backForward";
 import {getOpenNotebookCount} from "./pathName";
 import {openFileById} from "../editor/util";
 import {focusByRange} from "../protyle/util/selection";
@@ -314,6 +313,9 @@ const initWindow = () => {
     /// #if !BROWSER
     const currentWindow = getCurrentWindow();
     currentWindow.on("focus", winOnFocus);
+    currentWindow.on("blur", () => {
+        document.body.classList.add("body--blur");
+    });
     ipcRenderer.on(Constants.SIYUAN_OPENURL, (event, url) => {
         if (!/^siyuan:\/\/blocks\/\d{14}-\w{7}/.test(url)) {
             return;
@@ -505,10 +507,6 @@ const initWindow = () => {
         maxBtnElement.style.display = "none";
     });
     currentWindow.on("leave-full-screen", toggleMaxRestoreButtons);
-
-    currentWindow.on("blur", () => {
-        document.body.classList.add("body--blur");
-    });
     const minBtnElement = document.getElementById("minWindow");
     const closeBtnElement = document.getElementById("closeWindow");
     minBtnElement.addEventListener("click", () => {