Skip to content

Commit ba3d771

Browse files
NithinU2802NithinU2802
authored
feat: to modernize activitycard styles
Updated styles for ActivityCard component to enhance layout, hover effects, and responsiveness.
1 parent 7ac07bb commit ba3d771

File tree

1 file changed

+233
-8
lines changed

1 file changed

+233
-8
lines changed

‎src/styles/components/activities/ActivityCard.css‎

Lines changed: 233 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,246 @@
11
.activity-card-root {
2-
padding: 10px;
3-
margin: 10px;
2+
padding: 25px 20px;
3+
margin: 0;
44
display: flex;
55
flex-direction: column;
66
align-items: center;
7-
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
8-
transition-duration: 300ms;
7+
background: #ffffff;
8+
border-radius: 20px;
9+
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
10+
backdrop-filter: blur(4px);
11+
border: 1px solid rgba(255, 255, 255, 0.18);
12+
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
913
text-decoration: none;
14+
color: inherit;
15+
position: relative;
16+
overflow: hidden;
17+
min-height: 280px;
18+
justify-content: space-between;
1019
}
1120

21+
.activity-card-root::before {
22+
content: '';
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
right: 0;
27+
height: 4px;
28+
background: linear-gradient(90deg, #26b4ec, #032d7a, #26b4ec);
29+
background-size: 200% 100%;
30+
animation: shimmer 3s ease-in-out infinite;
31+
}
32+
33+
@keyframes shimmer {
34+
0%, 100% { background-position: 200% 0; }
35+
50% { background-position: -200% 0; }
36+
}
1237

1338
.activity-card-root:hover {
14-
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
15-
background: lightgray;
39+
transform: translateY(-10px) scale(1.02);
40+
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.25);
41+
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
42+
}
43+
44+
.activity-card-root:hover::before {
45+
animation-duration: 1s;
46+
}
47+
48+
.activity-card-image-container {
49+
position: relative;
50+
width: 80px;
51+
height: 80px;
52+
margin-bottom: 20px;
1653
}
1754

1855
.activity-card-root img {
19-
height: 100px;
56+
height: 80px;
57+
width: 80px;
58+
border-radius: 12px;
59+
transition: all 0.3s ease;
60+
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
61+
position: absolute;
62+
top: 0;
63+
left: 0;
64+
}
65+
66+
.activity-card-root:hover img {
67+
transform: scale(1.1);
68+
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
69+
}
70+
71+
.image-placeholder {
72+
position: absolute;
73+
top: 0;
74+
left: 0;
2075
width: 80px;
21-
}
76+
height: 80px;
77+
background: #f1f5f9;
78+
border-radius: 12px;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
}
83+
84+
.loading-spinner {
85+
width: 24px;
86+
height: 24px;
87+
border: 3px solid #e2e8f0;
88+
border-top: 3px solid #26b4ec;
89+
border-radius: 50%;
90+
animation: spin 1s linear infinite;
91+
}
92+
93+
@keyframes spin {
94+
0% { transform: rotate(0deg); }
95+
100% { transform: rotate(360deg); }
96+
}
97+
98+
.activity-card-title {
99+
font-size: 1.4rem;
100+
font-weight: 600;
101+
color: #032d7a;
102+
margin: 0 0 12px 0;
103+
text-align: center;
104+
line-height: 1.3;
105+
transition: color 0.3s ease;
106+
}
107+
108+
.activity-card-root:hover .activity-card-title {
109+
color: #26b4ec;
110+
}
111+
112+
.activity-card-desc {
113+
font-size: 0.95rem;
114+
color: #64748b;
115+
text-align: center;
116+
line-height: 1.6;
117+
margin: 0;
118+
font-weight: 400;
119+
flex-grow: 1;
120+
display: flex;
121+
align-items: center;
122+
transition: color 0.3s ease;
123+
}
124+
125+
.activity-card-root:hover .activity-card-desc {
126+
color: #475569;
127+
}
128+
129+
/* Loading state */
130+
.activity-card-root.loading {
131+
pointer-events: none;
132+
opacity: 0.7;
133+
}
134+
135+
/* Responsive Design */
136+
@media screen and (max-width: 768px) {
137+
.activity-card-root {
138+
padding: 20px 15px;
139+
min-height: 250px;
140+
border-radius: 16px;
141+
}
142+
143+
.activity-card-image-container {
144+
width: 70px;
145+
height: 70px;
146+
margin-bottom: 15px;
147+
}
148+
149+
.activity-card-root img,
150+
.image-placeholder {
151+
height: 70px;
152+
width: 70px;
153+
}
154+
155+
.activity-card-title {
156+
font-size: 1.2rem;
157+
margin-bottom: 10px;
158+
}
159+
160+
.activity-card-desc {
161+
font-size: 0.9rem;
162+
}
163+
}
164+
165+
@media screen and (max-width: 480px) {
166+
.activity-card-root {
167+
padding: 18px 12px;
168+
min-height: 220px;
169+
border-radius: 12px;
170+
}
171+
172+
.activity-card-image-container {
173+
width: 60px;
174+
height: 60px;
175+
margin-bottom: 12px;
176+
}
177+
178+
.activity-card-root img,
179+
.image-placeholder {
180+
height: 60px;
181+
width: 60px;
182+
}
183+
184+
.activity-card-title {
185+
font-size: 1.1rem;
186+
margin-bottom: 8px;
187+
}
188+
189+
.activity-card-desc {
190+
font-size: 0.85rem;
191+
line-height: 1.5;
192+
}
193+
194+
.activity-card-root:hover {
195+
transform: translateY(-5px) scale(1.01);
196+
}
197+
}
198+
199+
/* Focus states for accessibility */
200+
.activity-card-root:focus {
201+
outline: 3px solid #26b4ec;
202+
outline-offset: 2px;
203+
}
204+
205+
.activity-card-root:focus:not(:focus-visible) {
206+
outline: none;
207+
}
208+
209+
/* High contrast mode support */
210+
@media (prefers-contrast: high) {
211+
.activity-card-root {
212+
border: 2px solid #032d7a;
213+
background: #ffffff;
214+
}
215+
216+
.activity-card-title {
217+
color: #000000;
218+
}
219+
220+
.activity-card-desc {
221+
color: #333333;
222+
}
223+
}
224+
225+
/* Reduced motion support */
226+
@media (prefers-reduced-motion: reduce) {
227+
.activity-card-root {
228+
transition: none;
229+
}
230+
231+
.activity-card-root img {
232+
transition: none;
233+
}
234+
235+
.activity-card-root::before {
236+
animation: none;
237+
}
238+
239+
.loading-spinner {
240+
animation: none;
241+
}
242+
243+
.activity-card-root:hover {
244+
transform: none;
245+
}
246+
}

0 commit comments

Comments
 (0)