2 @use '_variables' as *;
5 @include peertube-input-text($search-input-width);
7 @include padding-left(10px);
8 @include padding-right(40px); // For the search icon
13 color: pvar(--inputPlaceholderColor);
19 @include margin-left(-35px);
29 .jump-to-suggestions {
32 z-index: z('search-typeahead');
37 #typeahead-instructions,
39 border: 1px solid pvar(--mainBackgroundColor);
40 background: pvar(--mainBackgroundColor);
42 transition-property: box-shadow;
45 // soft border-radius for the last suggestion and the link inside
49 border-bottom-right-radius: 3px;
50 border-bottom-left-radius: 3px;
56 #typeahead-instructions {
68 @include margin-right(0.2rem);
76 #typeahead-container {
78 border: 1px solid pvar(--mainBackgroundColor) !important;
79 box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
81 transition: box-shadow .3s ease, width .2s ease;
84 @media screen and (min-width: $mobile-view) {
85 @include margin-left(10px);
88 @media screen and (max-width: $small-view) {
101 // we have to switch the display and not the opacity,
102 // to avoid clashing with the rest of the interface.
107 ::ng-deep &:focus-within {
109 @media screen and (min-width: $mobile-view) {
110 display: initial !important;
114 #typeahead-instructions,
116 box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
121 box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
122 border-end-start-radius: 0;
123 border-end-end-radius: 0;
125 @media screen and (min-width: 1000px) {
136 .advanced-search-status {
146 @include in-content-small-title;
148 margin-bottom: .5rem;
151 ::ng-deep my-suggestion {