.topic-body Hintergrundfarbe lädt nach einer Verzögerung

Unterstützung
1

Hallo,

Ich verwende einen dunklen Hintergrund mit weißem .topic-body für Kontrast.

Dies ist das CSS, das ich verwende:

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

Aber wann immer die Seite neu geladen wird, erscheint zuerst die HTML-Hintergrundfarbe, dann wird die .topic-body-Hintergrundfarbe geladen.

Das ist schlecht für die Benutzererfahrung.

Gibt es eine Möglichkeit, die .topic-body-Hintergrundfarbe zu priorisieren, damit sie zuerst geladen wird?

Oder gibt es eine andere Möglichkeit, dies zu tun?

Dies ist das Endergebnis, das ich wollte und erhalten habe:

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

2

Hallo, Sie müssen die keyframes überschreiben oder eine neue erstellen.
So etwas wird die Farben des Animationsübergangs ändern.

Der Standard-Keyframe ist :arrow_down_small:

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

Das bedeutet, dass es von var(--tertiary-low) zu transparent hervorgehoben wird. Was cool ist, weil die Standard-Hintergrundfarbe von Discourse weiß ist und der Thema-Körper keinen Hintergrund hat, also wird transparent weiß sein, aber in Ihrer Situation ist das Problem, dass der Hintergrund anders ist, also geht es zuerst zu transparent und nach einer kleinen Verzögerung wird es #fff (die Hintergrundfarbe, die Sie für den Thema-Körper festgelegt haben).

Sie müssen also das Transparente ändern, um einen sanften Farbübergang zu erzielen. Sie können den Standard überschreiben, aber vielleicht ist es besser, wenn Sie neue Keyframes erstellen.

Hinweis: Wenn Sie den Standard-Keyframe überschreiben, ändert sich dies überall dort, wo Discourse ihn verwendet, nicht nur im Thema-Körper. :arrow_down_small:

Dies überschreibt die Standard-Keyframes.

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

Wenn Sie neue Keyframes erstellen möchten :arrow_down_small:

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

Und fügen Sie diesen Keyframe zum Thema-Körper hinzu.

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

Der vollständige Code sieht ungefähr so aus. :arrow_down_small:

body {
  background-color: #F5F5F5;
}

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

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

Vorher

Nachher

10 „Gefällt mir“
3

Es funktioniert perfekt!

Danke @Don

Das muss einige Zeit gedauert haben, diese gründliche Lösung zu schreiben. Ich schätze die Hilfe und Unterstützung.

Ich wünsche Ihnen einen schönen Tag/Abend :slight_smile:

4 „Gefällt mir“
4

Hallo @riteshsaini. :wave:

Ich habe dieses Thema nach Support verschoben, damit du @Don’s tolle Antwort als Lösung markieren kannst. :slight_smile:

2 „Gefällt mir“
8

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