Left border transition out

phenomlab

I'm making changes to a colour swatch and want to target the below css

.page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline>[component="post/placeholder"].highlight, .page-topic .topic .posts.timeline>[component=post].highlight {
    border-left: 2px solid #0d6efd;
}

There is a 10 second transition here, but I'm not sure if it's CSS, or JS - either way, I wanted to target it so that it appears as the below

.page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight {
    border: 2px solid var(--bs-post-unread);
}

Whilst this CSS works fine, it is cosmetically incorrect as the left border fades in first, and then the others. On fade out, the others simply disappear, whilst the left border elegantly fades out.

I want all 4 border to fade at the same time, but cannot seem to find the relevant code. It looks like the added class is highlight

dave1904

I've played with this before and found this css:

.page-topic .topic .posts.timeline .timeline-event:last-child.highlight::after, 
.page-topic .topic .posts.timeline > [component="post/placeholder"]:last-child.highlight::after, 
.page-topic .topic .posts.timeline > [component="post"]:last-child.highlight::after {
      background-color: #d40000;
 }

Not sure if it helps you targeting want you want.

phenomlab

@dave1904 thanks. I have the CSS, but it's not immediately clear to me how the transition works or where it's stored.

<baris>

When you scroll to a post we add a .highlight class to the post element and remove it after 10 seconds. It is in core. https://github.com/NodeBB/NodeBB/blob/master/public/src/modules/navigator.js#L734-L737

phenomlab

@baris thanks. Can you provide the CSS for the highlight class?

<baris>

https://github.com/NodeBB/nodebb-theme-harmony/blob/main/scss/mixins.scss#L44-L77, highlight is used in that file.

phenomlab

@baris thanks