CSS 分享:自动隐藏式十字花左侧边栏

【CSS分享】自动隐藏左侧边栏ribbon,当鼠标移至左侧位置才显示 继续讨论:

对原贴 #12#20 代码经验的总结。

效果,点击展开

20231202_162124

宽度:

imageimage

普通宽度 CSS 代码
.workspace-ribbon.mod-left {
  overflow: visible;
  position: fixed;
  /*左侧栏位置*/
  left: -44px;
  bottom: 21px;
}
.workspace-ribbon.mod-left::before /*左侧栏按钮背景*/ {margin-left: 40px; background-color: var(--background-primary);}
.sidebar-toggle-button.mod-left {margin-left: 42px; /*复位*/}

.side-dock-settings, .side-dock-actions {
  position: fixed;
  background-color: var(--background-primary); /*背景颜色*/
  border-right: var(--size-2-1) solid var(--background-primary); /*边框粗细颜色等*/
  border-top-right-radius: var(--radius-m); /*右上边框弧度*/
}
.side-dock-settings /*设置区位置*/ {left: 0; bottom: 40px;}
.side-dock-actions /*命令区*/ {
  display: flex;
  flex-direction: row;
  gap: var(--size-2-1); /*各按钮间距*/
  /*位置*/
  left: 40px;
  bottom: 0;
}
/*按钮与容器边距*/
.side-dock-settings .side-dock-ribbon-action {margin: 0 4px;} /*与左侧栏按钮宽度对齐*/
.side-dock-actions .side-dock-ribbon-action {margin: 7px 0 8px;} /*与左侧栏按钮顶边对齐*/

/*平时隐藏,悬停显示*/
:is(.status-bar, .workspace-ribbon.mod-left, .side-dock-settings, .side-dock-actions):not(:hover) {opacity: 0; transition: var(--anim-duration-fast);}
:is(.status-bar, .workspace-ribbon.mod-left, .side-dock-settings, .side-dock-actions):hover {transition: var(--anim-duration-fast) var(--anim-duration-superfast);}

/*按钮阴影*/
:is(.side-dock-settings, .side-dock-actions) .clickable-icon:hover {background-color: transparent;}

如需交换设置区、命令区位置,将第 17-28 行所有 .side-dock-settings.side-dock-actions 交换位置(记得也交换注释的位置,以免以后搞不清楚)。

如需将横栏按钮排列顺序反向,将 flex-direction: row 改为 flex-direction: row-reverse

迷你宽度 CSS 代码
.workspace-ribbon.mod-left {
  overflow: visible;
  position: fixed;
  /*左侧栏位置*/
  left: -44px;
  bottom: 21px;
}
.workspace-ribbon.mod-left::before /*左侧栏按钮背景*/ {margin-top: 9px; margin-left: 31px; background-color: var(--background-primary);}
.sidebar-toggle-button.mod-left {margin-top: 3px; margin-left: 37px; /*复位*/}

.side-dock-settings, .side-dock-actions {
  position: fixed;
  background-color: var(--background-primary); /*背景颜色*/
  border-top-right-radius: var(--radius-m); /*右上边框弧度*/
}
.side-dock-settings {
  left: 0; bottom: 32px; /*设置区位置*/
  padding: 0 1px 4px 0; /*与左侧栏按钮宽度对齐*/
}
.side-dock-actions {
  display: flex;
  flex-direction: row;
  gap: 0; /*各按钮间距*/
  left: 30px; bottom: 0; /*命令区位置*/
  padding: 1px 0 5px; /*与左侧栏按钮顶边对齐*/
  border-right: 1px solid var(--background-primary); /*边框粗细颜色等*/
}

/*平时隐藏,悬停显示*/
:is(.status-bar, .workspace-ribbon.mod-left, .side-dock-settings, .side-dock-actions):not(:hover) {opacity: 0; transition: var(--anim-duration-fast);}
:is(.status-bar, .workspace-ribbon.mod-left, .side-dock-settings, .side-dock-actions):hover {transition: var(--anim-duration-fast) var(--anim-duration-superfast);}

/*按钮阴影*/
:is(.side-dock-settings, .side-dock-actions) .clickable-icon:hover {background-color: transparent;}
5 个赞
如果不知道什么是添加 CSS

共 4 步。

  1. 找到 snippets 文件夹

  2. 新建文本文档,将复制的 CSS 代码粘贴,保存。

    如果已经是 .css 扩展名的文件,只需将这个文件放到 snippets 文件夹下,然后在 Ob 中刷新启用,偶尔可能需要重启一下 Ob。

  3. 将 .txt 扩展名重命名为 .css

  4. 在 Ob 外观设置中刷新、启用

想改就用记事本或 VSCode 打开对应 CSS 修改。在文件夹右键 CSS 文件,选择打开方式。

/* */ 包裹的是 CSS 注释语法,这段不作为程序运行。

折叠三角内的步骤足够大多数无压使用。疑难杂症,可依 CSS 入门点拨,掌握基础。

可以在鼠标离开后的消失加个时延,体验会更好些

1 个赞

第 32 行有设置 transition: var(--anim-duration-fast),只是有点快,不知道是不是你说的时延 :smile: 过渡动画、渐显渐隐我觉得特别晕就没加。

用的是 Ob 内置的属性,可以将 var( ) 中间改为下面的值,也可以将 var( ) 整个删掉直接写多少毫秒。

image

transition-delay 属性,正常时设一个值,hover时为0

感谢建议,我为触发左侧栏显示加了一个时延,这样如果鼠标只是不小心划过左下角,不会立刻触发显示左侧栏。

20231203_135808

1 个赞

旧帖存档,内容已合并至 #1

1 个赞

颜值提升好多,能不能将右上角的也一并移动到下面,这样操作逻辑比较顺手,不会一个在下面一个在上面
image

右下角有状态栏,暂时不考虑将右侧栏按钮移动到下面。

1 个赞

好的,没想到上次的还有后续,使用效果更好了

喜欢原来布局,隐藏不改变整体框架的

.workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed,
.workspace-ribbon.mod-left
{
    position: absolute;
    top:0px;
    left:-30px;
    height:95%;
    opacity:0;
    transition:all .3s ease-out .2s;
}
.workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed:hover,
.workspace-ribbon.mod-left:hover{
    opacity:1;
    left:0px;
    transition:all .3s ease-out .2s;
}
.side-dock-actions{
    /* 重叠 */
    margin-top:35px;
}

PixPin_2023-12-18_17-22-36

3 个赞

写出自己想要的就是最好的。我接受不了动画,有动画的 CSS 都搁 #1 引入的那个帖子里了。

我现在用hider插件将两个侧边栏的按钮隐藏了,然后用commander插件增加了两个侧边栏按钮。现在还有哥问题,如何将ribbon栏靠左边,因为会有个空缺
ef5723a588d709195bd41a869edb4f1
image

复位的两行删掉,移动命令区位置。

<删掉>
.workspace-ribbon.mod-left::before /*左侧栏按钮背景*/ {margin-top: 9px; margin-left: 31px; background-color: var(--background-primary);}
.sidebar-toggle-button.mod-left {margin-top: 3px; margin-left: 37px; /*复位*/}
</删掉>

<改为 left: 0>
left: 30px; bottom: 0; /*命令区位置*/

感谢,效果很好。