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

   1 @import '_mixins';
   2 @import '_variables';
   3 @import '_bootstrap-variables';
   4 @import '~bootstrap/scss/mixins/_breakpoints';
   5
   6 #search-video {
   7   @include peertube-input-text($search-input-width);
   8
   9   padding-left: 10px;
  10   padding-right: 40px; // For the search icon
  11   font-size: 14px;
  12
  13   &::placeholder {
  14     color: pvar(--inputPlaceholderColor);
  15   }
  16 }
  17
  18 .icon-search {
  19   @include icon(25px);
  20   height: 18px;
  21
  22   // yolo
  23   position: absolute;
  24   margin-left: -35px;
  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       font-weight: 600;
  69       margin-right: 0.2rem;
  70       font-style: normal;
  71     }
  72   }
  73 }
  74
  75 #typeahead-container {
  76   input {
  77     border: 1px solid pvar(--mainBackgroundColor) !important;
  78     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
  79     flex-grow: 1;
  80     transition: box-shadow .3s ease, width .2s ease;
  81   }
  82
  83   @media screen and (min-width: $mobile-view) {
  84     margin-left: 10px;
  85   }
  86
  87   @media screen and (max-width: $small-view) {
  88     flex: 1;
  89
  90     input {
  91       width: 70px;
  92     }
  93   }
  94
  95   span {
  96     right: 10px;
  97   }
  98
  99   > div:last-child {
 100     // we have to switch the display and not the opacity,
 101     // to avoid clashing with the rest of the interface.
 102     display: none;
 103   }
 104
 105   &:focus,
 106   ::ng-deep &:focus-within {
 107     > div:last-child {
 108       @media screen and (min-width: $mobile-view) {
 109         display: initial !important;
 110       }
 111
 112       #typeahead-help,
 113       #typeahead-instructions,
 114       li.suggestion {
 115         box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
 116       }
 117     }
 118
 119     ::ng-deep input {
 120       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
 121       border-end-start-radius: 0;
 122       border-end-end-radius: 0;
 123
 124       @include media-breakpoint-up(lg) {
 125         width: 500px;
 126       }
 127     }
 128   }
 129 }
 130
 131 .glyphicon {
 132   top: 3px;
 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 }