pixies

1@use "@/common/styles/colors" as *
2
3.statistic-area
4  width: 100%
5  max-width: calc(100% - 2rem)
6  padding-left: 20rem
7  padding-right: 20rem
8  padding-top: 1.5rem
9  margin-bottom: 2rem
10  display: flex
11  gap: 2rem
12  justify-content: space-between
13  flex-wrap: wrap
14  box-sizing: border-box
15
16.statistic-stale
17  opacity: 0.7
18  transition: opacity 0.2s ease
19
20.statistic-loading
21  .skeleton-picker
22    width: 280px
23    height: 48px
24    background: linear-gradient(90deg, $darker-gray 25%, $dark-gray 50%, $darker-gray 75%)
25    background-size: 200% 100%
26    border-radius: 0.6rem
27    opacity: 0
28    transform: translateY(10px)
29    
30    &.skeleton-visible
31      animation: skeleton-shimmer 1.5s infinite, skeleton-fade-in 0.3s ease forwards
32    
33  .skeleton-chart
34    flex: 1 1 30%
35    min-width: 16rem
36    height: 18rem
37    background: linear-gradient(90deg, $darker-gray 25%, $dark-gray 50%, $darker-gray 75%)
38    background-size: 200% 100%
39    border-radius: 1rem
40    border: 1px solid $light-gray
41    opacity: 0
42    transform: translateY(10px)
43    
44    &.skeleton-visible
45      animation: skeleton-shimmer 1.5s infinite, skeleton-fade-in 0.3s ease forwards
46
47@keyframes skeleton-shimmer
48  0%
49    background-position: 200% 0
50  100%
51    background-position: -200% 0
52
53@keyframes skeleton-fade-in
54  0%
55    opacity: 0
56    transform: translateY(10px)
57  100%
58    opacity: 1
59    transform: translateY(0)
60
61.statistics-header
62  width: 100%
63  display: flex
64  align-items: center
65  justify-content: space-between
66  gap: 1rem
67  margin-bottom: 0.5rem
68  min-width: 0
69
70  > .date-range-picker
71    flex: 1 1 auto
72    min-width: 0
73
74  > .export-button-container
75    flex: 0 0 auto
76
77.statistics-empty
78  width: 100%
79  display: flex
80  align-items: center
81  justify-content: center
82  padding: 6rem 2rem
83  
84  p
85    font-size: 1.1rem
86    font-weight: 500
87    color: $subtext
88    text-align: center
89
90@media screen and (max-width: 1472px)
91  .statistic-area
92    padding-left: 10rem
93    padding-right: 10rem
94
95@media screen and (max-width: 600px)
96  .statistics-header
97    gap: 0.5rem
98
99@media screen and (max-width: 425px)
100  .statistic-area
101    padding-left: 3rem
102    padding-right: 3rem
103
104@media screen and (max-width: 375px)
105  .statistic-area
106    padding-left: 1rem
107    padding-right: 1rem