Commit | Line | Data |
---|---|---|
45dc7657 RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
319c6529 | 4 | |
8c6555e2 | 5 | #PopupSearchAutoComplete { |
db1c5db1 RK |
6 | /* JS code forces the panel to have the width of the searchbar rather than |
7 | * the width of the textfield. Alignment of the panel with the searchbar is | |
8 | * obtained with negative margins here: margin-inline-start when the text | |
9 | * field is in the same direction as the rest of the UI, margin-inline-end | |
10 | * when the textfield's direction has been reversed. | |
11 | * (eg. using ctrl+shift+X) */ | |
dae45075 | 12 | margin-inline-start: -25px; |
db1c5db1 | 13 | margin-inline-end: -18px; |
8c6555e2 RK |
14 | } |
15 | ||
319c6529 RK |
16 | .autocomplete-textbox-container { |
17 | -moz-box-align: stretch; | |
18 | } | |
19 | ||
20 | .textbox-input-box { | |
21 | margin: 0; | |
22 | } | |
23 | ||
24 | /* ::::: searchbar-engine-button ::::: */ | |
25 | ||
26 | .searchbar-engine-image { | |
27 | height: 16px; | |
28 | width: 16px; | |
db1c5db1 | 29 | list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); |
dae45075 | 30 | margin-inline-start: -1px; |
319c6529 RK |
31 | } |
32 | ||
319c6529 RK |
33 | /* ::::: search-go-button ::::: */ |
34 | ||
35 | .search-go-container { | |
36 | -moz-box-align: center; | |
37 | } | |
38 | ||
39 | .search-go-button { | |
40 | padding: 1px; | |
e9fbfc3a RK |
41 | list-style-image: url("chrome://browser/skin/reload-stop-go.png"); |
42 | -moz-image-region: rect(0, 42px, 14px, 28px); | |
43 | width: 14px; | |
319c6529 RK |
44 | } |
45 | ||
db1c5db1 | 46 | .search-go-button:-moz-locale-dir(rtl) { |
71a617ff | 47 | transform: scaleX(-1); |
319c6529 RK |
48 | } |
49 | ||
50 | .search-go-button:hover { | |
e9fbfc3a | 51 | -moz-image-region: rect(14px, 42px, 28px, 28px); |
319c6529 RK |
52 | } |
53 | ||
54 | .search-go-button:hover:active { | |
e9fbfc3a | 55 | -moz-image-region: rect(14px, 42px, 28px, 28px); |
319c6529 | 56 | } |
58036cb8 | 57 | |
58036cb8 RK |
58 | .searchbar-search-button-container { |
59 | -moz-box-align: center; | |
58036cb8 RK |
60 | } |
61 | ||
62 | .searchbar-search-button { | |
63 | list-style-image: url("chrome://browser/skin/search-indicator.png"); | |
64 | -moz-image-region: rect(0, 20px, 20px, 0); | |
8c6555e2 RK |
65 | margin-top: 1px; |
66 | margin-bottom: 1px; | |
dae45075 | 67 | margin-inline-start: 4px; |
fefd86cd | 68 | border-radius: 3px; |
58036cb8 RK |
69 | } |
70 | ||
8c6555e2 RK |
71 | .searchbar-search-button[addengines="true"] { |
72 | list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png"); | |
73 | } | |
74 | ||
58036cb8 RK |
75 | .searchbar-search-button:hover, |
76 | .searchbar-search-button:hover:active { | |
77 | -moz-image-region: rect(0, 40px, 20px, 20px); | |
fefd86cd | 78 | background-color: #FFCF00; |
58036cb8 RK |
79 | } |
80 | ||
2e389898 | 81 | @media (min-resolution: 1.1dppx) { |
e9fbfc3a | 82 | .search-go-button { |
2e389898 RK |
83 | list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); |
84 | -moz-image-region: rect(0, 84px, 28px, 56px); | |
85 | } | |
86 | ||
e9fbfc3a | 87 | .search-go-button:hover { |
2e389898 RK |
88 | -moz-image-region: rect(28px, 84px, 56px, 56px); |
89 | } | |
90 | ||
e9fbfc3a | 91 | .search-go-button:hover:active { |
2e389898 RK |
92 | -moz-image-region: rect(56px, 84px, 84px, 56px); |
93 | } | |
94 | } | |
58036cb8 RK |
95 | |
96 | .search-panel-current-engine { | |
58036cb8 | 97 | -moz-box-align: center; |
1cf9b082 RK |
98 | } |
99 | ||
100 | /** | |
101 | * The borders of the various elements are specified as follows. | |
102 | * | |
103 | * The current engine always has a bottom border. | |
104 | * The search results never have a border. | |
105 | * | |
106 | * When the search results are not collapsed: | |
107 | * - The elements underneath the search results all have a top border. | |
108 | * | |
109 | * When the search results are collapsed: | |
110 | * - The elements underneath the search results all have a bottom border, except | |
111 | * the lowest one: search-setting-button. | |
112 | */ | |
113 | ||
114 | .search-panel-current-engine { | |
115 | border-top: none !important; | |
116 | border-bottom: 1px solid var(--panel-separator-color) !important; | |
117 | } | |
58036cb8 | 118 | |
1cf9b082 RK |
119 | .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header, |
120 | .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs, | |
121 | .search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type { | |
122 | border-top: none !important; | |
20752032 RK |
123 | } |
124 | ||
1cf9b082 RK |
125 | .search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item, |
126 | .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input, | |
127 | .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs, | |
128 | .search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type { | |
129 | border-bottom: 1px solid var(--panel-separator-color) !important; | |
fa703ff4 RK |
130 | } |
131 | ||
58036cb8 RK |
132 | .search-panel-header { |
133 | font-weight: normal; | |
134 | background-color: #A09090; | |
20752032 | 135 | border-top: 1px solid #000000; |
58036cb8 RK |
136 | margin: 0; |
137 | padding: 3px 6px; | |
138 | color: #000000; | |
139 | } | |
140 | ||
141 | .search-panel-current-input > label { | |
142 | margin: 0 0 !important; | |
143 | } | |
144 | ||
145 | .search-panel-input-value { | |
d23bf94a | 146 | color: #E7ADE7; |
2af95f78 RK |
147 | background-color: #000000; |
148 | padding: 1px 2px; | |
58036cb8 RK |
149 | } |
150 | ||
151 | .search-panel-one-offs { | |
d23bf94a | 152 | margin: 0 !important; |
20752032 | 153 | border-top: 1px solid #000000; |
1eb9479d | 154 | line-height: 0; |
58036cb8 RK |
155 | } |
156 | ||
157 | .searchbar-engine-one-off-item { | |
58036cb8 RK |
158 | display: inline-block; |
159 | border: none; | |
fefd86cd | 160 | border-radius: 0; |
58036cb8 RK |
161 | min-width: 48px; |
162 | height: 32px; | |
d23bf94a RK |
163 | margin: 0; |
164 | padding: 0; | |
165 | background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%); | |
166 | background-size: 1px auto; | |
58036cb8 RK |
167 | background-repeat: no-repeat; |
168 | background-position: right center; | |
d23bf94a | 169 | color: #A09090; |
58036cb8 RK |
170 | } |
171 | ||
db1c5db1 RK |
172 | .searchbar-engine-one-off-item:-moz-locale-dir(rtl) { |
173 | background-position: left center; | |
174 | } | |
175 | ||
58036cb8 | 176 | .searchbar-engine-one-off-item:not(.last-row) { |
2e389898 | 177 | box-sizing: content-box; |
d23bf94a | 178 | border-bottom: 1px solid var(--panel-separator-color); |
58036cb8 RK |
179 | } |
180 | ||
2a1534f1 RK |
181 | .search-setting-button-compact { |
182 | border-bottom: none !important; | |
183 | } | |
184 | ||
185 | .search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row, | |
186 | .search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy), | |
187 | .search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row), | |
188 | .search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine, | |
189 | .search-setting-button-compact { | |
58036cb8 RK |
190 | background-image: none; |
191 | } | |
192 | ||
58036cb8 RK |
193 | .searchbar-engine-one-off-item[selected] { |
194 | background-color: #008484; | |
195 | background-image: none; | |
d23bf94a | 196 | color: #000000; |
58036cb8 RK |
197 | } |
198 | ||
199 | .searchbar-engine-one-off-item > .button-box { | |
200 | border: none; | |
d23bf94a | 201 | padding: 0; |
58036cb8 RK |
202 | } |
203 | ||
204 | .searchbar-engine-one-off-item > .button-box > .button-text { | |
205 | display: none; | |
206 | } | |
207 | ||
208 | .searchbar-engine-one-off-item > .button-box > .button-icon { | |
209 | width: 16px; | |
210 | height: 16px; | |
211 | } | |
212 | ||
213 | .addengine-item { | |
58036cb8 | 214 | border: none; |
fefd86cd | 215 | /* height: 32px;*/ |
d23bf94a | 216 | margin: 0; |
58036cb8 | 217 | padding: 0 10px; |
fefd86cd | 218 | border-radius: 0; |
58036cb8 RK |
219 | } |
220 | ||
221 | .addengine-item > .button-box { | |
222 | -moz-box-pack: start; | |
223 | } | |
224 | ||
225 | .addengine-item:first-of-type { | |
20752032 | 226 | border-top: 1px solid #000000; |
58036cb8 RK |
227 | } |
228 | ||
20752032 | 229 | .addengine-item[selected] { |
58036cb8 RK |
230 | background-color: #FFCF00; |
231 | color: #000000; | |
232 | } | |
233 | ||
fa981c35 RK |
234 | .addengine-item[type=menu][selected] { |
235 | color: inherit; | |
236 | background-color: var(--arrowpanel-dimmed-further); | |
237 | } | |
238 | ||
8c6555e2 | 239 | .addengine-icon { |
fefd86cd | 240 | height: 16px; |
58036cb8 RK |
241 | width: 16px; |
242 | } | |
243 | ||
8c6555e2 RK |
244 | .addengine-badge { |
245 | width: 16px; | |
246 | height: 16px; | |
247 | margin: -7px -9px 7px 9px; | |
248 | list-style-image: url("chrome://browser/skin/badge-add-engine.png"); | |
249 | } | |
250 | ||
fa981c35 RK |
251 | .addengine-item > .button-box > .button-text, |
252 | .addengine-item[type=menu] > .button-box > .box-inherit > .button-text { | |
58036cb8 RK |
253 | -moz-box-flex: 1; |
254 | text-align: start; | |
dae45075 | 255 | padding-inline-start: 10px; |
58036cb8 RK |
256 | } |
257 | ||
258 | .addengine-item:not([image]) { | |
259 | list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); | |
260 | } | |
261 | ||
fa981c35 RK |
262 | .addengine-item[type=menu] > .button-box > .button-menu-dropmarker { |
263 | display: -moz-box; | |
264 | /* -moz-appearance: menuarrow !important;*/ | |
265 | list-style-image: none; | |
266 | } | |
267 | ||
58036cb8 | 268 | .search-panel-tree > .autocomplete-treebody::-moz-tree-cell { |
dae45075 | 269 | padding-inline-start: 15px; |
58036cb8 RK |
270 | border-top: none !important; |
271 | } | |
272 | ||
1eb9479d | 273 | .search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text { |
dae45075 | 274 | padding-inline-start: 4px; |
1eb9479d RK |
275 | } |
276 | ||
277 | .search-panel-tree > .autocomplete-treebody::-moz-tree-image { | |
dae45075 | 278 | padding-inline-start: 5px; |
1eb9479d RK |
279 | width: 14px; |
280 | height: 14px; | |
281 | } | |
282 | ||
283 | .search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) { | |
284 | list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon"); | |
285 | } | |
286 | ||
287 | .search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) { | |
288 | list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active"); | |
289 | } | |
290 | ||
58036cb8 | 291 | .search-setting-button { |
fefd86cd | 292 | border-radius: 0; |
20752032 | 293 | background-color: #C09070; |
fefd86cd | 294 | /* min-height: 32px;*/ |
58036cb8 RK |
295 | } |
296 | ||
20752032 | 297 | .search-setting-button[selected] { |
58036cb8 | 298 | background-color: #FFCF00; |
20752032 | 299 | border-top-color: #000000; |
58036cb8 | 300 | } |
2a1534f1 | 301 | |
d23bf94a RK |
302 | .search-setting-button-compact > .button-box > .button-icon { |
303 | list-style-image: url("chrome://browser/skin/gear.svg"); | |
0282321d | 304 | filter: url(chrome://global/skin/filters.svg#fill); |
d23bf94a | 305 | fill: currentColor; |
2a1534f1 RK |
306 | } |
307 | ||
308 | .search-setting-button-compact:hover { | |
309 | background-color: #FFCF00; | |
310 | color: #000000; | |
311 | } |