pixies

1@use "@/common/styles/colors" as *
2
3.floating-date-indicator
4  position: fixed
5  user-select: none
6  top: 30px
7  display: flex
8  transform: translateX(-50%)
9  left: 50%
10  z-index: 50
11  background: $dark-gray
12  backdrop-filter: blur(10px)
13  border: $light-gray 2px solid
14  border-radius: 12px
15  padding: 12px 24px
16  text-align: center
17  font-weight: 600
18  color: $white
19  box-shadow: 0 0 15px rgba($light-gray, 0.5)
20  animation: slideInDown 0.3s ease-out
21
22  span
23    font-size: 22px
24    letter-spacing: 0.5px
25
26@keyframes slideInDown
27  from
28    opacity: 0
29    transform: translateX(-50%) translateY(-20px)
30  to
31    opacity: 1
32    transform: translateX(-50%) translateY(0)
33
34.loading-more, .end-of-list
35  text-align: center
36  padding: 20px
37  color: $subtext
38  font-style: italic
39
40.error-text
41  margin: 0
42  font-size: 26pt
43  font-weight: 700
44  text-align: center
45  color: $subtext
46
47@media (max-width: 605px)
48  .error-text
49    width: 28rem
50    
51  .floating-date-indicator
52    top: 15px
53    padding: 10px 20px
54    
55    span
56      font-size: 13px
57
58  .back-to-top-button
59    bottom: 20px
60    right: 20px
61    width: 48px
62    height: 48px
63    
64    svg
65      width: 20px
66      height: 20px
67
68@media (max-width: 475px)
69  .error-text
70    width: 20rem
71
72.back-to-top-button
73  position: fixed
74  bottom: 30px
75  right: 30px
76  z-index: 50
77  width: 56px
78  height: 56px
79  background: $dark-gray
80  backdrop-filter: blur(10px)
81  border: $light-gray 2px solid
82  border-radius: 50%
83  color: $white
84  cursor: pointer
85  display: flex
86  align-items: center
87  justify-content: center
88  box-shadow: 0 0 15px rgba($light-gray, 0.5)
89  transition: all 0.3s ease
90  animation: slideInUp 0.3s ease-out
91  
92  &:hover
93    transform: translateY(-3px)
94    box-shadow: 0 4px 20px rgba($light-gray, 0.7)
95    background: $light-gray
96    
97  &:active
98    transform: translateY(-1px)
99    
100  svg
101    width: 24px
102    height: 24px
103    
104@keyframes slideInUp
105  from
106    opacity: 0
107    transform: translateY(20px)
108  to
109    opacity: 1
110    transform: translateY(0)