blue topaz主题实例库里面,右上角的放大、缩小、关闭功能在鼠标移开后是自动隐藏的,我只找到了style setting插件的原因,但是找不到哪个设置实现的。
求助大佬看看这个怎么实现
用hover
设置一下透明的就可以了吧
.titlebar-button-container.mod-right{
opacity: 0;
transition: .3s;
}
.titlebar-button-container.mod-right:hover{
opacity: 1;
transition: .1s;
}
原来如此,谢谢大佬
我用这个代码只是隐藏掉的图标,三大金刚的点位还在
可能要修改一下容器的宽度
默认宽度减小,hover回复原宽度
我自己调了下CSS,解决了位置占用的问题:
/* 让按钮初始位置在屏幕外侧 */
.titlebar-button-container.mod-right {
position: absolute;
right: -117px;
transition: right 0.2s;
}
/* 当鼠标移动到窗口右上角的右侧时,恢复按钮位置 */
.titlebar-button-container.mod-right:hover {
right: 0;
}
/* 去除右上角的header右侧空白部分 */
.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;
}
我自己主题的按钮颜色和整体的背景色是相同的,所以看不出来,如果颜色不同的话,可能会看到那个位置突出了一部分(毕竟要留空间给鼠标)。另外,应用该样式可能导致按钮失效(我自己是只有最小化可以点击),重启Obsidian就好了
1 个赞
感谢大佬!我只用默认主题,使用后更加简洁了