glitchier-soc/app/javascript/flavours/glitch/styles/statuses.scss

.activity-stream {
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;

  @media screen and (max-width: $no-gap-breakpoint) {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
  }

  &--headless {
    border-radius: 0;
    margin: 0;
    box-shadow: none;

    .detailed-status,
    .status {
      border-radius: 0 !important;
    }
  }

  div[data-component] {
    width: 100%;
  }

  .entry {
    background: $ui-base-color;

    .detailed-status,
    .status,
    .load-more {
      animation: none;
    }

    &:last-child {
      .detailed-status,
      .status,
      .load-more {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
      }
    }

    &:first-child {
      .detailed-status,
      .status,
      .load-more {
        border-radius: 4px 4px 0 0;
      }

      &:last-child {
        .detailed-status,
        .status,
        .load-more {
          border-radius: 4px;
        }
      }
    }

    @media screen and (max-width: 740px) {
      .detailed-status,
      .status,
      .load-more {
        border-radius: 0 !important;
      }
    }
  }

  &--highlighted .entry {
    background: lighten($ui-base-color, 8%);
  }
}

.button.logo-button {
  flex: 0 auto;
  font-size: 14px;
  background: darken($ui-highlight-color, 2%);
  color: $primary-text-color;
  text-transform: none;
  line-height: 1.2;
  height: auto;
  min-height: 36px;
  min-width: 88px;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  padding: 0 15px;
  border: 0;

  svg {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 5px;
    fill: $primary-text-color;
  }

  &:active,
  &:focus,
  &:hover {
    background: $ui-highlight-color;
  }

  &:disabled,
  &.disabled {
    &:active,
    &:focus,
    &:hover {
      background: $ui-primary-color;
    }
  }

  &.button--destructive {
    &:active,
    &:focus,
    &:hover {
      background: $error-red;
    }
  }

  @media screen and (max-width: $no-gap-breakpoint) {
    svg {
      display: none;
    }
  }
}

a.button.logo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.embed {
  .status__content[data-spoiler=folded] {
    .e-content {
      display: none;
    }

    p:first-child {
      margin-bottom: 0;
    }
  }

  .detailed-status {
    padding: 15px;

    .detailed-status__display-avatar .account__avatar {
      width: 48px;
      height: 48px;
    }
  }

  .status {
    padding: 15px 15px 15px (48px + 15px * 2);
    min-height: 48px + 2px;

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

      .account__avatar {
        width: 48px;
        height: 48px;
      }
    }

    &__content {
      padding-top: 5px;
    }

    &__prepend {
      padding: 8px 0;
      padding-bottom: 2px;
      margin: initial;
      margin-left: 48px + 15px * 2;
      padding-top: 15px;
    }

    &__prepend-icon-wrapper {
      position: absolute;
      margin: initial;
      float: initial;
      width: auto;
      left: -32px;
    }

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

    &__action-bar-button {
      font-size: 18px;
      width: 23.1429px;
      height: 23.1429px;
      line-height: 23.15px;
    }
  }
}

// Styling from upstream's WebUI, as public pages use the same layout
.embed {
  .status {
    .status__info {
      font-size: 15px;
      display: initial;
    }

    .status__relative-time {
      color: $dark-text-color;
      float: right;
      font-size: 14px;
      width: auto;
      margin: initial;
      padding: initial;
      padding-bottom: 1px;
    }

    .status__visibility-icon {
      padding: 0 4px;
    }

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

    .status__avatar {
      height: 48px;
      position: absolute;
      width: 48px;
      margin: initial;
    }
  }
}

.rtl {
  .embed {
    .status {
      padding-left: 10px;
      padding-right: 68px;

      .status__info .status__display-name {
        padding-left: 25px;
        padding-right: 0;
      }

      .status__relative-time,
      .status__visibility-icon {
        float: left;
      }
    }
  }
}

.status__content__read-more-button {
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: $highlight-text-color;
  border: 0;
  background: transparent;
  padding: 0;
  padding-top: 8px;
  text-decoration: none;

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