107 lines
2.3 KiB
CSS
107 lines
2.3 KiB
CSS
|
/* GAMING & LEADERBOARDS */
|
||
|
|
.leaderboard-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: var(--color-void-100);
|
||
|
|
margin-bottom: var(--space-2);
|
||
|
|
padding: var(--space-3);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
border: 1px solid transparent;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leaderboard-row:hover {
|
||
|
|
transform: translateX(5px);
|
||
|
|
border-color: var(--color-void-300);
|
||
|
|
background: var(--color-void-50);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-badge {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-family: var(--font-display);
|
||
|
|
font-size: var(--text-lg);
|
||
|
|
margin-right: var(--space-4);
|
||
|
|
color: var(--color-void-500);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-1 {
|
||
|
|
color: var(--color-xp-gold);
|
||
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-2 {
|
||
|
|
color: #C0C0C0;
|
||
|
|
text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rank-3 {
|
||
|
|
color: #CD7F32;
|
||
|
|
text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.challenge-card {
|
||
|
|
position: relative;
|
||
|
|
background: linear-gradient(135deg, var(--color-void-100), var(--color-void-50));
|
||
|
|
border: 1px solid var(--color-void-200);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
padding: var(--space-6);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.challenge-card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 4px;
|
||
|
|
height: 100%;
|
||
|
|
background: var(--color-xp-gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.challenge-progress {
|
||
|
|
height: 8px;
|
||
|
|
background: var(--color-void-300);
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-top: var(--space-4);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.challenge-fill {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--grad-gaming);
|
||
|
|
width: 0%;
|
||
|
|
transition: width 1s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.achievement-hexagon {
|
||
|
|
width: 80px;
|
||
|
|
height: 92px;
|
||
|
|
/* width * 1.1547 */
|
||
|
|
background: var(--color-void-200);
|
||
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 0 auto var(--space-2);
|
||
|
|
transition: all 0.3s;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.achievement-hexagon.unlocked {
|
||
|
|
background: linear-gradient(45deg, var(--color-xp-gold), #B8860B);
|
||
|
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.achievement-hexagon.unlocked::after {
|
||
|
|
content: '🏆';
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.achievement-hexagon:hover {
|
||
|
|
transform: scale(1.1) rotate(5deg);
|
||
|
|
}
|