Различайте содержимое и строки списка тем с помощью разных цветов

Привет, ребята! Это интересное решение. Я wondered, можно ли установить немного другой цвет фона для заголовка и тегов, чтобы было легче определить следующую тему. Как сейчас, мне кажется, это довольно запутанно, потому что всё выглядит почти одинаково.

Спасибо :slight_smile:

Привет, Ренато :wave:

Вы можете найти эти элементы с помощью инструментов разработчика в браузере; подробнее об этом можно прочитать здесь:

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

Однако стилизация этих элементов использует множество различных селекторов, полученных в результате вложенности из исходного SCSS-кода.

Я бы начал с скомпилированного CSS и вносил правки, если возникают нежелательные эффекты:

Темы с непрочитанными сообщениями:

# Заголовки
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}

# Категории
.badge-wrapper.bullet span.badge-category {
    color: var(--primary-high);
}

# Теги
.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);
}

Посещённые темы:

# Заголовки
.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);
}

# Категории
.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);
}

# Теги
.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);
}

Для посещённых тем в отрывках нет специального стиля (но его можно настроить с помощью дополнительного CSS).

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