3 @import '_bootstrap-variables';
4 @import '~bootstrap/scss/mixins/_breakpoints';
7 @include peertube-input-text($search-input-width);
9 padding-right: 40px; // For the search icon
13 color: pvar(--inputPlaceholderColor);
28 .jump-to-suggestions {
31 z-index: z('search-typeahead');
36 #typeahead-instructions,
38 border: 1px solid pvar(--mainBackgroundColor);
39 background: pvar(--mainBackgroundColor);
41 transition-property: box-shadow;
44 // soft border-radius for the last suggestion and the link inside
47 border-bottom-right-radius: 3px;
48 border-bottom-left-radius: 3px;
54 #typeahead-instructions {
73 #typeahead-container {
75 border: 1px solid pvar(--mainBackgroundColor) !important;
76 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
78 transition: box-shadow .3s ease, width .2s ease;
81 @media screen and (min-width: $mobile-view) {
85 @media screen and (max-width: $small-view) {
98 // we have to switch the display and not the opacity,
99 // to avoid clashing with the rest of the interface.
104 ::ng-deep &:focus-within {
106 @media screen and (min-width: $mobile-view) {
107 display: initial !important;
111 #typeahead-instructions,
113 box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
118 box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
119 border-end-start-radius: 0;
120 border-end-end-radius: 0;
122 @include media-breakpoint-up(lg) {
133 .advanced-search-status {
143 @include in-content-small-title;
145 margin-bottom: .5rem;
148 ::ng-deep my-suggestion {