Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 16b0c39

Browse files
jpeg22jpeg22
authored
Merge pull request #1 from topcoder-platform/reskin-payment
improvement(reskin-payment): no payment page
2 parents fb8d0df + 8c018fa commit 16b0c39

32 files changed

+1792
-7
lines changed

‎css/reskin-2/common.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/* reskin-2 common */
2+
3+
:root {
4+
/*
5+
--xs-max: 599px; (max-width: /* --xs-max * / 599px)
6+
--sm-max: 959px; (max-width: /* --sm-max * / 959px)
7+
--md-max: 1279px; (max-width: /* --md-max * / 1279px)
8+
--lg-max: 1375px; (max-width: /* --lg-max * / 1375px)
9+
10+
--xs-min: 320px; (min-width: /* --xs-min * / 320px)
11+
--sm-min: 600px; (min-width: /* --sm-min * / 600px)
12+
--md-min: 960px; (min-width: /* --md-min * / 960px)
13+
--lg-min: 1280px; (min-width: /* --lg-min * / 1280px)
14+
--xl-min: 1376px; (min-width: /* --xl-min * / 1376px)
15+
*/
16+
17+
--screen-max: 1376px;
18+
19+
--tc-black: #0c0c0c;
20+
--tc-white: #fff;
21+
--black-100: #2a2a2a;
22+
--black-80: #555555;
23+
--black-60: #7f7f7f;
24+
--black-40: #aaaaaa;
25+
--black-20: #d4d4d4;
26+
--black-10: #e9e9e9;
27+
--black-5: #f4f4f4;
28+
--black-2: #fbfbfb;
29+
--green: #137d60;
30+
--blue-1: #eaf6fd;
31+
--blue-2: #bae1f9;
32+
--blue-3: #2c95d7;
33+
--grey-1: #767676;
34+
--divider: #e9e9e9;
35+
36+
--header-height: 80px;
37+
--footer-height: 51px;
38+
--header-height-mobile: 60px;
39+
--footer-height-mobile: 75px;
40+
41+
--payment-status-owed: #f46500;
42+
--payment-status-paid: #0ab88a;
43+
--payment-status-cancelled: #ef476f;
44+
}
45+
46+
.modal {
47+
position: fixed;
48+
top: 0;
49+
left: 0;
50+
z-index: 1000;
51+
display: none;
52+
width: 100%;
53+
height: 100%;
54+
overflow-x: hidden;
55+
overflow-y: auto;
56+
}
57+
.modal.show {
58+
display: block;
59+
}
60+
.modal-dialog {
61+
position: relative;
62+
max-width: calc(100% - 16px);
63+
margin-left: auto;
64+
margin-right: auto;
65+
}
66+
.modal-content {
67+
position: relative;
68+
display: flex;
69+
flex-direction: column;
70+
width: 100%;
71+
background-color: #fff;
72+
border-radius: 8px;
73+
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
74+
75+
padding: 32px;
76+
}
77+
.modal-header {
78+
display: flex;
79+
flex-shrink: 0;
80+
align-items: center;
81+
justify-content: space-between;
82+
padding: 0 0 24px 0;
83+
border-bottom: 2px solid var(--black-10);
84+
}
85+
.modal-title {
86+
font-family: Barlow;
87+
font-weight: 600;
88+
font-size: 22px;
89+
line-height: 26px;
90+
}
91+
.modal-body {
92+
position: relative;
93+
flex: 1 1 auto;
94+
padding: 24px 0;
95+
}
96+
.modal-footer {
97+
display: flex;
98+
flex-shrink: 0;
99+
flex-wrap: wrap;
100+
align-items: center;
101+
justify-content: flex-end;
102+
padding: 24px 0 0 0;
103+
gap: 16px;
104+
border-top: 2px solid var(--black-10);
105+
}
106+
@media (max-width: /* --xs-max */ 599px) {
107+
.modal-content {
108+
padding: 24px 16px;
109+
}
110+
.modal-header {
111+
padding: 0 0 16px 0;
112+
}
113+
.modal-title {
114+
font-size: 18px;
115+
line-height: 20px;
116+
}
117+
.modal-body {
118+
padding: 16px 0;
119+
}
120+
.modal-footer {
121+
padding: 16px 0 0 0;
122+
gap: 10px;
123+
}
124+
}

‎css/reskin-2/footer.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* src/main/com/topcoder/web/jsp/foot.jsp */
2+
3+
.footer-wrapper {
4+
height: var(--footer-height);
5+
border-top: 1px solid var(--black-10);
6+
box-sizing: border-box;
7+
}
8+
.footer-wrapper .footer-inner {
9+
display: flex;
10+
11+
align-items: center;
12+
padding: 16px 32px;
13+
max-width: var(--screen-max);
14+
margin: 0 auto;
15+
box-sizing: content-box;
16+
17+
font-size: 12px;
18+
line-height: 18px;
19+
font-weight: 400;
20+
color: var(--black-100);
21+
}
22+
@media (max-width: /* --sm-max */ 959px) {
23+
.footer-wrapper .footer-inner {
24+
padding: 16px 16px;
25+
}
26+
}
27+
@media (max-width: /* --xs-max */ 599px) {
28+
.footer-wrapper .footer-inner {
29+
flex-direction: column;
30+
gap: 8px;
31+
}
32+
}
33+
34+
.footer-wrapper .utils {
35+
display: flex;
36+
align-items: center;
37+
gap: 16px;
38+
}
39+
.footer-wrapper .utils > * {
40+
font-family: Roboto;
41+
font-weight: 400;
42+
font-size: 12px;
43+
line-height: 18px;
44+
color: var(--black-100);
45+
}
46+
47+
.footer-wrapper .social {
48+
display: flex;
49+
align-items: center;
50+
gap: 4px;
51+
color: var(--black-60);
52+
53+
margin-left: auto;
54+
}
55+
.footer-wrapper .social a {
56+
display: flex;
57+
}
58+
@media (max-width: /* --xs-max */ 599px) {
59+
.footer-wrapper .social {
60+
margin-right: auto;
61+
}
62+
}

0 commit comments

Comments
 (0)