Skip to content

Commit 37d8eb2

Browse files
committed
reskin activation
1 parent 7b43190 commit 37d8eb2

File tree

5 files changed

+364
-106
lines changed

5 files changed

+364
-106
lines changed

web-assets/css/check_email.css

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
html {
2+
box-sizing: border-box;
3+
min-height: 100%;
4+
}
5+
6+
body {
7+
background-color: #f6f6f6;
8+
margin: 0;
9+
padding: 0;
10+
font-family: "Roboto";
11+
margin-top: 6%;
12+
}
13+
14+
.mobile-header {
15+
display: none;
16+
}
17+
18+
*,
19+
:after,
20+
:before {
21+
box-sizing: inherit;
22+
}
23+
24+
a,
25+
a:active,
26+
a:visited {
27+
-webkit-tap-highlight-color: transparent;
28+
color: #0d61bf;
29+
cursor: pointer;
30+
outline: 0;
31+
text-decoration: underline;
32+
}
33+
34+
a:hover {
35+
color: #097dce;
36+
text-decoration: none;
37+
}
38+
39+
.action.skip {
40+
box-sizing: border-box;
41+
position: absolute;
42+
}
43+
44+
.action.skip:not(:focus) {
45+
border: 0;
46+
clip: rect(0, 0, 0, 0);
47+
height: 1px;
48+
margin: -1px;
49+
overflow: hidden;
50+
padding: 0;
51+
}
52+
53+
.action.skip:focus {
54+
background: #f0f0f0;
55+
left: 0;
56+
padding: 10px;
57+
text-align: center;
58+
top: 0;
59+
z-index: 15;
60+
}
61+
62+
.page-wrapper {
63+
display: flex;
64+
flex-direction: column;
65+
align-items: flex-start;
66+
gap: 8px;
67+
margin: 0 auto;
68+
padding: 0;
69+
max-width: 600px;
70+
}
71+
72+
.page-content {
73+
background-color: #fff;
74+
border-radius: 8px;
75+
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
76+
display: flex;
77+
flex-direction: column;
78+
align-items: flex-start;
79+
padding: 40px 60px;
80+
gap: 40px;
81+
}
82+
83+
.header {
84+
display: flex;
85+
flex-direction: row;
86+
align-items: flex-start;
87+
padding: 0;
88+
gap: 24px;
89+
}
90+
91+
.header-text-container {
92+
display: flex;
93+
flex-direction: column;
94+
align-items: flex-start;
95+
padding: 0;
96+
}
97+
98+
.header-icon {
99+
width: 84px;
100+
height: 72px;
101+
}
102+
103+
.header-text {
104+
font-weight: 700;
105+
font-size: 12px;
106+
line-height: 16px;
107+
letter-spacing: 1px;
108+
text-transform: uppercase;
109+
color: #2A2A2A;
110+
}
111+
112+
.header-title {
113+
font-family: 'Barlow Condensed';
114+
font-weight: 500;
115+
font-size: 34px;
116+
line-height: 32px;
117+
text-transform: uppercase;
118+
color: #26B3C5;
119+
}
120+
121+
.main {
122+
display: flex;
123+
flex-direction: column;
124+
align-items: flex-start;
125+
padding: 0;
126+
gap: 16px;
127+
width: 100%;
128+
}
129+
130+
.messages {
131+
width: 100%;
132+
display: flex;
133+
flex-direction: column;
134+
gap: 12px;
135+
}
136+
137+
.message-wrapper {
138+
display: none;
139+
}
140+
141+
.message {
142+
display: flex;
143+
flex-direction: row;
144+
align-items: center;
145+
justify-content: flex-start;
146+
border-radius: 5px;
147+
font-size: 14px;
148+
padding: 15px 10px;
149+
color: #ffffff;
150+
}
151+
152+
.message.error {
153+
background-color: #ea1900;
154+
}
155+
156+
.message.notify {
157+
background-color: #079531b8;
158+
}
159+
160+
.message-icon {
161+
width: 20px;
162+
height: 20px;
163+
text-align: center;
164+
}
165+
166+
.message-content {
167+
margin-left: 10px;
168+
flex: 1;
169+
}
170+
171+
.close-error {
172+
cursor: pointer;
173+
width: 20px;
174+
height: 20px;
175+
text-align: center;
176+
}
177+
178+
.input-text {
179+
height: 40px;
180+
padding: 12px 10px;
181+
background: #fff;
182+
border: 1px solid #AAAAAA;
183+
border-radius: 4px;
184+
text-align: center;
185+
width: 100%;
186+
font-size: 14px;
187+
line-height: 22px;
188+
color: #767676;
189+
}
190+
191+
.continue-btn {
192+
background: #137D60;
193+
border-radius: 50px;
194+
padding: 12px 24px;
195+
font-weight: 700;
196+
font-size: 16px;
197+
line-height: 24px;
198+
color: #FFFFFF;
199+
text-transform: uppercase;
200+
letter-spacing: 0.008em;
201+
border: none;
202+
width: 100%;
203+
cursor: pointer;
204+
}
205+
206+
.continue-btn:disabled {
207+
background: #F4F4F4;
208+
color: #767676;
209+
cursor: default;
210+
}
211+
212+
.page-description {
213+
padding-left: 18px;
214+
margin: 0;
215+
font-weight: 400;
216+
font-size: 16px;
217+
line-height: 26px;
218+
color: #2a2a2a;
219+
}
220+
221+
.footer {
222+
display: flex;
223+
flex-direction: row;
224+
align-items: flex-start;
225+
padding: 0;
226+
justify-content: space-between;
227+
width: 100%;
228+
font-size: 12px;
229+
font-weight: 400;
230+
line-height: 16px;
231+
}
232+
233+
.copyright-text {
234+
color: #2A2A2A;
235+
letter-spacing: 0.5px;
236+
}
237+
238+
.privacy-policy {
239+
margin-right: 8px;
240+
}
241+
242+
@media (max-width: 375px) {
243+
body {
244+
margin-top: 0;
245+
}
246+
247+
.mobile-header {
248+
display: flex;
249+
flex-direction: row;
250+
align-items: center;
251+
justify-content: flex-start;
252+
gap: 6px;
253+
height: 64px;
254+
background: #0C0C0C;
255+
padding: 20px 24px;
256+
}
257+
258+
.page-wrapper {
259+
padding: 24px;
260+
}
261+
262+
.page-content {
263+
padding: 24px 24px 32px;
264+
gap: 10px;
265+
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
266+
}
267+
268+
.header {
269+
flex-direction: column;
270+
padding: 0 0 8px;
271+
}
272+
273+
.header-icon {
274+
align-self: center;
275+
width: 56px;
276+
height: 48px;
277+
}
278+
279+
.header-text {
280+
font-size: 10px;
281+
line-height: 12px;
282+
letter-spacing: 0.5px;
283+
}
284+
285+
.header-title {
286+
font-size: 25px;
287+
line-height: 28px;
288+
}
289+
290+
.footer {
291+
flex-direction: column;
292+
gap: 4px;
293+
}
294+
}

web-assets/images/logo.svg

Lines changed: 3 additions & 0 deletions
Loading

web-assets/images/topcoder.svg

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)