client/src/app/header/search-typeahead.component.scss

   1 @use '_mixins';
   2 @use '_variables';
   3
   4 #search-video {
   5   @include peertube-input-text($search-input-width);
   6
   7   @include padding-left(10px);
   8   @include padding-right(40px); // For the search icon
   9
  10   font-size: 14px;
  11
  12   &::placeholder {
  13     color: pvar(--inputPlaceholderColor);
  14   }
  15 }
  16
  17 .icon-search {
  18   @include icon(25px);
  19   @include margin-left(-35px);
  20
  21   height: 18px;
  22
  23   // yolo
  24   position: absolute;
  25   margin-top: 3.5px;
  26   right: 10px;
  27 }
  28
  29 .jump-to-suggestions {
  30   top: 100%;
  31   left: 0;
  32   z-index: z('search-typeahead');
  33   width: 100%;
  34 }
  35
  36 #typeahead-help,
  37 #typeahead-instructions,
  38 li.suggestion {
  39   border: 1px solid pvar(--mainBackgroundColor);
  40   background: pvar(--mainBackgroundColor);
  41   transition: .3s ease;
  42   transition-property: box-shadow;
  43   cursor: pointer;
  44
  45   // soft border-radius for the last suggestion and the link inside
  46   &:last-of-type {
  47     &,
  48     ::ng-deep a {
  49       border-bottom-right-radius: 3px;
  50       border-bottom-left-radius: 3px;
  51     }
  52   }
  53 }
  54
  55 #typeahead-help,
  56 #typeahead-instructions {
  57   margin-top: 10px;
  58   width: 100%;
  59   padding: .5rem 1rem;
  60   white-space: normal;
  61
  62   ul {
  63     list-style: none;
  64     padding: 0;
  65     margin-bottom: .5rem;
  66
  67     em {
  68       @include margin-right(0.2rem);
  69
  70       font-weight: 600;
  71       font-style: normal;
  72     }
  73   }
  74 }
  75
  76 #typeahead-container {
  77   input {
  78     border: 1px solid pvar(--mainBackgroundColor) !important;
  79     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
  80     flex-grow: 1;
  81     transition: box-shadow .3s ease, width .2s ease;
  82   }
  83
  84   @media screen and (min-width: $mobile-view) {
  85     @include margin-left(10px);
  86   }
  87
  88   @media screen and (max-width: $small-view) {
  89     flex: 1;
  90
  91     input {
  92       width: 70px;
  93     }
  94   }
  95
  96   span {
  97     right: 10px;
  98   }
  99
 100   > div:last-child {
 101     // we have to switch the display and not the opacity,
 102     // to avoid clashing with the rest of the interface.
 103     display: none;
 104   }
 105
 106   &:focus,
 107   ::ng-deep &:focus-within {
 108     > div:last-child {
 109       @media screen and (min-width: $mobile-view) {
 110         display: initial !important;
 111       }
 112
 113       #typeahead-help,
 114       #typeahead-instructions,
 115       li.suggestion {
 116         box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
 117       }
 118     }
 119
 120     ::ng-deep input {
 121       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
 122       border-end-start-radius: 0;
 123       border-end-end-radius: 0;
 124
 125       @include media-breakpoint-up(lg) {
 126         width: 500px;
 127       }
 128     }
 129   }
 130 }
 131
 132 .glyphicon {
 133   top: 3px;
 134 }
 135
 136 .advanced-search-status {
 137   height: max-content;
 138   cursor: default;
 139
 140   &.c-help {
 141     cursor: help;
 142   }
 143 }
 144
 145 .small-title {
 146   @include in-content-small-title;
 147
 148   margin-bottom: .5rem;
 149 }
 150
 151 ::ng-deep my-suggestion {
 152   width: 100%;
 153 }