gab-social/app/javascript/gabsocial/features/video/video.scss

.video-player {
  overflow: hidden;
  position: relative;
  background: $base-shadow-color;
  max-width: 100%;
  border-radius: 4px;

  &:focus {
    outline: 0;
  }

  video {
    z-index: 1;

    @include max-size(100vw, 80vh);
  }

  &.fullscreen {
    margin: 0;

    @include size(100% !important);

    video {
      @include max-size(100% !important);
      @include size(100% !important);
    }
  }

  &.inline {
    video {
      object-fit: contain;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &__controls {
    z-index: 2;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
    padding: 0 15px;
    opacity: 0;
    transition: opacity .1s ease;

    @include abs-position(auto, 0, 0, 0);

    &.active {
      opacity: 1;
    }
  }

  &.inactive {

    video,
    .video-player__controls {
      visibility: hidden;
    }
  }

  &__spoiler {
    display: none;
    z-index: 4;
    border: 0;
    background: $base-overlay-background;
    color: $darker-text-color;
    transition: none;
    pointer-events: none;

    @include abs-position(0, auto, auto, 0);
    @include size(100%);

    &.active {
      display: block;
      pointer-events: auto;

      &:hover,
      &:active,
      &:focus {
        color: lighten($darker-text-color, 7%);
      }
    }

    &__title {
      display: block;
      font-size: 14px;
    }

    &__subtitle {
      display: block;

      @include text-sizing(11px, 500);
    }
  }

  &__buttons-bar {
    padding-bottom: 10px;

    @include flex(space-between);
  }

  &__buttons {
    font-size: 16px;

    @include text-overflow(nowrap);

    &.left {
      button {
        padding-left: 0;
      }
    }

    &.right {
      button {
        padding-right: 0;
      }
    }

    button {
      background: transparent;
      padding: 2px 10px;
      font-size: 16px;
      border: 0;
      color: rgba($white, 0.75);

      &:active,
      &:hover,
      &:focus {
        color: $white;
      }
    }
  }

  &__time-sep,
  &__time-total,
  &__time-current {
    @include text-sizing(14px, 500);
  }

  &__time-current {
    color: $white;
    margin-left: 60px;
  }

  &__time-sep {
    display: inline-block;
    margin: 0 6px;
  }

  &__time-sep,
  &__time-total {
    color: $white;
  }

  &__volume {
    display: inline;
    height: 24px;
    cursor: pointer;

    &::before {
      background: rgba($white, 0.35);
      border-radius: 4px;

      @include pseudo;
      @include size(50px, 4px);
      @include abs-position(auto, auto, 20px, 70px, false);
    }

    &__current {
      display: block;
      height: 4px;
      border-radius: 4px;
      background: lighten($ui-highlight-color, 8%);

      @include abs-position(auto, auto, 20px, 70px);
    }

    &__handle {
      z-index: 3;
      transition: opacity .1s ease;
      background: lighten($ui-highlight-color, 8%);
      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
      pointer-events: none;

      @include circle(12px);
      @include abs-position(auto, auto, 16px, 70px);
    }
  }

  &__link {
    padding: 2px 10px;

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

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

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

  &__seek {
    cursor: pointer;
    height: 24px;
    position: relative;

    &::before {
      background: rgba($white, 0.35);
      border-radius: 4px;
      top: 10px;

      @include pseudo;
      @include size(100%, 40x);
    }

    &__progress,
    &__buffer {
      display: block;
      height: 4px;
      border-radius: 4px;
      background: lighten($ui-highlight-color, 8%);

      @include abs-position(10px);
    }

    &__buffer {
      background: rgba($white, 0.2);
    }

    &__handle {
      z-index: 3;
      opacity: 0;
      margin-left: -6px;
      transition: opacity .1s ease;
      background: lighten($ui-highlight-color, 8%);
      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
      pointer-events: none;

      @include circle(12px);
      @include abs-position(6px);

      &.active {
        opacity: 1;
      }
    }

    &:hover {
      .video-player__seek__handle {
        opacity: 1;
      }
    }
  }

  &.detailed,
  &.fullscreen {
    .video-player__buttons {
      button {
        @include vertical-padding(10px);
      }
    }
  }
}