Commit | Line | Data |
---|---|---|
3d85dbf1 | 1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
9099c61d RK |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
3d85dbf1 | 5 | |
d0a8de80 RK |
6 | @import url("splitters.css"); |
7 | ||
3886293f RK |
8 | /* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */ |
9 | window { | |
10 | padding: 0; | |
56ab361a RK |
11 | } |
12 | ||
3886293f RK |
13 | notification { |
14 | margin-bottom: 3px; | |
3d85dbf1 | 15 | } |
713cf603 | 16 | |
3886293f | 17 | /* End LCARStrek toolbox rules */ |
85cfb236 | 18 | |
d74db938 RK |
19 | :root { |
20 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
dc9d5d64 | 21 | --proportional-font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
d74db938 RK |
22 | --monospace-font-family: "Liberation Mono", Consolas, "Courier New", monospace; |
23 | --monospace-font-size: 12px; | |
24 | } | |
85cfb236 | 25 | |
3886293f | 26 | .devtools-monospace { |
d74db938 RK |
27 | font-family: var(--monospace-font-family); |
28 | font-size: var(--monospace-font-size); | |
85cfb236 RK |
29 | } |
30 | ||
2e389898 | 31 | |
82b4252f | 32 | /* Autocomplete Popup */ |
82b4252f RK |
33 | |
34 | .devtools-autocomplete-popup { | |
82b4252f | 35 | border-radius: 3px; |
6dc70335 | 36 | overflow-x: hidden; |
6f751fd1 | 37 | max-height: 20rem; |
1ad21b1f RK |
38 | |
39 | /* Devtools autocompletes display technical english keywords and should be displayed | |
40 | using LTR direction. */ | |
41 | direction: ltr !important; | |
82b4252f RK |
42 | } |
43 | ||
1ad21b1f RK |
44 | /* Reset list styles. */ |
45 | .devtools-autocomplete-popup ul { | |
46 | list-style: none; | |
6f751fd1 RK |
47 | } |
48 | ||
1ad21b1f RK |
49 | .devtools-autocomplete-popup ul, |
50 | .devtools-autocomplete-popup li { | |
51 | margin: 0; | |
6f751fd1 RK |
52 | } |
53 | ||
1ad21b1f RK |
54 | .devtools-autocomplete-listbox { |
55 | background-color: transparent; | |
56 | border-width: 0px !important; | |
57 | margin: 0; | |
0142a07b RK |
58 | } |
59 | ||
1ad21b1f | 60 | .devtools-autocomplete-listbox .autocomplete-item { |
82b4252f RK |
61 | width: 100%; |
62 | background-color: transparent; | |
63 | border-radius: 4px; | |
0142a07b RK |
64 | } |
65 | ||
1ad21b1f RK |
66 | .devtools-autocomplete-listbox .autocomplete-selected { |
67 | /* background-color: rgba(0,0,0,0.2); */ | |
0142a07b RK |
68 | } |
69 | ||
1ad21b1f RK |
70 | .devtools-autocomplete-listbox .autocomplete-item > .initial-value, |
71 | .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { | |
82b4252f | 72 | margin: 0; |
1ad21b1f RK |
73 | padding: 0; |
74 | cursor: default; | |
0142a07b RK |
75 | } |
76 | ||
1ad21b1f | 77 | .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { |
a21f2959 | 78 | text-align: end; |
82b4252f | 79 | } |
0142a07b | 80 | |
ed88669c RK |
81 | /* Rest of the dark and light theme */ |
82 | ||
0593e1a1 | 83 | .devtools-autocomplete-popup, |
ed88669c RK |
84 | .CodeMirror-hints, |
85 | .CodeMirror-Tern-tooltip { | |
0593e1a1 | 86 | border: 1px solid #9C9CFF; |
ed88669c RK |
87 | background-color: #000000; |
88 | } | |
82b4252f | 89 | |
1ad21b1f | 90 | /* Autocomplete list clone used for accessibility. */ |
445863a2 | 91 | |
1ad21b1f RK |
92 | .devtools-autocomplete-list-aria-clone { |
93 | /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */ | |
94 | position: fixed; | |
95 | overflow: hidden; | |
96 | margin: 0; | |
97 | width: 0; | |
98 | height: 0; | |
82b4252f RK |
99 | } |
100 | ||
1ad21b1f RK |
101 | .devtools-autocomplete-list-aria-clone li { |
102 | /* Prevent screen readers from prefacing every item with 'bullet'. */ | |
103 | list-style-type: none; | |
0142a07b | 104 | } |
82b4252f | 105 | |
6184c7f7 | 106 | /* links to source code, like displaying `myfile.js:45` */ |
d74db938 RK |
107 | |
108 | .devtools-source-link { | |
109 | font-family: var(--monospace-font-family); | |
110 | color: var(--theme-text-blue); | |
111 | cursor: pointer; | |
112 | white-space: nowrap; | |
113 | display: flex; | |
d74db938 RK |
114 | text-decoration: none; |
115 | font-size: 11px; | |
116 | width: 12em; /* probably should be changed for each tool */ | |
117 | } | |
118 | ||
119 | .devtools-source-link:hover { | |
120 | text-decoration: underline; | |
121 | } | |
122 | ||
123 | .devtools-source-link > .filename { | |
124 | text-overflow: ellipsis; | |
125 | text-align: end; | |
126 | overflow: hidden; | |
127 | margin: 2px 0px; | |
128 | cursor: pointer; | |
129 | } | |
130 | ||
131 | .devtools-source-link > .line-number { | |
132 | flex: none; | |
133 | margin: 2px 0px; | |
134 | cursor: pointer; | |
135 | } | |
6f751fd1 RK |
136 | |
137 | /* Keyboard focus highlight styles */ | |
138 | ||
139 | :-moz-focusring { | |
140 | outline: var(--theme-focus-outline); | |
141 | outline-offset: -1px; | |
142 | } | |
143 | ||
144 | textbox[focused="true"] { | |
145 | border-color: var(--theme-focus-border-color-textbox); | |
6f751fd1 RK |
146 | /* box-shadow: var(--theme-focus-box-shadow-textbox);*/ |
147 | transition: all 0.2s ease-in-out | |
148 | } | |
149 | ||
150 | textbox :-moz-focusring { | |
151 | box-shadow: none; | |
152 | outline: none; | |
153 | } | |
154 | ||
155 | /* Form fields should already have box-shadow hightlight */ | |
156 | select:-moz-focusring, | |
157 | input[type="radio"]:-moz-focusring, | |
158 | input[type="checkbox"]:-moz-focusring, | |
159 | checkbox:-moz-focusring { | |
160 | outline: none; | |
161 | } | |
60156ae2 | 162 | |
ec6b35d8 RK |
163 | /* Toolbar buttons */ |
164 | ||
165 | .devtools-menulist, | |
166 | .devtools-toolbarbutton, | |
167 | .devtools-button { | |
168 | } | |
169 | ||
170 | .devtools-menulist, | |
171 | .devtools-toolbarbutton { | |
172 | } | |
173 | ||
174 | .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, | |
175 | .devtools-button::before { | |
176 | width: 16px; | |
177 | height: 16px; | |
178 | /* transition: opacity 0.05s ease-in-out;*/ | |
179 | } | |
180 | ||
181 | /* HTML buttons */ | |
182 | .devtools-button { | |
183 | margin: 0; | |
184 | padding: 0; | |
185 | border: none; | |
186 | border-radius: 3px; | |
187 | min-width: 18px; | |
188 | height: 100%; | |
189 | margin-inline-start: 2px; | |
190 | background: var(--theme-toolbar-background); | |
191 | color: var(--theme-body-color); | |
192 | /* The icon is absolutely positioned in the button using ::before */ | |
193 | position: relative; | |
194 | } | |
195 | ||
196 | .devtools-button:not([disabled]):hover { | |
197 | background: var(--theme-hover-background); | |
198 | color: var(--theme-hover-color); | |
199 | } | |
200 | ||
201 | .devtools-button:not([disabled]):hover:active { | |
202 | background: var(--theme-active-background); | |
203 | color: var(--theme-active-color); | |
204 | } | |
205 | ||
206 | /* Menu type buttons and checked states */ | |
207 | .devtools-button[checked], | |
208 | .devtools-button.checked { | |
209 | background: var(--theme-selection-background); | |
210 | color: var(--theme-selection-color); | |
211 | } | |
212 | ||
213 | .devtools-button::before { | |
214 | content: ""; | |
215 | display: block; | |
216 | position: absolute; | |
217 | left: 50%; | |
218 | top: 50%; | |
219 | margin: -8px 0 0 -8px; | |
220 | /* background-size: cover; | |
221 | background-repeat: no-repeat;*/ | |
222 | /* transition: opacity 0.05s ease-in-out;*/ | |
223 | } | |
224 | ||
225 | .devtools-button:-moz-focusring { | |
226 | outline: none; | |
227 | } | |
228 | ||
229 | /* Standalone buttons */ | |
230 | .devtools-button[standalone], | |
231 | .devtools-button[data-standalone], | |
232 | .devtools-toolbarbutton[standalone], | |
233 | .devtools-toolbarbutton[data-standalone], | |
234 | .menu-filter-button { | |
235 | border: none; | |
236 | /* min-height: 32px; */ | |
237 | font: inherit; | |
238 | background-color: var(--theme-button-background); | |
239 | color: var(--theme-button-color); | |
240 | border-radius: 300px; | |
241 | } | |
242 | ||
243 | .devtools-button[standalone]:hover, | |
244 | .devtools-button[data-standalone]:hover, | |
245 | .devtools-toolbarbutton[standalone]:hover, | |
246 | .devtools-toolbarbutton[data-standalone]:hover, | |
247 | .menu-filter-button:hover { | |
248 | background-color: var(--theme-hover-background); | |
249 | color: var(--theme-hover-color); | |
250 | } | |
251 | ||
252 | .devtools-button[standalone]:hover:active, | |
253 | .devtools-button[data-standalone]:hover:active, | |
254 | .devtools-toolbarbutton[standalone]:hover:active, | |
255 | .devtools-toolbarbutton[data-standalone]:hover:active, | |
256 | .menu-filter-button:hover:active { | |
257 | background-color: var(--theme-active-background); | |
258 | color: var(--theme-active-color); | |
259 | } | |
260 | ||
261 | .menu-filter-button.checked { | |
262 | background: var(--theme-selection-background); | |
263 | color: var(--theme-selection-color); | |
264 | } | |
265 | ||
266 | .menu-filter-button + .menu-filter-button { | |
267 | margin-inline-start: 2px; | |
268 | } | |
269 | ||
270 | .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { | |
271 | } | |
272 | ||
273 | .devtools-toolbarbutton[label][standalone] { | |
274 | } | |
275 | ||
276 | .devtools-menulist, | |
277 | .devtools-toolbarbutton, | |
278 | .devtools-button { | |
279 | min-height: 18px; | |
280 | } | |
281 | ||
282 | /* Icon button styles */ | |
283 | .devtools-toolbarbutton:not([label]), | |
284 | .devtools-toolbarbutton[text-as-image] { | |
285 | min-width: 16px; | |
286 | } | |
287 | ||
288 | .devtools-toolbarbutton:not([label]) > .toolbarbutton-text { | |
289 | display: none; | |
290 | } | |
291 | ||
292 | .devtools-toolbar .devtools-toolbarbutton { | |
293 | margin-inline-start: 2px; | |
294 | } | |
295 | ||
296 | .devtools-toolbarbutton > .toolbarbutton-icon { | |
297 | } | |
298 | ||
299 | /* Menu button styles (eg. web console filters) */ | |
300 | .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { | |
301 | /* -moz-box-orient: horizontal; */ | |
302 | } | |
303 | ||
304 | .devtools-toolbarbutton[type=menu-button] { | |
305 | } | |
306 | ||
307 | .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
308 | } | |
309 | ||
310 | .devtools-menulist > .menulist-dropmarker { | |
311 | } | |
312 | ||
313 | .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, | |
314 | .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { | |
315 | } | |
316 | ||
317 | /* Icon-only buttons */ | |
318 | .devtools-button:empty::before, | |
319 | .devtools-toolbarbutton:not([label]):not([disabled]) > image { | |
320 | /* opacity: 0.8;*/ | |
321 | } | |
322 | ||
323 | .devtools-button:hover:empty::before, | |
324 | .devtools-button.checked:empty::before, | |
325 | .devtools-button[checked]:empty::before, | |
326 | .devtools-button[open]:empty::before, | |
327 | .devtools-button.checked::before, | |
328 | .devtools-toolbarbutton:not([label]):hover > image, | |
329 | .devtools-toolbarbutton:not([label])[checked=true] > image, | |
330 | .devtools-toolbarbutton:not([label])[open=true] > image { | |
331 | /* opacity: 1;*/ | |
332 | } | |
333 | ||
334 | .devtools-button:disabled, | |
335 | .devtools-button[disabled], | |
336 | .devtools-toolbarbutton[disabled] { | |
337 | pointer-events: none; | |
338 | /* opacity: 0.5 !important;*/ | |
339 | } | |
340 | ||
341 | .devtools-button[standalone]::before, | |
342 | .devtools-button[data-standalone]::before, | |
343 | .devtools-button:not([disabled]):hover::before, | |
344 | .devtools-button:not([disabled]):hover:active::before, | |
345 | .devtools-button[checked]:empty::before, | |
346 | .devtools-button[open]:empty::before, | |
347 | .devtools-toolbarbutton[standalone] > image, | |
348 | .devtools-toolbarbutton[data-standalone] > image, | |
349 | .devtools-toolbarbutton:not([disabled]):hover > image, | |
350 | .devtools-toolbarbutton:not([disabled]):hover:active > image, | |
351 | .devtools-toolbarbutton[checked=true] > image, | |
352 | .devtools-toolbarbutton[open=true] > image { | |
353 | filter: var(--checked-icon-filter); | |
354 | } | |
355 | ||
356 | .devtools-button[disabled]::before, | |
357 | .devtools-toolbarbutton[disabled] > image { | |
358 | filter: url(images/filters.svg#disabled-icon-state); | |
359 | } | |
360 | ||
361 | /* Icon-and-text buttons */ | |
362 | .devtools-toolbarbutton.icon-and-text .toolbarbutton-text { | |
363 | margin-inline-start: .5em !important; | |
364 | font-weight: 600; | |
365 | } | |
366 | ||
367 | /* Text-only buttons */ | |
368 | .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), | |
369 | .devtools-toolbarbutton[data-text-only], | |
370 | .devtools-button:not(:empty), | |
371 | #toolbox-buttons .devtools-toolbarbutton[text-as-image] { | |
372 | /* background-color: rgba(0, 0, 0, .2); / Splitter */ | |
373 | } | |
374 | ||
375 | /* Text-only button states */ | |
376 | .devtools-button:not(:empty):not(:disabled):hover, | |
377 | #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, | |
378 | .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { | |
379 | /* background: rgba(0, 0, 0, .3); / Splitters */ | |
380 | } | |
381 | ||
382 | .devtools-button:not(:empty):not(:disabled):hover:active, | |
383 | #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, | |
384 | .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { | |
385 | /* background: rgba(0, 0, 0, .4); / Splitters */ | |
386 | } | |
387 | ||
388 | .devtools-toolbarbutton:not([disabled])[label][checked=true], | |
389 | .devtools-toolbarbutton:not([disabled])[label][open], | |
390 | .devtools-button:not(:empty)[checked=true], | |
391 | #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] { | |
392 | /* background: rgba(29, 79, 115, .7); / Select highlight blue / | |
393 | color: var(--theme-selection-color); */ | |
394 | } | |
395 | ||
396 | .devtools-menulist[open=true], | |
397 | .devtools-toolbarbutton[open=true], | |
398 | .devtools-toolbarbutton[open=true]:hover, | |
399 | .devtools-toolbarbutton[open=true]:hover:active, | |
400 | .devtools-toolbarbutton[checked=true], | |
401 | .devtools-toolbarbutton[checked=true]:hover, | |
402 | #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { | |
403 | /* background: rgba(29, 79, 115, .8); / Select highlight blue / | |
404 | color: var(--theme-selection-color); */ | |
405 | } | |
60156ae2 RK |
406 | |
407 | :root { | |
408 | --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); | |
409 | } | |
410 | ||
411 | .devtools-button.devtools-clear-icon::before { | |
412 | background-image: var(--clear-icon-url); | |
413 | } | |
414 | ||
415 | .devtools-button.devtools-filter-icon::before { | |
416 | background-image: var(--filter-image); | |
417 | } | |
418 | ||
419 | .devtools-toolbarbutton.devtools-clear-icon { | |
420 | list-style-image: var(--clear-icon-url); | |
421 | } | |
422 | ||
423 | .devtools-option-toolbarbutton { | |
424 | list-style-image: var(--tool-options-image); | |
425 | } | |
ec6b35d8 RK |
426 | |
427 | .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { | |
428 | } | |
429 | ||
430 | .devtools-toolbarbutton-group + .devtools-toolbarbutton { | |
431 | } | |
432 | ||
433 | .devtools-separator + .devtools-toolbarbutton { | |
434 | } | |
435 | ||
436 | /* | |
437 | * Filter buttons | |
438 | * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands | |
439 | */ | |
440 | ||
441 | .menu-filter-button { | |
442 | /* -moz-appearance: none; | |
443 | background: rgba(128,128,128,0.1); | |
444 | border: none; | |
445 | border-radius: 2px; | |
446 | min-width: 0; | |
447 | padding: 0 5px; | |
448 | margin: 2px; | |
449 | color: var(--theme-body-color);*/ | |
450 | } | |
451 | ||
452 | .menu-filter-button:hover { | |
453 | /* background: rgba(128,128,128,0.2);*/ | |
454 | } | |
455 | ||
456 | .menu-filter-button:hover:active { | |
457 | /* background-color: var(--theme-selection-background-semitransparent);*/ | |
458 | } | |
459 | ||
460 | .menu-filter-button:not(:active).checked { | |
461 | background-color: var(--theme-selection-background); | |
462 | color: var(--theme-selection-color); | |
463 | } | |
464 | ||
465 | /* Text input */ | |
466 | ||
467 | .devtools-textinput, | |
468 | .devtools-searchinput, | |
469 | .devtools-filterinput { | |
470 | /* -moz-appearance: none; | |
471 | margin: 1 3px; | |
472 | border: 1px solid; | |
473 | border-radius: 2px; | |
474 | padding: 4px 6px; | |
475 | border-color: var(--theme-splitter-color); | |
476 | font: message-box;*/ | |
477 | margin-top: 0; | |
478 | margin-bottom: 0; | |
479 | } | |
480 | ||
481 | :root[platform="mac"] .devtools-searchinput, | |
482 | :root[platform="mac"] .devtools-textinput { | |
483 | /* border-radius: 20px;*/ | |
484 | } | |
485 | ||
486 | .devtools-searchinput, | |
487 | .devtools-filterinput { | |
488 | /* margin-top: 1px; | |
489 | margin-bottom: 1px; | |
490 | padding: 0;*/ | |
491 | padding-inline-start: 22px; | |
492 | padding-inline-end: 4px; | |
493 | background-position: 8px center; | |
494 | background-size: 11px 11px; | |
495 | background-repeat: no-repeat; | |
496 | font-size: inherit; | |
497 | } | |
498 | ||
499 | /* | |
500 | * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it | |
501 | * once we have a standardized search and filter input across the toolboxes. | |
502 | */ | |
503 | .has-clear-btn > .devtools-searchinput, | |
504 | .has-clear-btn > .devtools-filterinput { | |
505 | padding-inline-end: 23px; | |
506 | } | |
507 | ||
508 | .devtools-searchinput { | |
509 | background-image: var(--magnifying-glass-image); | |
510 | } | |
511 | ||
512 | .devtools-filterinput { | |
513 | background-image: var(--filter-image); | |
514 | } | |
515 | ||
516 | .devtools-searchinput:-moz-locale-dir(rtl), | |
517 | .devtools-searchinput:dir(rtl), | |
518 | .devtools-filterinput:-moz-locale-dir(rtl), | |
519 | .devtools-filterinput:dir(rtl) { | |
520 | background-position: calc(100% - 8px) center; | |
521 | } | |
522 | ||
523 | .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon, | |
524 | .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { | |
525 | visibility: hidden; | |
526 | } | |
527 | ||
528 | .devtools-searchinput .textbox-input::placeholder, | |
529 | .devtools-filterinput .textbox-input::placeholder { | |
530 | font-style: normal; | |
531 | } | |
532 | ||
533 | .devtools-plaininput { | |
534 | border-color: transparent; | |
535 | background-color: transparent; | |
536 | ||
537 | color: var(--theme-highlight-gray); | |
538 | } | |
539 | ||
540 | /* Searchbox is a div container element for a search input element */ | |
541 | .devtools-searchbox { | |
542 | display: flex; | |
543 | flex: 1; | |
544 | position: relative; | |
545 | } | |
546 | ||
547 | button + .devtools-searchbox { | |
548 | margin-inline-start: 2px; | |
549 | } | |
550 | ||
551 | /* The spacing is accomplished with a padding on the searchbox */ | |
552 | .devtools-searchbox > .devtools-textinput, | |
553 | .devtools-searchbox > .devtools-searchinput { | |
554 | } | |
555 | ||
556 | .devtools-textinput:focus, | |
557 | .devtools-searchinput:focus, | |
558 | .devtools-filterinput:focus { | |
559 | border-color: var(--theme-focus-border-color-textbox); | |
560 | /* box-shadow: var(--theme-focus-box-shadow-textbox);*/ | |
561 | transition: all 0.2s ease-in-out; | |
562 | outline: none; | |
563 | } | |
564 | ||
565 | /* Don't add 'double spacing' for inputs that are at beginning / end | |
566 | of a toolbar (since the toolbar has it's own spacing). */ | |
567 | .devtools-toolbar > .devtools-textinput:first-child, | |
568 | .devtools-toolbar > .devtools-searchinput:first-child, | |
569 | .devtools-toolbar > .devtools-filterinput:first-child { | |
570 | } | |
571 | .devtools-toolbar > .devtools-textinput:last-child, | |
572 | .devtools-toolbar > .devtools-searchinput:last-child, | |
573 | .devtools-toolbar > .devtools-filterinput:last-child { | |
574 | } | |
575 | .devtools-toolbar > .devtools-searchbox:first-child { | |
576 | } | |
577 | .devtools-toolbar > .devtools-searchbox:last-child { | |
578 | } | |
579 | ||
580 | .devtools-rule-searchbox { | |
581 | -moz-box-flex: 1; | |
582 | width: 100%; | |
583 | /* font: inherit;*/ | |
584 | } | |
585 | ||
586 | .devtools-rule-searchbox[filled] { | |
587 | background-color: var(--searchbox-background-color); | |
588 | border-color: var(--searchbox-border-color); | |
589 | } | |
590 | ||
591 | .devtools-style-searchbox-no-match { | |
592 | background-color: var(--searchbox-no-match-background-color) !important; | |
593 | border-color: var(--searchbox-no-match-border-color) !important; | |
594 | } | |
595 | ||
596 | .devtools-searchinput-clear { | |
597 | position: absolute; | |
598 | top: 3.5px; | |
599 | offset-inline-end: 7px; | |
600 | padding: 0; | |
601 | border: 0; | |
602 | width: 16px; | |
603 | height: 16px; | |
604 | background-position: 0 0; | |
605 | background-repeat: no-repeat; | |
606 | background-color: transparent; | |
607 | } | |
608 | ||
609 | .devtools-searchinput-clear:dir(rtl) { | |
610 | right: unset; | |
611 | left: 7px; | |
612 | } | |
613 | ||
614 | .devtools-searchinput-clear { | |
615 | background-image: url("chrome://devtools/skin/images/search-clear.svg"); | |
616 | } | |
617 | ||
618 | .devtools-style-searchbox-no-match + .devtools-searchinput-clear { | |
619 | background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important; | |
620 | } | |
621 | ||
622 | .devtools-searchinput-clear:hover { | |
623 | background-position: -16px 0; | |
624 | } | |
625 | ||
626 | .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear, | |
627 | .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { | |
628 | list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); | |
629 | -moz-image-region: rect(0, 16px, 16px, 0); | |
630 | } | |
631 | ||
632 | .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover, | |
633 | .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { | |
634 | -moz-image-region: rect(0, 32px, 16px, 16px); | |
635 | } | |
636 | ||
637 | /* Throbbers */ | |
638 | ||
639 | .devtools-throbber::before { | |
640 | content: ""; | |
641 | display: inline-block; | |
642 | vertical-align: bottom; | |
643 | margin-inline-end: 0.5em; | |
644 | width: 1em; | |
645 | height: 1em; | |
646 | border: 2px solid currentColor; | |
647 | border-right-color: transparent; | |
648 | border-radius: 50%; | |
649 | animation: 1.1s linear throbber-spin infinite; | |
650 | } | |
651 | ||
652 | @keyframes throbber-spin { | |
653 | from { | |
654 | transform: none; | |
655 | } | |
656 | to { | |
657 | transform: rotate(360deg); | |
658 | } | |
659 | } |