Différencier le contenu des lignes de la liste de sujets en utilisant différentes couleurs

Dev
2

Salut Renato :wave:
Vous pouvez cibler ces éléments avec les outils de développement de votre navigateur, vous pouvez en savoir plus ici :
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

Cependant, la façon dont ces éléments sont stylisés utilise de nombreux sélecteurs différents par imbrication à partir du code SCSS d’origine.

Je commencerais par le CSS compilé et je l’ajusterais s’il a des effets indésirables :

Sujets avec des messages non lus :

# titles
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}

# categories
.badge-wrapper.bullet span.badge-category {
    color: var(--primary-high);
}

# tags
.topic-list-item.visited .topic-list-data a.discourse-tag, .latest-topic-list-item.visited a.discourse-tag, .category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Sujets visités :

# titles
.topic-list-item.visited .topic-list-data a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification) {
    color: var(--primary-medium);
}

# categories
.topic-list-item.visited .topic-list-data span.badge-category,
.latest-topic-list-item.visited span.badge-category,
.category-topic-link.visited span.badge-category {
    color: var(--primary-medium);
}

#tags
.topic-list-item.visited .topic-list-data a.discourse-tag,
.latest-topic-list-item.visited a.discourse-tag,
.category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Les extraits n’ont pas de style spécifique pour les sujets visités (mais cela peut être ajusté avec du CSS supplémentaire).

.topic-list .topic-excerpt {
    color: var(--primary-high);
}
2 « J'aime »