el color de fondo de .topic-body se carga después de un retraso

Soporte
1

Hola,

Estoy usando un fondo oscuro con .topic-body blanco para contraste.

Este es el CSS que estoy usando:

html {
    background-color: #F5F5F5;
}
.topic-body {
    background-color: #fff;
}

Pero cada vez que se recarga el sitio, primero aparece el color de fondo del HTML y luego se carga el color de fondo de .topic-body.

Es malo para la experiencia del usuario.

¿Hay alguna forma de priorizar la carga del color de fondo de .topic-body?

¿O hay alguna otra forma de hacerlo?

Este es el resultado final que quería y obtuve:

6897e8f9-70a2-4469-9af0-45a5de0003ff
6897e8f9-70a2-4469-9af0-45a5de0003ff1098×657 73.2 KB

2

Hola, tienes que sobrescribir los keyframes o crear unos nuevos.
Algo como esto cambiará los colores de transición de la animación.

El keyframe por defecto es :arrow_down_small:

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: transparent;
  }
}

Esto significa que resalta de var(--tertiary-low) a transparent. Lo cual es genial porque el color de fondo por defecto de Discourse es blanco y el cuerpo del tema no tiene fondo, por lo que transparent será blanco, pero en tu situación el problema es que el fondo es diferente, por lo que primero va a transparent y después de un pequeño retraso será #fff (el color de fondo que configuraste para topic-body).

Así que tienes que cambiar transparent para que la transición de color sea suave. Puedes sobrescribir el valor por defecto, pero quizás sea mejor crear un nuevo keyframe.

Nota: Si sobrescribes el keyframe por defecto, cambiará en todas partes donde Discourse lo use, no solo en topic-body. :arrow_down_small:

Esto sobrescribirá los keyframes por defecto.

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

Si quieres crear un nuevo keyframe :arrow_down_small:

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

Y añade este keyframe al cuerpo del tema.

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

El código completo se ve algo así. :arrow_down_small:

body {
  background-color: #F5F5F5;
}

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

Antes

Después

10 Me gusta
3

¡Funciona perfectamente!

Gracias @Don

Debe haber llevado tiempo escribir esta solución tan completa. Agradezco la ayuda y el apoyo.

Que tengas un buen día/tarde :slight_smile:

4 Me gusta
4

Hola @riteshsaini. :wave:

He movido este tema a #soporte, para que puedas marcar la gran respuesta de @Don como la solución. :slight_smile:

2 Me gusta
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.