path: root/client/src/app/header/search-typeahead.component.scss

@use '_variables' as *;
@use '_mixins' as *;

#search-video {
  @include peertube-input-text($search-input-width, 14px);

  @include padding-left(10px);
  @include padding-right(40px); // For the search icon

  &::placeholder {
    color: pvar(--inputPlaceholderColor);
  }
}

.icon-search {
  @include icon(25px);
  @include margin-left(-35px);

  height: 18px;

  // yolo
  position: absolute;
  margin-top: 3.5px;
  right: 10px;
}

.jump-to-suggestions {
  top: 100%;
  left: 0;
  z-index: z('search-typeahead');
  width: 100%;
}

#typeahead-help,
#typeahead-instructions,
li.suggestion {
  border: 1px solid pvar(--mainBackgroundColor);
  background: pvar(--mainBackgroundColor);
  transition: .3s ease;
  transition-property: box-shadow;
  cursor: pointer;

  // soft border-radius for the last suggestion and the link inside
  &:last-of-type {
    &,
    ::ng-deep a {
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
    }
  }
}

#typeahead-help,
#typeahead-instructions {
  margin-top: 10px;
  width: 100%;
  padding: .5rem 1rem;
  white-space: normal;

  ul {
    list-style: none;
    padding: 0;
    margin-bottom: .5rem;

    em {
      @include margin-right(0.2rem);

      font-weight: 600;
      font-style: normal;
    }
  }
}

#typeahead-container {
  font-size: 14px;
  margin: 0 10px;

  input {
    border: 1px solid pvar(--mainBackgroundColor) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
    flex-grow: 1;
    transition: box-shadow .3s ease, width .2s ease;
  }

  @media screen and (max-width: $small-view) {
    input {
      width: 200px;
    }
  }

  @media screen and (max-width: $mobile-view) {
    input {
      width: 150px;
    }
  }

  span {
    right: 10px;
  }

  > div:last-child {
    // we have to switch the display and not the opacity,
    // to avoid clashing with the rest of the interface.
    display: none;
  }

  &:focus,
  ::ng-deep &:focus-within {
    > div:last-child {
      @media screen and (min-width: $mobile-view) {
        display: initial !important;
      }

      #typeahead-help,
      #typeahead-instructions,
      li.suggestion {
        box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
      }
    }

    ::ng-deep input {
      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;

      @media screen and (min-width: 1000px) {
        width: 500px;
      }
    }
  }
}

.advanced-search-status {
  height: max-content;
  cursor: default;

  &.c-help {
    cursor: help;
  }
}

.small-title {
  @include in-content-small-title;

  margin-bottom: .5rem;
}

::ng-deep my-suggestion {
  width: 100%;
}