SI/.obsidian/snippets/floating-status-bar.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 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;
}