Skip to content

Commit cab62c1

Browse files
luojiyin1987luojiyin1987
committed
feat: add hackathon team page styles
1 parent d00122b commit cab62c1

1 file changed

Lines changed: 298 additions & 0 deletions

File tree

‎styles/HackathonTeam.module.less‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
@import '../components/Activity/Hackathon/theme.less';
2+
3+
.page {
4+
background:
5+
radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),
6+
radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),
7+
linear-gradient(180deg, #0b1328 0%, #091022 48%, #050814 100%);
8+
}
9+
10+
.section-frame();
11+
12+
.section {
13+
scroll-margin-top: 5rem;
14+
}
15+
16+
.introPanel,
17+
.metricCard,
18+
.memberCard,
19+
.summaryCard,
20+
.creatorCard,
21+
.emptyState {
22+
.panel-card();
23+
}
24+
25+
.introPanel,
26+
.summaryCard,
27+
.creatorCard {
28+
padding: 1.5rem;
29+
}
30+
31+
.introPanel {
32+
display: grid;
33+
gap: 1rem;
34+
}
35+
36+
.breadcrumb {
37+
margin-bottom: 0;
38+
39+
:global(.breadcrumb) {
40+
margin-bottom: 0;
41+
}
42+
43+
:global(.breadcrumb-item),
44+
:global(.breadcrumb-item a),
45+
:global(.breadcrumb-item.active) {
46+
color: rgba(255, 255, 255, 0.76);
47+
text-decoration: none;
48+
}
49+
50+
:global(.breadcrumb-item + .breadcrumb-item::before) {
51+
color: rgba(255, 255, 255, 0.35);
52+
}
53+
}
54+
55+
.introTitle {
56+
margin: 0;
57+
color: #fff;
58+
font-family: @heading;
59+
font-size: clamp(1.35rem, 2vw, 1.75rem);
60+
letter-spacing: 0.08em;
61+
text-transform: uppercase;
62+
}
63+
64+
.introText {
65+
margin: 0;
66+
color: @muted;
67+
font-size: 1rem;
68+
line-height: 1.8;
69+
}
70+
71+
.metaList {
72+
display: flex;
73+
flex-wrap: wrap;
74+
gap: 0.75rem;
75+
margin: 0;
76+
padding: 0;
77+
list-style: none;
78+
}
79+
80+
.metaItem {
81+
.chip();
82+
padding: 0.55rem 0.9rem;
83+
color: rgba(255, 255, 255, 0.82);
84+
font-size: 0.88rem;
85+
}
86+
87+
.metricGrid,
88+
.creatorGrid {
89+
display: grid;
90+
gap: 1.25rem;
91+
}
92+
93+
.metricGrid {
94+
grid-template-columns: repeat(4, minmax(0, 1fr));
95+
margin-top: 1.5rem;
96+
}
97+
98+
.creatorGrid {
99+
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
100+
}
101+
102+
.metricCard {
103+
padding: 1.2rem;
104+
min-height: 152px;
105+
}
106+
107+
.metricLabel,
108+
.creatorLabel {
109+
.eyebrow();
110+
display: block;
111+
}
112+
113+
.metricValue {
114+
display: block;
115+
margin-top: 0.9rem;
116+
color: #fff;
117+
font-family: @heading;
118+
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
119+
line-height: 1.1;
120+
}
121+
122+
.metricMeta {
123+
display: block;
124+
margin-top: 0.9rem;
125+
color: @muted;
126+
font-size: 0.92rem;
127+
line-height: 1.6;
128+
}
129+
130+
.memberCard {
131+
height: 100%;
132+
padding: 1.35rem;
133+
}
134+
135+
.memberTop {
136+
display: flex;
137+
align-items: center;
138+
gap: 1rem;
139+
}
140+
141+
.avatar {
142+
flex-shrink: 0;
143+
width: 4rem;
144+
height: 4rem;
145+
border: 1px solid rgba(44, 232, 255, 0.26);
146+
box-shadow: 0 0 24px rgba(44, 232, 255, 0.14);
147+
}
148+
149+
.memberName {
150+
margin: 0;
151+
color: #fff;
152+
font-weight: 700;
153+
font-size: 1.05rem;
154+
}
155+
156+
.memberLink {
157+
color: @cyan;
158+
text-decoration: none;
159+
160+
&:hover {
161+
color: #fff;
162+
}
163+
}
164+
165+
.memberSummary {
166+
margin: 1rem 0 0;
167+
color: @muted;
168+
line-height: 1.75;
169+
}
170+
171+
.skillList {
172+
display: flex;
173+
flex-wrap: wrap;
174+
gap: 0.55rem;
175+
margin: 1rem 0 0;
176+
padding: 0;
177+
list-style: none;
178+
}
179+
180+
.skill {
181+
.chip();
182+
padding: 0.45rem 0.72rem;
183+
color: rgba(255, 255, 255, 0.8);
184+
font-size: 0.82rem;
185+
}
186+
187+
.summaryTitle,
188+
.creatorValue {
189+
margin: 0;
190+
color: #fff;
191+
font-family: @heading;
192+
}
193+
194+
.summaryTitle {
195+
font-size: clamp(1.3rem, 2vw, 1.7rem);
196+
line-height: 1.5;
197+
}
198+
199+
.summaryText,
200+
.creatorText {
201+
margin: 1rem 0 0;
202+
color: @muted;
203+
line-height: 1.8;
204+
}
205+
206+
.creatorValue {
207+
margin-top: 0.85rem;
208+
font-size: 1.45rem;
209+
line-height: 1.4;
210+
}
211+
212+
.scoreButton {
213+
.button-primary();
214+
margin-top: 1rem;
215+
width: 100%;
216+
}
217+
218+
.productCardOverride {
219+
border-color: rgba(44, 232, 255, 0.16) !important;
220+
background: linear-gradient(180deg, rgba(7, 18, 39, 0.92), rgba(6, 13, 30, 0.88)) !important;
221+
222+
:global(.card-title),
223+
:global(p),
224+
:global(time),
225+
:global(figcaption),
226+
:global(.bi) {
227+
color: @copy !important;
228+
}
229+
230+
:global(p),
231+
:global(time),
232+
:global(figcaption) {
233+
opacity: 0.76 !important;
234+
}
235+
236+
:global(.btn-dark) {
237+
border-color: rgba(44, 232, 255, 0.26);
238+
background: rgba(44, 232, 255, 0.08);
239+
color: #fff;
240+
}
241+
242+
:global(.btn-primary) {
243+
border-color: rgba(123, 97, 255, 0.3);
244+
background: rgba(123, 97, 255, 0.18);
245+
}
246+
247+
:global(.btn-warning) {
248+
border-color: rgba(255, 201, 77, 0.26);
249+
background: rgba(255, 201, 77, 0.16);
250+
color: #fff;
251+
}
252+
}
253+
254+
.emptyState {
255+
padding: 2rem 1.5rem;
256+
color: @muted;
257+
text-align: center;
258+
font-size: 1rem;
259+
}
260+
261+
.commentWrap {
262+
margin-top: clamp(3rem, 5vw, 4rem);
263+
}
264+
265+
.scoreModal {
266+
:global(.modal-content) {
267+
border: 1px solid rgba(44, 232, 255, 0.18);
268+
border-radius: 24px;
269+
background: rgba(8, 18, 39, 0.96);
270+
color: @copy;
271+
}
272+
273+
:global(.modal-header) {
274+
border-bottom-color: rgba(255, 255, 255, 0.08);
275+
}
276+
277+
:global(.btn-close) {
278+
filter: invert(1) grayscale(1);
279+
}
280+
}
281+
282+
@media (max-width: 1199px) {
283+
.creatorGrid {
284+
grid-template-columns: 1fr;
285+
}
286+
}
287+
288+
@media (max-width: 991px) {
289+
.metricGrid {
290+
grid-template-columns: repeat(2, minmax(0, 1fr));
291+
}
292+
}
293+
294+
@media (max-width: 767px) {
295+
.metricGrid {
296+
grid-template-columns: 1fr;
297+
}
298+
}

0 commit comments

Comments
 (0)