La couleur de fond de .topic-body se charge avec un délai

Soutien
1

Salut,

J’utilise un fond sombre avec .topic-body blanc pour le contraste.

Voici le CSS que j’utilise :

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

Mais à chaque fois que le site est rechargé, le background-color du HTML apparaît d’abord, puis le background-color de .topic-body se charge.

C’est mauvais pour l’UX.

Y a-t-il un moyen de prioriser le chargement du background-color de .topic-body en premier ?

Ou y a-t-il un autre moyen de le faire ?

Voici le résultat final que je voulais et que j’ai obtenu :

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

2

Bonjour, vous devez remplacer les keyframes ou en créer de nouveaux.
Quelque chose comme ceci changera les couleurs de transition de l’animation.

Le keyframe par défaut est :arrow_down_small:

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

Cela signifie qu’il met en surbrillance de var(--tertiary-low) à transparent. Ce qui est bien car la couleur de fond par défaut de Discourse est blanche et le corps du sujet n’a pas de fond, donc transparent sera blanc, mais dans votre situation, le problème est que le fond est différent, il passe donc d’abord à transparent et après un court délai, il sera #fff (la couleur de fond que vous avez définie pour topic-body).

Vous devez donc changer le transparent pour une transition de couleur fluide. Vous pouvez remplacer le défaut, mais il est peut-être préférable de créer un nouveau keyframe.

Note : Si vous remplacez le keyframe par défaut, cela changera partout où Discourse l’utilise, pas seulement dans topic-body. :arrow_down_small:

Ceci remplacera les keyframes par défaut.

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

Si vous voulez créer un nouveau keyframe :arrow_down_small:

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

Et ajoutez ce keyframe au corps du sujet.

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

Le code complet ressemble à ceci. :arrow_down_small:

body {
  background-color: #F5F5F5;
}

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

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

Avant

Après

10 « J'aime »
3

Ça fonctionne parfaitement !

Merci @Don

Cela a dû prendre du temps pour écrire cette solution complète. J’apprécie l’aide et le soutien.

Passez une excellente journée/soirée :slight_smile:

4 « J'aime »
4

Salut @riteshsaini. :wave:

J’ai déplacé ce sujet dans Support, afin que vous puissiez marquer la super réponse de @Don comme solution. :slight_smile:

2 « J'aime »
8

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