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

后续,由于自动隐藏有时候实在不如意,还是通过按钮进行好点,修改如下:

  • 将左右侧边折叠图标放到左右侧,鼠标悬浮过去时显示
  • 还是可以通过命令或者样式设置控制左右侧悬浮状态,可以单边悬浮

PixPin_2024-06-14_16-39-27

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;
}
1 个赞