70813dbdd2e232c000a714b388b3b8a8655f5bb0
[themes.git] / LCARStrek / browser / browser.css
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/. */
4
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
7
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
11
12 toolbar {
13   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14 }
15
16 toolbar[customizable="true"] {
17   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18 }
19
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22   toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24   }
25 }
26
27 toolbar[type="menubar"][autohide="true"] {
28   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29 }
30
31 #toolbar-menubar[autohide="true"] {
32   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33 }
34
35 menubar {
36   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
37 }
38
39 :root {
40   /*--backbutton-urlbar-overlap: 5px;*/
41
42   --identity-box-verified-background-color: #000000;
43
44   --panel-separator-color: #A09090;
45
46   --urlbar-separator-color: #9C9CFF;
47 }
48
49 #menubar-items {
50   -moz-box-orient: vertical; /* for flex hack */
51 }
52
53 #main-menubar {
54   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
55 }
56
57 /* ::::: primary toolbar ::::: */
58
59 .toolbar-primary > .toolbar-box > .toolbar-holder {
60   background-color: #A09090;
61 }
62
63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
65   background-color: #9C9CFF;
66 }
67
68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
69    are not autohiding the menubar. */
70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
71   display: none;
72 }
73
74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
79 /*  margin-top: 3px;*/
80 }
81
82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
84 /*  margin-top: var(--space-above-tabbar);*/
85 }
86
87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
89   #toolbar-menubar:not([autohide="true"]) {
90     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
91   }
92 }
93
94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96   #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
97     padding-left: 60px;
98   }
99 }
100
101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102   /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
103   display: none;
104 }
105
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110   outline-color: #A09090;
111 }
112
113 #navigator-toolbox {
114 }
115
116 #navigator-toolbox::after {
117   content: "";
118   display: -moz-box;
119   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
120   height: 1px;
121 }
122
123 #navigator-toolbox > toolbar {
124 }
125
126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127 }
128
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130   overflow: -moz-hidden-unscrollable;
131   max-height: 4em;
132   transition: min-height 170ms ease-out, max-height 170ms ease-out;
133 }
134
135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136   min-height: 0.1px;
137   max-height: 0;
138   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139 }
140
141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143   /* Indent also due to non-applicable aero rule in original Windows theme. */
144   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
146     /* like menubar */
147     background-color: #6000CF;
148     color: #FF9F00;
149   }
150
151   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153     background-color: #8050B0;
154     color: #FF9F00;
155   }
156
157   #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
158     /*color: inherit;*/
159   }
160
161   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
162     visibility: hidden;
163   }
164
165   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
167     visibility: visible;
168   }
169 }
170
171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
173   #titlebar-buttonbox > .titlebar-button {
174     display: none;
175   }
176 }
177
178 #nav-bar {
179   /* Position the toolbar above the bottom of background tabs */
180   position: relative;
181   z-index: 1;
182 }
183
184 #personal-bookmarks {
185 /*  min-height: 24px; */
186 }
187
188 #PersonalToolbar > #home-button {
189   -moz-box-orient: horizontal;
190 }
191
192 #PersonalToolbar > #home-button > .toolbarbutton-text {
193   display: block;
194 }
195
196 #print-preview-toolbar:not(:-moz-lwtheme) {
197   /* -moz-appearance: toolbox; */
198 }
199
200 #browser-bottombox:not(:-moz-lwtheme) {
201 }
202
203 /* ::::: titlebar ::::: */
204
205 #titlebar {
206   /* like menubar */
207   background-color: #6000CF;
208   color: #FF9F00;
209 }
210 #titlebar:-moz-window-inactive {
211   background-color: #8050B0;
212   color: #FF9F00;
213 }
214
215 #main-window[sizemode="normal"] > #titlebar {
216   margin-top: -3px;
217   margin-bottom: 3px;
218 }
219
220 #main-window[sizemode="maximized"] > #titlebar {
221   margin-top: 4px;
222 }
223
224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
226   #main-window[sizemode="normal"] > #titlebar,
227   #main-window[sizemode="maximized"] > #titlebar {
228     margin-top: 19px;
229     /* There is a margin-bottom set to -23 by code. */
230   }
231 }
232
233 /* The button box must appear on top of the navigator-toolbox in order for
234  * click and hover mouse events to work properly for the button in the restored
235  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236  * can swallow those events. It will also place the buttons above the fog on
237  * themes with Aero Glass.
238  */
239 #titlebar-buttonbox,
240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
241   -moz-appearance: none;
242   margin-top: 6px;
243   margin-top: 4px;
244   -moz-margin-end: 3px;
245   z-index: 1;
246 }
247
248 .titlebar-placeholder[type="appmenu-button"] {
249   margin-left: 4px;
250 }
251
252 .titlebar-placeholder[type="caption-buttons"] {
253   margin-left: 10px;
254 }
255
256 /* titlebar command buttons */
257 #titlebar-min {
258   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
259 }
260
261 #titlebar-min:hover {
262   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
263 }
264
265 #titlebar-max {
266   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
267 }
268
269 #titlebar-max:hover {
270   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
271 }
272
273 #main-window[sizemode="maximized"] #titlebar-max {
274   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
275 }
276
277 #main-window[sizemode="maximized"] #titlebar-max:hover {
278   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
279 }
280
281 #titlebar-close {
282   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
283 }
284
285 #titlebar-close:hover {
286   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
287 }
288
289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
291   #titlebar-fullscreen-button {
292     -moz-appearance: none;
293     list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294     -moz-image-region: rect(0px, 16px, 16px, 0px);
295   }
296
297   #titlebar-fullscreen-button:hover {
298     -moz-image-region: rect(0px, 32px, 16px, 16px);
299   }
300
301   @media (min-resolution: 2dppx) {
302     #titlebar-fullscreen-button {
303       list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304       -moz-image-region: rect(0px, 32px, 32px, 0px);
305     }
306
307     #titlebar-fullscreen-button:hover {
308       -moz-image-region: rect(0px, 64px, 32px, 32px);
309     }
310   }
311 }
312
313
314 /* ::::: bookmark buttons ::::: */
315
316 toolbarbutton.bookmark-item:not(.subviewbutton),
317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
318 /*  margin: 0;
319   padding: 2px 3px;*/
320 }
321
322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323 toolbarbutton.bookmark-item[open="true"] {
324 /*  padding-top: 3px;
325   padding-bottom: 1px;
326   -moz-padding-start: 4px;
327   -moz-padding-end: 2px;*/
328 }
329
330 .bookmark-item > .toolbarbutton-icon,
331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
332   width: 16px;
333   height: 16px;
334   -moz-margin-start: 1px;
335   -moz-margin-end: 2px;
336   margin-top: 1px;
337   margin-bottom: 1px;
338 }
339
340 /* Force the display of the label for bookmarks */
341 .bookmark-item > .toolbarbutton-text,
342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
343   display: -moz-box !important;
344 }
345
346 .bookmark-item > .toolbarbutton-menu-dropmarker {
347   display: none;
348 }
349
350 #bookmarks-toolbar-placeholder {
351   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
352   -moz-box-orient: horizontal;
353 }
354
355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
358 }
359
360 /* ----- BOOKMARK STAR ANIMATION ----- */
361
362 @keyframes animation-bookmarkAdded {
363   from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364   60%  { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
365   80%  { opacity: 1; }
366   to   { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
367 }
368
369 @keyframes animation-bookmarkPulse {
370   from { transform: scale(1); }
371   50%  { transform: scale(1.3); }
372   to   { transform: scale(1); }
373 }
374
375 #bookmarked-notification-container {
376   min-height: 1px;
377   min-width: 1px;
378   height: 1px;
379   margin-bottom: -1px;
380   z-index: 5;
381   position: relative;
382 }
383
384 #bookmarked-notification {
385   background-size: 16px;
386   background-position: center;
387   background-repeat: no-repeat;
388   width: 16px;
389   height: 16px;
390   opacity: 0;
391 }
392
393 #bookmarked-notification-dropmarker-anchor {
394   z-index: -1;
395   position: relative;
396 }
397
398 #bookmarked-notification-dropmarker-icon {
399   width: 18px;
400   height: 18px;
401   visibility: hidden;
402 }
403
404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406   animation: animation-bookmarkAdded 800ms;
407   animation-timing-function: ease, ease, ease;
408 }
409
410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
411   list-style-image: none !important;
412 }
413
414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
415   visibility: visible;
416   animation: animation-bookmarkPulse 300ms;
417   animation-delay: 600ms;
418   animation-timing-function: ease-out;
419 }
420
421 /* ::::: bookmark menus ::::: */
422
423 menu.bookmark-item,
424 menuitem.bookmark-item {
425   min-width: 0;
426   max-width: 32em;
427 }
428
429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
430   margin-top: 0;
431   margin-bottom: 0;
432 }
433
434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435   -moz-padding-start: 0px;
436 }
437
438 /* ::::: bookmark items ::::: */
439
440 .bookmark-item  {
441   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
442   -moz-image-region: auto;
443 }
444
445 .bookmark-item[container] {
446   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
447   -moz-image-region: auto;
448 }
449
450 .bookmark-item[container][open] {
451   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
452   -moz-image-region: auto;
453 }
454
455 .bookmark-item[container][livemark] {
456   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
457   -moz-image-region: auto;
458 }
459
460 .bookmark-item[container][livemark] .bookmark-item {
461   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
462   -moz-image-region: rect(0px, 16px, 16px, 0px);
463 }
464
465 .bookmark-item[container][livemark] .bookmark-item[visited] {
466   -moz-image-region: rect(0px, 32px, 16px, 16px);
467 }
468
469 .bookmark-item[container][query] {
470   list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
471   -moz-image-region: auto;
472 }
473
474 .bookmark-item[query][tagContainer] {
475   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476   -moz-image-region: auto;
477 }
478
479 .bookmark-item[query][dayContainer] {
480   list-style-image: url("chrome://communicator/skin/history/calendar.png");
481   -moz-image-region: auto;
482 }
483
484 .bookmark-item[query][hostContainer] {
485   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
486   -moz-image-region: auto;
487 }
488
489 .bookmark-item[query][hostContainer][open] {
490   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
491   -moz-image-region: auto;
492 }
493
494 .bookmark-item[cutting] > .toolbarbutton-icon,
495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
496   opacity: 0.5;
497 }
498
499 .bookmark-item[cutting] > .toolbarbutton-text,
500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
501   opacity: 0.7;
502 }
503
504 /* ::::: primary toolbar buttons ::::: */
505
506 /* === BEGIN toolbarbuttons.inc.css === */
507
508 /* Whole section of this included file: */
509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
511           #social-share-button, #open-file-button, #find-button, #developer-button,
512           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
513           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
515           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
516           #pocket-button),
517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
518   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
519 }
520 toolbar[brighttext] #pocket-button,
521 #pocket-button {
522   list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
523 }
524
525 #back-button {
526   -moz-image-region: rect(0, 36px, 18px, 18px);
527 }
528
529 #back-button:hover:not([disabled="true"]) {
530   -moz-image-region: rect(18px, 36px, 36px, 18px);
531 }
532
533 #back-button[disabled="true"] {
534   -moz-image-region: rect(36px, 36px, 54px, 18px);
535 }
536
537 #forward-button {
538   -moz-image-region: rect(0, 72px, 18px, 54px);
539 }
540
541 #forward-button:hover:not([disabled="true"]) {
542   -moz-image-region: rect(18px, 72px, 36px, 54px);
543 }
544
545 #forward-button[disabled="true"] {
546   -moz-image-region: rect(36px, 72px, 54px, 54px);
547 }
548
549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
550 #forward-button:-moz-locale-dir(rtl) {
551   transform: scaleX(-1);
552 }
553
554 #home-button[cui-areatype="toolbar"] {
555   -moz-image-region: rect(0, 126px, 18px, 108px);
556 }
557
558 #home-button[cui-areatype="toolbar"]:hover {
559   -moz-image-region: rect(18px, 126px, 36px, 108px);
560 }
561
562 #bookmarks-menu-button[cui-areatype="toolbar"] {
563   -moz-image-region: rect(0, 144px, 18px, 126px);
564 }
565
566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
568   -moz-image-region: rect(18px, 144px, 36px, 126px);
569 }
570
571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
573   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
574   background-color: transparent !important;
575 }
576
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
578   -moz-image-region: rect(0, 162px, 18px, 144px);
579 }
580
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
584   /* When starred and clicked (for edit/delete dialog),
585    * then only the menubutton-button itself is open, but not the whole menubutton. */
586   -moz-image-region: rect(18px, 162px, 36px, 144px);
587 }
588
589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
590   -moz-image-region: rect(0, 630px, 18px, 612px);
591 }
592
593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
594   padding: 1px;
595   -moz-box-align: center;
596 }
597
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
600   -moz-image-region: rect(18px, 630px, 36px, 612px);
601 }
602
603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
605   padding-top: 2px;
606   padding-bottom: 0px;
607   -moz-padding-start: 2px;
608   -moz-padding-end: 0px;
609 }
610
611 #history-panelmenu[cui-areatype="toolbar"] {
612   -moz-image-region: rect(0, 180px, 18px, 162px);
613 }
614
615 #history-panelmenu[cui-areatype="toolbar"]:hover,
616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
617   -moz-image-region: rect(18px, 180px, 36px, 162px);
618 }
619
620 #downloads-button[cui-areatype="toolbar"] {
621   -moz-image-region: rect(0, 198px, 18px, 180px);
622 }
623
624 #downloads-button[cui-areatype="toolbar"]:hover,
625 #downloads-button[cui-areatype="toolbar"][open="true"] {
626   -moz-image-region: rect(18px, 198px, 36px, 180px);
627 }
628
629 #add-ons-button[cui-areatype="toolbar"] {
630   -moz-image-region: rect(0, 216px, 18px, 198px);
631 }
632
633 #add-ons-button[cui-areatype="toolbar"]:hover {
634   -moz-image-region: rect(18px, 216px, 36px, 198px);
635 }
636
637 #open-file-button[cui-areatype="toolbar"] {
638   -moz-image-region: rect(0, 234px, 18px, 216px);
639 }
640
641 #open-file-button[cui-areatype="toolbar"]:hover {
642   -moz-image-region: rect(18px, 234px, 36px, 216px);
643 }
644
645 #save-page-button[cui-areatype="toolbar"] {
646   -moz-image-region: rect(0, 252px, 18px, 234px);
647 }
648
649 #save-page-button[cui-areatype="toolbar"]:hover {
650   -moz-image-region: rect(18px, 252px, 36px, 234px);
651 }
652
653 #sync-button[cui-areatype="toolbar"] {
654   -moz-image-region: rect(0, 270px, 18px, 252px);
655 }
656
657 #sync-button[cui-areatype="toolbar"]:hover {
658   -moz-image-region: rect(18px, 270px, 36px, 252px);
659 }
660
661 #sync-button[cui-areatype="toolbar"][status="active"],
662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
663   list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
664   -moz-image-region: rect(0, 18px, 18px, 0px);
665 }
666
667 /*
668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
670   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
671 }
672 */
673
674 #feed-button[cui-areatype="toolbar"] {
675   -moz-image-region: rect(0, 288px, 18px, 270px);
676 }
677
678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
680   -moz-image-region: rect(18px, 288px, 36px, 270px);
681 }
682
683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
684   -moz-image-region: rect(36px, 288px, 54px, 270px);
685 }
686
687 #social-share-button[cui-areatype="toolbar"] {
688   -moz-image-region: rect(0px, 306px, 18px, 288px);
689 }
690
691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
692 #social-share-button[cui-areatype="toolbar"][open="true"] {
693   -moz-image-region: rect(18px, 306px, 36px, 288px);
694 }
695
696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
697   -moz-image-region: rect(36px, 306px, 54px, 288px);
698 }
699
700 #characterencoding-button[cui-areatype="toolbar"] {
701   -moz-image-region: rect(0, 324px, 18px, 306px);
702 }
703
704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
706   -moz-image-region: rect(18px, 324px, 36px, 306px);
707 }
708
709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
710   -moz-image-region: rect(36px, 324px, 54px, 306px);
711 }
712
713 #new-window-button[cui-areatype="toolbar"] {
714   -moz-image-region: rect(0, 342px, 18px, 324px);
715 }
716
717 #new-window-button[cui-areatype="toolbar"]:hover {
718   -moz-image-region: rect(18px, 342px, 36px, 324px);
719 }
720
721 #e10s-button[cui-areatype="toolbar"] {
722   -moz-image-region: rect(0, 342px, 18px, 324px);
723 }
724
725 #e10s-button[cui-areatype="toolbar"]:hover {
726   -moz-image-region: rect(18px, 342px, 36px, 324px);
727 }
728
729 #e10s-button > .toolbarbutton-icon {
730   transform: scaleY(-1);
731 }
732
733 #new-tab-button[cui-areatype="toolbar"] {
734   -moz-image-region: rect(0, 360px, 18px, 342px);
735 }
736
737 #new-tab-button[cui-areatype="toolbar"]:hover {
738   -moz-image-region: rect(18px, 360px, 36px, 342px);
739 }
740
741 #privatebrowsing-button[cui-areatype="toolbar"] {
742   -moz-image-region: rect(0, 378px, 18px, 360px);
743 }
744
745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
746   -moz-image-region: rect(18px, 378px, 36px, 360px);
747 }
748
749 #find-button[cui-areatype="toolbar"] {
750   -moz-image-region: rect(0, 396px, 18px, 378px);
751 }
752
753 #find-button[cui-areatype="toolbar"]:hover {
754   -moz-image-region: rect(18px, 396px, 36px, 378px);
755 }
756
757 #print-button[cui-areatype="toolbar"] {
758   -moz-image-region: rect(0, 414px, 18px, 396px);
759 }
760
761 #print-button[cui-areatype="toolbar"]:hover {
762   -moz-image-region: rect(18px, 414px, 36px, 396px);
763 }
764
765 #fullscreen-button[cui-areatype="toolbar"] {
766   -moz-image-region: rect(0, 432px, 18px, 414px);
767 }
768
769 #fullscreen-button[cui-areatype="toolbar"]:hover {
770   -moz-image-region: rect(18px, 432px, 36px, 414px);
771 }
772
773 #developer-button[cui-areatype="toolbar"] {
774   -moz-image-region: rect(0, 450px, 18px, 432px);
775 }
776
777 #developer-button[cui-areatype="toolbar"]:hover,
778 #developer-button[cui-areatype="toolbar"][open="true"] {
779   -moz-image-region: rect(18px, 450px, 36px, 432px);
780 }
781
782 #preferences-button[cui-areatype="toolbar"] {
783   -moz-image-region: rect(0, 468px, 18px, 450px);
784 }
785
786 #preferences-button[cui-areatype="toolbar"]:hover {
787   -moz-image-region: rect(18px, 468px, 36px, 450px);
788 }
789
790 #PanelUI-menu-button {
791   -moz-image-region: rect(0, 486px, 18px, 468px);
792 }
793
794 #PanelUI-menu-button:hover,
795 #PanelUI-menu-button[open="true"] {
796   -moz-image-region: rect(18px, 486px, 36px, 468px);
797 }
798
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
800   -moz-image-region: rect(0, 504px, 18px, 486px);
801 }
802
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
804   -moz-image-region: rect(18px, 504px, 36px, 486px);
805 }
806
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
808   -moz-image-region: rect(36px, 504px, 54px, 486px);
809 }
810
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
812   -moz-image-region: rect(0, 522px, 18px, 504px);
813 }
814
815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
816   -moz-image-region: rect(18px, 522px, 36px, 504px);
817 }
818
819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
820   -moz-image-region: rect(36px, 522px, 54px, 504px);
821 }
822
823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
824   -moz-image-region: rect(0, 540px, 18px, 522px);
825 }
826
827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
828   -moz-image-region: rect(18px, 540px, 36px, 522px);
829 }
830
831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
832   -moz-image-region: rect(36px, 540px, 54px, 522px);
833 }
834
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
836   -moz-image-region: rect(0, 558px, 18px, 540px);
837 }
838
839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
840   -moz-image-region: rect(18px, 558px, 36px, 540px);
841 }
842
843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
844   -moz-image-region: rect(36px, 558px, 54px, 540px);
845 }
846
847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
848   -moz-image-region: rect(0, 576px, 18px, 558px);
849 }
850
851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
852   -moz-image-region: rect(18px, 576px, 36px, 558px);
853 }
854
855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
856   -moz-image-region: rect(36px, 576px, 54px, 558px);
857 }
858
859 #nav-bar-overflow-button {
860   -moz-image-region: rect(0, 612px, 18px, 594px);
861 }
862
863 #nav-bar-overflow-button:hover,
864 #nav-bar-overflow-button[open="true"] {
865   -moz-image-region: rect(18px, 612px, 36px, 594px);
866 }
867
868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
869   transform: scaleX(-1);
870 }
871
872 #tabview-button {
873   -moz-image-region: rect(0, 648px, 18px, 630px);
874 }
875
876 #tabview-button:hover {
877   -moz-image-region: rect(18px, 648px, 36px, 630px);
878 }
879
880 #email-link-button[cui-areatype="toolbar"] {
881   -moz-image-region: rect(0, 666px, 18px, 648px);
882 }
883
884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
885   -moz-image-region: rect(18px, 666px, 36px, 648px);
886 }
887
888 #email-button[cui-areatype="toolbar"][disabled="true"] {
889   -moz-image-region: rect(36px, 666px, 54px, 648px);
890 }
891
892 #sidebar-button[cui-areatype="toolbar"] {
893   -moz-image-region: rect(0, 684px, 18px, 666px);
894 }
895
896 #sidebar-button[cui-areatype="toolbar"]:hover {
897   -moz-image-region: rect(18px, 684px, 36px, 666px);
898 }
899
900 #panic-button[cui-areatype="toolbar"] {
901   -moz-image-region: rect(0, 702px, 18px, 684px);
902 }
903
904 #panic-button[cui-areatype="toolbar"]:hover,
905 #panic-button[cui-areatype="toolbar"][open] {
906   -moz-image-region: rect(18px, 702px, 36px, 684px);
907 }
908
909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
910   transform: scaleX(-1);
911 }
912
913 #web-apps-button[cui-areatype="toolbar"] {
914   -moz-image-region: rect(0, 720px, 18px, 702px);
915 }
916
917 #web-apps-button[cui-areatype="toolbar"]:hover {
918   -moz-image-region: rect(18px, 720px, 36px, 702px);
919 }
920
921 #loop-button,
922 #loop-button > .toolbarbutton-badge-stack {
923   list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
924   -moz-image-region: rect(0, 18px, 18px, 0);
925 }
926
927 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
928 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
929   -moz-image-region: rect(0, 90px, 18px, 72px);
930 }
931
932 #loop-button[state="disabled"],
933 #loop-button[disabled="true"],
934 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
935 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
936   -moz-image-region: rect(0, 36px, 18px, 18px);
937 }
938
939 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
940 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
941   -moz-image-region: rect(0, 126px, 18px, 108px);
942 }
943
944 #loop-button:not([disabled="true"])[state="error"],
945 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
946   -moz-image-region: rect(0, 54px, 18px, 36px);
947 }
948
949 #loop-button:not([disabled="true"])[state="action"],
950 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
951   -moz-image-region: rect(0, 72px, 18px, 54px);
952 }
953
954 #loop-button:not([disabled="true"])[state="active"],
955 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
956   -moz-image-region: rect(0, 108px, 18px, 90px);
957 }
958
959 #webide-button[cui-areatype="toolbar"] {
960   -moz-image-region: rect(0, 738px, 18px, 720px);
961 }
962
963 #webide-button[cui-areatype="toolbar"]:hover {
964   -moz-image-region: rect(18px, 738px, 36px, 720px);
965 }
966
967 #pocket-button[cui-areatype="toolbar"] {
968   -moz-image-region: rect(0, 774px, 18px, 756px);
969 }
970
971 #pocket-button[cui-areatype="toolbar"]:hover,
972 #pocket-button[cui-areatype="toolbar"][open] {
973   -moz-image-region: rect(18px, 774px, 36px, 756px);
974 }
975
976 /* === END toolbarbuttons.inc.css === */
977
978 /* === BEGIN menupanel.inc.css === */
979
980 /* Menu panel and palette styles */
981
982 :root {
983    /* avoid aero overrides with changed filenames */
984   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
985   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
986 }
987
988 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
989 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
990           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
991           #social-share-button, #open-file-button, #find-button, #developer-button,
992           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
993           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
994           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
995           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
996           #pocket-button)[cui-areatype="menu-panel"],
997 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
998           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
999           #social-share-button, #open-file-button, #find-button, #developer-button,
1000           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1001           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1002           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1003           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
1004                                                 #pocket-button) {
1005   list-style-image: var(--menupanel-list-style-image);
1006 }
1007
1008 #home-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #home-button {
1010   -moz-image-region: rect(0px, 128px, 32px, 96px);
1011 }
1012
1013 #home-button[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #home-button:hover {
1015   -moz-image-region: rect(32px, 128px, 64px, 96px);
1016 }
1017
1018 #bookmarks-menu-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1020   -moz-image-region: rect(0px, 192px, 32px, 160px);
1021 }
1022
1023 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1024 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1025   -moz-image-region: rect(32px, 192px, 64px, 160px);
1026 }
1027
1028 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1029   -moz-image-region: rect(32px, 192px, 64px, 160px);
1030 }
1031
1032 #history-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1034   -moz-image-region: rect(0px, 224px, 32px, 192px);
1035 }
1036
1037 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1039   -moz-image-region: rect(32px, 224px, 64px, 192px);
1040 }
1041
1042 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1043   -moz-image-region: rect(32px, 224px, 64px, 192px);
1044 }
1045
1046 #downloads-button[cui-areatype="menu-panel"],
1047 toolbarpaletteitem[place="palette"] > #downloads-button {
1048   -moz-image-region: rect(0px, 256px, 32px, 224px);
1049 }
1050
1051 #downloads-button[cui-areatype="menu-panel"]:hover,
1052 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1053   -moz-image-region: rect(32px, 256px, 64px, 224px);
1054 }
1055
1056 #add-ons-button[cui-areatype="menu-panel"],
1057 toolbarpaletteitem[place="palette"] > #add-ons-button {
1058   -moz-image-region: rect(0px, 288px, 32px, 256px);
1059 }
1060
1061 #add-ons-button[cui-areatype="menu-panel"]:hover,
1062 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1063   -moz-image-region: rect(32px, 288px, 64px, 256px);
1064 }
1065
1066 #open-file-button[cui-areatype="menu-panel"],
1067 toolbarpaletteitem[place="palette"] > #open-file-button {
1068   -moz-image-region: rect(0px, 320px, 32px, 288px);
1069 }
1070
1071 #open-file-button[cui-areatype="menu-panel"]:hover,
1072 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1073   -moz-image-region: rect(32px, 320px, 64px, 288px);
1074 }
1075
1076 #save-page-button[cui-areatype="menu-panel"],
1077 toolbarpaletteitem[place="palette"] > #save-page-button {
1078   -moz-image-region: rect(0px, 352px, 32px, 320px);
1079 }
1080
1081 #save-page-button[cui-areatype="menu-panel"]:hover,
1082 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1083   -moz-image-region: rect(32px, 352px, 64px, 320px);
1084 }
1085
1086 #sync-button[cui-areatype="menu-panel"],
1087 toolbarpaletteitem[place="palette"] > #sync-button {
1088   -moz-image-region: rect(0px, 384px, 32px, 352px);
1089 }
1090
1091 #sync-button[cui-areatype="menu-panel"]:hover,
1092 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1093   -moz-image-region: rect(32px, 384px, 64px, 352px);
1094 }
1095
1096 #sync-button[cui-areatype="menu-panel"][status="active"] {
1097   list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1098   -moz-image-region: rect(0px, 32px, 32px, 0px);
1099 }
1100
1101 #feed-button[cui-areatype="menu-panel"],
1102 toolbarpaletteitem[place="palette"] > #feed-button {
1103   -moz-image-region: rect(0px, 416px, 32px, 384px);
1104 }
1105
1106 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1107 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1108   -moz-image-region: rect(32px, 416px, 64px, 384px);
1109 }
1110
1111 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1112 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1113   -moz-image-region: rect(64px, 416px, 96px, 384px);
1114 }
1115
1116 #social-share-button[cui-areatype="menu-panel"],
1117 toolbarpaletteitem[place="palette"] > #social-share-button {
1118   -moz-image-region: rect(0px, 448px, 32px, 416px);
1119 }
1120
1121 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1122 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1123   -moz-image-region: rect(32px, 448px, 64px, 416px);
1124 }
1125
1126 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1127 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1128   -moz-image-region: rect(64px, 448px, 96px, 416px);
1129 }
1130
1131 #characterencoding-button[cui-areatype="menu-panel"],
1132 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1133   -moz-image-region: rect(0px, 480px, 32px, 448px);
1134 }
1135
1136 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1137 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1138   -moz-image-region: rect(32px, 480px, 64px, 448px);
1139 }
1140
1141 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1142 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1143   -moz-image-region: rect(64px, 480px, 96px, 448px);
1144 }
1145
1146 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1147   -moz-image-region: rect(32px, 480px, 64px, 448px);
1148 }
1149
1150 #new-window-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #new-window-button {
1152   -moz-image-region: rect(0px, 512px, 32px, 480px);
1153 }
1154
1155 #new-window-button[cui-areatype="menu-panel"]:hover,
1156 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1157   -moz-image-region: rect(32px, 512px, 64px, 480px);
1158 }
1159
1160 #e10s-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #e10s-button {
1162   -moz-image-region: rect(0px, 512px, 32px, 480px);
1163 }
1164
1165 #e10s-button[cui-areatype="menu-panel"]:hover,
1166 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1167   -moz-image-region: rect(32px, 512px, 64px, 480px);
1168 }
1169
1170 #new-tab-button[cui-areatype="menu-panel"],
1171 toolbarpaletteitem[place="palette"] > #new-tab-button {
1172   -moz-image-region: rect(0px, 544px, 32px, 512px);
1173 }
1174
1175 #new-tab-button[cui-areatype="menu-panel"]:hover,
1176 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1177   -moz-image-region: rect(32px, 544px, 64px, 512px);
1178 }
1179
1180 #privatebrowsing-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1182   -moz-image-region: rect(0px, 576px, 32px, 544px);
1183 }
1184
1185 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1186 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1187   -moz-image-region: rect(32px, 576px, 64px, 544px);
1188 }
1189
1190 #tabview-button[cui-areatype="menu-panel"],
1191 toolbarpaletteitem[place="palette"] > #tabview-button {
1192   -moz-image-region: rect(0px, 608px, 32px, 576px);
1193 }
1194
1195 #tabview-button[cui-areatype="menu-panel"]:hover,
1196 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1197   -moz-image-region: rect(32px, 608px, 64px, 576px);
1198 }
1199
1200 #find-button[cui-areatype="menu-panel"],
1201 toolbarpaletteitem[place="palette"] > #find-button {
1202   -moz-image-region: rect(0px, 640px, 32px, 608px);
1203 }
1204
1205 #find-button[cui-areatype="menu-panel"]:hover,
1206 toolbarpaletteitem[place="palette"] > #find-button:hover {
1207   -moz-image-region: rect(32px, 640px, 64px, 608px);
1208 }
1209
1210 #print-button[cui-areatype="menu-panel"],
1211 toolbarpaletteitem[place="palette"] > #print-button {
1212   -moz-image-region: rect(0px, 672px, 32px, 640px);
1213 }
1214
1215 #print-button[cui-areatype="menu-panel"]:hover,
1216 toolbarpaletteitem[place="palette"] > #print-button:hover {
1217   -moz-image-region: rect(32px, 672px, 64px, 640px);
1218 }
1219
1220 #fullscreen-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1222   -moz-image-region: rect(0px, 704px, 32px, 672px);
1223 }
1224
1225 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1227   -moz-image-region: rect(32px, 704px, 64px, 672px);
1228 }
1229
1230 #developer-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #developer-button {
1232   -moz-image-region: rect(0px, 736px, 32px, 704px);
1233 }
1234
1235 #developer-button[cui-areatype="menu-panel"]:hover,
1236 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1237   -moz-image-region: rect(32px, 736px, 64px, 704px);
1238 }
1239
1240 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1241   -moz-image-region: rect(32px, 736px, 64px, 704px);
1242 }
1243
1244 #preferences-button[cui-areatype="menu-panel"],
1245 toolbarpaletteitem[place="palette"] > #preferences-button {
1246   -moz-image-region: rect(0px, 768px, 32px, 736px);
1247 }
1248
1249 #preferences-button[cui-areatype="menu-panel"]:hover,
1250 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1251   -moz-image-region: rect(32px, 768px, 64px, 736px);
1252 }
1253
1254 #email-link-button[cui-areatype="menu-panel"],
1255 toolbarpaletteitem[place="palette"] > #email-link-button {
1256   -moz-image-region: rect(0, 800px, 32px, 768px);
1257 }
1258
1259 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1260 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1261   -moz-image-region: rect(32px, 800px, 64px, 768px);
1262 }
1263
1264 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1265 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1266   -moz-image-region: rect(64px, 800px, 96px, 768px);
1267 }
1268
1269 #sidebar-button[cui-areatype="menu-panel"],
1270 toolbarpaletteitem[place="palette"] > #sidebar-button {
1271   -moz-image-region: rect(0, 864px, 32px, 832px);
1272 }
1273
1274 #sidebar-button[cui-areatype="menu-panel"]:hover,
1275 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1276 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1277   -moz-image-region: rect(32px, 864px, 64px, 832px);
1278 }
1279
1280 #panic-button[cui-areatype="menu-panel"],
1281 toolbarpaletteitem[place="palette"] > #panic-button {
1282   -moz-image-region: rect(0, 896px, 32px, 864px);
1283 }
1284
1285 #panic-button[cui-areatype="menu-panel"]:hover,
1286 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1287 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1288   -moz-image-region: rect(32px, 896px, 64px, 864px);
1289 }
1290
1291 #web-apps-button[cui-areatype="menu-panel"],
1292 toolbarpaletteitem[place="palette"] > #web-apps-button {
1293   -moz-image-region: rect(0, 928px, 32px, 896px);
1294 }
1295
1296 #web-apps-button[cui-areatype="menu-panel"]:hover,
1297 toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
1298   -moz-image-region: rect(32px, 928px, 64px, 896px);
1299 }
1300
1301 #webide-button[cui-areatype="menu-panel"],
1302 toolbarpaletteitem[place="palette"] > #webide-button {
1303   -moz-image-region: rect(0px, 960px, 32px, 928px);
1304 }
1305
1306 #webide-button[cui-areatype="menu-panel"]:hover,
1307 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1308   -moz-image-region: rect(32px, 960px, 64px, 928px);
1309 }
1310
1311 #pocket-button[cui-areatype="menu-panel"],
1312 toolbarpaletteitem[place="palette"] > #pocket-button {
1313   -moz-image-region: rect(0px, 992px, 32px, 960px);
1314 }
1315
1316 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1317   -moz-image-region: rect(32px, 992px, 64px, 960px);
1318 }
1319
1320 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1321   -moz-image-region: rect(0, 832px, 32px, 800px);
1322 }
1323
1324 #loop-button[cui-areatype="menu-panel"],
1325 toolbarpaletteitem[place="palette"] > #loop-button {
1326   list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1327   -moz-image-region: rect(0, 32px, 32px, 0);
1328 }
1329
1330 /* Make sure that the state icons are not shown in the customization palette. */
1331 toolbarpaletteitem[place="palette"] > #loop-button {
1332   -moz-image-region: rect(0, 32px, 32px, 0) !important;
1333 }
1334
1335 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1336   -moz-image-region: rect(0, 160px, 32px, 128px);
1337 }
1338
1339 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1340 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1341   -moz-image-region: rect(0, 64px, 32px, 32px);
1342 }
1343
1344 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1345   -moz-image-region: rect(0, 224px, 32px, 192px);
1346 }
1347
1348 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1349   -moz-image-region: rect(0, 96px, 32px, 64px);
1350 }
1351
1352 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1353   -moz-image-region: rect(0, 128px, 32px, 96px);
1354 }
1355
1356 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1357   -moz-image-region: rect(0, 192px, 32px, 160px);
1358 }
1359
1360 /* Wide panel control icons */
1361
1362 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1363 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1364 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1365 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1366   list-style-image: var(--menupanel-small-list-style-image);
1367 }
1368
1369 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1370 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1371   -moz-image-region: rect(0px, 32px, 16px, 16px);
1372 }
1373
1374 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1375 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1376   -moz-image-region: rect(16px, 32px, 32px, 16px);
1377 }
1378
1379 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1380 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1381   -moz-image-region: rect(32px, 32px, 48px, 16px);
1382 }
1383
1384 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1385 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1386   -moz-image-region: rect(0px, 48px, 16px, 32px);
1387 }
1388
1389 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1390 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1391   -moz-image-region: rect(16px, 48px, 32px, 32px);
1392 }
1393
1394 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1395 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1396   -moz-image-region: rect(32px, 48px, 48px, 32px);
1397 }
1398
1399 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1400 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1401   -moz-image-region: rect(0px, 64px, 16px, 48px);
1402 }
1403
1404 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1405 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1406   -moz-image-region: rect(16px, 64px, 32px, 48px);
1407 }
1408
1409 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1410 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1411   -moz-image-region: rect(32px, 64px, 48px, 48px);
1412 }
1413
1414 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1415 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1416   -moz-image-region: rect(0px, 80px, 16px, 64px);
1417 }
1418
1419 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1420 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1421   -moz-image-region: rect(16px, 80px, 32px, 64px);
1422 }
1423
1424 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1425 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1426   -moz-image-region: rect(32px, 80px, 48px, 64px);
1427 }
1428
1429 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1430 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1431   -moz-image-region: rect(0px, 96px, 16px, 80px);
1432 }
1433
1434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1435 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1436   -moz-image-region: rect(16px, 96px, 32px, 80px);
1437 }
1438
1439 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1440 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1441   -moz-image-region: rect(32px, 96px, 48px, 80px);
1442 }
1443
1444 #add-share-provider {
1445   list-style-image: var(--menupanel-small-list-style-image);
1446   -moz-image-region: rect(0px, 96px, 16px, 80px);
1447 }
1448
1449 /* === END menupanel.inc.css === */
1450
1451 .toolbarbutton-1:not([type="menu-button"]) {
1452   -moz-box-orient: vertical;
1453 }
1454
1455 .toolbarbutton-1,
1456 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1457 /*  min-width: 36px;
1458   min-height: 36px;*/
1459 }
1460
1461 .toolbarbutton-1,
1462 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463 .toolbarbutton-1[disabled="true"]:hover:active,
1464 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1465   padding: 1px 2px;
1466 }
1467
1468 .toolbarbutton-1:hover:active,
1469 .toolbarbutton-1[open="true"],
1470 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1471   padding-top: 2px;
1472   padding-bottom: 0px;
1473   -moz-padding-start: 3px;
1474   -moz-padding-end: 1px;
1475 }
1476
1477 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1478 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1479 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1480 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1481 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1482 }
1483
1484 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1485 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1486 }
1487
1488 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1489 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1490 }
1491
1492 .toolbarbutton-1 > .toolbarbutton-icon,
1493 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1494 }
1495
1496 .findbar-button,
1497 #nav-bar .toolbarbutton-1,
1498 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1499 }
1500
1501 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1502 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1503 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1504 }
1505
1506 #nav-bar #PanelUI-menu-button {
1507 /*  -moz-padding-start: 7px;
1508   -moz-padding-end: 5px;*/
1509 }
1510
1511 #nav-bar .toolbarbutton-1[type=panel],
1512 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1513 /*  padding-left: 5px;
1514   padding-right: 5px;*/
1515 }
1516
1517 #nav-bar .toolbarbutton-1 > menupopup {
1518 /*  margin-top: -3px;*/
1519 }
1520
1521 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1522   margin-top: -4px;
1523 }
1524
1525 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1526 /*  -moz-padding-end: 0;*/
1527 }
1528
1529 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1530 /*  -moz-padding-start: 0;
1531   -moz-box-align: center;*/
1532 }
1533
1534 .findbar-button > .toolbarbutton-text,
1535 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1536 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1538 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1539 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1540 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1541 /*  padding: 2px 6px;
1542   border: 1px solid;
1543   border-color: transparent;
1544   transition-property: background-color, border-color;
1545   transition-duration: 150ms;*/
1546 }
1547 /*
1548 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1551   padding: 3px 7px;
1552 }
1553 */
1554
1555 /* Help SDK icons fit: */
1556 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1557 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1558   width: 16px;
1559 }
1560
1561 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1562   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1563   width: 32px;
1564 }
1565
1566 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1567 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1568 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1569 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1570 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1571 /*  -moz-padding-end: 17px;*/
1572 }
1573
1574 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1575 }
1576
1577 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1578 }
1579
1580 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1581 }
1582
1583 #nav-bar .toolbaritem-combined-buttons {
1584 /*  margin-left: 2px;
1585   margin-right: 2px;*/
1586 }
1587
1588 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1589 /*  padding-left: 0;
1590   padding-right: 0;*/
1591 }
1592
1593 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1594 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1595 /*
1596   content: "";
1597   display: -moz-box;
1598   width: 1px;
1599   height: 16px;
1600   -moz-margin-end: -1px;
1601 */
1602 }
1603
1604 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1605 }
1606
1607 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1608 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1612 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1613 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1614 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1615 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1616 }
1617
1618 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1619 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1620 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1621 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1622 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1623 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1624 }
1625
1626 #TabsToolbar .toolbarbutton-1,
1627 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1628 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1629 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1630 }
1631
1632 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1633 #TabsToolbar .toolbarbutton-1[open],
1634 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1635 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1636 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1637 }
1638
1639 /* unified back/forward button */
1640
1641 #forward-button {
1642   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1643 }
1644
1645 #forward-button > menupopup {
1646   margin-top: 1px !important;
1647 }
1648
1649 #forward-button > .toolbarbutton-icon {
1650   background-clip: padding-box !important;
1651   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1652   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1653 }
1654
1655 #forward-button {
1656   -moz-margin-start: -4px !important;
1657   padding-left: 5px;
1658   padding-right: 5px;
1659   margin-top: 3px;
1660   margin-bottom: 3px;
1661   border-radius: 0 10000px 10000px 0;
1662 }
1663
1664 #forward-button:-moz-locale-dir(rtl) {
1665   border-radius: 10000px 0 0 10000px;
1666 }
1667
1668 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1669   transition: margin-left 150ms ease-out;
1670 }
1671
1672 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1673   margin-left: -27px !important;
1674 }
1675
1676 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1677   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1678   transition-delay: 100s;
1679 }
1680
1681 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1682   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1683   margin-left: -27.01px !important;
1684 }
1685
1686 #back-button {
1687 /*  padding-top: 3px !important;
1688   padding-bottom: 3px !important;
1689   -moz-padding-start: 5px !important;
1690   -moz-padding-end: 0 !important;*/
1691   position: relative;
1692   z-index: 1;
1693   border-radius: 10000px;
1694   width: 30px;
1695   height: 30px;
1696   margin-top: -2px;
1697   margin-bottom: -2px;
1698 }
1699
1700 #back-button:-moz-locale-dir(rtl) {
1701 }
1702
1703 #back-button > menupopup {
1704   margin-top: -1px !important;
1705 }
1706
1707 #back-button > .toolbarbutton-icon {
1708   border-radius: 10000px !important;
1709   background-clip: padding-box !important;
1710 /*  background-color: hsla(210,25%,98%,.08) !important;
1711   padding: 6px !important;
1712   border-style: none !important;
1713   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1714               0 0 0 1px hsla(210,4%,10%,.25);*/
1715   transition-property: background-color, box-shadow !important;
1716   transition-duration: 250ms !important;
1717 }
1718
1719 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1720 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1721 }
1722
1723 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1724 #back-button[open="true"] > .toolbarbutton-icon {
1725 /*  background-color: hsla(210,4%,10%,.12) !important;
1726   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1727               0 0 0 1px hsla(210,4%,10%,.25),
1728               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1729 }
1730
1731 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1732   transform: scaleX(-1);
1733 }
1734 /*
1735 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1736 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1737   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1738 }
1739
1740 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1741 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1742   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1743 }
1744
1745 #home-button.bookmark-item {
1746   list-style-image: url("chrome://browser/skin/Toolbar.png");
1747 }
1748
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1751 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1752 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1753 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1754 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1755 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1756   position: relative;
1757   z-index: 1;
1758   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1759 }
1760
1761 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1762 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1763   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1764 }
1765 */
1766
1767 #downloads-button > .toolbarbutton-icon {
1768   margin: 0;
1769 }
1770
1771 /* tabview menu item */
1772
1773 #menu_tabview {
1774   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1775   -moz-image-region: rect(1px, 89px, 17px, 73px);
1776 }
1777
1778 #menu_tabview[groups="0"] {
1779   -moz-image-region: rect(1px, 17px, 17px, 1px);
1780 }
1781
1782 #menu_tabview[groups="1"] {
1783   -moz-image-region: rect(1px, 35px, 17px, 19px);
1784 }
1785
1786 #menu_tabview[groups="2"] {
1787   -moz-image-region: rect(1px, 53px, 17px, 37px);
1788 }
1789
1790 #menu_tabview[groups="3"] {
1791   -moz-image-region: rect(1px, 71px, 17px, 55px);
1792 }
1793
1794 /* undo close tab menu item */
1795 #alltabs_undoCloseTab {
1796   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1797 }
1798
1799 @media (min-resolution: 1.1dppx) {
1800   #alltabs_undoCloseTab {
1801     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1802   }
1803   #alltabs_undoCloseTab > .toolbarbutton-icon {
1804     width: 16px;
1805   }
1806 }
1807
1808 /* zoom control text (reset) button special case: */
1809
1810 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1811   /* To make this line up with the icons, it needs the same height (18px) +
1812    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1813    * increase in text sizes would break things...
1814    */
1815   min-height: 20px;
1816 }
1817
1818 /* ::::: fullscreen window controls ::::: */
1819
1820 #window-controls {
1821   -moz-margin-start: 4px;
1822 }
1823
1824 #minimize-button,
1825 #restore-button,
1826 #close-button {
1827 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1828   padding: 0; */
1829 }
1830
1831 #minimize-button {
1832   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1833 }
1834
1835 #minimize-button:hover {
1836   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1837 }
1838
1839 #restore-button {
1840   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1841 }
1842
1843 #restore-button:hover {
1844   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1845 }
1846
1847 #close-button {
1848   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1849 }
1850
1851 #close-button:hover {
1852   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1853 }
1854
1855 /* ::::: Location Bar ::::: */
1856
1857 #urlbar,
1858 .searchbar-textbox {
1859   border-radius: 5px;
1860   margin: 2px 0;
1861   -moz-margin-start: 3px;
1862 }
1863
1864 #urlbar {
1865   /* make color as light as possible to deal with dark non-domain parts */
1866   color: #FFBFFF;
1867 }
1868
1869 /* overlap the urlbar's border */
1870 #PopupAutoCompleteRichResult {
1871   margin-top: -1px;
1872 }
1873
1874 #urlbar:-moz-lwtheme,
1875 .searchbar-textbox:-moz-lwtheme {
1876   /* background-color: rgba(255,255,255,.8);
1877   @navbarTextboxCustomBorder@
1878   color: black; */
1879 }
1880
1881 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1882 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1883 /*  background-color: rgba(255,255,255,.9);*/
1884 }
1885
1886 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1887 .searchbar-textbox:-moz-lwtheme[focused] {
1888 /*  background-color: white;*/
1889 }
1890
1891 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1892 /*  -moz-border-start: none;
1893   margin-left: 0;*/
1894 }
1895
1896 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1897 /*  border-top-left-radius: 0;
1898   border-bottom-left-radius: 0; */
1899 }
1900
1901 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1902 /*  border-top-right-radius: 0;
1903   border-bottom-right-radius: 0; */
1904 }
1905
1906 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1907 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1908 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1909 }
1910
1911 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1912 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1913   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1914   transform: scaleX(-1);
1915 }
1916
1917 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1918   -moz-box-direction: reverse;
1919 }
1920
1921 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1922 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1923   color: #E7ADE7;
1924 }
1925
1926 #urlbar-container {
1927   -moz-box-orient: horizontal;
1928   -moz-box-align: stretch;
1929 }
1930
1931 .urlbar-textbox-container {
1932   -moz-box-align: stretch;
1933 }
1934
1935 .urlbar-input-box {
1936   -moz-margin-start: 0;
1937 }
1938
1939 #urlbar-icons {
1940   -moz-box-align: center;
1941 }
1942
1943 .urlbar-icon {
1944   padding: 0 2px;
1945 }
1946
1947 .search-go-container {
1948   padding: 2px;
1949 }
1950
1951 .search-go-container > .search-go-button {
1952   padding: 0;
1953 }
1954
1955 #urlbar-search-footer {
1956   border-top: 1px solid #A09090;
1957 }
1958
1959 #urlbar-search-settings {
1960 }
1961
1962 #urlbar-search-settings:hover {
1963 }
1964
1965 #urlbar-search-settings:hover:active {
1966 }
1967
1968 #urlbar-search-splitter {
1969   min-width: 6px;
1970   -moz-margin-start: -3px;
1971   border: none;
1972   background: transparent;
1973 }
1974
1975 #urlbar-search-splitter + #urlbar-container > #urlbar,
1976 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1977   -moz-margin-start: 0;
1978 }
1979
1980 #urlbar-display-box {
1981 }
1982
1983 .urlbar-display {
1984   -moz-border-end: 1px solid #9C9CFF;
1985   -moz-margin-end: 3px;
1986   margin-top: 0;
1987   margin-bottom: 0;
1988   -moz-margin-start: 0;
1989   color: #8050B0;
1990 }
1991
1992 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1993
1994 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1995   border-bottom: 1px solid #A09090;
1996   background-color: #000000;
1997   padding: 6px 0;
1998   -moz-padding-start: 44px;
1999   -moz-padding-end: 6px;
2000   background-image: url("chrome://browser/skin/info.svg");
2001   background-clip: padding-box;
2002   background-position: 20px center;
2003   background-repeat: no-repeat;
2004   background-size: 16px 16px;
2005 }
2006
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2008   background-position: right 20px center;
2009 }
2010
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2012   margin: 0;
2013   padding: 0;
2014 }
2015
2016 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2017   -moz-margin-start: 0;
2018 }
2019
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2021   -moz-appearance: none;
2022   min-width: 80px;
2023   border-radius: 3px;
2024   padding: 4px 16px;
2025   margin: 0;
2026   -moz-margin-start: 10px;
2027 }
2028
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2030 }
2031
2032 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2033 }
2034
2035 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2036 }
2037
2038 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2039 }
2040
2041 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2042
2043 #search-container {
2044   min-width: calc(54px + 11ch);
2045 }
2046
2047 /* identity box */
2048
2049 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2050   var(--identity-box-verified-background-color);
2051 }
2052
2053 #identity-box:-moz-focusring {
2054   outline: 1px dotted #008484;
2055   outline-offset: -1px;
2056 }
2057
2058 #identity-box.verifiedDomain:-moz-focusring,
2059 #identity-box.verifiedIdentity:-moz-focusring {
2060   outline-color: #000000;
2061 }
2062
2063 /* Location bar dropmarker */
2064
2065 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2066   background-color: transparent;
2067 }
2068
2069 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2070 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2071 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2072   border: none;
2073   border-radius: 0px;
2074 }
2075
2076 .urlbar-history-dropmarker:hover {
2077 }
2078
2079 .urlbar-history-dropmarker:hover:active,
2080 .urlbar-history-dropmarker[open="true"] {
2081 }
2082
2083 /* page proxy icon */
2084
2085 /* === BEGIN identity-block.inc.css === */
2086
2087 #identity-box {
2088   --identity-box-verified-color: #008484;
2089   /* Default theme does different color per channel, we can't as they do it build-time. */
2090   --identity-box-chrome-color: #9C9CFF;
2091
2092   border-inline-end: 1px solid --urlbar-separator-color);
2093   font-size: .9em;
2094   border-radius: 2px;
2095   padding: 3px 5px;
2096   margin-inline-end: 4px;
2097   overflow: hidden;
2098   /* The latter two properties have a transition to handle the delayed hiding of
2099      the forward button when hovered. */
2100   transition: background-color 150ms ease, padding-left, padding-right;
2101 }
2102
2103 #identity-box:-moz-locale-dir(ltr) {
2104   border-top-right-radius: 0;
2105   border-bottom-right-radius: 0;
2106 }
2107
2108 #identity-box:-moz-locale-dir(rtl) {
2109   border-top-left-radius: 0;
2110   border-bottom-left-radius: 0;
2111 }
2112
2113 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2114   color: var(--identity-box-chrome-color);
2115   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2116 }
2117
2118 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2119   color: var(--identity-box-verified-color);
2120   -moz-border-end: 1px solid var(--identity-box-verified-color);
2121 }
2122
2123 #notification-popup-box:not([hidden]) + #identity-box {
2124   padding-inline-start: 10px !important;
2125   border-radius: 0;
2126 }
2127
2128 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2129 /*   border-radius: 0; */
2130   -moz-padding-start: 2px;
2131   -moz-padding-end: 2px;
2132   -moz-margin-end: 1px;
2133 }
2134
2135 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2136     #notification-popup-box[hidden] + #identity-box {
2137   padding-inline-start: 2px;
2138 }
2139
2140 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2141     #notification-popup-box[hidden] + #identity-box {
2142   /* Forward button hiding is delayed when hovered, so we should use the same
2143      delay for the identity box. We handle both horizontal paddings (for LTR and
2144      RTL), the latter two delays here are for padding-left and padding-right. */
2145   transition-delay: 0s, 100s, 100s;
2146 }
2147
2148 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2149     #notification-popup-box[hidden] + #identity-box {
2150   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2151   padding-inline-start: 2.01px;
2152 }
2153
2154 /* TRACKING PROTECTION ICON */
2155
2156 #tracking-protection-icon {
2157   width: 16px;
2158   height: 16px;
2159   margin-inline-start: 0;
2160   list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2161   opacity: 1;
2162 }
2163
2164 #tracking-protection-icon[state="loaded-tracking-content"] {
2165   list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2166 }
2167
2168 #tracking-protection-icon[animate] {
2169   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2170 }
2171
2172 #tracking-protection-icon:not([state]) {
2173   margin-inline-start: -18px;
2174   pointer-events: none;
2175   opacity: 0;
2176   /* Only animate the shield in, when it disappears hide it immediately. */
2177   transition: none;
2178 }
2179
2180 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2181   visibility: collapse;
2182 }
2183
2184 /* MAIN IDENTITY ICON */
2185
2186 #page-proxy-favicon {
2187   width: 16px;
2188   height: 16px;
2189   list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2190   margin: 2px;
2191 }
2192
2193 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2194   list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2195 }
2196
2197 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2198 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2199   list-style-image: url("chrome://browser/skin/identity-secure.svg");
2200 }
2201
2202 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2203   list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2204 }
2205
2206 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2207 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2208 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2209   list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2210 }
2211
2212 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2213   list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2214 }
2215
2216 #page-proxy-favicon[pageproxystate="invalid"] {
2217   opacity: 0.3;
2218 }
2219
2220 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2221   list-style-image: url("chrome://branding/content/icon64.png");
2222 }
2223
2224 #identity-popup-brandName {
2225   font-weight: bold;
2226   font-size: 1.25em;
2227   margin-top: .5em;
2228   margin-bottom: .5em;
2229 }
2230
2231 #identity-popup-content-box {
2232   max-width: 50ch;
2233 }
2234
2235 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2236   -moz-image-region: inherit;
2237   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2238   width: 16px;
2239   height: 16px;
2240   opacity: 1;
2241 }
2242
2243 /* MAIN IDENTITY ICON */
2244
2245 #identity-icon {
2246   width: 16px;
2247   height: 16px;
2248   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2249 }
2250
2251 #identity-box:hover > #identity-icon,
2252 #identity-box[open=true] > #identity-icon {
2253   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2254 }
2255
2256 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2257   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2258 }
2259
2260 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2261   opacity: 0.3;
2262 }
2263
2264 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2265   -moz-image-region: inherit;
2266   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2267   width: 16px;
2268   height: 16px;
2269   opacity: 1;
2270 }
2271
2272 /* TRACKING PROTECTION ICON */
2273
2274 #tracking-protection-icon {
2275   width: 16px;
2276   height: 16px;
2277   margin-inline-start: 2px;
2278   margin-inline-end: 0;
2279   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2280   opacity: 1;
2281 }
2282
2283 #tracking-protection-icon[state="loaded-tracking-content"] {
2284   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2285 }
2286
2287 #tracking-protection-icon[animate] {
2288   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2289 }
2290
2291 #tracking-protection-icon:not([state]) {
2292   margin-inline-end: -18px;
2293   pointer-events: none;
2294   opacity: 0;
2295   /* Only animate the shield in, when it disappears hide it immediately. */
2296   transition: none;
2297 }
2298
2299 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2300   visibility: collapse;
2301 }
2302
2303 /* CONNECTION ICON */
2304
2305 #connection-icon {
2306   width: 16px;
2307   height: 16px;
2308   margin-inline-start: 2px;
2309   visibility: collapse;
2310 }
2311
2312 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2313 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2314   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2315   visibility: visible;
2316 }
2317
2318 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2319 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2320   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2321   visibility: visible;
2322 }
2323
2324 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2325 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2326 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2327   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2328   visibility: visible;
2329 }
2330
2331 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2332   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2333   visibility: visible;
2334 }
2335
2336 /* === END identity-block.inc.css === */
2337
2338 #page-proxy-favicon {
2339   -moz-image-region: rect(0, 16px, 16px, 0);
2340 }
2341
2342 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2343 /*  -moz-margin-end: 1px;*/
2344 }
2345
2346 #identity-box:hover > #page-proxy-favicon {
2347   -moz-image-region: rect(0, 32px, 16px, 16px);
2348 }
2349
2350 #identity-box:hover:active > #page-proxy-favicon,
2351 #identity-box[open=true] > #page-proxy-favicon {
2352   -moz-image-region: rect(0, 48px, 16px, 32px);
2353 }
2354
2355 #identity-box:hover {
2356   background-color: #FFCF00;
2357   color: #000000;
2358 }
2359
2360 #identity-box:hover:active,
2361 #identity-box[open=true] {
2362   background-color: #FF9F00;
2363   color: #000000;
2364 }
2365
2366 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2367 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2369   background-color: #9C9CFF;
2370   color: #000000;
2371 }
2372
2373 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2376   background-color: #008484;
2377   color: #000000;
2378 }
2379
2380 /* autocomplete */
2381
2382 #treecolAutoCompleteImage {
2383   max-width: 36px;
2384 }
2385
2386 .ac-result-type-bookmark,
2387 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2388   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2389   -moz-image-region: rect(0px 16px 16px 0px);
2390   width: 16px;
2391   height: 16px;
2392 }
2393
2394 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2395 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2396 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2397 }
2398
2399 .ac-result-type-keyword,
2400 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2401 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2402   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2403   width: 16px;
2404   height: 16px;
2405 }
2406
2407   .ac-result-type-keyword[selected="true"],
2408   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2409   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2410     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2411   }
2412
2413 .ac-result-type-tag,
2414 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2415   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2416   width: 16px;
2417   height: 16px;
2418 }
2419
2420 .ac-comment,
2421 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2422 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2423   font-size: 1.05em;
2424 }
2425
2426 .ac-extra > .ac-comment,
2427 .ac-url-text,
2428 .ac-action-text {
2429   font-size: 1em;
2430 }
2431
2432 .ac-url-text,
2433 .ac-action-text {
2434   color: #9C9CFF;
2435 }
2436
2437 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2438   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2439   -moz-image-region: rect(0, 16px, 16px, 0);
2440   padding: 0 3px;
2441   width: 22px;
2442   height: 16px;
2443 }
2444
2445 @media (min-resolution: 1.1dppx) {
2446   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2447     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2448     -moz-image-region: rect(0, 32px, 32px, 0);
2449   }
2450 }
2451
2452 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2453   -moz-image-region: rect(16px, 16px, 32px, 0);
2454 }
2455
2456 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2457   color: #8050B0;
2458 }
2459
2460 .ac-comment[selected="true"],
2461 .ac-url-text[selected="true"],
2462 .ac-action-text[selected="true"] {
2463   color: inherit !important;
2464 }
2465
2466 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2467 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2468 {
2469   color: #8050B0;
2470   font-size: smaller;
2471 }
2472
2473 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2474   border-top: 1px solid #9C9CFF;
2475 }
2476
2477 /* combined go/reload/stop button in location bar */
2478
2479 #urlbar-go-button,
2480 #urlbar-reload-button,
2481 #urlbar-stop-button {
2482   border-style: none;
2483   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2484 /*  padding: 0 9px;*/
2485   margin-inline-start: 0px;
2486   border-inline-start: 1px solid var(--urlbar-separator-color);
2487   border-image: linear-gradient(transparent 15%,
2488                                 var(--urlbar-separator-color) 15%,
2489                                 var(--urlbar-separator-color) 85%,
2490                                 transparent 85%);
2491   border-image-slice: 1;
2492 }
2493
2494 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2495   border-top-left-radius: 0px;
2496   border-bottom-left-radius: 0px;
2497 }
2498
2499 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2500   border-top-right-radius: 0px;
2501   border-bottom-right-radius: 0px;
2502 }
2503
2504 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2505 #urlbar-reload-button:not(:hover) {
2506   -moz-border-start-style: none;
2507   -moz-padding-start: 3px;
2508 }
2509
2510 #urlbar-reload-button {
2511   -moz-image-region: rect(0px, 14px, 14px, 0px);
2512 }
2513
2514 #urlbar-reload-button[disabled=true] {
2515   -moz-image-region: rect(28px, 14px, 42px, 0px);
2516 }
2517
2518 #urlbar-reload-button:not([disabled=true]):hover {
2519   -moz-image-region: rect(14px, 14px, 28px, 0px);
2520 }
2521
2522 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2523   transform: scaleX(-1);
2524 }
2525
2526 #urlbar-go-button {
2527   -moz-image-region: rect(0, 42px, 14px, 28px);
2528 }
2529
2530 #urlbar-go-button:hover {
2531   -moz-image-region: rect(14px, 42px, 28px, 28px);
2532 }
2533
2534 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2535   transform: scaleX(-1);
2536 }
2537
2538 #urlbar-stop-button {
2539   -moz-image-region: rect(0px, 28px, 14px, 14px);
2540 }
2541
2542 #urlbar-stop-button:hover {
2543   -moz-image-region: rect(14px, 28px, 28px, 14px);
2544 }
2545
2546 @media (min-resolution: 1.1dppx) {
2547   #urlbar-go-button,
2548   #urlbar-reload-button,
2549   #urlbar-stop-button {
2550     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2551   }
2552
2553   #urlbar-go-button > .toolbarbutton-icon,
2554   #urlbar-reload-button > .toolbarbutton-icon,
2555   #urlbar-stop-button > .toolbarbutton-icon {
2556     width: 14px;
2557   }
2558
2559   #urlbar-go-button {
2560     -moz-image-region: rect(0, 84px, 28px, 56px);
2561   }
2562
2563   #urlbar-go-button:hover {
2564     -moz-image-region: rect(28px, 84px, 56px, 56px);
2565   }
2566
2567   #urlbar-go-button:hover:active {
2568     -moz-image-region: rect(56px, 84px, 84px, 56px);
2569   }
2570
2571   #urlbar-reload-button {
2572     -moz-image-region: rect(0, 28px, 28px, 0);
2573   }
2574
2575   #urlbar-reload-button:not([disabled]):hover {
2576     -moz-image-region: rect(28px, 28px, 56px, 0);
2577   }
2578
2579   #urlbar-reload-button:not([disabled]):hover:active {
2580     -moz-image-region: rect(56px, 28px, 84px, 0);
2581   }
2582
2583   #urlbar-stop-button {
2584     -moz-image-region: rect(0, 56px, 28px, 28px);
2585   }
2586
2587   #urlbar-stop-button:not([disabled]):hover {
2588     -moz-image-region: rect(28px, 56px, 56px, 28px);
2589   }
2590
2591   #urlbar-stop-button:hover:active {
2592     -moz-image-region: rect(56px, 56px, 84px, 28px);
2593   }
2594 }
2595
2596 /* popup blocker button */
2597
2598 #page-report-button {
2599   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2600   -moz-image-region: rect(0, 16px, 16px, 0);
2601 }
2602
2603 #page-report-button:hover ,
2604 #page-report-button:hover:active,
2605 #page-report-button[open="true"] {
2606   -moz-image-region: rect(0, 32px, 16px, 16px);
2607 }
2608
2609 /* Reader mode button */
2610
2611 #reader-mode-button {
2612   list-style-image: url("chrome://browser/skin/readerMode.svg");
2613   -moz-image-region: rect(0, 16px, 16px, 0);
2614 }
2615
2616 #reader-mode-button:hover,
2617 #reader-mode-button[readeractive]:hover {
2618   -moz-image-region: rect(0, 32px, 16px, 16px);
2619 }
2620
2621 #reader-mode-button:hover:active,
2622 #reader-mode-button[readeractive] {
2623   -moz-image-region: rect(0, 48px, 16px, 32px);
2624 }
2625
2626 /* social share panel */
2627
2628 .social-share-frame {
2629   min-width: 756px;
2630   height: 150px;
2631 }
2632
2633 #share-container {
2634   min-width: 756px;
2635   background-color: white;
2636   background-repeat: no-repeat;
2637   background-position: center center;
2638 }
2639 #share-container[loading] {
2640   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2641 }
2642 #share-container > browser {
2643   transition: opacity 150ms ease-in-out;
2644   opacity: 1;
2645 }
2646 #share-container[loading] > browser {
2647   opacity: 0;
2648 }
2649
2650 .social-share-toolbar {
2651   border-bottom: 1px solid #9C9CFF;
2652   padding: 2px;
2653 }
2654
2655 #social-share-provider-buttons {
2656   padding: 0;
2657   margin: 0;
2658 }
2659
2660 .share-provider-button {
2661   padding: 5px;
2662   margin: 2px;
2663 }
2664
2665 .share-provider-button > .toolbarbutton-text {
2666   display: none;
2667 }
2668 .share-provider-button > .toolbarbutton-icon {
2669   width: 16px;
2670   min-height: 16px;
2671   max-height: 16px;
2672 }
2673
2674 /* fixup corners for share panel */
2675 .social-panel > .social-panel-frame {
2676   border-radius: inherit;
2677 }
2678
2679 #social-share-panel {
2680   min-height: 100px;
2681   min-width: 766px;
2682 }
2683
2684 #share-container,
2685 .social-share-frame {
2686   border-top-left-radius: 0;
2687   border-bottom-left-radius: inherit;
2688   border-top-right-radius: 0;
2689   border-bottom-right-radius: inherit;
2690 }
2691
2692 #social-share-panel > .social-share-toolbar {
2693   border-top-left-radius: inherit;
2694   border-top-right-radius: inherit;
2695 }
2696
2697 #social-share-provider-buttons {
2698   border-top-left-radius: inherit;
2699   border-top-right-radius: inherit;
2700 }
2701
2702 /* social recommending panel */
2703
2704 #social-mark-button {
2705   -moz-image-region: rect(0, 16px, 16px, 0);
2706 }
2707
2708 /* bookmarks menu-button */
2709
2710 #bookmarks-menu-button.bookmark-item {
2711   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2712   -moz-image-region: rect(0px 16px 16px 0px);
2713 }
2714
2715 #bookmarks-menu-button.bookmark-item[starred] {
2716   -moz-image-region: rect(0px 32px 16px 16px);
2717 }
2718
2719 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2720   padding-top: 2px;
2721   padding-bottom: 2px;
2722 }
2723
2724 #BMB_bookmarksPopup[side="top"],
2725 #BMB_bookmarksPopup[side="bottom"] {
2726   margin-left: -20px;
2727   margin-right: -20px;
2728 }
2729
2730 #BMB_bookmarksPopup[side="left"],
2731 #BMB_bookmarksPopup[side="right"] {
2732   margin-top: -20px;
2733   margin-bottom: -20px;
2734 }
2735
2736 /* bookmarking panel */
2737
2738 #editBookmarkPanelStarIcon {
2739   list-style-image: url("chrome://browser/skin/places/starred48.png");
2740   width: 48px;
2741   height: 48px;
2742 }
2743
2744 #editBookmarkPanelStarIcon[unstarred] {
2745   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2746 }
2747
2748 #editBookmarkPanelTitle {
2749   font-size: 130%;
2750 }
2751
2752 #editBookmarkPanelHeader,
2753 #editBookmarkPanelContent {
2754   margin-bottom: .5em;
2755 }
2756
2757 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2758 #editBMPanel_folderTree {
2759   min-width: 27em;
2760 }
2761
2762 .panel-promo-box {
2763   margin: 5px 0 -6px;
2764   padding: 5px 0;
2765   border-top: 1px solid #9C9CFF;
2766   border-bottom-left-radius: 5px;
2767   border-bottom-right-radius: 5px;
2768 }
2769
2770 .panel-promo-icon {
2771   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2772   -moz-margin-end: 10px;
2773   vertical-align: middle;
2774 }
2775
2776 .panel-promo-closebutton {
2777   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2778   -moz-margin-end: -3px;
2779   margin-top: -3px;
2780 }
2781
2782 .panel-promo-closebutton:hover {
2783   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2784 }
2785
2786 .panel-promo-closebutton:hover:active {
2787   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2788 }
2789
2790 .panel-promo-closebutton > .toolbarbutton-text {
2791   padding: 0;
2792 }
2793
2794 /* ::::: content area ::::: */
2795
2796 #sidebar-box {
2797   background-color: #9C9CFF;
2798   color: #000000;
2799 }
2800
2801 #sidebar {
2802   background-color: #000000;
2803 }
2804
2805 #sidebar-splitter {
2806   -moz-margin-start: 0;
2807 }
2808
2809 #sidebar-header {
2810   color: #000000;
2811   padding: 2px;
2812 }
2813
2814 #sidebar-title {
2815   -moz-padding-start: 0px;
2816 }
2817
2818 #sidebar-header > .close-icon {
2819 /*  padding: 4px 2px;
2820   margin: 0;
2821   border: none;*/
2822   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2823 }
2824
2825 #sidebar-header > .close-icon:hover,
2826 #sidebar-header > .close-icon:hover:active {
2827   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2828 }
2829
2830 #sidebar-splitter:-moz-locale-dir(ltr),
2831 #sidebar:-moz-locale-dir(ltr) {
2832   border-radius: 0 5px 0 0;
2833 }
2834
2835 #sidebar-splitter:-moz-locale-dir(rtl),
2836 #sidebar:-moz-locale-dir(rtl) {
2837   border-radius: 5px 0 0 0;
2838 }
2839
2840 .browserContainer > findbar {
2841 /*
2842   background-color: -moz-dialog;
2843   color: -moz-DialogText;
2844 */
2845 }
2846
2847 /* Tabstrip */
2848
2849 #TabsToolbar {
2850   min-height: 0;
2851   padding: 0;
2852   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2853 }
2854
2855 #TabsToolbar .toolbar-holder {
2856   background-color: #000000; /* correct effect of being an actual toolbar */
2857 }
2858
2859 #main-window[disablechrome] #TabsToolbar,
2860 #TabsToolbar[tabsontop="false"] {
2861   border-bottom: 1px solid #008484;
2862 }
2863
2864 /* === BEGIN tabs.inc.css === */
2865
2866 :root {
2867   /* --tab-toolbar-navbar-overlap: 1px; */
2868   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2869   /* --tab-min-height: 31px; */
2870 }
2871 #TabsToolbar {
2872   /* --tab-stroke-background-size: auto 100%; */
2873 }
2874
2875 .tabbrowser-tab,
2876 .tabs-newtab-button,
2877 #TabsToolbar > #new-tab-button {
2878   margin-top: 0px;
2879 }
2880
2881 .tabbrowser-tab {
2882   padding: 1px 4px 2px;
2883 }
2884
2885 .tabbrowser-tab:first-of-type {
2886   -moz-margin-start: 2px;
2887 }
2888
2889 .tabs-newtab-button,
2890 #TabsToolbar > #new-tab-button {
2891   border-radius: 8px 8px 0px 0px;
2892   -moz-margin-start: 0;
2893 }
2894
2895 .tabs-newtab-button:not(:hover),
2896 #TabsToolbar > #new-tab-button:not(:hover) {
2897   background-color: #C09070;
2898 }
2899
2900 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2901 .tabbrowser-tab[visuallyselected=true] {
2902 /*  position: relative;
2903   z-index: 2;*/
2904 }
2905
2906 .tab-background-middle {
2907 }
2908
2909 .tab-content {
2910 }
2911
2912 .tab-content[pinned] {
2913 }
2914
2915 .tab-throbber,
2916 .tab-icon-image,
2917 .tab-icon-sound,
2918 .tab-close-button {
2919 }
2920
2921 .tab-throbber,
2922 .tab-icon-image {
2923   height: 16px;
2924   width: 16px;
2925   -moz-margin-end: 3px;
2926 }
2927
2928 .tab-icon-image {
2929   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2930 }
2931
2932 .tab-icon-overlay {
2933   width: 16px;
2934   height: 16px;
2935  /* margin-top: -12px; */
2936   -moz-margin-start: -16px;
2937   position: relative;
2938 }
2939
2940 .tab-icon-overlay[crashed] {
2941   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2942 }
2943
2944 .tab-icon-overlay[soundplaying],
2945 .tab-icon-overlay[muted]:not([crashed]) {
2946   border-radius: 8px;
2947 }
2948
2949 .tab-icon-overlay[soundplaying]:hover,
2950 .tab-icon-overlay[muted]:hover {
2951   background-color: #FFCF00;
2952 }
2953
2954 .tab-icon-overlay[soundplaying] {
2955   display: -moz-box;
2956   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2957 }
2958
2959 .tab-icon-overlay[muted]:not([crashed]) {
2960   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2961 }
2962
2963 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2964   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2965 }
2966
2967
2968 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2969   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2970 }
2971
2972 .tab-throbber[busy] {
2973   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2974 }
2975
2976 .tab-throbber[progress] {
2977   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2978 }
2979
2980 .tab-throbber[pinned],
2981 .tab-icon-image[pinned] {
2982   -moz-margin-start: 2px;
2983   -moz-margin-end: 2px;
2984 }
2985
2986 .tab-label {
2987   /* this needs to add up to the 16px of the icon image */
2988   height: 12px;
2989   margin-top: 2px !important;
2990   margin-bottom: 2px !important;
2991 }
2992
2993 .tab-icon-sound {
2994   -moz-margin-start: 4px;
2995   width: 16px;
2996   height: 16px;
2997   padding: 0;
2998 }
2999
3000 .tab-icon-sound[muted] {
3001   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3002 }
3003
3004 .tab-icon-sound[muted]:hover {
3005   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3006 }
3007
3008 .tab-icon-sound[muted]:hover:active {
3009   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3010 }
3011
3012 .tab-icon-sound[soundplaying] {
3013   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3014 }
3015
3016 .tab-icon-sound[soundplaying]:hover {
3017   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3018 }
3019
3020 .tab-icon-sound[soundplaying]:hover:active {
3021   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3022 }
3023
3024 .tab-icon-sound[muted] {
3025   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3026 }
3027
3028 .tab-icon-sound[muted]:hover {
3029   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3030 }
3031
3032 .tab-icon-sound[muted]:hover:active {
3033   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3034 }
3035
3036 .tab-icon-sound[visuallyselected=true][soundplaying] {
3037   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3038 }
3039
3040 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3041   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3042 }
3043
3044 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3045   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3046 }
3047
3048 .tab-icon-sound[visuallyselected=true][muted] {
3049   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3050 }
3051
3052 .tab-icon-sound[visuallyselected=true][muted]:hover {
3053   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3054 }
3055
3056 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3057   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3058 }
3059
3060 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3061   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3062 }
3063
3064 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3065   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3066 }
3067
3068 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3069   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3070 }
3071
3072 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3073   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3074 }
3075
3076 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3077   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3078 }
3079
3080 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3081   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3082 }
3083
3084 .tab-close-button {
3085   margin-top: 1px;
3086   padding: 0;
3087 }
3088
3089 .tab-background,
3090 .tabs-newtab-button {
3091   /* overlap the tab curves */
3092 }
3093
3094 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3095 }
3096
3097 /* Tab Overflow */
3098 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3100 }
3101
3102 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3104 }
3105
3106 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3107 }
3108
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3110 }
3111
3112 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3113 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3114 }
3115
3116 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3117 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3118 }
3119
3120 .tab-background-start[visuallyselected=true]::after,
3121 .tab-background-start[visuallyselected=true]::before,
3122 .tab-background-start,
3123 .tab-background-end,
3124 .tab-background-end[visuallyselected=true]::after,
3125 .tab-background-end[visuallyselected=true]::before {
3126 }
3127
3128 .tabbrowser-tab:not([visuallyselected=true]),
3129 .tabbrowser-tab:-moz-lwtheme {
3130 }
3131
3132 /* tabbrowser-tab focus ring */
3133 .tabbrowser-tab:focus {
3134   outline: 1px dotted;
3135 }
3136
3137 /* Selected tab */
3138
3139 .tabbrowser-tab[visuallyselected="true"] {
3140 }
3141
3142 /* End selected tab */
3143
3144 /* Tab pointer-events */
3145 /*
3146 .tabbrowser-tab {
3147   pointer-events: none;
3148 }
3149
3150 .tab-background-middle,
3151 .tabs-newtab-button,
3152 .tab-icon-overlay[soundplaying],
3153 .tab-icon-overlay[muted]:not([crashed]),
3154 .tab-icon-sound,
3155 .tab-close-button {
3156   pointer-events: auto;
3157 }
3158 */
3159 /* Pinned tabs */
3160
3161 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3162   background-color: #E7ADE7;
3163 }
3164
3165 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3166   background-color: #3333FF;
3167   color: #000000;
3168 }
3169
3170 /* Tab separators */
3171 /*
3172 .tabbrowser-tab::after,
3173 .tabbrowser-tab::before {
3174   width: 1px;
3175   -moz-margin-start: -1px;
3176   background-image: linear-gradient(transparent 5px,
3177                                     currentColor 5px,
3178                                     currentColor calc(100% - 4px),
3179                                     transparent calc(100% - 4px));
3180   opacity: 0.2;
3181 }
3182
3183 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3184 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3185   opacity: 0.4;
3186 }
3187 */
3188 /* Also show separators beside the selected tab when dragging it. */
3189 /*
3190 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3191 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3192 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3193   content: "";
3194   display: -moz-box;
3195 }
3196 */
3197 /* New tab button */
3198
3199 .tabs-newtab-button {
3200   width: 28px;
3201   /* width: calc(36px + var(--tab-curve-width)); */
3202 }
3203
3204 /* === END tabs.inc.css === */
3205
3206 /* Background tabs:
3207  *
3208  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3209  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3210  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3211  */
3212 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3213 /*  clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3214 }
3215
3216 /* Tab DnD indicator */
3217 .tab-drop-indicator {
3218   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3219   margin-bottom: -11px;
3220 }
3221
3222 /* Tab close button */
3223 .tab-close-button {
3224   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3225 }
3226
3227 .tab-close-button:hover,
3228 .tab-close-button:hover[selected="true"] {
3229   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3230 }
3231
3232 .tab-close-button:hover:active,
3233 .tab-close-button:hover:active[selected="true"] {
3234   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3235 }
3236
3237 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3238
3239 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3240 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3241   margin: 0;
3242   padding-top: 0;
3243   padding-bottom: 0;
3244   background-origin: border-box;
3245 }
3246
3247 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3249 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3250 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3251  }
3252
3253 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3254 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3255  }
3256
3257 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3258 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3259 /*  transform: scaleX(-1);*/
3260 }
3261
3262 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3263   transition: 1s background-color ease-out;
3264 }
3265
3266 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3267   background-color: #008484;
3268 }
3269
3270 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3271 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3272 /*  border-width: 0 2px 0 0;
3273   border-style: solid;
3274   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3275 }
3276
3277 .tabs-newtab-button > .toolbarbutton-icon {
3278   margin-top: -1px;
3279   margin-bottom: -1px;
3280 }
3281
3282 .tabs-newtab-button,
3283 #TabsToolbar > #new-tab-button,
3284 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3285 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3286   list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3287   -moz-image-region: rect(0, 16px, 18px, 0);
3288 }
3289
3290 .tabs-newtab-button,
3291 .tabs-newtab-button:hover,
3292 #TabsToolbar > #new-tab-button,
3293 #TabsToolbar > #new-tab-button:hover {
3294   -moz-image-region: rect(0, 32px, 18px, 16px);
3295 }
3296
3297 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3298 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3299 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3300 .tabs-newtab-button:-moz-lwtheme-brighttext,
3301 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3302 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3303 }
3304
3305 #TabsToolbar > #new-tab-button {
3306   width: 26px;
3307 }
3308
3309 #alltabs-button {
3310   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3311 }
3312
3313 #alltabs-button:hover,
3314 #alltabs-button:hover:active,
3315 #alltabs-button[open="true"] {
3316   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3317 }
3318
3319 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3320 #alltabs-button:-moz-lwtheme-brighttext {
3321 }
3322
3323 #alltabs-button > .toolbarbutton-icon {
3324 /*  margin: 0 2px;*/
3325 }
3326
3327 #alltabs-button > .toolbarbutton-menu-dropmarker {
3328   display: none;
3329 }
3330
3331 /* All tabs menupopup */
3332 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3333   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3334   -moz-image-region: auto;
3335 }
3336
3337 .alltabs-item[selected="true"] {
3338   font-weight: bold;
3339 }
3340
3341 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3342   list-style-image: url("chrome://global/skin/icons/loading.gif");
3343 }
3344
3345 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3346   background-color: #402800;
3347 }
3348
3349 toolbarbutton.chevron {
3350   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3351 }
3352
3353 toolbarbutton.chevron:hover {
3354   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3355 }
3356 /*
3357 toolbar[brighttext] toolbarbutton.chevron {
3358   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3359 }
3360 */
3361 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3362 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3363   transform: scaleX(-1);
3364 }
3365
3366 toolbarbutton.chevron > .toolbarbutton-text,
3367 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3368   display: none;
3369 }
3370
3371 toolbarbutton.chevron > .toolbarbutton-icon {
3372   margin: 0;
3373 }
3374
3375 #sidebar-throbber[loading="true"] {
3376   list-style-image: url("chrome://global/skin/icons/loading.gif");
3377   -moz-margin-end: 4px;
3378 }
3379
3380 /* Bookmarks toolbar */
3381 #PlacesToolbarDropIndicator {
3382   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3383 }
3384
3385 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3386   background-color: #008484 !important;
3387   color: #FFCF00 !important;
3388 }
3389
3390 /* rules for menupopup drop indicators */
3391 .menupopup-drop-indicator-bar {
3392   position: relative;
3393   /* these two margins must together compensate the indicator's height */
3394   margin-top: -1px;
3395   margin-bottom: -1px;
3396 }
3397
3398 .menupopup-drop-indicator {
3399   list-style-image: none;
3400   height: 2px;
3401   -moz-margin-end: -4em;
3402   background-color: #008484;
3403 }
3404
3405 /* === BEGIN notification-icons.inc.css === */
3406
3407 .popup-notification-icon {
3408   width: 64px;
3409   height: 64px;
3410   -moz-margin-end: 10px;
3411 }
3412
3413 .popup-notification-icon[popupid="geolocation"] {
3414   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3415 }
3416
3417 .popup-notification-icon[popupid="push"] {
3418   list-style-image: url(chrome://browser/skin/Push-64.png);
3419 }
3420
3421 .popup-notification-icon[popupid="xpinstall-disabled"],
3422 .popup-notification-icon[popupid="addon-install-blocked"],
3423 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3424   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3425 }
3426
3427 .popup-notification-icon[popupid="addon-progress"] {
3428   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3429 }
3430
3431 .popup-notification-icon[popupid="addon-install-failed"] {
3432   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3433 }
3434
3435 .popup-notification-icon[popupid="addon-install-confirmation"] {
3436   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3437 }
3438
3439 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3440   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3441 }
3442
3443 .popup-notification-icon[popupid="addon-install-complete"] {
3444   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3445 }
3446
3447 .popup-notification-icon[popupid="addon-install-restart"] {
3448   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3449 }
3450
3451 .popup-notification-icon[popupid="click-to-play-plugins"] {
3452   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3453 }
3454
3455 .popup-notification-icon[popupid="web-notifications"] {
3456   list-style-image: url("chrome://browser/skin/notification-64.png");
3457 }
3458
3459 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3460 .popup-notification-icon[popupid*="offline-app-requested"],
3461 .popup-notification-icon[popupid="offline-app-usage"] {
3462   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3463 }
3464
3465 .popup-notification-icon[popupid="password"] {
3466   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3467 }
3468
3469 .popup-notification-icon[popupid="webapps-install-progress"],
3470 .popup-notification-icon[popupid="webapps-install"] {
3471   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3472 }
3473
3474 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3475 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3476   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3477 }
3478
3479 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3480 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3481   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3482 }
3483
3484 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3485 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3486   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3487 }
3488
3489 .popup-notification-icon[popupid="pointerLock"] {
3490   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3491 }
3492
3493 /* Notification icon box */
3494 #notification-popup .panel-promo-box {
3495 /*  margin: 10px -10px -10px; */
3496 }
3497
3498 #notification-popup-box {
3499   position: relative;
3500   background-color: #000000;
3501   background-clip: padding-box;
3502   padding-left: 3px;
3503   padding-right: 8px;
3504   border-radius: 3px 0 0 3px;
3505   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3506   -moz-margin-end: -8px;
3507   border-right-width: 8px;
3508 }
3509
3510 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3511 /*  padding-left: 7px; */
3512 }
3513
3514 /* This changes the direction of the main notification box on the url bar. */
3515 #notification-popup-box:-moz-locale-dir(rtl),
3516 /* This adds a second flip for the notification anchors, as they don't switch direction
3517    for RTL mode. */
3518 .notification-anchor-icon:-moz-locale-dir(rtl) {
3519   transform: scaleX(-1);
3520 }
3521
3522 /* For the anchor icons in the chat window, we don't have the notification popup box,
3523    so we need to cancel the RTL transform. */
3524 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3525   transform: none;
3526 }
3527
3528 .notification-anchor-icon {
3529   list-style-image: url("chrome://global/skin/icons/information-16.png");
3530
3531   width: 16px;
3532   height: 16px;
3533   margin: 0 2px;
3534 }
3535
3536 .notification-anchor-icon:-moz-focusring {
3537   outline: 1px dotted #008484;
3538 }
3539
3540 .identity-notification-icon,
3541 #identity-notification-icon {
3542   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3543 }
3544
3545 .geo-notification-icon,
3546 #geo-notification-icon {
3547   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3548 }
3549
3550 #push-notification-icon {
3551   list-style-image: url(chrome://browser/skin/Push-16.png);
3552 }
3553
3554 #addons-notification-icon {
3555   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3556 }
3557
3558 #addons-notification-icon:hover {
3559   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3560 }
3561
3562 #addons-notification-icon:hover:active {
3563   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3564 }
3565
3566 .indexedDB-notification-icon,
3567 #indexedDB-notification-icon {
3568   list-style-image: url("chrome://global/skin/icons/question-16.png");
3569 }
3570
3571 #password-notification-icon {
3572   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3573 }
3574
3575 #login-fill-notification-icon {
3576   /* Temporary icon until the capture and fill doorhangers are unified. */
3577   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3578   transform: scaleX(-1);
3579 }
3580
3581 #webapps-notification-icon {
3582   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3583 }
3584
3585 #plugins-notification-icon {
3586   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3587 }
3588
3589 #plugins-notification-icon.plugin-hidden {
3590   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3591 }
3592
3593 #plugins-notification-icon.plugin-blocked {
3594   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3595 }
3596
3597 #plugins-notification-icon {
3598 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3599 }
3600
3601 #plugins-notification-icon:hover {
3602 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3603 }
3604
3605 #notification-popup-box[hidden] {
3606   /* Override display:none to make the pluginBlockedNotification animation work
3607      when showing the notification repeatedly. */
3608   display: -moz-box;
3609   visibility: collapse;
3610 }
3611
3612 #plugins-notification-icon.plugin-blocked[showing] {
3613   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3614 }
3615
3616 @keyframes pluginBlockedNotification {
3617   from {
3618     opacity: 0;
3619   }
3620   to {
3621     opacity: 1;
3622   }
3623 }
3624
3625 .webRTC-shareDevices-notification-icon,
3626 #webRTC-shareDevices-notification-icon {
3627   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3628 }
3629
3630 .webRTC-sharingDevices-notification-icon,
3631 #webRTC-sharingDevices-notification-icon {
3632   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3633 }
3634
3635 .webRTC-shareMicrophone-notification-icon,
3636 #webRTC-shareMicrophone-notification-icon {
3637   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3638 }
3639
3640 .webRTC-sharingMicrophone-notification-icon,
3641 #webRTC-sharingMicrophone-notification-icon {
3642   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3643 }
3644
3645 .webRTC-shareScreen-notification-icon,
3646 #webRTC-shareScreen-notification-icon {
3647   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3648 }
3649
3650 .webRTC-sharingScreen-notification-icon,
3651 #webRTC-sharingScreen-notification-icon {
3652   list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3653 }
3654
3655 .web-notifications-notification-icon,
3656 #web-notifications-notification-icon {
3657   list-style-image: url("chrome://browser/skin/notification-16.png");
3658 }
3659
3660 #pointerLock-notification-icon {
3661   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3662 }
3663
3664 .translate-notification-icon,
3665 #translate-notification-icon {
3666   list-style-image: url("chrome://browser/skin/translation-16.png");
3667   -moz-image-region: rect(0px, 16px, 16px, 0px);
3668 }
3669
3670 .translated-notification-icon,
3671 #translated-notification-icon {
3672   list-style-image: url("chrome://browser/skin/translation-16.png");
3673   -moz-image-region: rect(0px, 32px, 16px, 16px);
3674 }
3675
3676 .popup-notification-icon[popupid="servicesInstall"] {
3677   list-style-image: url("chrome://browser/skin/social/services-64.png");
3678 }
3679 #servicesInstall-notification-icon {
3680   list-style-image: url("chrome://browser/skin/social/services-16.png");
3681 }
3682
3683 /* EME notifications */
3684
3685 .popup-notification-icon[popupid="drmContentPlaying"],
3686 #eme-notification-icon {
3687   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3688 }
3689
3690 #eme-notification-icon:hover:active {
3691   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3692 }
3693
3694 #eme-notification-icon[firstplay=true] {
3695   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3696 }
3697
3698 @keyframes emeTeachingMoment {
3699   0% {transform: translateX(0); }
3700   25% {transform: translateX(3px) }
3701   75% {transform: translateX(-3px) }
3702   100% { transform: translateX(0); }
3703 }
3704
3705 /* HiDPI notification icons */
3706 @media (min-resolution: 1.1dppx) {
3707 /*  #notification-popup-box {
3708     border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3709   }
3710 */
3711   .notification-anchor-icon {
3712     list-style-image: url(chrome://global/skin/icons/information-32.png);
3713   }
3714
3715   .webRTC-shareDevices-notification-icon,
3716   #webRTC-shareDevices-notification-icon {
3717     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3718   }
3719
3720   .webRTC-sharingDevices-notification-icon,
3721   #webRTC-sharingDevices-notification-icon {
3722     list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3723   }
3724
3725   .webRTC-shareMicrophone-notification-icon,
3726   #webRTC-shareMicrophone-notification-icon {
3727     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3728   }
3729
3730   .webRTC-sharingMicrophone-notification-icon,
3731   #webRTC-sharingMicrophone-notification-icon {
3732     list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3733   }
3734
3735   .webRTC-shareScreen-notification-icon,
3736   #webRTC-shareScreen-notification-icon {
3737     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3738   }
3739
3740   .webRTC-sharingScreen-notification-icon,
3741   #webRTC-sharingScreen-notification-icon {
3742     list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3743   }
3744
3745   .popup-notification-icon[popupid="webRTC-sharingDevices"],
3746   .popup-notification-icon[popupid="webRTC-shareDevices"] {
3747     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3748   }
3749
3750   .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3751   .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3752     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3753   }
3754
3755   .popup-notification-icon[popupid="webRTC-sharingScreen"],
3756   .popup-notification-icon[popupid="webRTC-shareScreen"] {
3757     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3758   }
3759 }
3760
3761 /* === END notification-icons.inc.css === */
3762
3763 .popup-notification-body[popupid="addon-progress"],
3764 .popup-notification-body[popupid="addon-install-confirmation"] {
3765   width: 28em;
3766   max-width: 28em;
3767 }
3768
3769 /* Translation infobar */
3770
3771 /* === BEGIN infobar.inc.css === */
3772
3773 notification[value="translation"] .messageImage {
3774   list-style-image: url("chrome://browser/skin/translation-16.png");
3775   -moz-image-region: rect(0, 32px, 16px, 16px);
3776 }
3777
3778 @media (min-resolution: 1.25dppx) {
3779   notification[value="translation"] .messageImage {
3780     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3781     -moz-image-region: rect(0, 64px, 32px, 32px);
3782   }
3783 }
3784
3785 notification[value="translation"][state="translating"] .messageImage {
3786   list-style-image: url("chrome://browser/skin/translating-16.png");
3787   -moz-image-region: auto;
3788 }
3789
3790 @media (min-resolution: 1.25dppx) {
3791   notification[value="translation"][state="translating"] .messageImage {
3792     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3793   }
3794 }
3795
3796 notification[value="translation"] hbox[anonid="details"] {
3797   overflow: hidden;
3798 }
3799
3800 notification[value="translation"] button,
3801 notification[value="translation"] menulist {
3802   min-width: 0;
3803 }
3804
3805 notification[value="translation"] menulist > .menulist-dropmarker {
3806 }
3807
3808 .translation-menupopup arrowscrollbox {
3809   padding-bottom: 0;
3810 }
3811
3812 .translation-attribution {
3813   cursor: pointer;
3814   -moz-box-align: end;
3815   font-size: small;
3816 }
3817
3818 .translation-attribution > label {
3819   margin-bottom: 0;
3820 }
3821
3822 .translation-attribution > image {
3823   width: 70px;
3824 }
3825
3826 .translation-welcome-panel {
3827   width: 305px;
3828 }
3829
3830 .translation-welcome-logo {
3831   height: 32px;
3832   width: 32px;
3833   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3834   -moz-image-region: rect(0, 64px, 32px, 32px);
3835 }
3836
3837 .translation-welcome-content {
3838   -moz-margin-start: 16px;
3839 }
3840
3841 .translation-welcome-headline {
3842   font-size: larger;
3843   font-weight: bold;
3844 }
3845
3846 .translation-welcome-body {
3847   padding: 1em 0;
3848   margin: 0 0;
3849 }
3850
3851 /* === END infobar.inc.css === */
3852
3853 notification[value="translation"] {
3854   min-height: 40px;
3855 }
3856
3857 .translation-menupopup {
3858   -moz-appearance: none;
3859 }
3860
3861 /* Loop/ Hello browser styles */
3862
3863 notification[value="loop-sharing-notification"] .button-menubutton-button {
3864   min-width: 0;
3865   border: 0;
3866   margin: 0;
3867 }
3868
3869 notification[value="loop-sharing-notification"] .messageImage {
3870   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3871 }
3872
3873 /* Bookmarks roots menu-items */
3874 #subscribeToPageMenuitem:not([disabled]),
3875 #subscribeToPageMenupopup,
3876 #BMB_subscribeToPageMenuitem:not([disabled]),
3877 #BMB_subscribeToPageMenupopup {
3878   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3879 }
3880
3881 #bookmarksToolbarFolderMenu,
3882 #BMB_bookmarksToolbar,
3883 #panelMenu_bookmarksToolbar {
3884   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3885   -moz-image-region: auto;
3886 }
3887
3888 #BMB_unsortedBookmarks,
3889 #panelMenu_unsortedBookmarks {
3890   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3891   -moz-image-region: auto;
3892 }
3893
3894 #panelMenu_pocket,
3895 #menu_pocket,
3896 #BMB_pocket {
3897   list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3898 }
3899
3900 /* ::::: Keyboard UI Panel ::::: */
3901
3902 .KUI-panel {
3903   color: #FF9F00;
3904   border-style: none;
3905   border-radius: 20px;
3906 }
3907
3908 .KUI-panel[level="top"] {
3909   /*background-color: rgba(27%,27%,27%,.65);*/
3910 }
3911
3912 /* Ctrl-Tab */
3913
3914 #ctrlTab-panel {
3915   padding: 20px 10px 10px;
3916   font-weight: bold;
3917 }
3918
3919 .ctrlTab-favicon[src] {
3920   background-color: #000000;
3921   width: 20px;
3922   height: 20px;
3923   padding: 2px;
3924 }
3925
3926 .ctrlTab-preview-inner > .tabPreview-canvas {
3927 }
3928
3929 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3930   margin-bottom: 2px;
3931 }
3932
3933 .ctrlTab-preview-inner {
3934   padding-bottom: 10px;
3935 }
3936
3937 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3938   padding: 10px;
3939   background-color: #000000;
3940   border-radius: .5em;
3941 }
3942
3943 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3944   color: white;
3945   background-color: #000000;
3946   text-shadow: none;
3947   padding: 8px;
3948   border: 2px solid #9C9CFF;
3949   border-radius: .5em;
3950 }
3951
3952 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3953   margin: -10px -10px 0;
3954 }
3955
3956 #ctrlTab-showAll {
3957   margin-top: .5em;
3958 }
3959
3960 /* Sync Panel */
3961
3962 .sync-panel-icon {
3963   height:32px;
3964   width: 32px;
3965   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3966 }
3967
3968 .sync-panel-inner {
3969   width: 0;
3970   padding-left: 10px;
3971 }
3972
3973 .sync-panel-button-box {
3974   margin-top: 1em;
3975 }
3976
3977 #sync-error-panel-title,
3978 #sync-start-panel-title {
3979   font-size: 120%;
3980   font-weight: bold;
3981   margin-bottom: 5px;
3982 }
3983
3984 #sync-start-panel-subtitle,
3985 #sync-error-panel-subtitle {
3986   margin: 0;
3987 }
3988
3989 /* Status panel */
3990
3991 .statuspanel-label {
3992   margin: 0;
3993   padding: 2px 4px;
3994   background: #404000;
3995   border: 1px none #9C9CFF;
3996   border-top-style: solid;
3997   color: #FF9F00;
3998   text-shadow: none;
3999 }
4000
4001 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4002 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4003   border-right-style: solid;
4004   border-top-right-radius: .3em;
4005   margin-right: 1em;
4006 }
4007
4008 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4009 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4010   border-left-style: solid;
4011   border-top-left-radius: .3em;
4012   margin-left: 1em;
4013 }
4014
4015 /* HACK to abolish devily color on main content */
4016
4017 #content {
4018   background-color: transparent !important;
4019 }
4020
4021 /* === BEGIN fullscreen/warning.inc.css === */
4022
4023 #fullscreen-warning {
4024   align-items: center;
4025   background: rgba(0, 0, 0, 0.9);
4026   border: 2px solid #A09090;
4027   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4028   border-radius: 8px;
4029   padding: 24px 16px;
4030   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4031 }
4032
4033 #fullscreen-warning::before {
4034   margin: 0;
4035   width: 24px; height: 24px;
4036 }
4037
4038 #fullscreen-warning.verifiedIdentity::before,
4039 #fullscreen-warning.verifiedDomain::before {
4040   content: url("chrome://browser/skin/fullscreen/secure.svg");
4041 }
4042
4043 #fullscreen-warning.unknownIdentity::before {
4044   content: url("chrome://browser/skin/fullscreen/insecure.svg");
4045 }
4046
4047 #fullscreen-domain-text,
4048 #fullscreen-generic-text {
4049   font-size: 21px;
4050   font-weight: lighter;
4051   color: #A09090;
4052   margin: 0 16px;
4053 }
4054
4055 #fullscreen-domain {
4056   font-weight: bold;
4057   margin: 0;
4058 }
4059
4060 #fullscreen-exit-button {
4061   padding: 0 30px;
4062   font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4063   font-size: 14px;
4064   font-weight: lighter;
4065   margin: 0;
4066   height: 28px;
4067   box-sizing: content-box;
4068
4069   border-radius: 300px;
4070   border: none;
4071   background-color: #C09070;
4072   color: #000000;
4073 }
4074
4075 /* === END fullscreen/warning.inc.css === */
4076
4077 /* === BEGIN commandline.inc.css === */
4078
4079 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4080    We are copy/pasting variables from light-theme and dark-theme,
4081    since they aren't loaded in this context (within browser.css). */
4082 :root #developer-toolbar {
4083   --gcli-background-color: #000000; /* --theme-toolbar-background */
4084   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4085   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4086   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4087   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4088   --selection-background: #008484; /* --theme-selection-background */
4089   --selection-color: #000000; /* --theme-selection-color */
4090 }
4091
4092 /* Developer toolbar */
4093
4094 #developer-toolbar {
4095   border-top: 3px solid var(--gcli-background-color);
4096   border-bottom: none;
4097 }
4098
4099 #developer-toolbar .toolbar-holder {
4100   background-color: #8050B0;
4101   color: #FFCF00;
4102 }
4103
4104 #developer-toolbar .toolbar-holder {
4105   background-color: #8050B0;
4106   color: #FFCF00;
4107 }
4108
4109 #developer-toolbar .toolbar-startcap,
4110 #developer-toolbar .toolbar-endcap{
4111   background-color: #6000CF;
4112 }
4113
4114 #developer-toolbar {
4115 /*  padding: 0;
4116   min-height: 32px; */
4117 }
4118
4119 #developer-toolbar > toolbarbutton {
4120 /*  margin: 0;
4121   padding: 0 10px;
4122   width: 32px; */
4123 }
4124
4125 .developer-toolbar-button > image {
4126 /*  margin: auto 10px; */
4127 }
4128
4129 #developer-toolbar-toolbox-button > label {
4130   display: none;
4131 }
4132
4133 .developer-toolbar-button > .toolbarbutton-icon,
4134 #developer-toolbar-closebutton > .toolbarbutton-icon {
4135   width: 16px;
4136   height: 16px;
4137 }
4138
4139 #developer-toolbar-toolbox-button {
4140   list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4141   -moz-image-region: rect(0px, 16px, 16px, 0px);
4142 }
4143
4144 #developer-toolbar-toolbox-button > label {
4145   display: none;
4146 }
4147
4148 #developer-toolbar-toolbox-button:hover,
4149 #developer-toolbar-toolbox-button:hover:active,
4150 #developer-toolbar-toolbox-button[checked=true] {
4151   -moz-image-region: rect(0px, 32px, 16px, 16px);
4152 }
4153
4154 @media (min-resolution: 2dppx) {
4155   #developer-toolbar-toolbox-button {
4156     list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4157     -moz-image-region: rect(0px, 32px, 32px, 0px);
4158   }
4159
4160   #developer-toolbar-toolbox-button:hover,
4161   #developer-toolbar-toolbox-button:hover:active,
4162   #developer-toolbar-toolbox-button[checked=true] {
4163     -moz-image-region: rect(0px, 64px, 32px, 32px);
4164   }
4165 }
4166
4167 #developer-toolbar-closebutton {
4168   list-style-image: url("chrome://browser/skin/devtools/close.png");
4169   -moz-image-region: rect(0px, 16px, 16px, 0px);
4170   min-width: 16px;
4171   width: 16px;
4172 }
4173
4174 #developer-toolbar-closebutton > .toolbarbutton-icon {
4175 }
4176
4177 #developer-toolbar-closebutton > .toolbarbutton-text {
4178   display: none;
4179 }
4180
4181 #developer-toolbar-closebutton:hover,
4182 #developer-toolbar-closebutton:hover:active {
4183   -moz-image-region: rect(0px, 32px, 16px, 16px);
4184 }
4185
4186 @media (min-resolution: 2dppx) {
4187   #developer-toolbar-closebutton {
4188     list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4189     -moz-image-region: rect(0px, 32px, 32px, 0px);
4190   }
4191
4192   #developer-toolbar-closebutton:hover,
4193   #developer-toolbar-closebutton:hover:active {
4194     -moz-image-region: rect(0px, 64px, 32px, 32px);
4195   }
4196 }
4197
4198 /* GCLI */
4199
4200 html|*#gcli-tooltip-frame,
4201 html|*#gcli-output-frame {
4202   padding: 0;
4203   border-width: 0;
4204   background-color: transparent;
4205 }
4206
4207 #gcli-output,
4208 #gcli-tooltip {
4209   border-width: 0;
4210   background-color: transparent;
4211 }
4212
4213 .gclitoolbar-input-node,
4214 .gclitoolbar-complete-node {
4215   margin: 1px 3px;
4216   -moz-box-align: center;
4217   padding-top: 0;
4218   padding-bottom: 0;
4219   padding-right: 8px;
4220   background-color: transparent;
4221 }
4222
4223 .gclitoolbar-input-node {
4224 /*  line-height: 32px;
4225   outline-style: none; */
4226   background-repeat: no-repeat;
4227   background-color: var(--gcli-input-background);
4228 }
4229
4230 .gclitoolbar-input-node[focused="true"] {
4231   background-color: var(--gcli-input-focused-background);
4232 }
4233
4234 .gclitoolbar-input-node::before {
4235   content: "";
4236   display: inline-block;
4237   -moz-box-ordinal-group: 0;
4238   width: 16px;
4239   height: 16px;
4240   margin: 0 2px;
4241   background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4242   background-position: 0 center;
4243   background-size: 32px 16px;
4244 }
4245
4246 .gclitoolbar-input-node[focused="true"]::before {
4247   background-position: -16px center;
4248 }
4249
4250 @media (min-resolution: 2dppx) {
4251   .gclitoolbar-input-node::before {
4252     background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4253   }
4254 }
4255
4256 .gclitoolbar-input-node:not([focused="true"]) {
4257   border-color: transparent;
4258 }
4259
4260 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4261   background-color: var(--selection-background);
4262   color: var(--selection-color);
4263 }
4264
4265 .gclitoolbar-complete-node {
4266   padding-left: 21px;
4267   background-color: transparent;
4268   color: transparent;
4269   z-index: 100;
4270   pointer-events: none;
4271 }
4272
4273 .gcli-in-incomplete,
4274 .gcli-in-error,
4275 .gcli-in-ontab,
4276 .gcli-in-todo,
4277 .gcli-in-closebrace,
4278 .gcli-in-param,
4279 .gcli-in-valid {
4280   margin: 0;
4281   padding: 0;
4282 }
4283
4284 .gcli-in-incomplete {
4285   border-bottom: 2px dotted #8050B0;
4286 }
4287
4288 .gcli-in-error {
4289   border-bottom: 2px dotted #FF0000;
4290 }
4291
4292 .gcli-in-ontab {
4293   color: #9C9CFF;
4294 }
4295
4296 .gcli-in-todo {
4297   color: #795900;
4298 }
4299
4300 .gcli-in-closebrace {
4301   color: #8050B0;
4302 }
4303
4304 /* === END commandline.inc.css === */
4305
4306 /* === BEGIN responsivedesign.inc.css === */
4307
4308 /* Responsive Mode */
4309
4310 .browserContainer[responsivemode] {
4311   background-color: #221500;
4312   padding: 0 20px 20px 20px;
4313 }
4314
4315 .browserStack[responsivemode] {
4316   box-shadow: 0 0 7px #9C9CFF;
4317 }
4318
4319 .devtools-responsiveui-toolbar {
4320   background: transparent;
4321   /* text color is textColor from dark theme, since no theme is applied to
4322    * the responsive toolbar.
4323    */
4324   color: #FF9F00;
4325   margin: 10px 0;
4326   padding: 0;
4327   box-shadow: none;
4328   border-bottom-width: 0;
4329 }
4330
4331 .devtools-responsiveui-menulist,
4332 .devtools-responsiveui-toolbarbutton {
4333   -moz-box-align: center;
4334   min-width: 32px;
4335 /*  min-height: 22px;*/
4336 /*  margin: 0 3px; */
4337 }
4338
4339 .devtools-responsiveui-menulist .menulist-editable-box {
4340   background-color: transparent;
4341 }
4342
4343 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4344   color: inherit;
4345   text-align: center;
4346 }
4347
4348 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4349 /*  background: hsla(212,7%,57%,.35);*/
4350 }
4351
4352 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4353   width: 16px;
4354   height: 16px;
4355 }
4356
4357 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4358   -moz-box-orient: horizontal;
4359 }
4360
4361 .devtools-responsiveui-menulist:-moz-focusring,
4362 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4363 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4364   outline-offset: -4px;*/
4365 }
4366
4367 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4368   display: none;
4369 }
4370
4371 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4372 /*  border-color: hsla(210,8%,5%,.6);
4373   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4374   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4375 }
4376
4377 .devtools-responsiveui-menulist[open=true],
4378 .devtools-responsiveui-toolbarbutton[open=true],
4379 .devtools-responsiveui-toolbarbutton[checked=true] {
4380 /*  border-color: hsla(210,8%,5%,.6) !important;
4381   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4382   box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4383 }
4384
4385 .devtools-responsiveui-toolbarbutton[checked=true] {
4386 /*  color: hsl(208,100%,60%); */
4387 }
4388
4389 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4390 /*  background-color: transparent !important;*/
4391 }
4392
4393 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4394 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4395 }
4396
4397 .devtools-responsiveui-menulist > .menulist-label-box {
4398   text-align: center;
4399 }
4400
4401 .devtools-responsiveui-menulist > .menulist-dropmarker {
4402 /*  display: -moz-box;
4403   background-color: transparent;
4404   list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4405   -moz-box-align: center;
4406   border-width: 0;
4407   min-width: 16px;*/
4408 }
4409
4410 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4411 /*  color: inherit;
4412   border-width: 0;
4413   -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4414   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4415 }
4416
4417 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4418 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4419 }
4420
4421 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4422 /*  padding: 0 1px;*/
4423   -moz-box-align: stretch;
4424 }
4425
4426 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4427 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4428 /*  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4429   -moz-box-align: center;
4430   padding: 0 3px;*/
4431 }
4432
4433 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4434 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4435   margin-left: 3px;
4436 }
4437
4438 .devtools-responsiveui-close {
4439   list-style-image: url("chrome://browser/skin/devtools/close.png");
4440   -moz-image-region: rect(0px,16px,16px,0px);
4441 }
4442
4443 .devtools-responsiveui-close:hover {
4444   -moz-image-region: rect(0px,32px,16px,16px);
4445 }
4446
4447 .devtools-responsiveui-rotate {
4448   list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4449   -moz-image-region: rect(0px,16px,16px,0px);
4450 }
4451
4452 .devtools-responsiveui-rotate:hover {
4453   -moz-image-region: rect(0px,32px,16px,16px);
4454 }
4455
4456 @media (min-resolution: 2dppx) {
4457   .devtools-responsiveui-close {
4458     list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4459   }
4460
4461   .devtools-responsiveui-close:hover {
4462     -moz-image-region: rect(0px,64px,32px,32px);
4463   }
4464
4465   .devtools-responsiveui-rotate {
4466     list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4467   }
4468
4469   .devtools-responsiveui-rotate:hover {
4470     -moz-image-region: rect(0px,64px,32px,32px);
4471   }
4472 }
4473
4474 .devtools-responsiveui-touch {
4475   list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4476   -moz-image-region: rect(0px,16px,16px,0px);
4477 }
4478
4479 .devtools-responsiveui-touch:hover,
4480 .devtools-responsiveui-touch[checked],
4481 .devtools-responsiveui-touch[checked]:hover {
4482   -moz-image-region: rect(0px,32px,16px,16px);
4483 }
4484
4485 @media (min-resolution: 2dppx) {
4486   .devtools-responsiveui-touch {
4487     list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4488     -moz-image-region: rect(0px,32px,32px,0px);
4489   }
4490
4491   .devtools-responsiveui-touch:hover,
4492   .devtools-responsiveui-touch[checked],
4493   .devtools-responsiveui-touch[checked]:hover {
4494     -moz-image-region: rect(0px,64px,32px,32px);
4495   }
4496 }
4497
4498 .devtools-responsiveui-screenshot {
4499   list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4500   -moz-image-region: rect(0px,16px,16px,0px);
4501 }
4502
4503 .devtools-responsiveui-screenshot:hover {
4504   -moz-image-region: rect(0px,32px,16px,16px);
4505 }
4506
4507 @media (min-resolution: 2dppx) {
4508   .devtools-responsiveui-screenshot {
4509     list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4510   }
4511
4512   .devtools-responsiveui-screenshot:hover {
4513     -moz-image-region: rect(0px,64px,32px,32px);
4514   }
4515 }
4516
4517 .devtools-responsiveui-resizebarV {
4518   width: 7px;
4519   height: 24px;
4520   cursor: ew-resize;
4521   transform: translate(12px, -12px);
4522   background-size: cover;
4523   background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4524 }
4525
4526 .devtools-responsiveui-resizebarH {
4527   width: 24px;
4528   height: 7px;
4529   cursor: ns-resize;
4530   transform: translate(-12px, 12px);
4531   background-size: cover;
4532   background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4533 }
4534
4535 .devtools-responsiveui-resizehandle {
4536   width: 16px;
4537   height: 16px;
4538   cursor: se-resize;
4539   transform: translate(12px, 12px);
4540   background-size: cover;
4541   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4542 }
4543
4544 /* FxOS custom mode with additional buttons and phone look'n feel */
4545
4546 /* Hide devtools manual resizer */
4547 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4548 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4549 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4550   display: none;
4551 }
4552
4553 /* Gives responsive mode a phone look'n feel */
4554 .browserStack[responsivemode].fxos-mode {
4555   padding: 60px 15px 0;
4556
4557   border-radius: 25px / 20px;
4558   border-bottom-left-radius: 0;
4559   border-bottom-right-radius: 0;
4560   border: 1px solid #FFFFFF;
4561   border-bottom-width: 0;
4562
4563   background-color: #353535;
4564
4565   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4566
4567   background-image: linear-gradient(to right, #111 11%, #333 56%);
4568   min-width: 320px;
4569 }
4570
4571 .devtools-responsiveui-hardware-buttons {
4572   -moz-appearance: none;
4573   padding: 20px;
4574
4575   border: 1px solid #FFFFFF;
4576   border-bottom-left-radius: 25px;
4577   border-bottom-right-radius: 25px;
4578   border-top-width: 0;
4579
4580   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4581
4582   background-image: linear-gradient(to right, #111 11%, #333 56%);
4583 }
4584
4585 .devtools-responsiveui-home-button {
4586   -moz-user-focus: ignore;
4587   width: 40px;
4588   height: 30px;
4589   list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4590 }
4591
4592 .devtools-responsiveui-sleep-button {
4593   -moz-user-focus: ignore;
4594   -moz-appearance: none;
4595   /* compensate browserStack top padding */
4596   margin-top: -67px;
4597   margin-right: 10px;
4598
4599   min-width: 10px;
4600   width: 50px;
4601   height: 5px;
4602
4603   border: 1px solid #444;
4604   border-top-right-radius: 12px;
4605   border-top-left-radius: 12px;
4606   border-bottom-color: transparent;
4607
4608   background-image: linear-gradient(to top, #111 11%, #333 56%);
4609 }
4610
4611 .devtools-responsiveui-sleep-button:hover:active {
4612   background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4613 }
4614
4615 .devtools-responsiveui-volume-buttons {
4616   margin-left: -29px;
4617 }
4618
4619 .devtools-responsiveui-volume-up-button,
4620 .devtools-responsiveui-volume-down-button {
4621   -moz-user-focus: ignore;
4622   -moz-appearance: none;
4623   border: 1px solid red;
4624   min-width: 8px;
4625   height: 40px;
4626
4627   border: 1px solid #444;
4628   border-right-color: transparent;
4629
4630   background-image: linear-gradient(to right, #111 11%, #333 56%);
4631 }
4632
4633 .devtools-responsiveui-volume-up-button:hover:active,
4634 .devtools-responsiveui-volume-down-button:hover:active {
4635   background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4636 }
4637
4638 .devtools-responsiveui-volume-up-button {
4639   border-top-left-radius: 12px;
4640 }
4641
4642 .devtools-responsiveui-volume-down-button {
4643   border-bottom-left-radius: 12px;
4644 }
4645
4646 @media (min-resolution: 2dppx) {
4647   .devtools-responsiveui-resizebarV {
4648     background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4649   }
4650
4651   .devtools-responsiveui-resizebarH {
4652     background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4653   }
4654
4655   .devtools-responsiveui-resizehandle {
4656     background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4657   }
4658 }
4659
4660 /* === END responsivedesign.inc.css === */
4661
4662 /* === including indicator.css is done at the start of the file === */
4663
4664 /* Error counter */
4665
4666 #developer-toolbar-toolbox-button[error-count]:before {
4667   color: #000000;
4668   min-width: 16px;
4669   text-shadow: none;
4670   background-color: #FF0000;
4671   border-radius: 1px;
4672   -moz-margin-end: 5px;
4673 }
4674
4675 /* Social toolbar item */
4676
4677 #social-notification-icon-mentions {
4678   background-color: #000000;
4679   border-radius: 3px;
4680   -moz-margin-start: 2px;
4681 }
4682
4683 #social-notification-icon-mentions:hover {
4684   background-color: #FFCF00;
4685 }
4686
4687 #social-notification-icon-mentions[open="true"] {
4688   background-color: #FF9F00;
4689 }
4690
4691 #social-sidebar-splitter {
4692   border: 0;
4693 }
4694
4695 #socialActivatedNotification .popup-notification-button-container {
4696   margin-left: 6px;
4697 }
4698
4699 .social-activation-icon {
4700   width: auto;
4701   height: auto;
4702   max-height: 64px;
4703   max-width: 64px;
4704 }
4705
4706 #social-activation-message {
4707   max-width: 250px;
4708 }
4709
4710 #social-activation-message > label {
4711   margin: 0;
4712 }
4713
4714 /* social toolbar provider menu */
4715 .social-statusarea-popup {
4716   margin-top: 0;
4717   margin-left: -12px;
4718   margin-right: -12px;
4719 }
4720
4721 .social-statusarea-user {
4722   border-bottom: 1px solid #9C9CFF;
4723   background-color: #000000;
4724   color: #FF9F00;
4725   position: relative;
4726   cursor: pointer;
4727 }
4728
4729 .social-statusarea-user-portrait {
4730   width: 32px;
4731   height: 32px;
4732   border-radius: 2px;
4733   margin: 10px;
4734 }
4735
4736 .social-statusarea-loggedInStatus {
4737   background: transparent;
4738   border: none;
4739   color: #3333FF;
4740   min-width: 0;
4741   margin: 0 6px;
4742   list-style-image: none;
4743 }
4744
4745 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4746   text-decoration: underline;
4747 }
4748
4749 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4750   padding: 0;
4751 }
4752
4753 .social-panel-frame {
4754   border-radius: inherit;
4755 }
4756
4757 /* === BEGIN chat.inc.css === */
4758
4759 #social-sidebar-header {
4760   padding: 3px;
4761 }
4762
4763 #manage-share-providers,
4764 #social-sidebar-button {
4765   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4766   -moz-image-region: rect(0, 468px, 18px, 450px);
4767 }
4768
4769 #social-sidebar-button {
4770   -moz-appearance: none;
4771   border: none;
4772   padding: 0;
4773   margin: 2px;
4774 }
4775 #manage-share-providers > .toolbarbutton-icon,
4776 #social-sidebar-button > .toolbarbutton-icon {
4777   min-height: 18px;
4778   min-width: 18px;
4779 }
4780 #manage-share-providers:hover,
4781 #manage-share-providers:hover:active,
4782 #social-sidebar-button:hover,
4783 #social-sidebar-button:hover:active {
4784   -moz-image-region: rect(18px, 468px, 36px, 450px);
4785 }
4786 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4787   display: none;
4788 }
4789
4790 #social-sidebar-button[loading="true"] {
4791   list-style-image: url("chrome://global/skin/icons/loading.gif");
4792 }
4793
4794 #social-sidebar-favico {
4795   max-height: 16px;
4796   max-width: 16px;
4797   padding: 0;
4798   margin: 2px;
4799 }
4800
4801 .chat-status-icon {
4802   max-height: 16px;
4803   max-width: 16px;
4804   padding: 0;
4805 }
4806
4807 .chat-toolbarbutton {
4808   -moz-appearance: none;
4809   border: none;
4810   padding: 0 3px;
4811   margin: 0;
4812   background: none;
4813 }
4814
4815 .chat-toolbarbutton:hover {
4816 /*  background-color: rgba(255,255,255,.35);*/
4817 }
4818
4819 .chat-toolbarbutton:hover:active {
4820 /*  background-color: rgba(255,255,255,.5);*/
4821 }
4822
4823 .chat-toolbarbutton > .toolbarbutton-text {
4824   display: none;
4825 }
4826
4827 .chat-toolbarbutton > .toolbarbutton-icon {
4828   width: 16px;
4829   height: 16px;
4830 }
4831
4832 .chat-close-button {
4833   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4834 }
4835
4836 .chat-close-button:-moz-any(:hover,:hover:active) {
4837   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4838 }
4839
4840 .chat-minimize-button {
4841   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4842 }
4843
4844 .chat-minimize-button:-moz-any(:hover,:hover:active) {
4845   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4846 }
4847
4848 .chat-swap-button {
4849   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4850   transform: rotate(180deg);
4851 }
4852
4853 .chat-swap-button:-moz-any(:hover,:hover:active) {
4854   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4855 }
4856
4857 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4858   transform: none;
4859 }
4860
4861 .chat-title {
4862   font-weight: bold;
4863   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4864   text-shadow: none;
4865   cursor: inherit;
4866 }
4867
4868 .chat-titlebar {
4869   background-color: #9C9CFF;
4870   color: #000000;
4871   height: 30px;
4872   min-height: 30px;
4873   width: 100%;
4874   margin: 0;
4875   padding: 7px 6px;
4876   border: none;
4877   border-bottom: 1px solid #008484;
4878   cursor: pointer;
4879 }
4880
4881 .chat-titlebar > .notification-anchor-icon {
4882   margin-left: 2px;
4883   margin-right: 2px;
4884 }
4885
4886 .chat-titlebar[minimized="true"] {
4887   border-bottom: none;
4888 }
4889
4890 .chat-titlebar[selected] {
4891   background-color: #008484;
4892 }
4893
4894 .chat-titlebar[activity] {
4895   background-color: #E7ADE7;
4896 }
4897
4898 chatbox[dark=true] > .chat-titlebar,
4899 chatbox[dark=true] > .chat-titlebar[selected] {
4900 /*  border-bottom: none;
4901   background-color: #000;
4902   background-image: none;*/
4903 }
4904
4905 chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
4906 /*  font-weight: normal;
4907   color: #c1c1c1;*/
4908 }
4909
4910 .chat-frame {
4911   padding: 0;
4912   margin: 0;
4913   overflow: hidden;
4914 }
4915
4916 .chatbar-button {
4917   list-style-image: url("chrome://browser/skin/social/services-16.png");
4918