トピックリストの行からコンテンツを異なる色で区別する

[Renato_Mendes]

皆さん、こんにちは！これは興味深い解決策ですね。タイトルとタグに少し異なる背景色を設定して、次のトピックを特定しやすくすることは可能でしょうか？現状では、すべてがほとんど同じように見えるため、非常に混乱していると感じています。

ありがとうございます

[Canapin (Coin-coin le Canapin)]

こんにちは、Renatoさん

ブラウザの開発者ツールでこれらの要素をターゲットにできます。詳細はこちらをご覧ください:

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

ただし、これらの要素のスタイル設定は、元のSCSSコードからネストされた多くの異なるセレクターを使用しています。

コンパイルされたCSSから始めて、意図しない影響がないか調整することをお勧めします。

未読投稿のあるトピック:

# 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);
}

閲覧済みのトピック:

# 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);
}

抜粋には、閲覧済みのトピックに対する特定のスタイルはありません（ただし、追加のCSSで調整できます）。

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