gab-social/app/javascript/gabsocial/components/status/status.scss

.status {
  padding: 8px 10px;
  padding-left: 68px;
  position: relative;
  min-height: 54px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  cursor: default;

  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
    padding-right: 26px; // 10px + 16px
  }

  @keyframes fade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  opacity: 1;
  animation: fade 150ms linear;

  .video-player {
    margin-top: 8px;
  }

  &.status-direct:not(.read) {
    background: lighten($ui-base-color, 8%);
    border-bottom-color: lighten($ui-base-color, 12%);
  }

  &.light {
    .status__relative-time {
      color: $light-text-color;
    }

    .status__display-name {
      color: $inverted-text-color;
    }

    .display-name {
      strong {
        color: $inverted-text-color;
      }

      span {
        color: $light-text-color;
      }
    }

    .status__content {
      color: $inverted-text-color;

      a {
        color: $highlight-text-color;
      }

      a.status__content__spoiler-link {
        color: $primary-text-color;
        background: $ui-primary-color;

        &:hover {
          background: lighten($ui-primary-color, 8%);
        }
      }
    }
  }

  &__meta {
    font-size: 14px;
    color: $gab-secondary-text;

    a {
      color: $gab-brand-default;
      font-weight: bold;
      text-decoration: none;

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

@media screen and (min-width:630px) {
  .status {
    padding: 15px 15px 15px 78px;
    min-height: 50px;

    &__avatar {
      left: 15px;
      top: 17px;
    }

    &__content {
      padding-top: 5px;
    }

    &__prepend {
      margin-left: 78px;
      padding-top: 15px;
    }

    &__prepend-icon-wrapper {
      left: -32px;
    }

    .media-gallery,
    .video-player {
      margin-top: 10px;
    }
  }
}

.status__wrapper--filtered {
  color: $dark-text-color;
  border: 0;
  font-size: inherit;
  text-align: center;
  line-height: inherit;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
}


.status__prepend-icon-wrapper {
  left: -26px;
  position: absolute;
}

.status__relative-time {
  color: $dark-text-color;
  float: right;
  font-size: 14px;
}

.status__display-name {
  color: $dark-text-color;
}

.status__info .status__display-name {
  display: block;
  max-width: 100%;
  padding-right: 25px;
}

.status__info {
  font-size: 15px;
  z-index: 4;
}

.status__prepend {
  margin-left: 68px;
  color: $dark-text-color;
  padding: 8px 0;
  padding-bottom: 2px;
  font-size: 14px;
  position: relative;

  .status__display-name strong {
    color: $dark-text-color;
  }

  >span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.status__display-name {
  strong {
    color: $primary-text-color;
  }
}

.status__avatar {
  height: 48px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 48px;
}

.status__expand {
  width: 68px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  cursor: pointer;
}