:lipstick: fix https://github.com/siyuan-note/siyuan/issues/6256

app/appearance/themes/daylight/theme.css

@@ -40,6 +40,7 @@
 
     /* 列表 */
     --b3-list-hover: #e9eaea;
+    --b3-list-icon-hover: rgba(33, 34, 36, .1);
 
     /* 菜单 */
     --b3-menu-background: #f8f9fa;

app/appearance/themes/midnight/theme.css

@@ -40,6 +40,7 @@
 
     /* 列表 */
     --b3-list-hover: #3f4041;
+    --b3-list-icon-hover: rgba(201, 209, 217, .1);
 
     /* 菜单 */
     --b3-menu-background: #27282a;

app/src/assets/scss/_list.scss

@@ -46,11 +46,15 @@
       border-left: 1px solid var(--b3-theme-background-light);
       left: -21px;
     }
+
+    .b3-list-item__text {
+      padding-left: 4px;
+    }
   }
 
   &-item {
     line-height: 28px;
-    padding: 1px 8px;
+    padding: 1px 4px;
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -103,13 +107,13 @@
       display: flex;
       align-items: center;
       height: 22px;
-      padding-right: 6px;
+      padding: 0 4px;
       color: var(--b3-theme-on-surface);
       transition: var(--b3-transition);
 
       &--hl:hover {
         color: var(--b3-theme-on-background);
-        background-color: var(--b3-theme-background-light);
+        background-color: var(--b3-list-icon-hover);
         border-radius: 2px;
       }
     }
@@ -130,12 +134,12 @@
       line-height: 22px;
       height: 22px;
       transition: var(--b3-transition);
-      padding: 0 3px;
+      padding: 0 4px;
       flex-shrink: 0;
 
       &:hover {
         color: var(--b3-theme-on-background);
-        background-color: var(--b3-theme-background-light);
+        background-color: var(--b3-list-icon-hover);
         border-radius: 2px;
       }
     }
@@ -231,7 +235,7 @@
 
       &:hover {
         color: var(--b3-theme-on-background);
-        background-color: var(--b3-theme-background-light);
+        background-color: var(--b3-list-icon-hover);
         border-radius: 2px;
       }
     }
@@ -241,7 +245,7 @@
 
       &:hover {
         color: var(--b3-theme-on-background);
-        background-color: var(--b3-theme-background-light);
+        background-color: var(--b3-list-icon-hover);
       }
     }
   }

app/src/config/keymap.ts

@@ -64,49 +64,49 @@ export const keymap = {
     <div class="fn__hr"></div>
     <div class="b3-list b3-list--border b3-list--background">
         <div class="b3-list-item toggle">
-            <span class="b3-list-item__toggle"><svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg></span>
+            <span class="b3-list-item__toggle b3-list-item__toggle--hl"><svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg></span>
             <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.general}</span>
         </div>
         <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.general, "general")}</div>
     </div>
     <div class="b3-list b3-list--border b3-list--background">
         <div class="b3-list-item toggle">
-            <span class="b3-list-item__toggle">
+            <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                 <svg class="b3-list-item__arrow b3-list-item__arrow--open"><use xlink:href="#iconRight"></use></svg>
             </span>
             <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.editor}</span>
         </div>
         <div>
             <label class="b3-list-item toggle">
-                <span class="b3-list-item__toggle">
+                <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.general}</span>
             </label>
             <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.general, "editor" + Constants.ZWSP + "general")}</div>
             <label class="b3-list-item toggle">
-                <span class="b3-list-item__toggle">
+                <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.insert}</span>
             </label>
             <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.insert, "editor" + Constants.ZWSP + "insert")}</div>
             <label class="b3-list-item toggle">
-                <span class="b3-list-item__toggle">
+                <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.headings}</span>
             </label>
             <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.heading, "editor" + Constants.ZWSP + "heading")}</div>
             <label class="b3-list-item toggle">
-                <span class="b3-list-item__toggle">
+                <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.list1}</span>
             </label>
             <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.list, "editor" + Constants.ZWSP + "list")}</div>
             <label class="b3-list-item toggle">
-                <span class="b3-list-item__toggle">
+                <span class="b3-list-item__toggle b3-list-item__toggle--hl">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.table}</span>

app/src/layout/dock/Files.ts

@@ -486,7 +486,7 @@ export class Files extends Model {
         } else {
             return `<ul class="b3-list b3-list--background" data-url="${item.id}" data-sort="${item.sort}">
 <li class="b3-list-item b3-list-item--hide-action" draggable="true" data-type="navigation-root" data-path="/">
-    <span class="b3-list-item__toggle">
+    <span class="b3-list-item__toggle b3-list-item__toggle--hl">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${emojiHTML}
@@ -844,7 +844,7 @@ export class Files extends Model {
 data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" draggable="true" data-count="${item.subFileCount}" 
 data-type="navigation-file" 
 class="b3-list-item b3-list-item--hide-action" data-path="${item.path}">
-    <span style="padding-left: ${(item.path.split("/").length - 1) * 16}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     <span class="b3-list-item__icon b3-tooltips b3-tooltips__n" aria-label="${window.siyuan.languages.changeIcon}">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>

app/src/mobile/util/MobileFiles.ts

@@ -722,7 +722,7 @@ export class MobileFiles extends Model {
         return `<li data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" draggable="true" 
 data-type="navigation-file" 
 class="b3-list-item" data-path="${item.path}">
-    <span style="padding-left: ${(item.path.split("/").length - 1) * 16}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     <span class="b3-list-item__icon">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>

app/src/util/Tree.ts

@@ -64,16 +64,17 @@ export class Tree {
             } else if (item.type === "tag") {
                 iconHTML = '<svg class="b3-list-item__graphic"><use xlink:href="#iconTags"></use></svg>';
             } else if (item.type === "backlink") {
-                titleTip= ` title="${item.hPath}"`;
+                titleTip = ` title="${item.hPath}"`;
                 iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.nodeType, item.subType)}"></use></svg>`;
             } else if (item.type === "outline") {
-                titleTip= ` title="${Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name))}"`;
+                titleTip = ` title="${Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name))}"`;
                 iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.nodeType, item.subType)}"></use></svg>`;
             }
             let countHTML = "";
             if (item.count) {
                 countHTML = `<span class="counter">${item.count}</span>`;
             }
+            const hasChild = (item.children && item.children.length > 0) || (item.blocks && item.blocks.length > 0)
             html += `<li class="b3-list-item" 
 ${(item.nodeType !== "NodeDocument" && item.type === "backlink") ? 'draggable="true"' : ""}
 ${item.id ? 'data-node-id="' + item.id + '"' : ""} 
@@ -81,8 +82,8 @@ data-treetype="${item.type}"
 data-type="${item.nodeType}" 
 data-subtype="${item.subType}" 
 ${item.label ? "data-label='" + item.label + "'" : ""}>
-    <span style="padding-left: ${item.depth * 16}px" class="b3-list-item__toggle">
-        <svg data-id="${encodeURIComponent(item.name + item.depth)}" class="b3-list-item__arrow ${((item.children && item.children.length > 0) || (item.blocks && item.blocks.length > 0)) ? "b3-list-item__arrow--open" : (item.type === "backlink" ? "" : "fn__hidden")}"><use xlink:href="#iconRight"></use></svg>
+    <span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${(item.type === "backlink" || hasChild) ? " b3-list-item__toggle--hl" : ""}">
+        <svg data-id="${encodeURIComponent(item.name + item.depth)}" class="b3-list-item__arrow ${hasChild ? "b3-list-item__arrow--open" : (item.type === "backlink" ? "" : "fn__hidden")}"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${iconHTML}
     <span class="b3-list-item__text"${titleTip}>${item.name}</span>
@@ -127,7 +128,7 @@ data-type="${item.type}"
 data-subtype="${item.subType}" 
 data-treetype="${type}"
 data-def-path="${item.defPath}">
-    <span style="padding-left: ${item.depth * 16}px" class="b3-list-item__toggle">
+    <span style="padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px" class="b3-list-item__toggle${item.children ? " b3-list-item__toggle--hl" : ""}">
         <svg data-id="${item.id}" class="b3-list-item__arrow${item.children ? "" : " fn__hidden"}"><use xlink:href="#iconRight"></use></svg>
     </span>
     ${iconHTML}

app/src/util/history.ts

@@ -58,14 +58,14 @@ const renderDoc = (element: HTMLElement, currentPage: number) => {
         }
         let logsHTML = "";
         response.data.histories.forEach((item: { items: { path: string, title: string }[], hCreated: string }, index: number) => {
-            logsHTML += `<li class="b3-list-item" data-type="toggle" style="padding-left: 0">
-    <span style="padding-left: 8px" class="b3-list-item__toggle"><svg class="b3-list-item__arrow${index === 0 ? " b3-list-item__arrow--open" : ""}${item.items.length > 0 ? "" : " fn__hidden"}"><use xlink:href="#iconRight"></use></svg></span>
-    <span class="b3-list-item__text">${item.hCreated}</span>
+            logsHTML += `<li class="b3-list-item" data-type="toggle">
+    <span class="b3-list-item__toggle b3-list-item__toggle--hl"><svg class="b3-list-item__arrow${index === 0 ? " b3-list-item__arrow--open" : ""}${item.items.length > 0 ? "" : " fn__hidden"}"><use xlink:href="#iconRight"></use></svg></span>
+    <span style="padding-left: 4px" class="b3-list-item__text">${item.hCreated}</span>
 </li>`;
             if (item.items.length > 0) {
                 logsHTML += `<ul class="${index === 0 ? "" : "fn__none"}">`;
                 item.items.forEach((docItem) => {
-                    logsHTML += `<li title="${escapeHtml(docItem.title)}" data-type="${typeElement.value === "1" ? "assets" : "doc"}" data-path="${docItem.path}" class="b3-list-item b3-list-item--hide-action" style="padding-left: 32px">
+                    logsHTML += `<li title="${escapeHtml(docItem.title)}" data-type="${typeElement.value === "1" ? "assets" : "doc"}" data-path="${docItem.path}" class="b3-list-item b3-list-item--hide-action" style="padding-left: 44px">
     <span class="b3-list-item__text">${escapeHtml(docItem.title)}</span>
     <span class="fn__space"></span>
     <span class="b3-list-item__action b3-tooltips b3-tooltips__w" data-type="rollback" aria-label="${window.siyuan.languages.rollback}">
@@ -179,14 +179,14 @@ const renderRmNotebook = (element: HTMLElement) => {
         }
         let logsHTML = "";
         response.data.histories.forEach((item: { items: { path: string, title: string }[], hCreated: string }, index: number) => {
-            logsHTML += `<li class="b3-list-item" style="padding-left: 0" data-type="toggle">
-    <span style="padding-left: 8px" class="b3-list-item__toggle"><svg class="b3-list-item__arrow${index === 0 ? " b3-list-item__arrow--open" : ""}${item.items.length > 0 ? "" : " fn__hidden"}"><use xlink:href="#iconRight"></use></svg></span>
-    <span class="b3-list-item__text">${item.hCreated}</span>
+            logsHTML += `<li class="b3-list-item" data-type="toggle">
+    <span class="b3-list-item__toggle b3-list-item__toggle"><svg class="b3-list-item__arrow${index === 0 ? " b3-list-item__arrow--open" : ""}${item.items.length > 0 ? "" : " fn__hidden"}"><use xlink:href="#iconRight"></use></svg></span>
+    <span style="padding-left: 4px" class="b3-list-item__text">${item.hCreated}</span>
 </li>`;
             if (item.items.length > 0) {
                 logsHTML += `<ul class="${index === 0 ? "" : "fn__none"}">`;
                 item.items.forEach((docItem) => {
-                    logsHTML += `<li data-type="notebook" data-path="${docItem.path}" class="b3-list-item" style="padding-left: 32px">
+                    logsHTML += `<li data-type="notebook" data-path="${docItem.path}" class="b3-list-item" style="padding-left: 44px">
     <span class="b3-list-item__text">${escapeHtml(docItem.title)}</span>
     <span class="fn__space"></span>
     <span class="b3-list-item__action" data-type="rollback">