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

.app-body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.button {
  background-color: $ui-highlight-color;
  border: 10px none;
  border-radius: 4px;
  box-sizing: border-box;
  color: $primary-text-color;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  padding: 0 16px;
  position: relative;
  text-decoration: none;

  @include size(auto, 36px);
  @include text-overflow(nowrap);
  @include text-sizing(14px, 500, 36px, center, 0);

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

  &--destructive {
    transition: none;

    &:active,
    &:focus,
    &:hover {
      background-color: $error-red;
      transition: none;
    }
  }

  &:disabled,
  &.disabled {
    background-color: $ui-primary-color;
    cursor: default;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus,
  &:active {
    outline: 0 !important;
  }

  &.button-alternative {
    color: $inverted-text-color;
    background: $ui-primary-color;

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

  &.button-alternative-2 {
    background: $ui-base-lighter-color;

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

  &.button-secondary {
    color: $darker-text-color;
    background: transparent;
    padding: 3px 15px;
    border: 1px solid $ui-primary-color;

    &:active,
    &:focus,
    &:hover {
      border-color: lighten($ui-primary-color, 4%);
      color: lighten($darker-text-color, 4%);
    }

    &:disabled {
      opacity: 0.5;
    }
  }

  &.button--block {
    display: block;
    width: 100%;
  }
}

.invisible {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block;
  position: absolute;

  @include size(0);

  img,
  svg {
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;

    @include size(0 !important);
  }
}

.ellipsis::after {
  content: "…";
}

.focusable {
  &:focus {
    outline: 0;
    background: lighten($ui-base-color, 4%);

    .status.status-direct {
      background: lighten($ui-base-color, 12%);

      &.muted {
        background: transparent;
      }
    }

    .detailed-status,
    .detailed-status-action-bar {
      background: lighten($ui-base-color, 8%);
    }
  }
}

.status__display-name,
.status__relative-time {
  text-decoration: none;
}

.muted {
  .emojione {
    opacity: 0.5;
  }
}

.status__display-name {
  &:hover strong {
    text-decoration: underline;
  }
}

.muted {
  .status__content p,
  .status__content a {
    color: $dark-text-color;
  }

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

  .status__avatar {
    opacity: 0.5;
  }

  a.status__content__spoiler-link {
    background: $ui-base-lighter-color;
    color: $inverted-text-color;

    &:hover {
      background: lighten($ui-base-lighter-color, 7%);
      text-decoration: none;
    }
  }
}

.status__relative-time {
  &:hover {
    text-decoration: underline;
  }
}

.emoji-mart-emoji {
  span {
    background-repeat: no-repeat;
  }
}

.dropdown--active .emoji-button img {
  opacity: 1;
  filter: none;
}

.loading-bar {
  background-color: $highlight-text-color;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.detailed,
.fullscreen {

  .video-player__volume__current,
  .video-player__volume::before {
    bottom: 27px;
  }

  .video-player__volume__handle {
    bottom: 23px;
  }
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
}

noscript {
  text-align: center;

  img {
    width: 200px;
    opacity: 0.5;
    animation: flicker 4s infinite;
  }

  div {
    font-size: 14px;
    margin: 30px auto;
    color: $secondary-text-color;
    max-width: 400px;

    a {
      color: $highlight-text-color;
      text-decoration: underline;

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

@keyframes flicker {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}