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   padding-left: 10px;
   9   padding-right: 40px; // For the search icon
  10   font-size: 14px;
  11
  12   &::placeholder {
  13     color: pvar(--inputPlaceholderColor);
  14   }
  15 }
  16
  17 .icon.icon-search {
  18   @include icon(25px);
  19   height: 21px;
  20
  21   background-color: pvar(--mainForegroundColor);
  22   mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
  23
  24   // yolo
  25   position: absolute;
  26   margin-left: -35px;
  27   margin-top: 5px;
  28 }
  29
  30 .jump-to-suggestions {
  31   top: 100%;
  32   left: 0;
  33   z-index: z(typeahead);
  34   width: 100%;
  35 }
  36
  37 #typeahead-help,
  38 #typeahead-instructions,
  39 li.suggestion {
  40   border: 1px solid pvar(--mainBackgroundColor);
  41   background: pvar(--mainBackgroundColor);
  42   transition: .3s ease;
  43   transition-property: box-shadow;
  44   cursor: pointer;
  45
  46   // soft border-radius for the last suggestion and the link inside
  47   &:last-of-type {
  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) 0px 1px 20px 0px;
  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: unset;
  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) 0px 10px 20px -5px;
 116       }
 117     }
 118
 119     ::ng-deep input {
 120       box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
 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 }