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: var(--inputPlaceholderColor);
21 background-color: var(--mainForegroundColor);
22 mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
30 .jump-to-suggestions {
33 z-index: z(typeahead);
38 #typeahead-instructions,
39 my-suggestions ::ng-deep ul {
40 border: 1px solid var(--mainBackgroundColor);
41 border-bottom-right-radius: 3px;
42 border-bottom-left-radius: 3px;
43 background: var(--mainBackgroundColor);
45 transition-property: box-shadow;
49 #typeahead-instructions {
68 #typeahead-container {
70 border: 1px solid var(--mainBackgroundColor) !important;
71 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
73 transition: box-shadow .3s ease, width .2s ease;
76 @media screen and (min-width: $mobile-view) {
80 @media screen and (max-width: $small-view) {
93 // we have to switch the display and not the opacity,
94 // to avoid clashing with the rest of the interface.
99 ::ng-deep &:focus-within {
101 @media screen and (min-width: $mobile-view) {
102 display: initial !important;
106 #typeahead-instructions,
107 my-suggestions ::ng-deep ul {
108 box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
113 box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
114 border-end-start-radius: 0;
115 border-end-end-radius: 0;
117 @include media-breakpoint-up(lg) {
128 .advanced-search-status {
138 @include in-content-small-title;
140 margin-bottom: .5rem;
143 ::ng-deep my-suggestion {