MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→CSS placed here will be applied to all skins: .clean-new-articles li { font-size: 0; } .clean-new-articles li a.mw-newpages-pagename { font-size: 15px; }" |
No edit summary |
||
| Line 5: | Line 5: | ||
.clean-new-articles li a.mw-newpages-pagename { | .clean-new-articles li a.mw-newpages-pagename { | ||
font-size: 15px; | font-size: 15px; | ||
} | |||
.volunteer-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 25px; | |||
justify-content: center; | |||
margin: 40px 0; | |||
} | |||
.volunteer-card { | |||
background: #ffffff; | |||
border: 1px solid #e2e8f0; | |||
border-radius: 16px; | |||
padding: 35px 20px 25px 20px; | |||
text-align: center; | |||
width: 280px; | |||
position: relative; | |||
overflow: hidden; | |||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); | |||
} | |||
.volunteer-card:hover { | |||
transform: translateY(-10px) perspective(600px) rotateX(3deg) rotateY(-3deg) scale(1.02); | |||
box-shadow: 0 20px 30px -5px rgba(218, 165, 32, 0.3), 0 0 15px rgba(255, 215, 0, 0.2); | |||
border-color: #d4af37; | |||
} | |||
.volunteer-card::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; left: -150%; | |||
width: 50%; height: 100%; | |||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255, 215, 0, 0.4) 50%, rgba(255,255,255,0) 100%); | |||
transform: skewX(-25deg); | |||
transition: all 0.7s ease; | |||
pointer-events: none; | |||
} | |||
.volunteer-card:hover::before { | |||
left: 200%; | |||
} | |||
.volunteer-avatar { | |||
width: 80px; | |||
height: 80px; | |||
margin: 0 auto 15px auto; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: #f8fafc; | |||
color: #94a3b8; | |||
transition: all 0.4s ease; | |||
} | |||
.volunteer-card:hover .volunteer-avatar { | |||
background: #fef08a; | |||
color: #ca8a04; | |||
transform: scale(1.1); | |||
} | |||
.volunteer-links { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
margin-top: 15px; | |||
} | |||
.volunteer-links a { | |||
color: #64748b; | |||
text-decoration: none; | |||
font-weight: 600; | |||
font-size: 14px; | |||
transition: color 0.3s; | |||
} | |||
.volunteer-links a:hover { | |||
color: #d4af37; | |||
} | } | ||
Revision as of 17:36, 15 September 2026
/* CSS placed here will be applied to all skins */
.clean-new-articles li {
font-size: 0;
}
.clean-new-articles li a.mw-newpages-pagename {
font-size: 15px;
}
.volunteer-grid {
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
margin: 40px 0;
}
.volunteer-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 35px 20px 25px 20px;
text-align: center;
width: 280px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.volunteer-card:hover {
transform: translateY(-10px) perspective(600px) rotateX(3deg) rotateY(-3deg) scale(1.02);
box-shadow: 0 20px 30px -5px rgba(218, 165, 32, 0.3), 0 0 15px rgba(255, 215, 0, 0.2);
border-color: #d4af37;
}
.volunteer-card::before {
content: "";
position: absolute;
top: 0; left: -150%;
width: 50%; height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255, 215, 0, 0.4) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
transition: all 0.7s ease;
pointer-events: none;
}
.volunteer-card:hover::before {
left: 200%;
}
.volunteer-avatar {
width: 80px;
height: 80px;
margin: 0 auto 15px auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
color: #94a3b8;
transition: all 0.4s ease;
}
.volunteer-card:hover .volunteer-avatar {
background: #fef08a;
color: #ca8a04;
transform: scale(1.1);
}
.volunteer-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 15px;
}
.volunteer-links a {
color: #64748b;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: color 0.3s;
}
.volunteer-links a:hover {
color: #d4af37;
}