users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js
592f73c2672474c09dedc5cac8e6fa857a7df92b
· 1.2 KB · 55 lines
raw
| 1 | // Styles for /lib/components/data/specter.jsx component |
| 2 | export const specterStyles = /* css */ ` |
| 3 | .specter { |
| 4 | position: absolute; |
| 5 | bottom: 0; |
| 6 | right: 30px; |
| 7 | display: flex; |
| 8 | align-items: flex-end; |
| 9 | z-index: 2; |
| 10 | pointer-events: none; |
| 11 | touch-action: none; |
| 12 | } |
| 13 | .simple-bar--animations-disabled .specter { |
| 14 | display: none; |
| 15 | } |
| 16 | .specter > span { |
| 17 | flex: 0 0 5px; |
| 18 | height: 15px; |
| 19 | max-height: 15px; |
| 20 | margin-left: 1px; |
| 21 | background-color: var(--main); |
| 22 | opacity: 0.1; |
| 23 | transform-origin: bottom; |
| 24 | } |
| 25 | .simple-bar--no-color-in-data .specter > span, |
| 26 | .simple-bar--widgets-background-color-as-foreground .specter > span { |
| 27 | background-color: currentColor; |
| 28 | } |
| 29 | .specter > span { |
| 30 | animation: specter-waving 640ms var(--transition-easing) infinite; |
| 31 | } |
| 32 | .simple-bar--animations-disabled .specter > span { |
| 33 | animation: none; |
| 34 | } |
| 35 | .specter > span:nth-of-type(1) { |
| 36 | animation-delay: -460ms; |
| 37 | } |
| 38 | .specter > span:nth-of-type(2) { |
| 39 | animation-delay: -320ms; |
| 40 | } |
| 41 | .specter > span:nth-of-type(3) { |
| 42 | animation-delay: -200ms; |
| 43 | } |
| 44 | .specter > span:nth-of-type(4) { |
| 45 | animation-delay: -240ms; |
| 46 | } |
| 47 | .specter > span:nth-of-type(5) { |
| 48 | animation-delay: -150ms; |
| 49 | } |
| 50 | @keyframes specter-waving { |
| 51 | 50% { |
| 52 | transform: scaleY(0.2); |
| 53 | } |
| 54 | } |
| 55 | `; |