Diferencie conteúdos da lista de tópicos usando cores diferentes

[Renato_Mendes]

E aí, pessoal! Essa é uma solução interessante. Eu estava pensando se seria possível definir uma cor de fundo ligeiramente diferente para o título e as tags, para que fique mais fácil identificar o próximo tópico. Como está agora, acho que é bastante confuso, porque tudo parece quase igual.

Obrigado

[Canapin (Coin-coin le Canapin)]

Olá Renato

Você pode direcionar esses elementos com as ferramentas de desenvolvedor do seu navegador, você pode ler sobre isso aqui:

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

No entanto, como esses elementos são estilizados, eles usam muitos seletores diferentes através da aninhamento do código SCSS original.

Eu começaria com o CSS compilado e o ajustaria se ele tiver efeitos não intencionais:

Tópicos com posts não lidos:

# títulos
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}
 
# categorias
.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);
}

Tópicos visitados:

# títulos
.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);
}
 
# categorias
.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);
}

Os trechos não têm um estilo específico para tópicos visitados (mas podem ser ajustados com CSS adicional).

.topic-list .topic-excerpt {
    color: var(--primary-high);
}