framework/less/forum/PostStream.less

// ------------------------------------
// Stream

.PostStream {
  @media @tablet-up {
    margin-top: 10px;
  }
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.PostStream-item {
  .animation(fadeIn 0.4s ease-in-out);

  &:not(:last-child) {
    border-bottom: 1px solid @control-bg;

    @media @phone {
      margin: 0 -15px;
      padding: 0 15px;
    }
  }
}

@keyframes blink {
  0% {opacity: 0.5}
  50% {opacity: 1}
  100% {opacity: 0.5}
}
@-webkit-keyframes blink {
  0% {opacity: 0.5}
  50% {opacity: 1}
  100% {opacity: 0.5}
}
.LoadingPost {
  .animation(blink 1s linear);
  .animation-iteration-count(infinite);
}
.fakeText {
  display: inline-block;
  vertical-align: middle;
  background: @control-bg;
  height: 12px;
  width: 100%;
  margin-bottom: 20px;
  border-radius: @border-radius;

  .Post-header & {
    height: 16px;
    width: 150px;

    @media @phone {
      margin-bottom: 0;
    }
  }
}

.PostStream-timeGap {
  text-transform: uppercase;
  font-weight: bold;
  color: @muted-color;
  padding: 20px 20px 20px @avatar-column-width;
  font-size: 12px;

  @media @phone {
    margin: 0 -15px;
    padding: 20px 15px;
  }
}

// .item.highlight .post {
//   &:before {
//     content: "";
//     position: absolute;
//     left: -30px;
//     top: -5px;
//     bottom: -5px;
//     width: 5px;
//     border-radius: @border-radius;
//     background: @fl-primary-color;
//   }
// }
@-webkit-keyframes pulsate {
  0% {-webkit-transform: scale(1)}
  50% {-webkit-transform: scale(1.02)}
  100% {-webkit-transform: scale(1)}
}
@keyframes pulsate {
  0% {transform: scale(1)}
  50% {transform: scale(1.02)}
  100% {transform: scale(1)}
}
.pulsate {
  .animation(pulsate 1s ease-in-out);
  .animation-iteration-count(infinite);
}
.flash {
  .animation(pulsate 0.2s ease-in-out);
  .animation-iteration-count(1);
}