分享一个「禅模式」的 CSS 片段

[Livx]

效果

代码

body.Zen_layout {

	.workspace-ribbon,
	.workspace-tab-header-container,
	.view-header,
	.status-bar {
		display: none !important;
	}

	/* 浮动窗口控制按钮 */
	.titlebar-button-container.mod-right {
		position: absolute;
		right: -117px;
		transition: right 0.2s;

		&:hover {
			right: 0;
		}
	}

	/* 使窗口控制按钮不与右上角的标签栏重叠 */
	.workspace-tab-header-container {
		padding-right: 8px !important;
	}
	.is-hidden-frameless:not(.is-fullscreen):not(.mod-macos) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
		z-index: -1;
	}

	/* 左右侧栏悬浮显示 */
	.mod-sidedock.mod-left-split {
		position: absolute;
		left: -325px;
		transition: left 0.2s;
		z-index: 1;

                /* (*)
                & .workspace-tab-header-container {
                        display: flex !important;
                }
                */

		&:hover {
			left: 0;
		}

		/* 增加鼠标悬浮区域 */
		&::before {
			content: "";
			position: absolute;
			left: 100%;
			top: 0;
			width: 30px;
			height: 100%;
			background: transparent;
		}
	}

	.mod-sidedock.mod-right-split {
		position: absolute;
		right: -333px;
		transition: right 0.2s;
		z-index: 1;

		&:hover {
			right: 0px;
		}

                /* (*)
                & .workspace-tab-header-container {
                        display: flex !important;
                }
                */

		&::before {
			content: "";
			position: absolute;
			right: 100%;
			top: 0;
			width: 30px;
			height: 100%;
			background: transparent;
		}
	}
}

使用

使用任何可以运行JS的插件运行以下JavaScript代码即可，比如Templater，我自己使用的是Notetoolbar，从而实现一键开关

document.body.classList.toggle('Zen_layout');

注意

• css代码是按照我使用的主题Maple写的，在其他主题中应用可能会有一点点问题，需要自己微调
• 为了美观，侧栏的标题栏我都隐藏了，介意的可以解除代码(*)处的注释
• Notetoolbar的样式使用的是这个帖子
• 使用时偶尔出现抖动，虽然不影响使用，但还是希望有大佬能帮忙解决
• css新手，代码质量不高请见谅，如果有大佬有更好的方案的话欢迎指教

[Livx]

我仿照侧栏尝试浮动了顶栏，结果除了图中的抖动情况，只有鼠标悬浮在容器内的子元素上时才能触发容器的hover效果，在子元素的间隙就无法触发，有没有人知道这是怎么回事？