Il colore di sfondo di .topic-body viene caricato in ritardo

Supporto
1

Ciao,

Sto usando uno sfondo scuro con .topic-body bianco per contrasto.

Questo è il CSS che sto usando:

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

Ma ogni volta che il sito viene ricaricato, prima appare il colore di sfondo dell’HTML, poi viene caricato il colore di sfondo di .topic-body.

È un’esperienza utente negativa.

C’è un modo per dare priorità al caricamento del colore di sfondo di .topic-body per primo?

O c’è un altro modo per farlo?

Questo è il risultato finale che volevo e ho ottenuto:

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

2

Ciao, devi sovrascrivere i keyframes o crearne di nuovi.
Qualcosa del genere cambierà i colori della transizione dell’animazione.

Il keyframe predefinito è :arrow_down_small:

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

Ciò significa che evidenzia da var(--tertiary-low) a transparent. Il che è fantastico perché il colore di sfondo predefinito di Discourse è bianco e il corpo dell’argomento non ha sfondo, quindi trasparente sarà bianco, ma nella tua situazione il problema è che lo sfondo è diverso, quindi passa prima a trasparente e dopo un piccolo ritardo diventerà #fff (il colore di sfondo che hai impostato per topic-body).

Quindi devi cambiare il trasparente per rendere la transizione del colore fluida. Puoi sovrascrivere il predefinito, ma forse è meglio creare un nuovo keyframe.

Nota: Se sovrascrivi il keyframe predefinito, cambierà ovunque Discourse lo utilizzi, non solo in topic-body. :arrow_down_small:

Questo sovrascriverà i keyframe predefiniti.

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

Se vuoi creare un nuovo keyframe :arrow_down_small:

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

E aggiungi questo keyframe al corpo dell’argomento.

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

Il codice completo è simile a questo. :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;
  }
}

Prima

Dopo

10 Mi Piace
3

Funziona perfettamente!

Grazie @Don

Deve aver richiesto del tempo per scrivere questa soluzione completa. Apprezzo l’aiuto e il supporto.

Buona giornata/serata :slight_smile:

4 Mi Piace
4

Ciao @riteshsaini. :wave:

Ho spostato questo argomento in Support, così puoi contrassegnare la grande risposta di @Don come soluzione. :slight_smile:

2 Mi Piace
8

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