Obsidian 样式：将状态栏变为悬浮

概述

(来自主题 AnuPpuccin)

开启片段后，状态栏平时处于隐藏状态，只有当鼠标伸到原状态栏的位置，才会使状态栏出现。

效果图示

下载链接

AnuPpuccin/snippets/floating-status-bar.css

/* AGPLv3 License
Floating Status Bar
Author: AnubisNekhet
Note: If you decide to implement it in your theme or redistribute it, please keep this comment (Especially for *certain* individuals who may try to rebrand it as their own :))
Support me: https://buymeacoffee.com/AnubisNekhet
*/
body {
  --status-bar-position: absolute;
  --status-bar-radius: var(--radius-m);
}
body .status-bar {
  transform: translateX(calc(100% + 5px));
  transition: transform 300ms 150ms;
  bottom: 5px;
  right: 5px;
}
body .status-bar::before {
  width: 100%;
  min-height: 100%;
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
}
body .status-bar:hover {
  transform: none;
  transition: transform 300ms 150ms;
}

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。