Fade out/in CSS feature of first post

Contribute UX

AI-generated summary

charleswalter observed a fade out CSS effect on the first post’s background when entering a topic and was looking for a way to disable it via CSS. The effect makes text hard to read on categories with backgrounds. After researching, charleswalter found the relevant CSS definitions and identified the .topic-body.highlighted class as the cause. To disable the animation, charleswalter used the following CSS: .topic-body.highlighted{animation:background-fade-highlight 0s}.

1

I’ve noticed a fade out CSS effect when I enter a topic on the first post of the first posts background. Is there a way to disable this via CSS?

It’s a cool feature, but on some of our categories with backgrounds, it can make the text hard to read for the first few seconds and appears a bit jarring. Without category backgrounds, it seems to work better. also, when ads are also loading in the pages, it feels like there is too much animating.

Example topics with backgrounds
https://www.helloforos.com/t/ideas-de-decoraciones-del-jardin-para-navidad-5/198898
https://www.helloforos.com/t/10-maneras-de-preparar-tu-cafe/193783

1 Mi Piace
2

I’m going to try to answer my own topic :). I found these css definitions which seem to go over the relevant fades in Discourse

background-fade-highlight{0%{background-color:#d4ecfc}100%{background-color:transparent}}

.modal-backdrop.fade{opacity:0}.modal-backdrop,.modal-backdrop.fade.in{-webkit-animation:fade .3s;animation:fade .3s;opacity:.9;filter:alpha(opacity=90)}

@keyframes fade{from{opacity:0}to{opacity:0.9}}@-webkit-keyframes fade{from{opacity:0}to{opacity:0.9}}

@keyframes slidein{from{transform:translateY(-20%)}to{transform:translateY(0)}}@-webkit-keyframes slidein{from{-webkit-transform:translateY(-20%)}to{-webkit-transform:translateY(0)}}

 .discourse-tag{-webkit-animation:fadein .7s;animation:fadein .7s}

 .topic-body.highlighted{animation:background-fade-highlight 2.5s ease-out}
 .topic-list>tbody>tr.highlighted{animation:background-fade-highlight 2.5s ease-out}
 .topic-list button.bulk-select{padding:0;background:transparent}

.timeline-container.timeline-fullscreen.show{max-height:700px;transition:max-height 0.4s ease-out}

.read-state.read{opacity:0;transition:opacity ease-out 1s}

.timeline-container.timeline-fullscreen{max-height:0;transition:max-height 0.3s ease-in;

#reply-control{transition:height 0.4s ease;width:100%;z-index:999;height:0;background-color:#e6e6e6;bottom:0;font-size:1em;position:fixed}

#reply-control.edit-title .contents .wmd-controls{transition:top 0.3s ease;top:100px}

.timeline-container.timeline-fullscreen .topic-timeline .timeline-footer-controls ul.dropdown-menu .title{padding-left:0}.timeline-container .topic-timeline{margin-left:3em;width:150px;transition:opacity 0.2s ease-in}

.timeline-container .topic-timeline .timeline-footer-controls{margin-top:1em;line-height:2.5em;transition:opacity 0.2s ease-in}

.timeline-container .topic-timeline .timeline-padding{transition:height 0.15s ease-out;cursor:pointer}

.modal.in{-webkit-animation:fade .25s;animation:fade .25s}.modal-body{overflow-y:auto;max-height:400px;padding:15px}.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}.modal-footer .btn.right{float:right}

.discourse-no-touch .topic-body .actions .fade-out{opacity:0.7;transition:opacity 0.7s ease-in-out}

.discourse-touch .topic-body .actions .fade-out{opacity:1}

.topic-body:hover .actions .fade-out,.topic-body .selected .actions .fade-out{opacity:1}

@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}

.extra-info-wrapper .badge-wrapper,.extra-info-wrapper i,.extra-info-wrapper .topic-link{-webkit-animation:fadein .7s;animation:fadein .7s}
1 Mi Piace
3

Okay, I’ve disabled the animation for now, by using the following CSS (for anyone who might be interested)

.topic-body.highlighted{animation:background-fade-highlight 0s}

19 Mi Piace