.topic-body 배경색이 지연되어 로드됩니다

제품 지원
1

안녕하세요,

대비 효과를 위해 어두운 배경에 흰색 .topic-body를 사용하고 있습니다.

다음과 같은 CSS를 사용하고 있습니다:

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

하지만 사이트가 다시 로드될 때마다 먼저 HTML 배경색이 표시되고, 그 다음에 .topic-body 배경색이 로드됩니다.

UX 측면에서 좋지 않습니다.

.topic-body 배경색이 먼저 로드되도록 우선순위를 지정할 방법이 있을까요?

혹시 다른 해결 방법이 있을까요?

다음은 제가 원했던 최종 결과물입니다:

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

2

안녕하세요, keyframes를 오버라이드하거나 새로운 것을 만들어야 합니다.
아래와 같이 하면 애니메이션 전환 색상을 변경할 수 있습니다.

기본 keyframe은 다음과 같습니다: :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를 변경해야 합니다. 기본값을 오버라이드할 수도 있지만, 새로운 keyframes를 만드는 것이 더 나은 방법일 수 있습니다.

참고: 기본 keyframe을 오버라이드하면 topic-body뿐만 아니라 Discourse가 해당 keyframe을 사용하는 모든 곳에서 변경됩니다. :arrow_down_small:

다음은 기본 keyframes를 오버라이드하는 코드입니다.

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

새로운 keyframes를 만들고 싶다면 :arrow_down_small:

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

그리고 이 keyframe을 토픽 본문에 추가합니다.

.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;
  }
}

// Custom keyframes
@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: