domo
1
提前声明：本来非作者，是一位网友从Blue-topaz-examples示例库扒的代码
一、使用效果
-
平时自动隐藏左侧边ribbon
-
当鼠标移至左侧位置才显示
二、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;
}
4 个赞
原代码小窗鼠标放到侧栏的位置不容易触发展开，必须放到按钮的位置，稍微有点儿不方便，小改了一下。
效果展示：
CSS 代码，点击展开
.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);}
只放上述几行代码即可。
1 个赞
挽歌
(Manjusaka)
3
大佬，左上角还是有点小瑕疵，综合一下楼主的就极好了、
1 个赞
Ryan_DT
(Ryan)
6
非常感谢您！这个css样式我找了很久，全网搜不到。今天有幸看到，谢谢。非常感谢您。
domo
7
不客气，因为我自己有这个需求，分享出来是希望可以帮到有相同需求的人，节省大家搜寻的时间。很高兴能帮到你。
Ryan_DT
(Ryan)
10
我也来推荐一个gif制作工具 ，licecap 小巧好用，才几兆。可以录屏生成gif。可以找绿色版，免安装。
Qa
13
各位大佬谁能够将minimal主题的代码扣下来，将ribbon放置在左下角，感激不尽
Greyson
(GreysonChen)
14
請問有法折衷嗎？ 左側欄還是會彈出來，只是鼠標必須放到按鈕位置xD
如果你是想自己改 CSS 综合我 12 楼的和楼主的，我可以给你大概讲讲这块的结构，可能是你遇到问题的原因。
在这个区域一共有 5 个元素。
- 左侧栏按钮①，它是透明背景的。
- 左侧栏②
- 左侧栏按钮①层级下的灰块③，它的位置基于左侧栏②，它的长宽可以自行设定，它的存在是为了填补标签栏④（灰色背景）和 Ob 窗口左边线之间距离（透明背景）。
- 标签栏④
- 主编辑区⑤
标签栏④和主编辑区⑤共同的宽度 + 左侧栏②宽度 = Ob窗口宽度。
我们的主要目标是增加主编辑区⑤的宽度。
为了达到主要目标，我们要移动左侧栏②的位置，让它移出窗口，从而减小占宽，这就是为什么这个值是负数 margin-left: -32px; /*左侧栏位置*/。
但是，改变左侧栏②的位置，标签栏④的宽度也会变宽，如果不改变左侧栏按钮①的位置，按钮就会和标签重叠。
灰块③的情况更为复杂，因为它的存在是为了填补标签栏④（灰色背景）和 Ob 窗口左边线之间距离（透明背景），所以既可以调整位置又可以调整大小，还可以用别的样式方案代替它原本的作用。
像楼主的代码，好像只改变了左侧栏②，按钮和标签栏都好好的，
其实不光改变了左侧栏②的位置，并且单独调整了标签栏④与 Ob 窗口左边线之间的距离，又选中灰块③移开后出现空白的区域，加上和标签栏一致的背景。
body:not(.background-settings-workplace-background-image) .workspace-tabs.mod-top {
background: var(--background-secondary-alt);
}
我将这个背景改为红色，演示如下：
当楼主的代码鼠标悬停在左侧栏按钮①，左侧栏②整个恢复原来的位置，灰块③也恢复到原来位置，由于颜色相同，实现了平常和悬停时平滑的过渡。
1 个赞
谢谢！！！！！