Цвет фона .topic-body загружается с задержкой

Поддержка
1

Здравствуйте,

Я использую тёмный фон с белым классом .topic-body для контраста.

Вот используемый мной CSS:

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

Однако при каждой перезагрузке сайта сначала отображается цвет фона html, и только затем загружается цвет фона .topic-body.

Это негативно сказывается на пользовательском опыте.

Есть ли способ заставить цвет фона .topic-body загружаться в первую очередь?

Или существует ли какой-то другой подход к решению этой проблемы?

Вот конечный результат, который я хотел получить и который у меня получился:

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

2

Привет! Вам нужно переопределить keyframes или создать новый.

Вот что-то подобное, что изменит цвета перехода анимации.

Ключевой кадр по умолчанию: :arrow_down_small:

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

Это означает, что подсветка идет от var(--tertiary-low) к transparent. Это удобно, потому что цвет фона по умолчанию в Discourse — белый, а у тела темы нет фона, поэтому прозрачный будет выглядеть как белый. Но в вашем случае проблема в том, что фон другой: сначала он становится прозрачным, а через небольшую задержку — #fff (цвет фона, который вы установили для topic-body).

Поэтому вам нужно заменить transparent, чтобы обеспечить плавный переход цвета. Вы можете переопределить стандартный вариант, но, возможно, лучше создать новый ключевой кадр.

Примечание: Если вы переопределите стандартный ключевой кадр, это изменит его везде, где Discourse его использует, а не только в теле темы. :arrow_down_small:

Это переопределит стандартные ключевые кадры:

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

Если вы хотите создать новый ключевой кадр: :arrow_down_small:

// Пользовательские ключевые кадры
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

И добавьте этот ключевой кадр к телу темы:

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

Полный код выглядит примерно так: :arrow_down_small:

body {
  background-color: #F5F5F5;
}

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

// Пользовательские ключевые кадры
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

До

После

3

Работает отлично!

Спасибо @Don

Написание такого подробного решения, должно быть, заняло немало времени. Я ценю вашу помощь и поддержку.

Хорошего вам дня/вечера :slight_smile:

4

Привет, @riteshsaini. :wave:

Я переместил эту тему в Support, чтобы вы могли отметить отличный ответ от @Don как решение. :slight_smile: