Citas CSS: estilos generales

Desarrollador
1

El estilo de citas estándar en Discourse, ¿cuáles son las clases CSS exactas, etc., que lo controlan?

He probado con .blockquote, pero ¿qué crea la línea de unos 4/6 píxeles a la izquierda y el color de fondo? Bueno, en realidad en el título de la cita del usuario, ¿es solo .title?

Como siempre, gracias de antemano. He estado mirando una pantalla demasiado tiempo hoy. ¡Estoy agotado! ¡Si solo este foro sirviera :beers: ya sabes!

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

Hola, una pregunta concreta:

¿Alguien conoce el CSS de las citas anidadas, específicamente las citas anidadas de “primer nivel”?

Lo que quiero lograr es un esquema de colores diferente para las citas anidadas en comparación con la “cita principal”.

De algo como esto

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

Intenté crear un esquema de colores diferente solo para esta parte

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

Y logré un éxito parcial, pero no con toda la cita anidada.

¿Alguna idea?

5

Creo que algo así podría funcionar

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

Esto es un poco difícil de leer en SASS, pero la salida final es

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 a la perfección, ¡gracias! :+1: :+1: :+1:

Ejemplo:
Anteckning 2020-01-16 110229