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

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