users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js
cd1edb8102b069072cafb8b7e399ab252472b995
· 914 B · 48 lines
raw
| 1 | // Styles for /lib/components/data/netstats.jsx component |
| 2 | export const netstatsStyles = /* css */ ` |
| 3 | .netstats { |
| 4 | display: flex; |
| 5 | align-items: center; |
| 6 | justify-content: space-between; |
| 7 | gap: 6px; |
| 8 | color: var(--foreground); |
| 9 | background-color: var(--minor); |
| 10 | z-index: 0; |
| 11 | } |
| 12 | .netstats--graph { |
| 13 | min-width: 120px; |
| 14 | padding: 0; |
| 15 | } |
| 16 | .simple-bar--widgets-background-color-as-foreground .netstats { |
| 17 | background-color: transparent; |
| 18 | } |
| 19 | .netstats__item { |
| 20 | width: 9ch; |
| 21 | display: flex; |
| 22 | align-items: center; |
| 23 | justify-content: center; |
| 24 | gap: 4px; |
| 25 | padding: 0 4px; |
| 26 | } |
| 27 | .netstats__value { |
| 28 | display: flex; |
| 29 | align-items: baseline; |
| 30 | justify-content: flex-end; |
| 31 | margin: 0 auto; |
| 32 | } |
| 33 | .netstats__value > em { |
| 34 | font-size: 0.8em; |
| 35 | font-style: normal; |
| 36 | } |
| 37 | .netstats__icon { |
| 38 | flex: 0 0 12px; |
| 39 | width: 12px; |
| 40 | height: 12px; |
| 41 | } |
| 42 | .netstats__icon--download { |
| 43 | fill: var(--magenta); |
| 44 | } |
| 45 | .netstats__icon--upload { |
| 46 | fill: var(--blue); |
| 47 | } |
| 48 | `; |