Hi,
I’m using a dark background with white .topic-body
for contrast.
This is the CSS I’m using:
html {
background-color: #F5F5F5;
}
.topic-body {
background-color: #fff;
}
But whenever the site is reloaded, first the HTML background-color shows up, then the .topic-body background color loads.
It’s bad for UX.
Is there any way to prioritize .topic-body
background color to load first?
Or is there any other way to do it?
This is the final result I wanted and got:
Don
July 14, 2022, 11:27am
2
Hello, You have to override the keyframes
or create a new one.
Something like this will change the animation transition colors.
The default keyframe is
@keyframes background-fade-highlight {
0% {
background-color: var(--tertiary-low);
}
100% {
background-color: transparent;
}
}
This means it highlight from var(--tertiary-low)
to transparent
. Which is cool because Discourse default background color is white and topic body has no background, so transparent will be white but in your situation the problem is the background is different so it goes first to transparent and after a little delay it will be #fff
(the background color you seted up to topic-body) .
So you have to change the transparent to make it smooth color transition. You can override the default but maybe better if you create a new keyframes.
Note: If you override the default keyframe it will change everywhere where Discourse using it not just on topic-body.
This will override the default keyframes.
@keyframes background-fade-highlight {
0% {
background-color: var(--tertiary-low);
}
100% {
background-color: #fff;
}
}
If you want to create a new keyframes
// Custom keyframes
@keyframes background-fade-highlight-custom {
0% {
background-color: var(--tertiary-low);
}
100% {
background-color: #fff;
}
}
And add this keyframe to the topic body.
.topic-body {
background-color: #fff;
&.highlighted {
animation: background-fade-highlight-custom 2.5s ease-out;
}
}
The full code looks something like this.
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;
}
}
Before
After
10 Likes
It works perfectly!
Thank you @Don
It must have taken some time to write this thorough solution. I appreciate the help and support.
Have a great day/evening
4 Likes
maiki
(maiki)
July 14, 2022, 6:14pm
4
Hi @riteshsaini .
I moved this topic to support , so you can mark @Don ’s great answer as the solution.
2 Likes
system
(system)
Closed
August 13, 2022, 6:52pm
8
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.