トピックカード

[JammyDodger]

FWIW セーフモードに入って一括操作を実行することは、テーマコンポーネントを全員に対して無効化する代わりになるかもしれません。明らかに余分な手間はかかりますが、他の全員への影響は少ない可能性がありますか？

[tknospdr (David Muszynski)]

はい、セーフモードについて知った後、それがわかりました。

[DenisDoroshchuk]

こんにちは。

コンポーネントをご提供いただきありがとうございます。https://community.escapecollective.com/ でコンポーネントを使用している際に問題を発見しました。トピックのタイトルをクリックするとSPAがリロードされます（この問題のGIFを添付しました）が、タイトルの外側のカードをクリックするとすべて正常に動作します。ページのリロードによりGuest Gateコンポーネントが正常に機能しなかったため、この問題が発見されました。
こちらが提案です：Guest Gate Theme Component - #154 by Don
この問題についてご確認いただけますでしょうか？

よろしくお願いいたします。
Denis D.

[tknospdr (David Muszynski)]

@tknospdr

ありがとうございます。追加しました。

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

これで、標準の「Shades of Blue」パレットで完璧に動作します。

さて、パート2です。2つのカラーパレットで動作するように編集するにはどうすればよいですか？ブラウザがダークモードに切り替わるまで、見た目は良かったのですが。

自分で質問に答えます…

昨夜、@media (prefers-color-scheme: light/dark) について学びましたので、すべて順調です。

どうやら、Discourse の最後のアップデートで何かが変更されたようです。
トピックカードの非常に左端だけがこの CSS を尊重するようになりました。修正方法を見つけようと色々試しましたが、今のところ成功していません。
他に確認できる方はいらっしゃいますか？必要な変更箇所を特定できますか？

[Moin]

読んだトピックの背景色に関する最近追加された変数に問題があります。

この変更に関する dev-news はないと思いますが、こちらで情報を確認できます。

Styling Discourse with variables: Show & Tell

We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-_]+): If using a code editor and searching for all instances of the above regex, you should see something …

[tknospdr (David Muszynski)]

CSSを抑制する方法はありますか？サイトの外観が台無しになり、コーダーではないので、どうすればよいかわかりません。
要素インスペクターを調べたところ、壊れているトピックすべてに「visited」という単語があり、正常に見えるものには「visited」がないことがわかりました。
これをどうすれば修正できますか？

まだ訪問していないトピック（ホバーなし）：

マウスオーバー時：

他のトピックは壊れています。

[tknospdr (David Muszynski)]

本来ならもっと簡単に特定できたはずなのですが。（私の能力不足が原因であることは確かですが…）

以下を追加することで、

.topic-list-item-background-color--visited {
    background: none
}

望ましくない副作用なしに修正できたようです。

[jordan.vidrine]

スタイルでは、これらの2つの変数のみを変更する必要があります。

--topic-list-item-background-color
--topic-list-item-background-color--visited

したがって、次のようなものが機能するはずです。

:root {
--topic-list-item-background-color: YOUR COLOR HERE;
--topic-list-item-background-color--visited: YOUR COLOR HERE;
}

[tknospdr (David Muszynski)]

ライトとダークを切り替える際の差異をどのように説明しますか？

[jordan.vidrine]

@tknospdr

それを光と暗闇の間で変更する際の差異にどのように説明できますか？

CSS関数light-dark()を使用できます。

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

訪問後に違いが生じるのは避けたいです。

両方を同じものに設定できます。

@tknospdr

ホバー時の色変更はカバーされていません。

コアでは:hoverに対して何も行われていません。ホバー時に変数を希望の値に設定するだけで済みます。

[tknospdr (David Muszynski)]

これはまだうまくいきません。
最初に機能したのは次のとおりです。

// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

最新のアップデートの後、これは機能するように見えましたが、その後停止しました。

.topic-list-item-background-color--visited {
    background: none
}

次に、ここで言われたことに基づいて、現在のものに追加したり、すべてをこれに置き換えたりしてみました。

:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}

未読のスレッドは正しく機能しますが、既読のスレッドは壊れているため、hover-visited をカバーする必要がある別の変数があるはずです。

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

この変数は存在しません。

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

これで必要なものが揃うはずです。お役に立てば幸いです！

[tknospdr (David Muszynski)]

これは、正しく動作しているように見える最小限の行数です。

// Blend topic card colors with theme
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

[RGJ (Richard - Communiteq)]

このテーマコンポーネントにPRを作成しました。2つの機能が追加されています。

機能：おすすめトピックの切り替え

「おすすめトピックの表示」設定を追加します。

これにより、トピックカードがおすすめトピックに使用されることをオプションにできます（こちらの機能リクエストで説明されている通り）。

機能：カテゴリへの制限

「カテゴリでの表示」設定を追加します。

空でない場合、選択したカテゴリでのみトピックカードが使用されます。

[jrgong]

素晴らしい追加です @RGJ。インスタンスでテストしたところ、見事に機能しました。私の意見では、絶対にマージされるべきです。

[jrgong]

Discourse 3.5.0 の tc で、別の小さな CSS バグが見つかりました。

編集履歴や引用を展開する要素などの複数の UI 要素の周りに境界線が追加されます。

これは、ボタン要素から btn no-text クラスが欠落しているためです。

[chapoi]

レビューとマージが完了しました。追加ありがとうございます！

[Picho_Pelis (Carlos Andres)]

正直、動作させることができませんでした。とても醜い状態になっています。Horinzonテーマを使用しています。助けてください。

[Moin]

このコンポーネントはHorizonテーマと互換性があるとは記載されていません。

これは、トピックリストの両方をカスタマイズするため、また最初の投稿に記載されているように、変更するのは簡単ではないと思います。

@Discourse

このテーマコンポーネントは、トピックリストの他のカスタマイズと競合する可能性があります。

[Picho_Pelis (Carlos Andres)]

@tknospdr

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

ここのスレッドで見かけるCSSをどのように追加できますか？