glitch-social/app/assets/stylesheets/stream_entries.scss

.activity-stream {
  clear: both;
  box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);

  .entry {
    border-bottom: 1px solid $darker-background-color;
    background: $background-color;
    border-left: 2px solid $primary-color;

    &.entry-reblog {
      border-left: 2px solid $tertiary-color;

      .content {
        a {
          color: $tertiary-color;
        }
      }
    }

    &.entry-predecessor, &.entry-successor {
      border-left: 2px solid $lighter-text-color;
      background: darken($background-color, 5%);

      .content {
        a {
          color: $lighter-text-color;
        }
      }
    }

    &.entry-follow, &.entry-favourite {
      .content {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

    &:last-child {
      border-bottom: 0;
    }
  }

  .entry__container {
    display: flex;
  }

  .avatar {
    width: 48px;
    padding: 10px;
    padding-left: 8px;
    padding-right: 0;
    padding-top: 12px;

    img {
      width: 48px;
      height: 48px;
      display: block;
      border-radius: 5px;
    }
  }

  .entry__container__container {
    flex-grow: 1;
  }

  .header {
    margin-bottom: 5px;
    padding: 10px;
    padding-bottom: 0;
    padding-left: 8px;

    .name {
      text-decoration: none;
      color: $lighter-text-color;

      strong {
        color: $text-color;
      }

      &:hover {
        strong {
          text-decoration: underline;
        }
      }
    }
  }

  .pre-header {
    border-bottom: 1px solid darken($background-color, 5%);
    color: $tertiary-color;
    padding: 5px 10px;
    padding-left: 8px;
    clear: both;

    .name {
      color: $tertiary-color;
      font-weight: bold;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .content {
    font-size: 14px;
    padding: 0 10px;
    padding-left: 8px;
    padding-bottom: 25px;

    a {
      color: $primary-color;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .time {
    text-decoration: none;
    color: $lighter-text-color;

    &:hover {
      text-decoration: underline;
    }
  }
}