CSSの引用符：一般的なスタイリング

開発
1

Discourse の標準的な引用スタイルについて、これを制御する正確な CSS クラスなどを教えてください。

.blockquote をいじってみたのですが、左側の約 4/6 ピクセルの線や背景色を作っているのは何でしょうか。実際にはユーザー引用のタイトル部分ですね。それは単に .title でしょうか。

いつもの通り、事前にお礼申し上げます。今日は長時間画面を凝視しすぎました。もう限界です！もしこのフォーラムで :beers: が提供されていたらいいのにね！

2

You’ll want to style aside.quote .title and blockquote… You can cover both like this:

aside.quote .title, blockquote {
    // Styles here
}
3

@awesomerobot …at this point I owe you a :beer: Thanks!

4

こんにちは、具体的な質問です。

ネストされた引用（特に「最上位レベル」のネスト引用）の CSS について、ご存知の方はいますか？

目指しているのは、メインの引用とは異なる配色をネストされた引用に適用することです。

現在のコードは以下の通りです。

.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result, blockquote, aside.quote .title {
        border-left: 5px solid #212121;
        background: #25272d;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 0 0 0 rgba(0,0,0,0.12);
        border-radius: 2px;
    }

この部分のみを別の配色に変更しようとしています。

.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result

一部は成功したのですが、ネストされた引用全体には適用できていません。

何かアイデアはありますか？

5

たぶん、こんな感じのコードが動くと思います。

aside.quote blockquote {
  blockquote,
  aside.quote {
    &,
    .title,
    .onebox,
    .onebox-result {
      background-color: red;
    }
  }
}

SASS の記法では少し読みづらいですが、最終的な出力は以下のようになります。

aside.quote blockquote blockquote,
aside.quote blockquote blockquote .title,
aside.quote blockquote blockquote .onebox,
aside.quote blockquote blockquote .onebox-result,
aside.quote blockquote aside.quote,
aside.quote blockquote aside.quote .title,
aside.quote blockquote aside.quote .onebox,
aside.quote blockquote aside.quote .onebox-result {
  background-color: red;
}
6

素晴らしいです、ありがとうございます！:+1: :+1: :+1:

例:
Anteckning 2020-01-16 110229