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

提前声明:本来非作者,是一位网友从Blue-topaz-examples示例库扒的代码

一、使用效果

  1. 平时自动隐藏左侧边ribbon

  2. 当鼠标移至左侧位置才显示

二、CSS代码

body.hide-titlebar-close-btn .file-tree-plugin-view .oz-nav-action-button {
  margin-left: 20px !important;
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content[data-mode='source'] .view-content .markdown-source-view:not(.is-live-preview)::before {
  left: 38px;
}

body.hide-titlebar-close-btn.is-hidden-frameless .titlebar-button.mod-logo {
  display: none;
}

body.hide-titlebar-close-btn.is-hidden-frameless .workspace-ribbon.mod-left .sidebar-toggle-button {
  padding-top: var(--size-4-2);
}

body .workspace-ribbon.mod-left:not(:hover)~.workspace-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container {
  margin-left: 30px;
  transition: all 350ms ease-in-out;
}

body .workspace-ribbon.mod-left:not(:hover):before,
body .workspace-ribbon.side-dock-ribbon.mod-left:not(:hover) {
  margin-left: -40px;
}

body .workspace-ribbon.side-dock-ribbon.mod-left .sidebar-toggle-button.mod-left,
body .workspace-ribbon.mod-left:before,
body .workspace-ribbon.side-dock-ribbon.mod-left,
body .workspace-ribbon.mod-left:hover~.workspace-split .workspace-tabs.mod-top .workspace-tab-header-container {
  transition: all 350ms ease-in-out;
}

body.hide-titlebar-close-btn .workspace-ribbon.side-dock-ribbon.mod-left .sidebar-toggle-button.mod-left {
  background: unset;
}


body:not(.background-settings-workplace-background-image) .workspace-tabs.mod-top {
  background: var(--background-secondary-alt);
}

body.hide-titlebar-close-btn .view-header {
  padding-left: 24px;
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content:is([data-mode="preview"], [data-mode="source"]) .view-header .view-actions>:is([aria-label^="该面板处于编辑视图中"], [aria-label^="Current view: editing"]) {
  left: 30px
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content[data-mode='preview'] .view-header .view-actions>:is([aria-label^="该面板处于阅读视图中"], [aria-label^="Current view: reading"]) {
  left: 30px;
}
3 个赞

Edit:
1、取消左侧栏按钮显图,保留阴影,如果你们需要的话 @挽歌 @Greyson
2、20 楼追加了另一种样式。


原代码小窗鼠标放到侧栏的位置不容易触发展开,必须放到按钮的位置,稍微有点儿不方便,小改了一下。

.sidebar-toggle-button.mod-left {
  justify-content: right; /*交互区对齐*/
  margin-left: -28px; /*左侧栏按钮位置*/
}
.sidebar-toggle-button.mod-left svg {opacity: 0; /*左侧栏按钮 SVG 不透明度*/}

.workspace-ribbon.side-dock-ribbon.mod-left:not(:hover)::before,
.workspace-ribbon.side-dock-ribbon.mod-left:not(:hover) {
  border-right-color: transparent;
  margin-left: -32px;
}
.workspace-ribbon.side-dock-ribbon.mod-left::before,
.workspace-ribbon.side-dock-ribbon.mod-left {transition: var(--anim-duration-moderate);}

只放上述几行代码即可。

效果展示:

20231127_002601


大佬,左上角还是有点小瑕疵,综合一下楼主的就极好了、

1 个赞

没按楼主那么放,主要是:

  1. 左侧栏按钮会占用一部分标签栏的空间,我希望空间尽可能大。
  2. 弹来弹去太晕了,我现在自用的侧栏是这样的:

来自 PlayerMiller 的备注:旧帖存档,内容已合并至 CSS 分享:自动隐藏式十字花左侧边栏

2 个赞

非常感谢您!这个css样式我找了很久,全网搜不到。今天有幸看到,谢谢。非常感谢您。

不客气,因为我自己有这个需求,分享出来是希望可以帮到有相同需求的人,节省大家搜寻的时间。很高兴能帮到你。

可以问一下,您这个录制gif的软件叫什么吗?

我是 uTools 会员,这是里面的录屏插件+调用 ffmpeg.exe 转 GIF,只是为了偷懒。如果你不是 uTools 会员其实没必要为了这个功能花钱。

配置思路分享给你:

  1. 任意显示键位软件,如 Keyviz
  2. 任意录屏软件,如 OBS Studio
  3. 任意视频转 GIF 网页,如 iLoveIMG

我也来推荐一个gif制作工具 ,licecap 小巧好用,才几兆。可以录屏生成gif。可以找绿色版,免安装。

你这个是怎么弄的,我也不喜欢弹来弹去

旧帖存档,内容已合并。

1 个赞

各位大佬谁能够将minimal主题的代码扣下来,将ribbon放置在左下角,感激不尽
image

請問有法折衷嗎? 左側欄還是會彈出來,只是鼠標必須放到按鈕位置xD

如果你是想自己改 CSS 综合我 12 楼的和楼主的,我可以给你大概讲讲这块的结构,可能是你遇到问题的原因。

image

在这个区域一共有 5 个元素。

  1. 左侧栏按钮①,它是透明背景的。
  2. 左侧栏②
  3. 左侧栏按钮①层级下的灰块③,它的位置基于左侧栏②,它的长宽可以自行设定,它的存在是为了填补标签栏④(灰色背景)和 Ob 窗口左边线之间距离(透明背景)。
  4. 标签栏④
  5. 主编辑区⑤

标签栏④和主编辑区⑤共同的宽度 + 左侧栏②宽度 = Ob窗口宽度。

我们的主要目标是增加主编辑区⑤的宽度。

为了达到主要目标,我们要移动左侧栏②的位置,让它移出窗口,从而减小占宽,这就是为什么这个值是负数 margin-left: -32px; /*左侧栏位置*/

但是,改变左侧栏②的位置,标签栏④的宽度也会变宽,如果不改变左侧栏按钮①的位置,按钮就会和标签重叠。

灰块③的情况更为复杂,因为它的存在是为了填补标签栏④(灰色背景)和 Ob 窗口左边线之间距离(透明背景),所以既可以调整位置又可以调整大小,还可以用别的样式方案代替它原本的作用。

像楼主的代码,好像只改变了左侧栏②,按钮和标签栏都好好的,

其实不光改变了左侧栏②的位置,并且单独调整了标签栏④与 Ob 窗口左边线之间的距离,又选中灰块③移开后出现空白的区域,加上和标签栏一致的背景。

body:not(.background-settings-workplace-background-image) .workspace-tabs.mod-top {
  background: var(--background-secondary-alt);
}

我将这个背景改为红色,演示如下:

20231110_120739

当楼主的代码鼠标悬停在左侧栏按钮①,左侧栏②整个恢复原来的位置,灰块③也恢复到原来位置,由于颜色相同,实现了平常和悬停时平滑的过渡。

1 个赞

请问这个插件是什么?
image

File Tree Alternative Plugin

:face_with_peeking_eye:谢谢!!!!!

不完全一样。效果展示:

image

CSS 代码,点击展开
.workspace-ribbon {
  padding-left: 44px; /*左侧栏按钮与命令区间距*/
  padding-block: 0; /*贴底边*/
}
.workspace-ribbon.mod-left .side-dock-ribbon-action {
  margin: 7px 0 8px; /*左侧栏按钮与底边间距|设置、命令区按钮间距|整体与底边间距*/
}

.workspace-ribbon.mod-left {
  overflow: visible;
  position: absolute;
  display: flex;
  flex-direction: row;
  z-index: 17;
  bottom: 0; /*整体位置*/
  gap: 0; /*设置区与命令区间距*/
}
.side-dock-actions, .side-dock-settings {
  position: relative;
  display: flex;
  flex-direction: row;
  background: var(--background-secondary); /*设置、命令区背景颜色*/
  gap: var(--size-4-1); /*设置、命令区按钮间距*/
}

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

.side-dock-settings {
  border-right: var(--size-2-1) solid var(--background-modifier-border); /*右边框粗细颜色等*/
  border-top-right-radius: var(--radius-m); /*右边框弧度*/
}

/*设置、命令区按钮阴影*/
:is(.side-dock-settings, .side-dock-actions) .clickable-icon:hover {background-color: transparent;}
3 个赞

太感谢了,效果很好