Étape 8 : CSS - Filtres, Liste des Tâches et Finitions

Dernière étape du CSS ! Nous allons styliser les boutons de filtres (“pill buttons”) et l’apparence des tâches elles-mêmes.

1. Les boutons de Filtre (.filters)

Nous voulons une liste de boutons horizontaux, un peu comme des “tags” ou des pilules.

/* Filtres */
.filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto; /* Permet le scroll horizontal sur mobile si ça dépasse */
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    border-radius: 20px; /* Bords très ronds (forme pilule) */
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap; /* Le texte ne passe pas à la ligne */
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #f3f4f6;
    color: var(--text-main);
}

/* Style pour le bouton actif (sélectionné) */
.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

2. La Liste et les Items (.task-item)

C’est ici que l’utilisateur passera le plus de temps. Les tâches doivent être lisibles.

/* Liste des tâches */
.task-list {
    list-style: none; /* Enlève les puces (points noirs) */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-item {
    display: flex;
    align-items: center; /* Aligne verticalement checkbox, texte, bouton */
    background: white;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;

    /* Animation d'entrée */
    animation: slideIn 0.3s ease-out forwards;
}

/* Style spécifique pour une tâche terminée */
.task-item.completed {
    background: #f9fafb; /* Grise l'item */
    border-color: transparent;
}

.task-item.completed .task-title {
    text-decoration: line-through; /* Barre le texte */
    color: var(--text-muted);
}

3. Détails : Checkbox, Badges et Bouton Supprimer

.task-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--success); /* Checkbox verte quand cochée ! */
    margin-right: 1rem;
}

.task-content {
    flex: 1; /* Prend toute la place disponible */
}

.task-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.task-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Badges de priorité */
.badge {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}
/* Couleurs spécifiques par priorité */
.badge-haute {
    background: #fee2e2;
    color: #b91c1c;
} /* Rouge */
.badge-normale {
    background: #e0e7ff;
    color: #4338ca;
} /* Indigo */
.badge-basse {
    background: #d1fae5;
    color: #047857;
} /* Vert */

/* Bouton Supprimer (poubelle) */
.btn-delete {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-delete:hover {
    background: #fee2e2; /* Fond rouge pâle */
    color: var(--danger); /* Icône rouge */
}

4. Animation Keyframes

Pour finir en beauté, ajoutons la définition de l’animation slideIn utilisée plus haut.

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Arrive d'un peu plus bas */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

---

Bravo ! Vous avez terminé tout le CSS. Si vous rechargez la page, vous verrez l’interface complète (bien que vide de tâches). Les boutons de filtre réagissent au survol. La partie visuelle est terminée. Place maintenant au cerveau de l’application : le JavaScript.