55 lines
1.0 KiB
CSS
55 lines
1.0 KiB
CSS
body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.level-card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
border-radius: .5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.level-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.level-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.level-locked {
|
|
position: relative;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.level-locked img {
|
|
filter: grayscale(100%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.locked-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.level-locked .card-body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* FontAwesome Lock Icon - requires adding FontAwesome kit to the HTML */
|
|
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); |