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     &, & ::ng-deep a {
  48       border-bottom-right-radius: 3px;
  49       border-bottom-left-radius: 3px;
  50     }
  51   }
  52 }
  53
  54 #typeahead-help,
  55 #typeahead-instructions {
  56   margin-top: 10px;
  57   width: 100%;
  58   padding: .5rem 1rem;
  59   white-space: normal;
  60
  61   ul {
  62     list-style: none;
  63     padding: 0;
  64     margin-bottom: .5rem;
  65
  66     em {
  67       font-weight: 600;
  68       margin-right: 0.2rem;
  69       font-style: normal;
  70     }
  71   }
  72 }
  73
  74 #typeahead-container {
  75   input {
  76     border: 1px solid pvar(--mainBackgroundColor) !important;
  77     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
  78     flex-grow: 1;
  79     transition: box-shadow .3s ease, width .2s ease;
  80   }
  81
  82   @media screen and (min-width: $mobile-view) {
  83     margin-left: 10px;
  84   }
  85
  86   @media screen and (max-width: $small-view) {
  87     flex: 1;
  88
  89     input {
  90       width: 70px;
  91     }
  92   }
  93
  94   span {
  95     right: 10px;
  96   }
  97
  98   & > div:last-child {
  99     // we have to switch the display and not the opacity,
 100     // to avoid clashing with the rest of the interface.
 101     display: none;
 102   }
 103
 104   &:focus,
 105   ::ng-deep &:focus-within {
 106     & > div:last-child {
 107       @media screen and (min-width: $mobile-view) {
 108         display: initial !important;
 109       }
 110
 111       #typeahead-help,
 112       #typeahead-instructions,
 113       li.suggestion {
 114         box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
 115       }
 116     }
 117
 118     ::ng-deep input {
 119       box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
 120       border-end-start-radius: 0;
 121       border-end-end-radius: 0;
 122
 123       @include media-breakpoint-up(lg) {
 124         width: 500px;
 125       }
 126     }
 127   }
 128 }
 129
 130 .glyphicon {
 131   top: 3px;
 132 }
 133
 134 .advanced-search-status {
 135   height: max-content;
 136   cursor: default;
 137
 138   &.c-help {
 139     cursor: help;
 140   }
 141 }
 142
 143 .small-title {
 144   @include in-content-small-title;
 145
 146   margin-bottom: .5rem;
 147 }
 148
 149 ::ng-deep my-suggestion {
 150   width: 100%;
 151 }