Citações CSS - estilização geral

Dev
1

O estilo padrão de citações no Discourse, quais são as classes CSS exatas etc. que controlam isso.

Brinquei com .blockquote, mas o que está criando a linha vertical de cerca de 4/6 px à esquerda e a cor de fundo? Bem, na verdade, no título da citação do usuário, é apenas .title?

Como de costume, obrigado antecipadamente. Tenho ficado encarando a tela por tempo demais hoje. Chega! Se ao menos este fórum servisse :beers:, você sabe!

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

Olá, uma pergunta específica:

Alguém sabe sobre o CSS de citações aninhadas, especificamente as citações aninhadas de “primeiro nível”?

O que quero alcançar é um esquema de cores diferente para citações aninhadas em relação à “citação principal”.

De algo como este

.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;
    }

Eu tentei criar um esquema de cores diferente apenas para esta parte

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

E obtive um sucesso parcial, mas não em toda a citação aninhada.

Alguma ideia?

5

Acho que algo assim pode funcionar

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

Isso é um pouco difícil de ler em SASS, mas a saída final é

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

Funciona perfeitamente, obrigado! :+1: :+1: :+1:

Exemplo:
Anteckning 2020-01-16 110229