后续,由于自动隐藏有时候实在不如意,还是通过按钮进行好点,修改如下:
- 将左右侧边折叠图标放到左右侧,鼠标悬浮过去时显示
- 还是可以通过命令或者样式设置控制左右侧悬浮状态,可以单边悬浮
24.06.14 自动悬浮两侧菜单栏.css
/* 参考:[Obsidian 样式 - 实现 TiddlyWiki 故事河]( https://pkmer.cn/show/20230904215512 )
*/
/* @settings
name: 【界面-熊猫】自动悬浮两侧菜单栏
id: 【界面-熊猫】自动悬浮两侧菜单栏
settings:
-
id: 左侧菜单栏设置
title: 左侧菜单栏设置
type: heading
level: 2
collapsed: true
-
id: left-tab-float-choice
title: 左侧菜单栏悬浮开关
type: class-toggle
addCommand: true
default: true
-
id: tab-right-length
title: 调整左侧菜单距离
type: variable-text
default: 44px
-
id: left-tab-opacity
title: 左侧菜单栏的不透明度
type: variable-number-slider
default: 1
format:
min: 0.2
max: 1
step: 0.01
-
id: 右侧菜单栏设置
title: 右侧菜单栏设置
type: heading
level: 2
collapsed: true
-
id: right-tab-float-choice
title: 右侧菜单栏悬浮开关
type: class-toggle
addCommand: true
default: true
-
id: right-tab-opacity
title: 右侧菜单栏的不透明度
type: variable-number-slider
default: 1
format:
min: 0.2
max: 1
step: 0.01
-
id: 悬浮菜单栏设置
title: 悬浮菜单栏设置
type: heading
level: 2
collapsed: true
-
id: tab-top-height
title: 菜单栏距离顶部高度
type: variable-text
default: 80px
-
id: tab-bottom-height
title: 菜单栏距离顶部底部
type: variable-text
default: 25px
*/
body {
--tab-top-height: 80px;
--tab-right-length: 44px;
--left-tab-opacity: 1;
--right-tab-opacity: 1;
--tab-bottom-height: 25px;
--sidebar-toggle-button-width: 30px;
--sidebar-toggle-button-height: 800px;
--tab-hight: calc(101% - var(--tab-top-height) - var(--tab-bottom-height));
}
/* !左侧菜单栏 */
.left-tab-float-choice .workspace-split.mod-horizontal.mod-left-split {
position: fixed;
display: flex;
width: 280px;
top: var(--tab-top-height);
height: var(--tab-hight);
left: var(--tab-right-length);
margin: 0;
opacity: var(--left-tab-opacity);
z-index: 2;
}
.left-tab-float-choice .workspace-split.mod-left-split>.workspace-leaf-resize-handle {
border-right-style: unset;
border-right-width: unset;
}
/* !右侧侧边栏 */
.right-tab-float-choice .workspace-split.mod-horizontal.mod-right-split {
position: fixed;
display: flex;
top: var(--tab-top-height);
right: 1px;
height: var(--tab-hight);
margin: 0;
opacity: var(--right-tab-opacity);
z-index: 2;
}
.right-tab-float-choice .workspace-split.mod-right-split>.workspace-leaf-resize-handle {
border-right-style: unset;
border-right-width: unset;
}
.mod-left-split .workspace-tab-header-tab-list,
.mod-right-split .workspace-tab-header-tab-list {
display: none;
}
/* ! 直接隐藏掉关闭和最小化按钮 */
/* 不显示最大最小化后,使那块区域可以双击及拖动 */
.mod-windows .titlebar-button,
.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
display: none;
}
/* !下拉菜单调整 */
.workspace-tab-header-tab-list {
display: block;
position: absolute;
top: 0px !important;
right: 10px !important;
z-index: 10;
}
/* 将侧边的折叠按钮设置为透明的高度最大 */
.sidebar-toggle-button.mod-left {
position: absolute;
height: var(--sidebar-toggle-button-height);
top: calc(50vh - var(--sidebar-toggle-button-height)/2);
width: var(--sidebar-toggle-button-width);
left: var(--tab-right-length);
z-index: 10;
}
/* 将侧边的折叠按钮设置为透明的高度最大 */
.sidebar-toggle-button.mod-right {
position: absolute;
height: var(--sidebar-toggle-button-height);
top: calc(50vh - var(--sidebar-toggle-button-height)/2);
width: var(--sidebar-toggle-button-width);
right: 0px;
z-index: 10;
}
.sidebar-toggle-button.mod-left .clickable-icon{
border-radius: 0% 20px 20px 0%;
}
.sidebar-toggle-button.mod-right .clickable-icon{
border-radius: 20px 0% 0% 20px
}
/* !透明度调整 */
.sidebar-toggle-button.mod-left:not(:hover),
.sidebar-toggle-button.mod-right:not(:hover) {
opacity: 0;
}
/* !启动Obsidian按钮 */
.titlebar-button.mod-logo {
display: flex !important;
background-color: inherit;
}