gab-social/app/javascript/styles/gabsocial/widgets.scss

.box-widget {
  padding: 20px;
  border-radius: 4px;
  background: lighten($ui-base-color, 2.5%);
  box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
}

.page-header {
  background: lighten($ui-base-color, 8%);
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  border-radius: 4px;
  padding: 60px 15px;
  text-align: center;
  margin: 10px 0;

  h1 {
    color: $primary-text-color;
    margin-bottom: 10px;

    @include text-sizing(36px, 700, 1.1);
  }

  p {
    font-size: 15px;
    color: $darker-text-color;
  }

  @media screen and (max-width: $no-gap-breakpoint) {
    margin-top: 0;
    background: lighten($ui-base-color, 4%);

    h1 {
      font-size: 24px;
    }
  }
}

.directory {
  background: $ui-base-color;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);

  &__tag {
    box-sizing: border-box;
    margin-bottom: 10px;

    &>a,
    &>div {
      background: $ui-base-color;
      border-radius: 4px;
      padding: 15px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);

      @include flex(space-between, center);
    }

    &>a {

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

    &.active>a {
      background: $ui-highlight-color;
      cursor: default;
    }

    &.disabled>div {
      opacity: 0.5;
      cursor: default;
    }

    h4 {
      flex: 1 1 auto;
      color: $primary-text-color;

      @include text-overflow(nowrap);
      @include text-sizing(18px, 700);

      .fa {
        color: $darker-text-color;
      }

      small {
        display: block;
        margin-top: 8px;
        color: $darker-text-color;

        @include text-sizing(15px, 400);
      }
    }

    &.active h4 {

      &,
      .fa,
      small {
        color: $primary-text-color;
      }
    }

    .avatar-stack {
      flex: 0 0 auto;
      width: (36px + 4px) * 3;
    }

    &.active .avatar-stack .account__avatar {
      border-color: $ui-highlight-color;
    }
  }
}

.avatar-stack {
  @include flex(flex-end);

  .account__avatar {
    flex: 0 0 auto;
    position: relative;
    margin-left: -10px;
    background: darken($ui-base-color, 8%);
    border: 2px solid $ui-base-color;

    @include circle(36px);

    &:nth-child(1) {
      z-index: 1;
    }

    &:nth-child(2) {
      z-index: 2;
    }

    &:nth-child(3) {
      z-index: 3;
    }
  }
}

.accounts-table {
  width: 100%;

  .account {
    padding: 0;
    border: 0;
  }

  strong {
    font-weight: 700;
  }

  thead th {
    text-align: center;
    text-transform: uppercase;
    color: $darker-text-color;
    font-weight: 700;
    padding: 10px;

    &:first-child {
      text-align: left;
    }
  }

  tbody td {
    padding: 15px 0;
    vertical-align: middle;
    border-bottom: 1px solid lighten($ui-base-color, 8%);
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }

  &__count {
    width: 120px;
    color: $primary-text-color;

    @include text-sizing(15px, 500, 1, center);

    small {
      display: block;
      color: $darker-text-color;

      @include text-sizing(14px, 400);
    }
  }

  &__comment {
    width: 50%;
    vertical-align: initial !important;
  }

  @media screen and (max-width: $no-gap-breakpoint) {
    tbody td.optional {
      display: none;
    }
  }
}

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

$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width+20px;

.statuses-grid {
  min-height: 600px;

  @media screen and (max-width: 640px) {
    width: 100% !important; // Masonry layout is unnecessary at this width
  }

  &__item {
    width: (960px - 20px) / 3;

    @media screen and (max-width: $fluid-breakpoint) {
      width: (940px - 20px) / 3;
    }

    @media screen and (max-width: 640px) {
      width: 100%;
    }

    @media screen and (max-width: $no-gap-breakpoint) {
      width: 100vw;
    }
  }

  .detailed-status {
    border-radius: 4px;

    @media screen and (max-width: $no-gap-breakpoint) {
      border-top: 1px solid lighten($ui-base-color, 16%);
    }

    &.compact {
      .detailed-status__meta {
        margin-top: 15px;
      }

      .status__content {
        @include text-sizing(15px, 400, 20px);

        .emojione {
          margin: -3px 0 0;

          @include size(20px);
        }

        .status__content__spoiler-link {
          line-height: 20px;
          margin: 0;
        }
      }

      .media-gallery,
      .status-card,
      .video-player {
        margin-top: 15px;
      }
    }
  }
}

.notice-widget {
  margin-bottom: 10px;
  color: $darker-text-color;

  p {
    margin-bottom: 10px;

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

  a {
    text-decoration: none;
    color: $ui-highlight-color;

    @include text-sizing(14px, 500, 20px);

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