]>
Commit | Line | Data |
---|---|---|
8cbc40b2 | 1 | @use '_variables' as *; |
035db86d | 2 | @use '_mixins' as *; |
f409f0c3 | 3 | |
9b8a7aa8 | 4 | #search-video { |
30f939c4 | 5 | @include peertube-input-text($search-input-width, 14px); |
f1ac6348 | 6 | |
27bc9586 C |
7 | @include padding-left(10px); |
8 | @include padding-right(40px); // For the search icon | |
9 | ||
9b8a7aa8 | 10 | &::placeholder { |
e66883b3 | 11 | color: pvar(--inputPlaceholderColor); |
9b8a7aa8 RK |
12 | } |
13 | } | |
14 | ||
f1ac6348 | 15 | .icon-search { |
9b8a7aa8 | 16 | @include icon(25px); |
27bc9586 C |
17 | @include margin-left(-35px); |
18 | ||
c41c0e28 | 19 | height: 18px; |
9b8a7aa8 RK |
20 | |
21 | // yolo | |
22 | position: absolute; | |
c41c0e28 RK |
23 | margin-top: 3.5px; |
24 | right: 10px; | |
9b8a7aa8 RK |
25 | } |
26 | ||
f409f0c3 RK |
27 | .jump-to-suggestions { |
28 | top: 100%; | |
29 | left: 0; | |
d6eace77 | 30 | z-index: z('search-typeahead'); |
f409f0c3 RK |
31 | width: 100%; |
32 | } | |
33 | ||
6af662a5 | 34 | #typeahead-help, |
f409f0c3 | 35 | #typeahead-instructions, |
5fb2e288 | 36 | li.suggestion { |
e66883b3 | 37 | border: 1px solid pvar(--mainBackgroundColor); |
e66883b3 | 38 | background: pvar(--mainBackgroundColor); |
f409f0c3 RK |
39 | transition: .3s ease; |
40 | transition-property: box-shadow; | |
71489890 | 41 | cursor: pointer; |
6567e5a7 RK |
42 | |
43 | // soft border-radius for the last suggestion and the link inside | |
44 | &:last-of-type { | |
931d3430 C |
45 | &, |
46 | ::ng-deep a { | |
6567e5a7 RK |
47 | border-bottom-right-radius: 3px; |
48 | border-bottom-left-radius: 3px; | |
49 | } | |
50 | } | |
f409f0c3 RK |
51 | } |
52 | ||
6af662a5 | 53 | #typeahead-help, |
f409f0c3 RK |
54 | #typeahead-instructions { |
55 | margin-top: 10px; | |
56 | width: 100%; | |
57 | padding: .5rem 1rem; | |
6af662a5 | 58 | white-space: normal; |
f409f0c3 RK |
59 | |
60 | ul { | |
61 | list-style: none; | |
62 | padding: 0; | |
63 | margin-bottom: .5rem; | |
64 | ||
65 | em { | |
27bc9586 C |
66 | @include margin-right(0.2rem); |
67 | ||
f409f0c3 | 68 | font-weight: 600; |
f409f0c3 RK |
69 | font-style: normal; |
70 | } | |
71 | } | |
72 | } | |
73 | ||
74 | #typeahead-container { | |
4fdc7350 | 75 | font-size: 14px; |
9a3f7250 | 76 | margin: 0 10px; |
4fdc7350 | 77 | |
9b8a7aa8 | 78 | input { |
e66883b3 | 79 | border: 1px solid pvar(--mainBackgroundColor) !important; |
931d3430 | 80 | box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0; |
f409f0c3 RK |
81 | flex-grow: 1; |
82 | transition: box-shadow .3s ease, width .2s ease; | |
83 | } | |
84 | ||
9677fca7 | 85 | @media screen and (max-width: $small-view) { |
9a3f7250 C |
86 | input { |
87 | width: 200px; | |
88 | } | |
89 | } | |
52cc0d54 | 90 | |
9a3f7250 | 91 | @media screen and (max-width: $mobile-view) { |
9b8a7aa8 | 92 | input { |
9a3f7250 | 93 | width: 150px; |
52cc0d54 RK |
94 | } |
95 | } | |
96 | ||
9b8a7aa8 | 97 | span { |
f409f0c3 RK |
98 | right: 10px; |
99 | } | |
100 | ||
931d3430 | 101 | > div:last-child { |
5fb2e288 | 102 | // we have to switch the display and not the opacity, |
f409f0c3 RK |
103 | // to avoid clashing with the rest of the interface. |
104 | display: none; | |
105 | } | |
106 | ||
107 | &:focus, | |
108 | ::ng-deep &:focus-within { | |
931d3430 | 109 | > div:last-child { |
9677fca7 | 110 | @media screen and (min-width: $mobile-view) { |
52cc0d54 RK |
111 | display: initial !important; |
112 | } | |
5fb2e288 | 113 | |
6af662a5 | 114 | #typeahead-help, |
f409f0c3 | 115 | #typeahead-instructions, |
5fb2e288 | 116 | li.suggestion { |
931d3430 | 117 | box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px; |
f409f0c3 RK |
118 | } |
119 | } | |
120 | ||
121 | ::ng-deep input { | |
931d3430 | 122 | box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0; |
f409f0c3 RK |
123 | border-end-start-radius: 0; |
124 | border-end-end-radius: 0; | |
125 | ||
8cbc40b2 | 126 | @media screen and (min-width: 1000px) { |
f409f0c3 RK |
127 | width: 500px; |
128 | } | |
129 | } | |
130 | } | |
131 | } | |
132 | ||
f409f0c3 | 133 | .advanced-search-status { |
6af662a5 RK |
134 | height: max-content; |
135 | cursor: default; | |
136 | ||
137 | &.c-help { | |
138 | cursor: help; | |
139 | } | |
f409f0c3 RK |
140 | } |
141 | ||
142 | .small-title { | |
143 | @include in-content-small-title; | |
144 | ||
145 | margin-bottom: .5rem; | |
146 | } | |
147 | ||
6af662a5 RK |
148 | ::ng-deep my-suggestion { |
149 | width: 100%; | |
f409f0c3 | 150 | } |