Obsidian 样式 - 悬浮侧边栏自动弹出,提升工作流效率

介绍一个 “悬浮侧边栏自动弹出” 的 CSS,它通过添加悬浮侧边栏和自动弹出功能。

自动悬浮两侧菜单栏的效果:


这是一个从 https://pkmer.cn/pkmer-docs/10-obsidian/obsidian%e5%a4%96%e8%a7%82/css-%e7%89%87%e6%ae%b5/obsidian%e6%a0%b7%e5%bc%8f-%e6%82%ac%e6%b5%ae%e4%be%a7%e8%be%b9%e6%a0%8f%e8%87%aa%e5%8a%a8%e5%bc%b9%e5%87%ba%e6%8f%90%e5%8d%87%e5%b7%a5%e4%bd%9c%e6%b5%81%e6%95%88%e7%8e%87 下的原始话题分离的讨论话题

后续使用补充,这个样式一直在用,我已经算是用习惯了,个人比较喜欢悬浮右侧侧边栏,不过自动悬浮隐藏有些时候还是挺不不方便的,这里又改下下样式结构,改为鼠标悬浮在两边时会出现按钮提示,通过单击来控制折叠,通过的也可以通过命令或者Style Setting控制左右侧悬浮情况,灵感可能来自于Koodo Reader的阅读界面的体验。

2024-04-04_Obsidian样式-悬浮侧边栏自动弹出,提升工作流效率

24.06.15_侧边栏折叠样式.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;
}