Ryan Kegel
dcac2742e9
All checks were successful
Gitea Actions Demo / build-and-push (push) Successful in 13s
113 lines
1.8 KiB
CSS
113 lines
1.8 KiB
CSS
.layout {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.loading {
|
|
color: var(--loading-color);
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Modal Backdrop and Modal */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1200;
|
|
}
|
|
.modal {
|
|
background: var(--modal-bg);
|
|
color: var(--modal-text);
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 12px;
|
|
min-width: 240px;
|
|
box-shadow: var(--modal-shadow);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Dialog Message */
|
|
.dialog-message {
|
|
font-size: 1.08rem;
|
|
color: var(--dialog-message);
|
|
font-weight: 500;
|
|
margin-bottom: 1.2rem;
|
|
text-align: center;
|
|
}
|
|
.dialog-message .child-name {
|
|
color: var(--dialog-child-name);
|
|
font-weight: 700;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* Info Sections (Reward/Task) */
|
|
.info,
|
|
.reward-info,
|
|
.task-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.image,
|
|
.reward-image,
|
|
.task-image {
|
|
width: 72px;
|
|
height: 72px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
background: var(--info-image-bg);
|
|
}
|
|
.details,
|
|
.reward-details,
|
|
.task-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.name,
|
|
.reward-name,
|
|
.task-name {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
}
|
|
.points,
|
|
.reward-points,
|
|
.task-points {
|
|
color: var(--info-points);
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 900px) {
|
|
.layout {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.main {
|
|
gap: 1rem;
|
|
}
|
|
.modal {
|
|
padding: 1rem;
|
|
min-width: 0;
|
|
}
|
|
}
|