fourth part of syncing LCARStrek with Firefox 42-44 windows theme changes
[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 .searchbar-engine-button,
1948 .search-go-container {
1949   padding: 2px;
1950 }
1951
1952 .search-go-container > .search-go-button {
1953   padding: 0;
1954 }
1955
1956 #urlbar-search-footer {
1957   border-top: 1px solid #A09090;
1958 }
1959
1960 #urlbar-search-settings {
1961 }
1962
1963 #urlbar-search-settings:hover {
1964 }
1965
1966 #urlbar-search-settings:hover:active {
1967 }
1968
1969 #urlbar-search-splitter {
1970   min-width: 6px;
1971   -moz-margin-start: -3px;
1972   border: none;
1973   background: transparent;
1974 }
1975
1976 #urlbar-search-splitter + #urlbar-container > #urlbar,
1977 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1978   -moz-margin-start: 0;
1979 }
1980
1981 #urlbar-display-box {
1982 }
1983
1984 .urlbar-display {
1985   -moz-border-end: 1px solid #9C9CFF;
1986   -moz-margin-end: 3px;
1987   margin-top: 0;
1988   margin-bottom: 0;
1989   -moz-margin-start: 0;
1990   color: #8050B0;
1991 }
1992
1993 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1994
1995 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1996   border-bottom: 1px solid #A09090;
1997   background-color: #000000;
1998   padding: 6px 0;
1999   -moz-padding-start: 44px;
2000   -moz-padding-end: 6px;
2001   background-image: url("chrome://browser/skin/info.svg");
2002   background-clip: padding-box;
2003   background-position: 20px center;
2004   background-repeat: no-repeat;
2005   background-size: 16px 16px;
2006 }
2007
2008 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2009   background-position: right 20px center;
2010 }
2011
2012 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2013   margin: 0;
2014   padding: 0;
2015 }
2016
2017 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2018   -moz-margin-start: 0;
2019 }
2020
2021 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2022   -moz-appearance: none;
2023   -moz-user-focus: ignore;
2024   min-width: 80px;
2025   border-radius: 3px;
2026   padding: 4px 16px;
2027   margin: 0;
2028   -moz-margin-start: 10px;
2029 }
2030
2031 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2032 }
2033
2034 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2035 }
2036
2037 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2038 }
2039
2040 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2041 }
2042
2043 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2044
2045 #search-container {
2046   min-width: calc(54px + 11ch);
2047 }
2048
2049 /* identity box */
2050
2051 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2052   var(--identity-box-verified-background-color);
2053 }
2054
2055 #identity-box:-moz-focusring {
2056   outline: 1px dotted #008484;
2057   outline-offset: -1px;
2058 }
2059
2060 #identity-box.verifiedDomain:-moz-focusring,
2061 #identity-box.verifiedIdentity:-moz-focusring {
2062   outline-color: #000000;
2063 }
2064
2065 /* Location bar dropmarker */
2066
2067 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2068   background-color: transparent;
2069 }
2070
2071 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2072 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2073 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2074   border: none;
2075   border-radius: 0px;
2076 }
2077
2078 .urlbar-history-dropmarker:hover {
2079 }
2080
2081 .urlbar-history-dropmarker:hover:active,
2082 .urlbar-history-dropmarker[open="true"] {
2083 }
2084
2085 /* page proxy icon */
2086
2087 /* === BEGIN identity-block.inc.css === */
2088
2089 #identity-box {
2090   --identity-box-verified-color: #008484;
2091   /* Default theme does different color per channel, we can't as they do it build-time. */
2092   --identity-box-chrome-color: #9C9CFF;
2093
2094   border-inline-end: 1px solid --urlbar-separator-color);
2095   font-size: .9em;
2096   border-radius: 2px;
2097   padding: 3px 5px;
2098   margin-inline-end: 4px;
2099   overflow: hidden;
2100   /* The latter two properties have a transition to handle the delayed hiding of
2101      the forward button when hovered. */
2102   transition: background-color 150ms ease, padding-left, padding-right;
2103 }
2104
2105 #identity-box:-moz-locale-dir(ltr) {
2106   border-top-right-radius: 0;
2107   border-bottom-right-radius: 0;
2108 }
2109
2110 #identity-box:-moz-locale-dir(rtl) {
2111   border-top-left-radius: 0;
2112   border-bottom-left-radius: 0;
2113 }
2114
2115 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2116   color: var(--identity-box-chrome-color);
2117   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2118 }
2119
2120 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2121   color: var(--identity-box-verified-color);
2122   -moz-border-end: 1px solid var(--identity-box-verified-color);
2123 }
2124
2125 #notification-popup-box:not([hidden]) + #identity-box {
2126   padding-inline-start: 10px !important;
2127   border-radius: 0;
2128 }
2129
2130 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2131 /*   border-radius: 0; */
2132   -moz-padding-start: 2px;
2133   -moz-padding-end: 2px;
2134   -moz-margin-end: 1px;
2135 }
2136
2137 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2138     #notification-popup-box[hidden] + #identity-box {
2139   padding-inline-start: 2px;
2140 }
2141
2142 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2143     #notification-popup-box[hidden] + #identity-box {
2144   /* Forward button hiding is delayed when hovered, so we should use the same
2145      delay for the identity box. We handle both horizontal paddings (for LTR and
2146      RTL), the latter two delays here are for padding-left and padding-right. */
2147   transition-delay: 0s, 100s, 100s;
2148 }
2149
2150 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2151     #notification-popup-box[hidden] + #identity-box {
2152   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2153   padding-inline-start: 2.01px;
2154 }
2155
2156 /* TRACKING PROTECTION ICON */
2157
2158 #tracking-protection-icon {
2159   width: 16px;
2160   height: 16px;
2161   margin-inline-start: 0;
2162   list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2163   opacity: 1;
2164 }
2165
2166 #tracking-protection-icon[state="loaded-tracking-content"] {
2167   list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2168 }
2169
2170 #tracking-protection-icon[animate] {
2171   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2172 }
2173
2174 #tracking-protection-icon:not([state]) {
2175   margin-inline-start: -18px;
2176   pointer-events: none;
2177   opacity: 0;
2178   /* Only animate the shield in, when it disappears hide it immediately. */
2179   transition: none;
2180 }
2181
2182 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2183   visibility: collapse;
2184 }
2185
2186 /* MAIN IDENTITY ICON */
2187
2188 #page-proxy-favicon {
2189   width: 16px;
2190   height: 16px;
2191   list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2192   margin: 2px;
2193 }
2194
2195 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2196   list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2197 }
2198
2199 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2200 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2201   list-style-image: url("chrome://browser/skin/identity-secure.svg");
2202 }
2203
2204 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2205   list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2206 }
2207
2208 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2209 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2210 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2211   list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2212 }
2213
2214 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2215   list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2216 }
2217
2218 #page-proxy-favicon[pageproxystate="invalid"] {
2219   opacity: 0.3;
2220 }
2221
2222 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2223   list-style-image: url("chrome://branding/content/icon64.png");
2224 }
2225
2226 #identity-popup-brandName {
2227   font-weight: bold;
2228   font-size: 1.25em;
2229   margin-top: .5em;
2230   margin-bottom: .5em;
2231 }
2232
2233 #identity-popup-content-box {
2234   max-width: 50ch;
2235 }
2236
2237 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2238   -moz-image-region: inherit;
2239   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2240   width: 16px;
2241   height: 16px;
2242   opacity: 1;
2243 }
2244
2245 /* MAIN IDENTITY ICON */
2246
2247 #identity-icon {
2248   width: 16px;
2249   height: 16px;
2250   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2251 }
2252
2253 #identity-box:hover > #identity-icon,
2254 #identity-box[open=true] > #identity-icon {
2255   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2256 }
2257
2258 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2259   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2260 }
2261
2262 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2263   opacity: 0.3;
2264 }
2265
2266 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2267   -moz-image-region: inherit;
2268   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2269   width: 16px;
2270   height: 16px;
2271   opacity: 1;
2272 }
2273
2274 /* TRACKING PROTECTION ICON */
2275
2276 #tracking-protection-icon {
2277   width: 16px;
2278   height: 16px;
2279   margin-inline-start: 2px;
2280   margin-inline-end: 0;
2281   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2282   opacity: 1;
2283 }
2284
2285 #tracking-protection-icon[state="loaded-tracking-content"] {
2286   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2287 }
2288
2289 #tracking-protection-icon[animate] {
2290   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2291 }
2292
2293 #tracking-protection-icon:not([state]) {
2294   margin-inline-end: -18px;
2295   pointer-events: none;
2296   opacity: 0;
2297   /* Only animate the shield in, when it disappears hide it immediately. */
2298   transition: none;
2299 }
2300
2301 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2302   visibility: collapse;
2303 }
2304
2305 /* CONNECTION ICON */
2306
2307 #connection-icon {
2308   width: 16px;
2309   height: 16px;
2310   margin-inline-start: 2px;
2311   visibility: collapse;
2312 }
2313
2314 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2315 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2316   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2317   visibility: visible;
2318 }
2319
2320 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2321 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2322   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2323   visibility: visible;
2324 }
2325
2326 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2327 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2328 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2329   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2330   visibility: visible;
2331 }
2332
2333 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2334   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2335   visibility: visible;
2336 }
2337
2338 /* === END identity-block.inc.css === */
2339
2340 #page-proxy-favicon {
2341   -moz-image-region: rect(0, 16px, 16px, 0);
2342 }
2343
2344 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2345 /*  -moz-margin-end: 1px;*/
2346 }
2347
2348 #identity-box:hover > #page-proxy-favicon {
2349   -moz-image-region: rect(0, 32px, 16px, 16px);
2350 }
2351
2352 #identity-box:hover:active > #page-proxy-favicon,
2353 #identity-box[open=true] > #page-proxy-favicon {
2354   -moz-image-region: rect(0, 48px, 16px, 32px);
2355 }
2356
2357 #identity-box:hover {
2358   background-color: #FFCF00;
2359   color: #000000;
2360 }
2361
2362 #identity-box:hover:active,
2363 #identity-box[open=true] {
2364   background-color: #FF9F00;
2365   color: #000000;
2366 }
2367
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2369 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2370 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2371   background-color: #9C9CFF;
2372   color: #000000;
2373 }
2374
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2376 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2377 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2378   background-color: #008484;
2379   color: #000000;
2380 }
2381
2382 /* autocomplete */
2383
2384 #treecolAutoCompleteImage {
2385   max-width: 36px;
2386 }
2387
2388 .ac-result-type-bookmark,
2389 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2390   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2391   -moz-image-region: rect(0px 16px 16px 0px);
2392   width: 16px;
2393   height: 16px;
2394 }
2395
2396 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2397 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2398 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2399 }
2400
2401 .ac-result-type-keyword,
2402 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2403 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2404   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2405   width: 16px;
2406   height: 16px;
2407 }
2408
2409   .ac-result-type-keyword[selected="true"],
2410   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2411   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2412     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2413   }
2414
2415 .ac-result-type-tag,
2416 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2417   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2418   width: 16px;
2419   height: 16px;
2420 }
2421
2422 .ac-comment,
2423 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2424 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2425   font-size: 1.05em;
2426 }
2427
2428 .ac-extra > .ac-comment,
2429 .ac-url-text,
2430 .ac-action-text {
2431   font-size: 1em;
2432 }
2433
2434 .ac-url-text,
2435 .ac-action-text {
2436   color: #9C9CFF;
2437 }
2438
2439 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2440   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2441   -moz-image-region: rect(0, 16px, 16px, 0);
2442   padding: 0 3px;
2443   width: 22px;
2444   height: 16px;
2445 }
2446
2447 @media (min-resolution: 1.1dppx) {
2448   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2449     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2450     -moz-image-region: rect(0, 32px, 32px, 0);
2451   }
2452 }
2453
2454 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2455   -moz-image-region: rect(16px, 16px, 32px, 0);
2456 }
2457
2458 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2459   color: #8050B0;
2460 }
2461
2462 .ac-comment[selected="true"],
2463 .ac-url-text[selected="true"],
2464 .ac-action-text[selected="true"] {
2465   color: inherit !important;
2466 }
2467
2468 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2469 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2470 {
2471   color: #8050B0;
2472   font-size: smaller;
2473 }
2474
2475 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2476   border-top: 1px solid #9C9CFF;
2477 }
2478
2479 /* combined go/reload/stop button in location bar */
2480
2481 #urlbar-go-button,
2482 #urlbar-reload-button,
2483 #urlbar-stop-button {
2484   border-style: none;
2485   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2486 /*  padding: 0 9px;*/
2487   margin-inline-start: 0px;
2488   border-inline-start: 1px solid var(--urlbar-separator-color);
2489   border-image: linear-gradient(transparent 15%,
2490                                 var(--urlbar-separator-color) 15%,
2491                                 var(--urlbar-separator-color) 85%,
2492                                 transparent 85%);
2493   border-image-slice: 1;
2494 }
2495
2496 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2497   border-top-left-radius: 0px;
2498   border-bottom-left-radius: 0px;
2499 }
2500
2501 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2502   border-top-right-radius: 0px;
2503   border-bottom-right-radius: 0px;
2504 }
2505
2506 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2507 #urlbar-reload-button:not(:hover) {
2508   -moz-border-start-style: none;
2509   -moz-padding-start: 3px;
2510 }
2511
2512 #urlbar-reload-button {
2513   -moz-image-region: rect(0px, 14px, 14px, 0px);
2514 }
2515
2516 #urlbar-reload-button[disabled=true] {
2517   -moz-image-region: rect(28px, 14px, 42px, 0px);
2518 }
2519
2520 #urlbar-reload-button:not([disabled=true]):hover {
2521   -moz-image-region: rect(14px, 14px, 28px, 0px);
2522 }
2523
2524 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2525   transform: scaleX(-1);
2526 }
2527
2528 #urlbar-go-button {
2529   -moz-image-region: rect(0, 42px, 14px, 28px);
2530 }
2531
2532 #urlbar-go-button:hover {
2533   -moz-image-region: rect(14px, 42px, 28px, 28px);
2534 }
2535
2536 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2537   transform: scaleX(-1);
2538 }
2539
2540 #urlbar-stop-button {
2541   -moz-image-region: rect(0px, 28px, 14px, 14px);
2542 }
2543
2544 #urlbar-stop-button:hover {
2545   -moz-image-region: rect(14px, 28px, 28px, 14px);
2546 }
2547
2548 @media (min-resolution: 1.1dppx) {
2549   #urlbar-go-button,
2550   #urlbar-reload-button,
2551   #urlbar-stop-button {
2552     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2553   }
2554
2555   #urlbar-go-button > .toolbarbutton-icon,
2556   #urlbar-reload-button > .toolbarbutton-icon,
2557   #urlbar-stop-button > .toolbarbutton-icon {
2558     width: 14px;
2559   }
2560
2561   #urlbar-go-button {
2562     -moz-image-region: rect(0, 84px, 28px, 56px);
2563   }
2564
2565   #urlbar-go-button:hover {
2566     -moz-image-region: rect(28px, 84px, 56px, 56px);
2567   }
2568
2569   #urlbar-go-button:hover:active {
2570     -moz-image-region: rect(56px, 84px, 84px, 56px);
2571   }
2572
2573   #urlbar-reload-button {
2574     -moz-image-region: rect(0, 28px, 28px, 0);
2575   }
2576
2577   #urlbar-reload-button:not([disabled]):hover {
2578     -moz-image-region: rect(28px, 28px, 56px, 0);
2579   }
2580
2581   #urlbar-reload-button:not([disabled]):hover:active {
2582     -moz-image-region: rect(56px, 28px, 84px, 0);
2583   }
2584
2585   #urlbar-stop-button {
2586     -moz-image-region: rect(0, 56px, 28px, 28px);
2587   }
2588
2589   #urlbar-stop-button:not([disabled]):hover {
2590     -moz-image-region: rect(28px, 56px, 56px, 28px);
2591   }
2592
2593   #urlbar-stop-button:hover:active {
2594     -moz-image-region: rect(56px, 56px, 84px, 28px);
2595   }
2596 }
2597
2598 /* popup blocker button */
2599
2600 #page-report-button {
2601   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2602   -moz-image-region: rect(0, 16px, 16px, 0);
2603 }
2604
2605 #page-report-button:hover ,
2606 #page-report-button:hover:active,
2607 #page-report-button[open="true"] {
2608   -moz-image-region: rect(0, 32px, 16px, 16px);
2609 }
2610
2611 /* Reader mode button */
2612
2613 #reader-mode-button {
2614   list-style-image: url("chrome://browser/skin/readerMode.svg");
2615   -moz-image-region: rect(0, 16px, 16px, 0);
2616 }
2617
2618 #reader-mode-button:hover,
2619 #reader-mode-button[readeractive]:hover {
2620   -moz-image-region: rect(0, 32px, 16px, 16px);
2621 }
2622
2623 #reader-mode-button:hover:active,
2624 #reader-mode-button[readeractive] {
2625   -moz-image-region: rect(0, 48px, 16px, 32px);
2626 }
2627
2628 /* social share panel */
2629
2630 .social-share-frame {
2631   min-width: 756px;
2632   height: 150px;
2633 }
2634
2635 #share-container {
2636   min-width: 756px;
2637   background-color: white;
2638   background-repeat: no-repeat;
2639   background-position: center center;
2640 }
2641 #share-container[loading] {
2642   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2643 }
2644 #share-container > browser {
2645   transition: opacity 150ms ease-in-out;
2646   opacity: 1;
2647 }
2648 #share-container[loading] > browser {
2649   opacity: 0;
2650 }
2651
2652 .social-share-toolbar {
2653   border-bottom: 1px solid #9C9CFF;
2654   padding: 2px;
2655 }
2656
2657 #social-share-provider-buttons {
2658   padding: 0;
2659   margin: 0;
2660 }
2661
2662 .share-provider-button {
2663   padding: 5px;
2664   margin: 2px;
2665 }
2666
2667 .share-provider-button > .toolbarbutton-text {
2668   display: none;
2669 }
2670 .share-provider-button > .toolbarbutton-icon {
2671   width: 16px;
2672   min-height: 16px;
2673   max-height: 16px;
2674 }
2675
2676 /* fixup corners for share panel */
2677 .social-panel > .social-panel-frame {
2678   border-radius: inherit;
2679 }
2680
2681 #social-share-panel {
2682   min-height: 100px;
2683   min-width: 766px;
2684 }
2685
2686 #share-container,
2687 .social-share-frame {
2688   border-top-left-radius: 0;
2689   border-bottom-left-radius: inherit;
2690   border-top-right-radius: 0;
2691   border-bottom-right-radius: inherit;
2692 }
2693
2694 #social-share-panel > .social-share-toolbar {
2695   border-top-left-radius: inherit;
2696   border-top-right-radius: inherit;
2697 }
2698
2699 #social-share-provider-buttons {
2700   border-top-left-radius: inherit;
2701   border-top-right-radius: inherit;
2702 }
2703
2704 /* social recommending panel */
2705
2706 #social-mark-button {
2707   -moz-image-region: rect(0, 16px, 16px, 0);
2708 }
2709
2710 /* bookmarks menu-button */
2711
2712 #bookmarks-menu-button.bookmark-item {
2713   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2714   -moz-image-region: rect(0px 16px 16px 0px);
2715 }
2716
2717 #bookmarks-menu-button.bookmark-item[starred] {
2718   -moz-image-region: rect(0px 32px 16px 16px);
2719 }
2720
2721 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2722   -moz-margin-start: 5px;
2723 }
2724
2725 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2726   padding-top: 2px;
2727   padding-bottom: 2px;
2728 }
2729
2730 #BMB_bookmarksPopup[side="top"],
2731 #BMB_bookmarksPopup[side="bottom"] {
2732   margin-left: -20px;
2733   margin-right: -20px;
2734 }
2735
2736 #BMB_bookmarksPopup[side="left"],
2737 #BMB_bookmarksPopup[side="right"] {
2738   margin-top: -20px;
2739   margin-bottom: -20px;
2740 }
2741
2742 /* bookmarking panel */
2743
2744 #editBookmarkPanelStarIcon {
2745   list-style-image: url("chrome://browser/skin/places/starred48.png");
2746   width: 48px;
2747   height: 48px;
2748 }
2749
2750 #editBookmarkPanelStarIcon[unstarred] {
2751   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2752 }
2753
2754 #editBookmarkPanelTitle {
2755   font-size: 130%;
2756 }
2757
2758 #editBookmarkPanelHeader,
2759 #editBookmarkPanelContent {
2760   margin-bottom: .5em;
2761 }
2762
2763 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2764 #editBMPanel_folderTree {
2765   min-width: 27em;
2766 }
2767
2768 .panel-promo-box {
2769   margin: 5px 0 -6px;
2770   padding: 5px 0;
2771   border-top: 1px solid #9C9CFF;
2772   border-bottom-left-radius: 5px;
2773   border-bottom-right-radius: 5px;
2774 }
2775
2776 .panel-promo-icon {
2777   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2778   -moz-margin-end: 10px;
2779   vertical-align: middle;
2780 }
2781
2782 .panel-promo-closebutton {
2783   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2784   -moz-margin-end: -3px;
2785   margin-top: -3px;
2786 }
2787
2788 .panel-promo-closebutton:hover {
2789   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2790 }
2791
2792 .panel-promo-closebutton:hover:active {
2793   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2794 }
2795
2796 .panel-promo-closebutton > .toolbarbutton-text {
2797   padding: 0;
2798 }
2799
2800 /* ::::: content area ::::: */
2801
2802 #sidebar-box {
2803   background-color: #9C9CFF;
2804   color: #000000;
2805 }
2806
2807 #sidebar {
2808   background-color: #000000;
2809 }
2810
2811 #sidebar-splitter {
2812   -moz-margin-start: 0;
2813 }
2814
2815 #sidebar-header {
2816   color: #000000;
2817   padding: 2px;
2818 }
2819
2820 #sidebar-title {
2821   -moz-padding-start: 0px;
2822 }
2823
2824 #sidebar-header > .close-icon {
2825 /*  padding: 4px 2px;
2826   margin: 0;
2827   border: none;*/
2828   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2829 }
2830
2831 #sidebar-header > .close-icon:hover,
2832 #sidebar-header > .close-icon:hover:active {
2833   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2834 }
2835
2836 #sidebar-splitter:-moz-locale-dir(ltr),
2837 #sidebar:-moz-locale-dir(ltr) {
2838   border-radius: 0 5px 0 0;
2839 }
2840
2841 #sidebar-splitter:-moz-locale-dir(rtl),
2842 #sidebar:-moz-locale-dir(rtl) {
2843   border-radius: 5px 0 0 0;
2844 }
2845
2846 .browserContainer > findbar {
2847 /*
2848   background-color: -moz-dialog;
2849   color: -moz-DialogText;
2850 */
2851 }
2852
2853 /* Tabstrip */
2854
2855 #TabsToolbar {
2856   min-height: 0;
2857   padding: 0;
2858   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2859 }
2860
2861 #TabsToolbar .toolbar-holder {
2862   background-color: #000000; /* correct effect of being an actual toolbar */
2863 }
2864
2865 #main-window[disablechrome] #TabsToolbar,
2866 #TabsToolbar[tabsontop="false"] {
2867   border-bottom: 1px solid #008484;
2868 }
2869
2870 /* === BEGIN tabs.inc.css === */
2871
2872 :root {
2873   /* --tab-toolbar-navbar-overlap: 1px; */
2874   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2875   /* --tab-min-height: 31px; */
2876 }
2877 #TabsToolbar {
2878   /* --tab-stroke-background-size: auto 100%; */
2879 }
2880
2881 .tabbrowser-tab,
2882 .tabs-newtab-button,
2883 #TabsToolbar > #new-tab-button {
2884   margin-top: 0px;
2885 }
2886
2887 .tabbrowser-tab {
2888   padding: 1px 4px 2px;
2889 }
2890
2891 .tabbrowser-tab:first-of-type {
2892   -moz-margin-start: 2px;
2893 }
2894
2895 .tabs-newtab-button,
2896 #TabsToolbar > #new-tab-button {
2897   border-radius: 8px 8px 0px 0px;
2898   -moz-margin-start: 0;
2899 }
2900
2901 .tabs-newtab-button:not(:hover),
2902 #TabsToolbar > #new-tab-button:not(:hover) {
2903   background-color: #C09070;
2904 }
2905
2906 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2907 .tabbrowser-tab[visuallyselected=true] {
2908 /*  position: relative;
2909   z-index: 2;*/
2910 }
2911
2912 .tab-background-middle {
2913 }
2914
2915 .tab-content {
2916 }
2917
2918 .tab-content[pinned] {
2919 }
2920
2921 .tab-throbber,
2922 .tab-icon-image,
2923 .tab-icon-sound,
2924 .tab-close-button {
2925 }
2926
2927 .tab-throbber,
2928 .tab-icon-image {
2929   height: 16px;
2930   width: 16px;
2931   -moz-margin-end: 3px;
2932 }
2933
2934 .tab-icon-image {
2935   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2936 }
2937
2938 .tab-icon-overlay {
2939   width: 16px;
2940   height: 16px;
2941  /* margin-top: -12px; */
2942   -moz-margin-start: -16px;
2943   position: relative;
2944 }
2945
2946 .tab-icon-overlay[crashed] {
2947   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2948 }
2949
2950 .tab-icon-overlay[soundplaying],
2951 .tab-icon-overlay[muted]:not([crashed]) {
2952   border-radius: 8px;
2953 }
2954
2955 .tab-icon-overlay[soundplaying]:hover,
2956 .tab-icon-overlay[muted]:hover {
2957   background-color: #FFCF00;
2958 }
2959
2960 .tab-icon-overlay[soundplaying] {
2961   display: -moz-box;
2962   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2963 }
2964
2965 .tab-icon-overlay[muted]:not([crashed]) {
2966   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2967 }
2968
2969 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2970   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2971 }
2972
2973
2974 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2975   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2976 }
2977
2978 .tab-throbber[busy] {
2979   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2980 }
2981
2982 .tab-throbber[progress] {
2983   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2984 }
2985
2986 .tab-throbber[pinned],
2987 .tab-icon-image[pinned] {
2988   -moz-margin-start: 2px;
2989   -moz-margin-end: 2px;
2990 }
2991
2992 .tab-label {
2993   /* this needs to add up to the 16px of the icon image */
2994   height: 12px;
2995   margin-top: 2px !important;
2996   margin-bottom: 2px !important;
2997 }
2998
2999 .tab-icon-sound {
3000   -moz-margin-start: 4px;
3001   width: 16px;
3002   height: 16px;
3003   padding: 0;
3004 }
3005
3006 .tab-icon-sound[muted] {
3007   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3008 }
3009
3010 .tab-icon-sound[muted]:hover {
3011   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3012 }
3013
3014 .tab-icon-sound[muted]:hover:active {
3015   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3016 }
3017
3018 .tab-icon-sound[soundplaying] {
3019   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3020 }
3021
3022 .tab-icon-sound[soundplaying]:hover {
3023   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3024 }
3025
3026 .tab-icon-sound[soundplaying]:hover:active {
3027   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3028 }
3029
3030 .tab-icon-sound[muted] {
3031   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3032 }
3033
3034 .tab-icon-sound[muted]:hover {
3035   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3036 }
3037
3038 .tab-icon-sound[muted]:hover:active {
3039   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3040 }
3041
3042 .tab-icon-sound[visuallyselected=true][soundplaying] {
3043   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3044 }
3045
3046 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3047   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3048 }
3049
3050 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3051   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3052 }
3053
3054 .tab-icon-sound[visuallyselected=true][muted] {
3055   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3056 }
3057
3058 .tab-icon-sound[visuallyselected=true][muted]:hover {
3059   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3060 }
3061
3062 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3063   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3064 }
3065
3066 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3067   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3068 }
3069
3070 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3071   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3072 }
3073
3074 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3075   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3076 }
3077
3078 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3079   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3080 }
3081
3082 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3083   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3084 }
3085
3086 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3087   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3088 }
3089
3090 .tab-close-button {
3091   margin-top: 1px;
3092   padding: 0;
3093 }
3094
3095 .tab-background,
3096 .tabs-newtab-button {
3097   /* overlap the tab curves */
3098 }
3099
3100 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3101 }
3102
3103 /* Tab Overflow */
3104 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3105 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3106 }
3107
3108 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3110 }
3111
3112 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3113 }
3114
3115 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3116 }
3117
3118 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3119 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3120 }
3121
3122 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3123 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3124 }
3125
3126 .tab-background-start[visuallyselected=true]::after,
3127 .tab-background-start[visuallyselected=true]::before,
3128 .tab-background-start,
3129 .tab-background-end,
3130 .tab-background-end[visuallyselected=true]::after,
3131 .tab-background-end[visuallyselected=true]::before {
3132 }
3133
3134 .tabbrowser-tab:not([visuallyselected=true]),
3135 .tabbrowser-tab:-moz-lwtheme {
3136 }
3137
3138 /* tabbrowser-tab focus ring */
3139 .tabbrowser-tab:focus {
3140   outline: 1px dotted;
3141 }
3142
3143 /* Selected tab */
3144
3145 .tabbrowser-tab[visuallyselected="true"] {
3146 }
3147
3148 /* End selected tab */
3149
3150 /* Tab pointer-events */
3151 /*
3152 .tabbrowser-tab {
3153   pointer-events: none;
3154 }
3155
3156 .tab-background-middle,
3157 .tabs-newtab-button,
3158 .tab-icon-overlay[soundplaying],
3159 .tab-icon-overlay[muted]:not([crashed]),
3160 .tab-icon-sound,
3161 .tab-close-button {
3162   pointer-events: auto;
3163 }
3164 */
3165 /* Pinned tabs */
3166
3167 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3168   background-color: #E7ADE7;
3169 }
3170
3171 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3172   background-color: #3333FF;
3173   color: #000000;
3174 }
3175
3176 /* Tab separators */
3177 /*
3178 .tabbrowser-tab::after,
3179 .tabbrowser-tab::before {
3180   width: 1px;
3181   -moz-margin-start: -1px;
3182   background-image: linear-gradient(transparent 5px,
3183                                     currentColor 5px,
3184                                     currentColor calc(100% - 4px),
3185                                     transparent calc(100% - 4px));
3186   opacity: 0.2;
3187 }
3188
3189 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3190 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3191   opacity: 0.4;
3192 }
3193 */
3194 /* Also show separators beside the selected tab when dragging it. */
3195 /*
3196 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3197 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3198 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3199   content: "";
3200   display: -moz-box;
3201 }
3202 */
3203 /* New tab button */
3204
3205 .tabs-newtab-button {
3206   width: 28px;
3207   /* width: calc(36px + var(--tab-curve-width)); */
3208 }
3209
3210 /* === END tabs.inc.css === */
3211
3212 /* Background tabs:
3213  *
3214  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3215  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3216  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3217  */
3218 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3219 /*  clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3220 }
3221
3222 /* Tab DnD indicator */
3223 .tab-drop-indicator {
3224   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3225   margin-bottom: -11px;
3226 }
3227
3228 /* Tab close button */
3229 .tab-close-button {
3230   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3231 }
3232
3233 .tab-close-button:hover,
3234 .tab-close-button:hover[selected="true"] {
3235   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3236 }
3237
3238 .tab-close-button:hover:active,
3239 .tab-close-button:hover:active[selected="true"] {
3240   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3241 }
3242
3243 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3244
3245 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3246 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3247   margin: 0;
3248   padding-top: 0;
3249   padding-bottom: 0;
3250   background-origin: border-box;
3251 }
3252
3253 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3254 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3255 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3256 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3257  }
3258
3259 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3260 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3261  }
3262
3263 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3264 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3265 /*  transform: scaleX(-1);*/
3266 }
3267
3268 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3269   transition: 1s background-color ease-out;
3270 }
3271
3272 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3273   background-color: #008484;
3274 }
3275
3276 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3277 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3278 /*  border-width: 0 2px 0 0;
3279   border-style: solid;
3280   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3281 }
3282
3283 .tabs-newtab-button > .toolbarbutton-icon {
3284   margin-top: -1px;
3285   margin-bottom: -1px;
3286 }
3287
3288 .tabs-newtab-button,
3289 #TabsToolbar > #new-tab-button,
3290 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3291 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3292   list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3293   -moz-image-region: rect(0, 16px, 18px, 0);
3294 }
3295
3296 .tabs-newtab-button,
3297 .tabs-newtab-button:hover,
3298 #TabsToolbar > #new-tab-button,
3299 #TabsToolbar > #new-tab-button:hover {
3300   -moz-image-region: rect(0, 32px, 18px, 16px);
3301 }
3302
3303 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3304 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3305 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3306 .tabs-newtab-button:-moz-lwtheme-brighttext,
3307 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3308 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3309 }
3310
3311 #TabsToolbar > #new-tab-button {
3312   width: 26px;
3313 }
3314
3315 #alltabs-button {
3316   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3317 }
3318
3319 #alltabs-button:hover,
3320 #alltabs-button:hover:active,
3321 #alltabs-button[open="true"] {
3322   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3323 }
3324
3325 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3326 #alltabs-button:-moz-lwtheme-brighttext {
3327 }
3328
3329 #alltabs-button > .toolbarbutton-icon {
3330 /*  margin: 0 2px;*/
3331 }
3332
3333 #alltabs-button > .toolbarbutton-menu-dropmarker {
3334   display: none;
3335 }
3336
3337 /* All tabs menupopup */
3338 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3339   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3340   -moz-image-region: auto;
3341 }
3342
3343 .alltabs-item[selected="true"] {
3344   font-weight: bold;
3345 }
3346
3347 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3348   list-style-image: url("chrome://global/skin/icons/loading.gif");
3349 }
3350
3351 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3352   background-color: #402800;
3353 }
3354
3355 toolbarbutton.chevron {
3356   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3357 }
3358
3359 toolbarbutton.chevron:hover {
3360   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3361 }
3362 /*
3363 toolbar[brighttext] toolbarbutton.chevron {
3364   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3365 }
3366 */
3367 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3368 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3369   transform: scaleX(-1);
3370 }
3371
3372 toolbarbutton.chevron > .toolbarbutton-text,
3373 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3374   display: none;
3375 }
3376
3377 toolbarbutton.chevron > .toolbarbutton-icon {
3378   margin: 0;
3379 }
3380
3381 #sidebar-throbber[loading="true"] {
3382   list-style-image: url("chrome://global/skin/icons/loading.gif");
3383   -moz-margin-end: 4px;
3384 }
3385
3386 /* Bookmarks toolbar */
3387 #PlacesToolbarDropIndicator {
3388   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3389 }
3390
3391 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3392   background-color: #008484 !important;
3393   color: #FFCF00 !important;
3394 }
3395
3396 /* rules for menupopup drop indicators */
3397 .menupopup-drop-indicator-bar {
3398   position: relative;
3399   /* these two margins must together compensate the indicator's height */
3400   margin-top: -1px;
3401   margin-bottom: -1px;
3402 }
3403
3404 .menupopup-drop-indicator {
3405   list-style-image: none;
3406   height: 2px;
3407   -moz-margin-end: -4em;
3408   background-color: #008484;
3409 }
3410
3411 /* === BEGIN notification-icons.inc.css === */
3412
3413 .popup-notification-icon {
3414   width: 64px;
3415   height: 64px;
3416   -moz-margin-end: 10px;
3417 }
3418
3419 .popup-notification-icon[popupid="geolocation"] {
3420   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3421 }
3422
3423 .popup-notification-icon[popupid="push"] {
3424   list-style-image: url(chrome://browser/skin/Push-64.png);
3425 }
3426
3427 .popup-notification-icon[popupid="xpinstall-disabled"],
3428 .popup-notification-icon[popupid="addon-install-blocked"],
3429 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3430   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3431 }
3432
3433 .popup-notification-icon[popupid="addon-progress"] {
3434   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3435 }
3436
3437 .popup-notification-icon[popupid="addon-install-failed"] {
3438   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3439 }
3440
3441 .popup-notification-icon[popupid="addon-install-confirmation"] {
3442   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3443 }
3444
3445 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3446   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3447 }
3448
3449 .popup-notification-icon[popupid="addon-install-complete"] {
3450   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3451 }
3452
3453 .popup-notification-icon[popupid="addon-install-restart"] {
3454   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3455 }
3456
3457 .popup-notification-icon[popupid="click-to-play-plugins"] {
3458   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3459 }
3460
3461 .popup-notification-icon[popupid="web-notifications"] {
3462   list-style-image: url("chrome://browser/skin/notification-64.png");
3463 }
3464
3465 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3466 .popup-notification-icon[popupid*="offline-app-requested"],
3467 .popup-notification-icon[popupid="offline-app-usage"] {
3468   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3469 }
3470
3471 .popup-notification-icon[popupid="password"] {
3472   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3473 }
3474
3475 .popup-notification-icon[popupid="webapps-install-progress"],
3476 .popup-notification-icon[popupid="webapps-install"] {
3477   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3478 }
3479
3480 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3481 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3482   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3483 }
3484
3485 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3486 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3487   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3488 }
3489
3490 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3491 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3492   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3493 }
3494
3495 .popup-notification-icon[popupid="pointerLock"] {
3496   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3497 }
3498
3499 /* Notification icon box */
3500 #notification-popup .panel-promo-box {
3501 /*  margin: 10px -10px -10px; */
3502 }
3503
3504 #notification-popup-box {
3505   position: relative;
3506   background-color: #000000;
3507   background-clip: padding-box;
3508   padding-left: 3px;
3509   padding-right: 8px;
3510   border-radius: 3px 0 0 3px;
3511   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3512   -moz-margin-end: -8px;
3513   border-right-width: 8px;
3514 }
3515
3516 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3517 /*  padding-left: 7px; */
3518 }
3519
3520 #notification-popup-box:-moz-locale-dir(rtl),
3521 .notification-anchor-icon:-moz-locale-dir(rtl) {
3522   transform: scaleX(-1);
3523 }
3524
3525 .notification-anchor-icon {
3526   list-style-image: url("chrome://global/skin/icons/information-16.png");
3527
3528   width: 16px;
3529   height: 16px;
3530   margin: 0 2px;
3531 }
3532
3533 .notification-anchor-icon:-moz-focusring {
3534   outline: 1px dotted #008484;
3535 }
3536
3537 .identity-notification-icon,
3538 #identity-notification-icon {
3539   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3540 }
3541
3542 .geo-notification-icon,
3543 #geo-notification-icon {
3544   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3545 }
3546
3547 #push-notification-icon {
3548   list-style-image: url(chrome://browser/skin/Push-16.png);
3549 }
3550
3551 #addons-notification-icon {
3552   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3553 }
3554
3555 #addons-notification-icon:hover {
3556   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3557 }
3558
3559 #addons-notification-icon:hover:active {
3560   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3561 }
3562
3563 .indexedDB-notification-icon,
3564 #indexedDB-notification-icon {
3565   list-style-image: url("chrome://global/skin/icons/question-16.png");
3566 }
3567
3568 #password-notification-icon {
3569   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3570 }
3571
3572 #login-fill-notification-icon {
3573   /* Temporary icon until the capture and fill doorhangers are unified. */
3574   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3575   transform: scaleX(-1);
3576 }
3577
3578 #webapps-notification-icon {
3579   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3580 }
3581
3582 #plugins-notification-icon {
3583   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3584 }
3585
3586 #plugins-notification-icon.plugin-hidden {
3587   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3588 }
3589
3590 #plugins-notification-icon.plugin-blocked {
3591   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3592 }
3593
3594 #plugins-notification-icon {
3595 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3596 }
3597
3598 #plugins-notification-icon:hover {
3599 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3600 }
3601
3602 #notification-popup-box[hidden] {
3603   /* Override display:none to make the pluginBlockedNotification animation work
3604      when showing the notification repeatedly. */
3605   display: -moz-box;
3606   visibility: collapse;
3607 }
3608
3609 #plugins-notification-icon.plugin-blocked[showing] {
3610   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3611 }
3612
3613 @keyframes pluginBlockedNotification {
3614   from {
3615     opacity: 0;
3616   }
3617   to {
3618     opacity: 1;
3619   }
3620 }
3621
3622 .webRTC-shareDevices-notification-icon,
3623 #webRTC-shareDevices-notification-icon {
3624   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3625 }
3626
3627 .webRTC-sharingDevices-notification-icon,
3628 #webRTC-sharingDevices-notification-icon {
3629   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3630 }
3631
3632 .webRTC-shareMicrophone-notification-icon,
3633 #webRTC-shareMicrophone-notification-icon {
3634   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3635 }
3636
3637 .webRTC-sharingMicrophone-notification-icon,
3638 #webRTC-sharingMicrophone-notification-icon {
3639   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3640 }
3641
3642 .webRTC-shareScreen-notification-icon,
3643 #webRTC-shareScreen-notification-icon {
3644   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3645 }
3646
3647 .webRTC-sharingScreen-notification-icon,
3648 #webRTC-sharingScreen-notification-icon {
3649   list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3650 }
3651
3652 .web-notifications-notification-icon,
3653 #web-notifications-notification-icon {
3654   list-style-image: url("chrome://browser/skin/notification-16.png");
3655 }
3656
3657 #pointerLock-notification-icon {
3658   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3659 }
3660
3661 .translate-notification-icon,
3662 #translate-notification-icon {
3663   list-style-image: url("chrome://browser/skin/translation-16.png");
3664   -moz-image-region: rect(0px, 16px, 16px, 0px);
3665 }
3666
3667 .translated-notification-icon,
3668 #translated-notification-icon {
3669   list-style-image: url("chrome://browser/skin/translation-16.png");
3670   -moz-image-region: rect(0px, 32px, 16px, 16px);
3671 }
3672
3673 .popup-notification-icon[popupid="servicesInstall"] {
3674   list-style-image: url("chrome://browser/skin/social/services-64.png");
3675 }
3676 #servicesInstall-notification-icon {
3677   list-style-image: url("chrome://browser/skin/social/services-16.png");
3678 }
3679
3680 /* EME notifications */
3681
3682 .popup-notification-icon[popupid="drmContentPlaying"],
3683 #eme-notification-icon {
3684   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3685 }
3686
3687 #eme-notification-icon:hover:active {
3688   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3689 }
3690
3691 #eme-notification-icon[firstplay=true] {
3692   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3693 }
3694
3695 @keyframes emeTeachingMoment {
3696   0% {transform: translateX(0); }
3697   25% {transform: translateX(3px) }
3698   75% {transform: translateX(-3px) }
3699   100% { transform: translateX(0); }
3700 }
3701
3702 /* HiDPI notification icons */
3703 @media (min-resolution: 1.1dppx) {
3704 /*  #notification-popup-box {
3705     border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3706   }
3707 */
3708   .notification-anchor-icon {
3709     list-style-image: url(chrome://global/skin/icons/information-32.png);
3710   }
3711
3712   .webRTC-shareDevices-notification-icon,
3713   #webRTC-shareDevices-notification-icon {
3714     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3715   }
3716
3717   .webRTC-sharingDevices-notification-icon,
3718   #webRTC-sharingDevices-notification-icon {
3719     list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3720   }
3721
3722   .webRTC-shareMicrophone-notification-icon,
3723   #webRTC-shareMicrophone-notification-icon {
3724     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3725   }
3726
3727   .webRTC-sharingMicrophone-notification-icon,
3728   #webRTC-sharingMicrophone-notification-icon {
3729     list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3730   }
3731
3732   .webRTC-shareScreen-notification-icon,
3733   #webRTC-shareScreen-notification-icon {
3734     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3735   }
3736
3737   .webRTC-sharingScreen-notification-icon,
3738   #webRTC-sharingScreen-notification-icon {
3739     list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3740   }
3741
3742   .popup-notification-icon[popupid="webRTC-sharingDevices"],
3743   .popup-notification-icon[popupid="webRTC-shareDevices"] {
3744     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3745   }
3746
3747   .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3748   .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3749     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3750   }
3751
3752   .popup-notification-icon[popupid="webRTC-sharingScreen"],
3753   .popup-notification-icon[popupid="webRTC-shareScreen"] {
3754     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3755   }
3756 }
3757
3758 /* === END notification-icons.inc.css === */
3759
3760 .popup-notification-body[popupid="addon-progress"],
3761 .popup-notification-body[popupid="addon-install-confirmation"] {
3762   width: 28em;
3763   max-width: 28em;
3764 }
3765
3766 /* Translation infobar */
3767
3768 /* === BEGIN infobar.inc.css === */
3769
3770 notification[value="translation"] .messageImage {
3771   list-style-image: url("chrome://browser/skin/translation-16.png");
3772   -moz-image-region: rect(0, 32px, 16px, 16px);
3773 }
3774
3775 @media (min-resolution: 1.25dppx) {
3776   notification[value="translation"] .messageImage {
3777     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3778     -moz-image-region: rect(0, 64px, 32px, 32px);
3779   }
3780 }
3781
3782 notification[value="translation"][state="translating"] .messageImage {
3783   list-style-image: url("chrome://browser/skin/translating-16.png");
3784   -moz-image-region: auto;
3785 }
3786
3787 @media (min-resolution: 1.25dppx) {
3788   notification[value="translation"][state="translating"] .messageImage {
3789     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3790   }
3791 }
3792
3793 notification[value="translation"] hbox[anonid="details"] {
3794   overflow: hidden;
3795 }
3796
3797 notification[value="translation"] button,
3798 notification[value="translation"] menulist {
3799   min-width: 0;
3800 }
3801
3802 notification[value="translation"] menulist > .menulist-dropmarker {
3803 }
3804
3805 .translation-menupopup arrowscrollbox {
3806   padding-bottom: 0;
3807 }
3808
3809 .translation-attribution {
3810   cursor: pointer;
3811   -moz-box-align: end;
3812   font-size: small;
3813 }
3814
3815 .translation-attribution > label {
3816   margin-bottom: 0;
3817 }
3818
3819 .translation-attribution > image {
3820   width: 70px;
3821 }
3822
3823 .translation-welcome-panel {
3824   width: 305px;
3825 }
3826
3827 .translation-welcome-logo {
3828   height: 32px;
3829   width: 32px;
3830   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3831   -moz-image-region: rect(0, 64px, 32px, 32px);
3832 }
3833
3834 .translation-welcome-content {
3835   -moz-margin-start: 16px;
3836 }
3837
3838 .translation-welcome-headline {
3839   font-size: larger;
3840   font-weight: bold;
3841 }
3842
3843 .translation-welcome-body {
3844   padding: 1em 0;
3845   margin: 0 0;
3846 }
3847
3848 /* === END infobar.inc.css === */
3849
3850 notification[value="translation"] {
3851   min-height: 40px;
3852 }
3853
3854 .translation-menupopup {
3855   -moz-appearance: none;
3856 }
3857
3858 /* Loop/ Hello browser styles */
3859
3860 notification[value="loop-sharing-notification"] .button-menubutton-button {
3861   min-width: 0;
3862   border: 0;
3863   margin: 0;
3864 }
3865
3866 notification[value="loop-sharing-notification"] .messageImage {
3867   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3868 }
3869
3870 /* Bookmarks roots menu-items */
3871 #subscribeToPageMenuitem:not([disabled]),
3872 #subscribeToPageMenupopup,
3873 #BMB_subscribeToPageMenuitem:not([disabled]),
3874 #BMB_subscribeToPageMenupopup {
3875   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3876 }
3877
3878 #bookmarksToolbarFolderMenu,
3879 #BMB_bookmarksToolbar,
3880 #panelMenu_bookmarksToolbar {
3881   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3882   -moz-image-region: auto;
3883 }
3884
3885 #BMB_unsortedBookmarks,
3886 #panelMenu_unsortedBookmarks {
3887   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3888   -moz-image-region: auto;
3889 }
3890
3891 #panelMenu_pocket,
3892 #menu_pocket,
3893 #BMB_pocket {
3894   list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3895 }
3896
3897 /* ::::: Keyboard UI Panel ::::: */
3898
3899 .KUI-panel {
3900   color: #FF9F00;
3901   border-style: none;
3902   border-radius: 20px;
3903 }
3904
3905 .KUI-panel[level="top"] {
3906   /*background-color: rgba(27%,27%,27%,.65);*/
3907 }
3908
3909 /* Ctrl-Tab */
3910
3911 #ctrlTab-panel {
3912   padding: 20px 10px 10px;
3913   font-weight: bold;
3914 }
3915
3916 .ctrlTab-favicon[src] {
3917   background-color: #000000;
3918   width: 20px;
3919   height: 20px;
3920   padding: 2px;
3921 }
3922
3923 .ctrlTab-preview-inner > .tabPreview-canvas {
3924 }
3925
3926 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3927   margin-bottom: 2px;
3928 }
3929
3930 .ctrlTab-preview-inner {
3931   padding-bottom: 10px;
3932 }
3933
3934 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3935   padding: 10px;
3936   background-color: #000000;
3937   border-radius: .5em;
3938 }
3939
3940 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3941   color: white;
3942   background-color: #000000;
3943   text-shadow: none;
3944   padding: 8px;
3945   border: 2px solid #9C9CFF;
3946   border-radius: .5em;
3947 }
3948
3949 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3950   margin: -10px -10px 0;
3951 }
3952
3953 #ctrlTab-showAll {
3954   margin-top: .5em;
3955 }
3956
3957 /* Sync Panel */
3958
3959 .sync-panel-icon {
3960   height:32px;
3961   width: 32px;
3962   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3963 }
3964
3965 .sync-panel-inner {
3966   width: 0;
3967   padding-left: 10px;
3968 }
3969
3970 .sync-panel-button-box {
3971   margin-top: 1em;
3972 }
3973
3974 #sync-error-panel-title,
3975 #sync-start-panel-title {
3976   font-size: 120%;
3977   font-weight: bold;
3978   margin-bottom: 5px;
3979 }
3980
3981 #sync-start-panel-subtitle,
3982 #sync-error-panel-subtitle {
3983   margin: 0;
3984 }
3985
3986 /* Status panel */
3987
3988 .statuspanel-label {
3989   margin: 0;
3990   padding: 2px 4px;
3991   background: #404000;
3992   border: 1px none #9C9CFF;
3993   border-top-style: solid;
3994   color: #FF9F00;
3995   text-shadow: none;
3996 }
3997
3998 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3999 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4000   border-right-style: solid;
4001   border-top-right-radius: .3em;
4002   margin-right: 1em;
4003 }
4004
4005 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4006 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4007   border-left-style: solid;
4008   border-top-left-radius: .3em;
4009   margin-left: 1em;
4010 }
4011
4012 /* HACK to abolish devily color on main content */
4013
4014 #content {
4015   background-color: transparent !important;
4016 }
4017
4018 /* === BEGIN fullscreen/warning.inc.css === */
4019
4020 #fullscreen-warning {
4021   align-items: center;
4022   background: rgba(0, 0, 0, 0.9);
4023   border: 2px solid #A09090;
4024   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4025   border-radius: 8px;
4026   padding: 24px 16px;
4027   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4028 }
4029
4030 #fullscreen-warning::before {
4031   margin: 0;
4032   width: 24px; height: 24px;
4033 }
4034
4035 #fullscreen-warning.verifiedIdentity::before,
4036 #fullscreen-warning.verifiedDomain::before {
4037   content: url("chrome://browser/skin/fullscreen/secure.svg");
4038 }
4039
4040 #fullscreen-warning.unknownIdentity::before {
4041   content: url("chrome://browser/skin/fullscreen/insecure.svg");
4042 }
4043
4044 #fullscreen-domain-text,
4045 #fullscreen-generic-text {
4046   font-size: 21px;
4047   font-weight: lighter;