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
|
@import 'app.scss';
@import 'animations.scss';
@import 'avatar.scss';
@import 'profile.scss';
@import 'button.scss';
// :root {
#people-app {
--app-background: #2f2b43;
--app-background-secondary: #353249;
--app-background-disabled: #555366;
--app-highlight: rgba(255, 255, 255, 0.1);
--app-ripple: rgba(255, 255, 255, 0.5);
--app-shadow: rgba(0, 0, 0, 0.15);
--app-text: #fff;
--app-text-secondary: #807e97;
--app-primary: #ff0087;
--app-secondary: #4d7cfe;
--app-tertiary: #00ec97;
--app-danger: #f3c835;
--spinner-size: 200px;
}
* {
box-sizing: border-box;
}
// body {
#people-app {
// display: flow-root;
// overflow: auto;
// min-height: 100vh;
// margin: 0;
// animation: background-light 5s ease-out forwards;
// /* very fancy background */
// background: radial-gradient(
// circle 15px at 150px 90vh,
// rgba(255, 255, 255, 0.35),
// rgba(255, 255, 255, 0.35) 90%,
// transparent
// ),
// radial-gradient(
// circle 9px at 60px 50vh,
// rgba(255, 255, 255, 0.55),
// rgba(255, 255, 255, 0.55) 90%,
// transparent
// ),
// radial-gradient(
// circle 19px at 40vw 70px,
// rgba(255, 255, 255, 0.3),
// rgba(255, 255, 255, 0.3) 90%,
// transparent
// ),
// radial-gradient(
// circle 12px at 80vw 80px,
// rgba(255, 255, 255, 0.4),
// rgba(255, 255, 255, 0.4) 90%,
// transparent
// ),
// radial-gradient(
// circle 7px at 55vw calc(100vh - 95px),
// rgba(255, 255, 255, 0.6),
// rgba(255, 255, 255, 0.6) 90%,
// transparent
// ),
// radial-gradient(
// circle 14px at 25vw calc(100vh - 35px),
// rgba(255, 255, 255, 0.4),
// rgba(255, 255, 255, 0.4) 90%,
// transparent
// ),
// radial-gradient(
// circle 11px at calc(100vw - 95px) 55vh,
// rgba(255, 255, 255, 0.45),
// rgba(255, 255, 255, 0.45) 90%,
// transparent
// ),
// radial-gradient(
// circle 13px at calc(100vw - 35px) 85vh,
// rgba(255, 255, 255, 0.4),
// rgba(255, 255, 255, 0.4) 90%,
// transparent
// ),
// radial-gradient(
// circle 50vw at 0 -25%,
// rgba(255, 255, 255, 0.07),
// rgba(255, 255, 255, 0.07) 100%,
// transparent
// ),
// radial-gradient(
// circle 80vw at top left,
// rgba(255, 255, 255, 0.07),
// rgba(255, 255, 255, 0.07) 100%,
// transparent
// ),
// radial-gradient(circle at bottom right, #ef2fb8, transparent),
// radial-gradient(circle at top right, #c45af3, transparent),
// linear-gradient(#ee66ca, #ff47a6);
color: var(--app-text);
font-family: 'Montserrat', sans-serif;
}
#people-app {
.spinner {
position: absolute;
top: 200px;
left: calc(50% - var(--spinner-size) / 2);
width: var(--spinner-size);
height: var(--spinner-size);
animation: zoom 250ms 500ms forwards ease-out;
opacity: 0;
transition: opacity 200ms, transform 200ms ease-in;
}
.spinner.exit {
opacity: 0;
transform: scale(0.5);
}
.spinner::before,
.spinner::after {
position: absolute;
top: 0;
left: 0;
width: calc(var(--spinner-size) / 3);
height: calc(var(--spinner-size) / 3);
animation: spinner 2s infinite ease-in-out;
background-color: rgba(255, 255, 255, 0.6);
content: '';
}
.spinner::after {
animation-delay: -1s;
}
@keyframes spinner {
25% {
transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
translateY(calc(var(--spinner-size) / 3 * 2 - 1px)) rotate(-179deg);
}
50.1% {
transform: translateX(calc(var(--spinner-size) / 3 * 2 - 1px))
translateY(calc(var(--spinner-size) / 3 * 2 - 1px)) rotate(-180deg);
}
75% {
transform: translateX(0) translateY(calc(var(--spinner-size) / 3 * 2 - 1px))
rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
}
}
ul,
ol {
padding-left: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
}
|
