Ryan Kegel
63769fbe32
Some checks failed
Gitea Actions Demo / build-and-push (push) Failing after 9s
- Replaced inline modal dialogs in ParentView with a reusable ModalDialog component. - Introduced StatusMessage component for loading and error states in ParentView. - Updated styles to use new colors.css and styles.css for consistent theming. - Removed ChildRewardList.vue and ChildTaskList.vue components as they were no longer needed. - Adjusted RewardAssignView and TaskAssignView to use new styles and shared button styles. - Cleaned up imports across components to reflect the new styles and removed unused CSS files.
99 lines
1.5 KiB
CSS
99 lines
1.5 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|