style: improve task list CSS styling and layout

Task List Styling Improvements:

1. Added .tasks-list-header styling
   - Flexbox layout with space-between alignment
   - Border bottom separator line
   - Proper heading (h4) with icon and spacing
   - Muted text color for counts

2. Added .task-list-empty styling
   - Full centered empty state container
   - Proper spacing and padding (3rem)
   - Icon styling with reduced opacity
   - Title and hint text with correct colors and sizes
   - Button margin adjustment

3. Enhanced .empty-state styling
   - Added button margin-top (1rem) for better spacing
   - Applied to both .empty-state and .empty-detail-state

Result: Task list now has consistent, professional styling with:
- Clear visual hierarchy for headers
- Properly centered empty states
- Better spacing and typography
- Improved user experience
This commit is contained in:
catlog22
2026-01-22 11:41:00 +08:00
parent ddb7fb7d7a
commit e2e3d5a815

View File

@@ -883,6 +883,11 @@
line-height: 1.5;
}
.empty-state .btn,
.empty-detail-state .btn {
margin-top: 1rem;
}
/* ==========================================
TASK LIST
========================================== */
@@ -895,6 +900,65 @@
overflow-y: auto;
}
/* Task List Header */
.tasks-list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.75rem;
border-bottom: 1px solid hsl(var(--border) / 0.6);
margin-bottom: 0.75rem;
}
.tasks-list-header h4 {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: hsl(var(--foreground));
display: flex;
align-items: center;
gap: 0.5rem;
}
.tasks-list-header .text-sm {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
/* Task List Empty State */
.task-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 3rem 1rem;
text-align: center;
color: hsl(var(--muted-foreground));
}
.task-list-empty i {
color: hsl(var(--muted-foreground) / 0.6);
}
.task-list-empty .empty-state-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: hsl(var(--foreground));
}
.task-list-empty .empty-state-hint {
margin: 0;
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
max-width: 300px;
}
.task-list-empty .btn {
margin-top: 0.5rem;
}
.task-item {
display: flex;
align-items: center;