【已解决】怎么在鼠标移开后自动隐藏右上角最大化、最小化、关闭按钮

blue topaz主题实例库里面,右上角的放大、缩小、关闭功能在鼠标移开后是自动隐藏的,我只找到了style setting插件的原因,但是找不到哪个设置实现的。
求助大佬看看这个怎么实现


图片

hover设置一下透明的就可以了吧

.titlebar-button-container.mod-right{
  opacity: 0;
  transition: .3s;
}

.titlebar-button-container.mod-right:hover{
  opacity: 1;
  transition: .1s;
}

原来如此,谢谢大佬:+1:

image
我用这个代码只是隐藏掉的图标,三大金刚的点位还在

可能要修改一下容器的宽度
默认宽度减小,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 个赞

感谢大佬!我只用默认主题,使用后更加简洁了