【CSS分享】自动隐藏左侧边栏ribbon，当鼠标移至左侧位置才显示

经验分享
20

不完全一样。效果展示：

image

CSS 代码，点击展开 
.workspace-ribbon {
  padding-left: 44px; /*左侧栏按钮与命令区间距*/
  padding-block: 0; /*贴底边*/
}
.workspace-ribbon.mod-left .side-dock-ribbon-action {
  margin: 7px 0 8px; /*左侧栏按钮与底边间距|设置、命令区按钮间距|整体与底边间距*/
}

.workspace-ribbon.mod-left {
  overflow: visible;
  position: absolute;
  display: flex;
  flex-direction: row;
  z-index: 17;
  bottom: 0; /*整体位置*/
  gap: 0; /*设置区与命令区间距*/
}
.side-dock-actions, .side-dock-settings {
  position: relative;
  display: flex;
  flex-direction: row;
  background: var(--background-secondary); /*设置、命令区背景颜色*/
  gap: var(--size-4-1); /*设置、命令区按钮间距*/
}

/*平时隐藏，悬停显示*/
.workspace-ribbon.mod-left:not(:hover) {opacity: 0; transition: var(--anim-duration-fast);}

.side-dock-settings {
  border-right: var(--size-2-1) solid var(--background-modifier-border); /*右边框粗细颜色等*/
  border-top-right-radius: var(--radius-m); /*右边框弧度*/
}

/*设置、命令区按钮阴影*/
:is(.side-dock-settings, .side-dock-actions) .clickable-icon:hover {background-color: transparent;}
3 个赞