树状标签页

问题求助
,
15

哇，好久都没回应了，抱歉呀，各位；

尝试了论坛内一些办法，我最近半年的选择是 firefox + sidebery + userchrome.css 组合，达到了较为理想的效果；原来的 树状标签页 由于未知原因（忘了为啥了:joy:）没有继续使用。chrome/edge 也没有继续作为主力使用了（开源“迷信”以及没法使劲造），所以原来的烦恼也暂时一并抛在脑后了。
其中，主要缘起于这里：

效果以及usechrome.css，可能与论坛其他地方是重复内容，请有兴趣再展开

顶栏收缩；侧边栏是鼠标靠近展开，然后可以自动收起；保证最大的页面面积。

非最大化
非最大化1016×840 80.4 KB

最大化
最大化1920×1040 151 KB

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box{
  --uc-sidebar-width: 0px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}

#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{ overflow: hidden; color: var(--chrome-color, inherit) !important}

#sidebar{
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

#sidebar-box:hover > #sidebar{ min-width: var(--uc-sidebar-hover-width) !important; transition-delay: 0ms !important }

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: var(--toolbar-bgcolor) !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{ inset-inline: auto 0px !important; }
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{ margin-inline: 0px !important; border-left-style: solid !important; }



/* Source file https://github.com/mbnuqw/sidebery/discussions/406 */
/* Hide the tabs when Sidebery visible */
#main-window[titlepreface*="Sidebery"] #TabsToolbar-customization-target {
    height: 0 !important;
    overflow: hidden;
}

/* Make the application min-maximize-close buttons height match the address bar */
#main-window[titlepreface*="Sidebery"] #TabsToolbar .titlebar-buttonbox-container {
    height: 40px;
}

/* Push up the address bar */
#main-window[titlepreface*="Sidebery"] #nav-bar {
    margin-top: -41px;
}

/* Reduce width of address bar so app buttons have enought room to appear */
#main-window[titlepreface*="Sidebery"] #nav-bar-customization-target {
    max-width: calc(100vw - 230px);
}

仍然是有些小问题存在：

  1. 非最大化的情况下，侧边栏无法触发展开
  2. 非最大化的情况下，没有预留可以拖动窗口的地方
  3. Sidebery 自带的页面休眠好像效果并不好？（个人觉得不满意，一般组合 Auto Tab Discard 使用）

如果大家有其他更好的想法，欢迎大家继续讨论。

1 个赞