cor de fundo .topic-body carrega após um atraso

Suporte
1

Olá,

Estou usando um fundo escuro com .topic-body branco para contraste.

Este é o CSS que estou usando:

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

Mas sempre que o site é recarregado, primeiro o background-color do HTML aparece, depois o background-color do .topic-body carrega.

Isso é ruim para a experiência do usuário.

Existe alguma maneira de priorizar o carregamento do background-color do .topic-body primeiro?

Ou existe alguma outra maneira de fazer isso?

Este é o resultado final que eu queria e obtive:

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

2

Olá, você tem que sobrescrever o keyframes ou criar um novo.
Algo assim mudará as cores de transição da animação.

A keyframe padrão é :arrow_down_small:

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

Isso significa que ele destaca de var(--tertiary-low) para transparent. O que é legal porque a cor de fundo padrão do Discourse é branca e o corpo do tópico não tem fundo, então transparente será branco, mas na sua situação o problema é que o fundo é diferente, então ele vai primeiro para transparente e depois de um pequeno atraso ele será #fff (a cor de fundo que você definiu para topic-body).

Então você tem que mudar o transparente para fazer uma transição de cor suave. Você pode sobrescrever o padrão, mas talvez seja melhor criar uma nova keyframe.

Nota: Se você sobrescrever a keyframe padrão, ela mudará em todos os lugares onde o Discourse a estiver usando, não apenas no topic-body. :arrow_down_small:

Isso sobrescreverá as keyframes padrão.

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

Se você quiser criar uma nova keyframe :arrow_down_small:

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

E adicione esta keyframe ao corpo do tópico.

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

O código completo fica mais ou menos assim. :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

Depois

10 curtidas
3

Funciona perfeitamente!

Obrigado @Don

Deve ter levado algum tempo para escrever esta solução completa. Agradeço a ajuda e o apoio.

Tenha um ótimo dia/noite :slight_smile:

4 curtidas
4

Olá @riteshsaini. :wave:

Movi este tópico para Support, para que você possa marcar a ótima resposta de @Don como a solução. :slight_smile:

2 curtidas
8

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