forked from HcwXd/better-medium-stats
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.sass
263 lines (251 loc) · 5.85 KB
/
style.sass
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
$medium-green: #6eb799
$hover-grey: rgb(246, 246, 246)
$border-gray: #dee2e6
$left-padding: 15px
$black: rgba(0,0,0,0.6)
$bg-white: #ffffff
*
// border: 1px solid black
box-sizing: border-box
color: $black
font-family: 'Chivo', sans-serif
body
margin: 0px
padding: 0px
white-space: nowrap
transition-duration: 1s
.title_wrap
padding: 25px 15px 15px 25px
display: flex
justify-content: space-between
.title
font-size: 20px
.user_profile_wrap
display: flex
height: 32px
.user_info_wrap
text-align: right
margin-right: 15px
a
text-decoration: none
.avatar_wrap
display: flex
justify-content: space-around
align-items: center
transition-duration: 300ms
.avatar
height: 32px
width: 32px
border-radius: 100%
.stats_icon
border: 2px solid $border-gray
border-radius: 100%
display: flex
justify-content: space-around
align-items: center
height: 32px
width: 32px
display: none
&:hover
.stats_icon
display: flex
.avatar
display: none
.nav_bar_wrap
display: flex
padding-left: $left-padding
border-bottom: 1px solid $border-gray
margin-bottom: 5px
.nav_item
border: 1px solid $bg-white
padding: 8px 16px
color: $medium-green
cursor: pointer
border-top-right-radius: 4px
border-top-left-radius: 4px
&:hover
border: 1px solid rgba($border-gray, 0.7)
border-bottom: 1px solid $bg-white
.nav_item-active
border: 1px solid $border-gray
border-bottom: 1px solid $bg-white
margin-bottom: -1px
&:hover
border: 1px solid $border-gray
border-bottom: 1px solid $bg-white
margin-bottom: -1px
#summary_container
display: flex
.error_message_container
text-align: justify
width: 500px
white-space: normal
.error_title
font-weight: bold
.sorry_gif
width: 150px
height: 150px
.summary_wrap
display: none
flex-direction: column
align-items: center
justify-content: space-around
width: 100%
.metric_row
width: 100%
display: flex
justify-content: space-around
align-items: center
margin-bottom: 30px
.metric_wrap
display: flex
flex-direction: column
justify-content: space-around
align-items: center
.metric_label
.metric_value
font-size: 32px
font-weight: 700
color: darken($medium-green, 10%)
table
border-spacing: 1
border-collapse: collapse
border-radius: 4px
text-align: right
font-size: 14px
td, th
padding: 10px 7px
font-weight: normal
thead tr
padding: 10px 7px
border-bottom: 1px solid $border-gray
thead tr th:first-child
border-top-left-radius: 4px
thead tr th:last-child
border-top-right-radius: 4px
.format_btn_wrap
margin-bottom: 15px
display: flex
.format_btn
padding: 10px
border: 1px solid rgba(#000, 0.3)
border-right: none
color: rgba(#000, 0.7)
cursor: pointer
&:first-child
border-top-left-radius: 4px
border-bottom-left-radius: 4px
&:last-child
border-top-right-radius: 4px
border-bottom-right-radius: 4px
border-right: 1px solid rgba(#000, 0.3)
&:hover
background-color: $hover-grey
.format_btn-select
background-color: $medium-green
border-color: $medium-green !important
color: white
cursor: default
&:hover
background-color: $medium-green
#views_container
display: none
#viewsChart
display: none
.change_time_btn_wrap
margin-top: 15px
display: flex
position: relative
.download_btn_wrap
position: absolute
top: 50%
transform: translateY(-50%)
left: 150%
display: flex
justify-content: space-around
align-items: center
.change_time_btn
padding: 10px
border: 1px solid rgba(#000, 0.3)
color: rgba(#000, 0.7)
cursor: pointer
border-right: none
&:hover
background-color: $hover-grey
.backward_time_btn
border-top-left-radius: 4px
border-bottom-left-radius: 4px
.forward_time_btn
border-top-right-radius: 4px
border-bottom-right-radius: 4px
border-right: 1px solid rgba(#000, 0.3)
.change_time_btn-prohibit
opacity: 0.7
cursor: default
&:hover
background-color: white
.download_loader
display: none
transition: all 0.7s ease-in-out
border: 5px solid #ebebeb
border-bottom-color: #26B8BF
width: 20px
height: 20px
border-radius: 100%
animation: spin 1s linear infinite
.views_download_loader
display: block
.views_download
display: none
.feather-download
cursor: pointer
#followers_container
display: none
.container
min-width: 500px
padding: 25px
align-items: center
justify-content: space-around
display: flex
flex-direction: column
font-size: 14px
transition-duration: 1s
.loader
span
display: inline-block
width: 5px
height: 20px
background-color: rgb(110, 183, 153)
&:nth-child(1)
animation: grow 1s ease-in-out infinite
&:nth-child(2)
animation: grow 1s ease-in-out 0.15s infinite
&:nth-child(3)
animation: grow 1s ease-in-out 0.3s infinite
&:nth-child(4)
animation: grow 1s ease-in-out 0.45s infinite
#stories_container
display: none
.footer
padding: 10px 25px 10px 25px
border-top: 1px solid $border-gray
display: flex
justify-content: space-between
align-items: center
.link_wrap a
margin-right: 16px
&:last-child
margin-right: 0px
.version
color: rgb(169, 169, 179)
@keyframes grow
0%,
100%
transform: scaleY(1)
50%
transform: scaleY(1.8)
@keyframes spin
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)