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

   1 @use '_mixins' as *;
   2 @use '_variables' as *;
   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   font-size: 14px;
  78   margin: 0 10px;
  79
  80   input {
  81     border: 1px solid pvar(--mainBackgroundColor) !important;
  82     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
  83     flex-grow: 1;
  84     transition: box-shadow .3s ease, width .2s ease;
  85   }
  86
  87   @media screen and (max-width: $small-view) {
  88     input {
  89       width: 200px;
  90     }
  91   }
  92
  93   @media screen and (max-width: $mobile-view) {
  94     input {
  95       width: 150px;
  96     }
  97   }
  98
  99   span {
 100     right: 10px;
 101   }
 102
 103   > div:last-child {
 104     // we have to switch the display and not the opacity,
 105     // to avoid clashing with the rest of the interface.
 106     display: none;
 107   }
 108
 109   &:focus,
 110   ::ng-deep &:focus-within {
 111     > div:last-child {
 112       @media screen and (min-width: $mobile-view) {
 113         display: initial !important;
 114       }
 115
 116       #typeahead-help,
 117       #typeahead-instructions,
 118       li.suggestion {
 119         box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
 120       }
 121     }
 122
 123     ::ng-deep input {
 124       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
 125       border-end-start-radius: 0;
 126       border-end-end-radius: 0;
 127
 128       @media screen and (min-width: 1000px) {
 129         width: 500px;
 130       }
 131     }
 132   }
 133 }
 134
 135 .advanced-search-status {
 136   height: max-content;
 137   cursor: default;
 138
 139   &.c-help {
 140     cursor: help;
 141   }
 142 }
 143
 144 .small-title {
 145   @include in-content-small-title;
 146
 147   margin-bottom: .5rem;
 148 }
 149
 150 ::ng-deep my-suggestion {
 151   width: 100%;
 152 }