fix some parsing errors etc. and make new HTML-based buttons with ::before work in...
[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, #webide-button, #loop-button),
516 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
517   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
518 }
519
520 #back-button {
521   -moz-image-region: rect(0, 36px, 18px, 18px);
522 }
523
524 #back-button:hover:not([disabled="true"]) {
525   -moz-image-region: rect(18px, 36px, 36px, 18px);
526 }
527
528 #back-button[disabled="true"] {
529   -moz-image-region: rect(36px, 36px, 54px, 18px);
530 }
531
532 #forward-button {
533   -moz-image-region: rect(0, 72px, 18px, 54px);
534 }
535
536 #forward-button:hover:not([disabled="true"]) {
537   -moz-image-region: rect(18px, 72px, 36px, 54px);
538 }
539
540 #forward-button[disabled="true"] {
541   -moz-image-region: rect(36px, 72px, 54px, 54px);
542 }
543
544 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
545 #forward-button:-moz-locale-dir(rtl) {
546   transform: scaleX(-1);
547 }
548
549 #home-button[cui-areatype="toolbar"] {
550   -moz-image-region: rect(0, 126px, 18px, 108px);
551 }
552
553 #home-button[cui-areatype="toolbar"]:hover {
554   -moz-image-region: rect(18px, 126px, 36px, 108px);
555 }
556
557 #bookmarks-menu-button[cui-areatype="toolbar"] {
558   -moz-image-region: rect(0, 144px, 18px, 126px);
559 }
560
561 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
562 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
563   -moz-image-region: rect(18px, 144px, 36px, 126px);
564 }
565
566 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
567 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
568   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
569   background-color: transparent !important;
570 }
571
572 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
573   -moz-image-region: rect(0, 162px, 18px, 144px);
574 }
575
576 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
578 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
579   /* When starred and clicked (for edit/delete dialog),
580    * then only the menubutton-button itself is open, but not the whole menubutton. */
581   -moz-image-region: rect(18px, 162px, 36px, 144px);
582 }
583
584 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
585   -moz-image-region: rect(0, 630px, 18px, 612px);
586 }
587
588 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
589   padding: 1px;
590   -moz-box-align: center;
591 }
592
593 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
594 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
595   -moz-image-region: rect(18px, 630px, 36px, 612px);
596 }
597
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
600   padding-top: 2px;
601   padding-bottom: 0px;
602   -moz-padding-start: 2px;
603   -moz-padding-end: 0px;
604 }
605
606 #history-panelmenu[cui-areatype="toolbar"] {
607   -moz-image-region: rect(0, 180px, 18px, 162px);
608 }
609
610 #history-panelmenu[cui-areatype="toolbar"]:hover,
611 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
612   -moz-image-region: rect(18px, 180px, 36px, 162px);
613 }
614
615 #downloads-button[cui-areatype="toolbar"] {
616   -moz-image-region: rect(0, 198px, 18px, 180px);
617 }
618
619 #downloads-button[cui-areatype="toolbar"]:hover,
620 #downloads-button[cui-areatype="toolbar"][open="true"] {
621   -moz-image-region: rect(18px, 198px, 36px, 180px);
622 }
623
624 #add-ons-button[cui-areatype="toolbar"] {
625   -moz-image-region: rect(0, 216px, 18px, 198px);
626 }
627
628 #add-ons-button[cui-areatype="toolbar"]:hover {
629   -moz-image-region: rect(18px, 216px, 36px, 198px);
630 }
631
632 #open-file-button[cui-areatype="toolbar"] {
633   -moz-image-region: rect(0, 234px, 18px, 216px);
634 }
635
636 #open-file-button[cui-areatype="toolbar"]:hover {
637   -moz-image-region: rect(18px, 234px, 36px, 216px);
638 }
639
640 #save-page-button[cui-areatype="toolbar"] {
641   -moz-image-region: rect(0, 252px, 18px, 234px);
642 }
643
644 #save-page-button[cui-areatype="toolbar"]:hover {
645   -moz-image-region: rect(18px, 252px, 36px, 234px);
646 }
647
648 #sync-button[cui-areatype="toolbar"] {
649   -moz-image-region: rect(0, 270px, 18px, 252px);
650 }
651
652 #sync-button[cui-areatype="toolbar"]:hover {
653   -moz-image-region: rect(18px, 270px, 36px, 252px);
654 }
655
656 #sync-button[cui-areatype="toolbar"][status="active"],
657 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
658   list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
659   -moz-image-region: rect(0, 18px, 18px, 0px);
660 }
661
662 /*
663 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
664 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
665   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
666 }
667 */
668
669 #feed-button[cui-areatype="toolbar"] {
670   -moz-image-region: rect(0, 288px, 18px, 270px);
671 }
672
673 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
674 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
675   -moz-image-region: rect(18px, 288px, 36px, 270px);
676 }
677
678 #feed-button[cui-areatype="toolbar"][disabled="true"] {
679   -moz-image-region: rect(36px, 288px, 54px, 270px);
680 }
681
682 #social-share-button[cui-areatype="toolbar"] {
683   -moz-image-region: rect(0px, 306px, 18px, 288px);
684 }
685
686 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
687 #social-share-button[cui-areatype="toolbar"][open="true"] {
688   -moz-image-region: rect(18px, 306px, 36px, 288px);
689 }
690
691 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
692   -moz-image-region: rect(36px, 306px, 54px, 288px);
693 }
694
695 #characterencoding-button[cui-areatype="toolbar"] {
696   -moz-image-region: rect(0, 324px, 18px, 306px);
697 }
698
699 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
700 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
701   -moz-image-region: rect(18px, 324px, 36px, 306px);
702 }
703
704 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
705   -moz-image-region: rect(36px, 324px, 54px, 306px);
706 }
707
708 #new-window-button[cui-areatype="toolbar"] {
709   -moz-image-region: rect(0, 342px, 18px, 324px);
710 }
711
712 #new-window-button[cui-areatype="toolbar"]:hover {
713   -moz-image-region: rect(18px, 342px, 36px, 324px);
714 }
715
716 #e10s-button[cui-areatype="toolbar"] {
717   -moz-image-region: rect(0, 342px, 18px, 324px);
718 }
719
720 #e10s-button[cui-areatype="toolbar"]:hover {
721   -moz-image-region: rect(18px, 342px, 36px, 324px);
722 }
723
724 #e10s-button > .toolbarbutton-icon {
725   transform: scaleY(-1);
726 }
727
728 #new-tab-button[cui-areatype="toolbar"] {
729   -moz-image-region: rect(0, 360px, 18px, 342px);
730 }
731
732 #new-tab-button[cui-areatype="toolbar"]:hover {
733   -moz-image-region: rect(18px, 360px, 36px, 342px);
734 }
735
736 #privatebrowsing-button[cui-areatype="toolbar"] {
737   -moz-image-region: rect(0, 378px, 18px, 360px);
738 }
739
740 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
741   -moz-image-region: rect(18px, 378px, 36px, 360px);
742 }
743
744 #find-button[cui-areatype="toolbar"] {
745   -moz-image-region: rect(0, 396px, 18px, 378px);
746 }
747
748 #find-button[cui-areatype="toolbar"]:hover {
749   -moz-image-region: rect(18px, 396px, 36px, 378px);
750 }
751
752 #print-button[cui-areatype="toolbar"] {
753   -moz-image-region: rect(0, 414px, 18px, 396px);
754 }
755
756 #print-button[cui-areatype="toolbar"]:hover {
757   -moz-image-region: rect(18px, 414px, 36px, 396px);
758 }
759
760 #fullscreen-button[cui-areatype="toolbar"] {
761   -moz-image-region: rect(0, 432px, 18px, 414px);
762 }
763
764 #fullscreen-button[cui-areatype="toolbar"]:hover {
765   -moz-image-region: rect(18px, 432px, 36px, 414px);
766 }
767
768 #developer-button[cui-areatype="toolbar"] {
769   -moz-image-region: rect(0, 450px, 18px, 432px);
770 }
771
772 #developer-button[cui-areatype="toolbar"]:hover,
773 #developer-button[cui-areatype="toolbar"][open="true"] {
774   -moz-image-region: rect(18px, 450px, 36px, 432px);
775 }
776
777 #preferences-button[cui-areatype="toolbar"] {
778   -moz-image-region: rect(0, 468px, 18px, 450px);
779 }
780
781 #preferences-button[cui-areatype="toolbar"]:hover {
782   -moz-image-region: rect(18px, 468px, 36px, 450px);
783 }
784
785 #PanelUI-menu-button {
786   -moz-image-region: rect(0, 486px, 18px, 468px);
787 }
788
789 #PanelUI-menu-button:hover,
790 #PanelUI-menu-button[open="true"] {
791   -moz-image-region: rect(18px, 486px, 36px, 468px);
792 }
793
794 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
795   -moz-image-region: rect(0, 504px, 18px, 486px);
796 }
797
798 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
799   -moz-image-region: rect(18px, 504px, 36px, 486px);
800 }
801
802 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
803   -moz-image-region: rect(36px, 504px, 54px, 486px);
804 }
805
806 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
807   -moz-image-region: rect(0, 522px, 18px, 504px);
808 }
809
810 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
811   -moz-image-region: rect(18px, 522px, 36px, 504px);
812 }
813
814 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
815   -moz-image-region: rect(36px, 522px, 54px, 504px);
816 }
817
818 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
819   -moz-image-region: rect(0, 540px, 18px, 522px);
820 }
821
822 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
823   -moz-image-region: rect(18px, 540px, 36px, 522px);
824 }
825
826 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
827   -moz-image-region: rect(36px, 540px, 54px, 522px);
828 }
829
830 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
831   -moz-image-region: rect(0, 558px, 18px, 540px);
832 }
833
834 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
835   -moz-image-region: rect(18px, 558px, 36px, 540px);
836 }
837
838 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
839   -moz-image-region: rect(36px, 558px, 54px, 540px);
840 }
841
842 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
843   -moz-image-region: rect(0, 576px, 18px, 558px);
844 }
845
846 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
847   -moz-image-region: rect(18px, 576px, 36px, 558px);
848 }
849
850 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
851   -moz-image-region: rect(36px, 576px, 54px, 558px);
852 }
853
854 #nav-bar-overflow-button {
855   -moz-image-region: rect(0, 612px, 18px, 594px);
856 }
857
858 #nav-bar-overflow-button:hover,
859 #nav-bar-overflow-button[open="true"] {
860   -moz-image-region: rect(18px, 612px, 36px, 594px);
861 }
862
863 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
864   transform: scaleX(-1);
865 }
866
867 #tabview-button {
868   -moz-image-region: rect(0, 648px, 18px, 630px);
869 }
870
871 #tabview-button:hover {
872   -moz-image-region: rect(18px, 648px, 36px, 630px);
873 }
874
875 #email-link-button[cui-areatype="toolbar"] {
876   -moz-image-region: rect(0, 666px, 18px, 648px);
877 }
878
879 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
880   -moz-image-region: rect(18px, 666px, 36px, 648px);
881 }
882
883 #email-button[cui-areatype="toolbar"][disabled="true"] {
884   -moz-image-region: rect(36px, 666px, 54px, 648px);
885 }
886
887 #sidebar-button[cui-areatype="toolbar"] {
888   -moz-image-region: rect(0, 684px, 18px, 666px);
889 }
890
891 #sidebar-button[cui-areatype="toolbar"]:hover {
892   -moz-image-region: rect(18px, 684px, 36px, 666px);
893 }
894
895 #panic-button[cui-areatype="toolbar"] {
896   -moz-image-region: rect(0, 702px, 18px, 684px);
897 }
898
899 #panic-button[cui-areatype="toolbar"]:hover,
900 #panic-button[cui-areatype="toolbar"][open] {
901   -moz-image-region: rect(18px, 702px, 36px, 684px);
902 }
903
904 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
905   transform: scaleX(-1);
906 }
907
908 #loop-button,
909 #loop-button > .toolbarbutton-badge-stack {
910   list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
911   -moz-image-region: rect(0, 18px, 18px, 0);
912 }
913
914 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
915 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
916   -moz-image-region: rect(0, 90px, 18px, 72px);
917 }
918
919 #loop-button[state="disabled"],
920 #loop-button[disabled="true"],
921 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
922 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
923   -moz-image-region: rect(0, 36px, 18px, 18px);
924 }
925
926 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
927 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
928   -moz-image-region: rect(0, 126px, 18px, 108px);
929 }
930
931 #loop-button:not([disabled="true"])[state="error"],
932 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
933   -moz-image-region: rect(0, 54px, 18px, 36px);
934 }
935
936 #loop-button:not([disabled="true"])[state="action"],
937 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
938   -moz-image-region: rect(0, 72px, 18px, 54px);
939 }
940
941 #loop-button:not([disabled="true"])[state="active"],
942 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
943   -moz-image-region: rect(0, 108px, 18px, 90px);
944 }
945
946 #webide-button[cui-areatype="toolbar"] {
947   -moz-image-region: rect(0, 738px, 18px, 720px);
948 }
949
950 #webide-button[cui-areatype="toolbar"]:hover {
951   -moz-image-region: rect(18px, 738px, 36px, 720px);
952 }
953
954 /* === END toolbarbuttons.inc.css === */
955
956 /* === BEGIN menupanel.inc.css === */
957
958 /* Menu panel and palette styles */
959
960 :root {
961    /* avoid aero overrides with changed filenames */
962   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
963   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
964 }
965
966 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
967 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
968           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
969           #social-share-button, #open-file-button, #find-button, #developer-button,
970           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
971           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
972           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
973           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button)[cui-areatype="menu-panel"],
974 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
975           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
976           #social-share-button, #open-file-button, #find-button, #developer-button,
977           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
978           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
979           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
980           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button) {
981   list-style-image: var(--menupanel-list-style-image);
982 }
983
984 #home-button[cui-areatype="menu-panel"],
985 toolbarpaletteitem[place="palette"] > #home-button {
986   -moz-image-region: rect(0px, 128px, 32px, 96px);
987 }
988
989 #home-button[cui-areatype="menu-panel"]:hover,
990 toolbarpaletteitem[place="palette"] > #home-button:hover {
991   -moz-image-region: rect(32px, 128px, 64px, 96px);
992 }
993
994 #bookmarks-menu-button[cui-areatype="menu-panel"],
995 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
996   -moz-image-region: rect(0px, 192px, 32px, 160px);
997 }
998
999 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1000 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1001   -moz-image-region: rect(32px, 192px, 64px, 160px);
1002 }
1003
1004 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1005   -moz-image-region: rect(32px, 192px, 64px, 160px);
1006 }
1007
1008 #history-panelmenu[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1010   -moz-image-region: rect(0px, 224px, 32px, 192px);
1011 }
1012
1013 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1015   -moz-image-region: rect(32px, 224px, 64px, 192px);
1016 }
1017
1018 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1019   -moz-image-region: rect(32px, 224px, 64px, 192px);
1020 }
1021
1022 #downloads-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #downloads-button {
1024   -moz-image-region: rect(0px, 256px, 32px, 224px);
1025 }
1026
1027 #downloads-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1029   -moz-image-region: rect(32px, 256px, 64px, 224px);
1030 }
1031
1032 #add-ons-button[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #add-ons-button {
1034   -moz-image-region: rect(0px, 288px, 32px, 256px);
1035 }
1036
1037 #add-ons-button[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1039   -moz-image-region: rect(32px, 288px, 64px, 256px);
1040 }
1041
1042 #open-file-button[cui-areatype="menu-panel"],
1043 toolbarpaletteitem[place="palette"] > #open-file-button {
1044   -moz-image-region: rect(0px, 320px, 32px, 288px);
1045 }
1046
1047 #open-file-button[cui-areatype="menu-panel"]:hover,
1048 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1049   -moz-image-region: rect(32px, 320px, 64px, 288px);
1050 }
1051
1052 #save-page-button[cui-areatype="menu-panel"],
1053 toolbarpaletteitem[place="palette"] > #save-page-button {
1054   -moz-image-region: rect(0px, 352px, 32px, 320px);
1055 }
1056
1057 #save-page-button[cui-areatype="menu-panel"]:hover,
1058 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1059   -moz-image-region: rect(32px, 352px, 64px, 320px);
1060 }
1061
1062 #sync-button[cui-areatype="menu-panel"],
1063 toolbarpaletteitem[place="palette"] > #sync-button {
1064   -moz-image-region: rect(0px, 384px, 32px, 352px);
1065 }
1066
1067 #sync-button[cui-areatype="menu-panel"]:hover,
1068 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1069   -moz-image-region: rect(32px, 384px, 64px, 352px);
1070 }
1071
1072 #sync-button[cui-areatype="menu-panel"][status="active"] {
1073   list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1074   -moz-image-region: rect(0px, 32px, 32px, 0px);
1075 }
1076
1077 #feed-button[cui-areatype="menu-panel"],
1078 toolbarpaletteitem[place="palette"] > #feed-button {
1079   -moz-image-region: rect(0px, 416px, 32px, 384px);
1080 }
1081
1082 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1083 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1084   -moz-image-region: rect(32px, 416px, 64px, 384px);
1085 }
1086
1087 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1088 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1089   -moz-image-region: rect(64px, 416px, 96px, 384px);
1090 }
1091
1092 #social-share-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #social-share-button {
1094   -moz-image-region: rect(0px, 448px, 32px, 416px);
1095 }
1096
1097 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1098 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1099   -moz-image-region: rect(32px, 448px, 64px, 416px);
1100 }
1101
1102 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1103 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1104   -moz-image-region: rect(64px, 448px, 96px, 416px);
1105 }
1106
1107 #characterencoding-button[cui-areatype="menu-panel"],
1108 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1109   -moz-image-region: rect(0px, 480px, 32px, 448px);
1110 }
1111
1112 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1113 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1114   -moz-image-region: rect(32px, 480px, 64px, 448px);
1115 }
1116
1117 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1118 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1119   -moz-image-region: rect(64px, 480px, 96px, 448px);
1120 }
1121
1122 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1123   -moz-image-region: rect(32px, 480px, 64px, 448px);
1124 }
1125
1126 #new-window-button[cui-areatype="menu-panel"],
1127 toolbarpaletteitem[place="palette"] > #new-window-button {
1128   -moz-image-region: rect(0px, 512px, 32px, 480px);
1129 }
1130
1131 #new-window-button[cui-areatype="menu-panel"]:hover,
1132 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1133   -moz-image-region: rect(32px, 512px, 64px, 480px);
1134 }
1135
1136 #e10s-button[cui-areatype="menu-panel"],
1137 toolbarpaletteitem[place="palette"] > #e10s-button {
1138   -moz-image-region: rect(0px, 512px, 32px, 480px);
1139 }
1140
1141 #e10s-button[cui-areatype="menu-panel"]:hover,
1142 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1143   -moz-image-region: rect(32px, 512px, 64px, 480px);
1144 }
1145
1146 #new-tab-button[cui-areatype="menu-panel"],
1147 toolbarpaletteitem[place="palette"] > #new-tab-button {
1148   -moz-image-region: rect(0px, 544px, 32px, 512px);
1149 }
1150
1151 #new-tab-button[cui-areatype="menu-panel"]:hover,
1152 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1153   -moz-image-region: rect(32px, 544px, 64px, 512px);
1154 }
1155
1156 #privatebrowsing-button[cui-areatype="menu-panel"],
1157 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1158   -moz-image-region: rect(0px, 576px, 32px, 544px);
1159 }
1160
1161 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1162 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1163   -moz-image-region: rect(32px, 576px, 64px, 544px);
1164 }
1165
1166 #tabview-button[cui-areatype="menu-panel"],
1167 toolbarpaletteitem[place="palette"] > #tabview-button {
1168   -moz-image-region: rect(0px, 608px, 32px, 576px);
1169 }
1170
1171 #tabview-button[cui-areatype="menu-panel"]:hover,
1172 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1173   -moz-image-region: rect(32px, 608px, 64px, 576px);
1174 }
1175
1176 #find-button[cui-areatype="menu-panel"],
1177 toolbarpaletteitem[place="palette"] > #find-button {
1178   -moz-image-region: rect(0px, 640px, 32px, 608px);
1179 }
1180
1181 #find-button[cui-areatype="menu-panel"]:hover,
1182 toolbarpaletteitem[place="palette"] > #find-button:hover {
1183   -moz-image-region: rect(32px, 640px, 64px, 608px);
1184 }
1185
1186 #print-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #print-button {
1188   -moz-image-region: rect(0px, 672px, 32px, 640px);
1189 }
1190
1191 #print-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #print-button:hover {
1193   -moz-image-region: rect(32px, 672px, 64px, 640px);
1194 }
1195
1196 #fullscreen-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1198   -moz-image-region: rect(0px, 704px, 32px, 672px);
1199 }
1200
1201 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1202 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1203   -moz-image-region: rect(32px, 704px, 64px, 672px);
1204 }
1205
1206 #developer-button[cui-areatype="menu-panel"],
1207 toolbarpaletteitem[place="palette"] > #developer-button {
1208   -moz-image-region: rect(0px, 736px, 32px, 704px);
1209 }
1210
1211 #developer-button[cui-areatype="menu-panel"]:hover,
1212 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1213   -moz-image-region: rect(32px, 736px, 64px, 704px);
1214 }
1215
1216 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1217   -moz-image-region: rect(32px, 736px, 64px, 704px);
1218 }
1219
1220 #preferences-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #preferences-button {
1222   -moz-image-region: rect(0px, 768px, 32px, 736px);
1223 }
1224
1225 #preferences-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1227   -moz-image-region: rect(32px, 768px, 64px, 736px);
1228 }
1229
1230 #email-link-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #email-link-button {
1232   -moz-image-region: rect(0, 800px, 32px, 768px);
1233 }
1234
1235 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1236 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1237   -moz-image-region: rect(32px, 800px, 64px, 768px);
1238 }
1239
1240 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1241 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1242   -moz-image-region: rect(64px, 800px, 96px, 768px);
1243 }
1244
1245 #sidebar-button[cui-areatype="menu-panel"],
1246 toolbarpaletteitem[place="palette"] > #sidebar-button {
1247   -moz-image-region: rect(0, 864px, 32px, 832px);
1248 }
1249
1250 #sidebar-button[cui-areatype="menu-panel"]:hover,
1251 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1252 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1253   -moz-image-region: rect(32px, 864px, 64px, 832px);
1254 }
1255
1256 #panic-button[cui-areatype="menu-panel"],
1257 toolbarpaletteitem[place="palette"] > #panic-button {
1258   -moz-image-region: rect(0, 896px, 32px, 864px);
1259 }
1260
1261 #panic-button[cui-areatype="menu-panel"]:hover,
1262 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1263 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1264   -moz-image-region: rect(32px, 896px, 64px, 864px);
1265 }
1266
1267 #webide-button[cui-areatype="menu-panel"],
1268 toolbarpaletteitem[place="palette"] > #webide-button {
1269   -moz-image-region: rect(0px, 960px, 32px, 928px);
1270 }
1271
1272 #webide-button[cui-areatype="menu-panel"]:hover,
1273 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1274   -moz-image-region: rect(32px, 960px, 64px, 928px);
1275 }
1276
1277 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1278   -moz-image-region: rect(0, 832px, 32px, 800px);
1279 }
1280
1281 #loop-button[cui-areatype="menu-panel"],
1282 toolbarpaletteitem[place="palette"] > #loop-button {
1283   list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1284   -moz-image-region: rect(0, 32px, 32px, 0);
1285 }
1286
1287 /* Make sure that the state icons are not shown in the customization palette. */
1288 toolbarpaletteitem[place="palette"] > #loop-button {
1289   -moz-image-region: rect(0, 32px, 32px, 0) !important;
1290 }
1291
1292 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1293   -moz-image-region: rect(0, 160px, 32px, 128px);
1294 }
1295
1296 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1297 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1298   -moz-image-region: rect(0, 64px, 32px, 32px);
1299 }
1300
1301 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1302   -moz-image-region: rect(0, 224px, 32px, 192px);
1303 }
1304
1305 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1306   -moz-image-region: rect(0, 96px, 32px, 64px);
1307 }
1308
1309 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1310   -moz-image-region: rect(0, 128px, 32px, 96px);
1311 }
1312
1313 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1314   -moz-image-region: rect(0, 192px, 32px, 160px);
1315 }
1316
1317 /* Wide panel control icons */
1318
1319 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1320 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1321 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1323   list-style-image: var(--menupanel-small-list-style-image);
1324 }
1325
1326 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1327 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1328   -moz-image-region: rect(0px, 32px, 16px, 16px);
1329 }
1330
1331 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1332 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1333   -moz-image-region: rect(16px, 32px, 32px, 16px);
1334 }
1335
1336 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1337 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1338   -moz-image-region: rect(32px, 32px, 48px, 16px);
1339 }
1340
1341 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1342 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1343   -moz-image-region: rect(0px, 48px, 16px, 32px);
1344 }
1345
1346 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1347 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1348   -moz-image-region: rect(16px, 48px, 32px, 32px);
1349 }
1350
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1353   -moz-image-region: rect(32px, 48px, 48px, 32px);
1354 }
1355
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1358   -moz-image-region: rect(0px, 64px, 16px, 48px);
1359 }
1360
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1363   -moz-image-region: rect(16px, 64px, 32px, 48px);
1364 }
1365
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1368   -moz-image-region: rect(32px, 64px, 48px, 48px);
1369 }
1370
1371 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1372 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1373   -moz-image-region: rect(0px, 80px, 16px, 64px);
1374 }
1375
1376 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1377 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1378   -moz-image-region: rect(16px, 80px, 32px, 64px);
1379 }
1380
1381 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1382 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1383   -moz-image-region: rect(32px, 80px, 48px, 64px);
1384 }
1385
1386 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1387 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1388   -moz-image-region: rect(0px, 96px, 16px, 80px);
1389 }
1390
1391 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1392 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1393   -moz-image-region: rect(16px, 96px, 32px, 80px);
1394 }
1395
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1398   -moz-image-region: rect(32px, 96px, 48px, 80px);
1399 }
1400
1401 #add-share-provider {
1402   list-style-image: var(--menupanel-small-list-style-image);
1403   -moz-image-region: rect(0px, 96px, 16px, 80px);
1404 }
1405
1406 /* === END menupanel.inc.css === */
1407
1408 .toolbarbutton-1:not([type="menu-button"]) {
1409   -moz-box-orient: vertical;
1410 }
1411
1412 .toolbarbutton-1,
1413 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1414 /*  min-width: 36px;
1415   min-height: 36px;*/
1416 }
1417
1418 .toolbarbutton-1,
1419 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1420 .toolbarbutton-1[disabled="true"]:hover:active,
1421 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1422   padding: 1px 2px;
1423 }
1424
1425 .toolbarbutton-1:hover:active,
1426 .toolbarbutton-1[open="true"],
1427 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1428   padding-top: 2px;
1429   padding-bottom: 0px;
1430   -moz-padding-start: 3px;
1431   -moz-padding-end: 1px;
1432 }
1433
1434 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1435 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1436 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1437 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1438 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1439 }
1440
1441 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1442 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1443 }
1444
1445 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1446 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1447 }
1448
1449 .toolbarbutton-1 > .toolbarbutton-icon,
1450 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1451 }
1452
1453 .findbar-button,
1454 #nav-bar .toolbarbutton-1,
1455 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1456 }
1457
1458 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1459 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1460 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1461 }
1462
1463 #nav-bar #PanelUI-menu-button {
1464 /*  -moz-padding-start: 7px;
1465   -moz-padding-end: 5px;*/
1466 }
1467
1468 #nav-bar .toolbarbutton-1[type=panel],
1469 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1470 /*  padding-left: 5px;
1471   padding-right: 5px;*/
1472 }
1473
1474 #nav-bar .toolbarbutton-1 > menupopup {
1475 /*  margin-top: -3px;*/
1476 }
1477
1478 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1479   margin-top: -4px;
1480 }
1481
1482 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1483 /*  -moz-padding-end: 0;*/
1484 }
1485
1486 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1487 /*  -moz-padding-start: 0;
1488   -moz-box-align: center;*/
1489 }
1490
1491 .findbar-button > .toolbarbutton-text,
1492 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1493 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1494 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1495 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1496 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1498 /*  padding: 2px 6px;
1499   border: 1px solid;
1500   border-color: transparent;
1501   transition-property: background-color, border-color;
1502   transition-duration: 150ms;*/
1503 }
1504 /*
1505 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1506 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1507 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1508   padding: 3px 7px;
1509 }
1510 */
1511
1512 /* Help SDK icons fit: */
1513 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1514 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1515   width: 16px;
1516 }
1517
1518 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1519   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1520   width: 32px;
1521 }
1522
1523 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1524 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1525 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1526 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1527 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1528 /*  -moz-padding-end: 17px;*/
1529 }
1530
1531 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1532 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1533   /* horizontal padding + border + icon width */
1534 /*  max-width: 43px;*/
1535 }
1536
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1538 }
1539
1540 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1541 }
1542
1543 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1544 }
1545
1546 #nav-bar .toolbaritem-combined-buttons {
1547 /*  margin-left: 2px;
1548   margin-right: 2px;*/
1549 }
1550
1551 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1552 /*  padding-left: 0;
1553   padding-right: 0;*/
1554 }
1555
1556 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1557 #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 {
1558 /*
1559   content: "";
1560   display: -moz-box;
1561   width: 1px;
1562   height: 16px;
1563   -moz-margin-end: -1px;
1564 */
1565 }
1566
1567 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1568 }
1569
1570 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1571 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1572 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1573 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1574 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1575 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1576 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1577 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1578 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1579 }
1580
1581 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1582 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1583 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1584 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1585 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1586 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1587 }
1588
1589 #TabsToolbar .toolbarbutton-1,
1590 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1591 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1592 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1593 }
1594
1595 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1596 #TabsToolbar .toolbarbutton-1[open],
1597 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1598 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1599 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1600 }
1601
1602 /* unified back/forward button */
1603
1604 #forward-button {
1605   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1606 }
1607
1608 #forward-button > menupopup {
1609   margin-top: 1px !important;
1610 }
1611
1612 #forward-button > .toolbarbutton-icon {
1613   background-clip: padding-box !important;
1614   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1615   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1616 }
1617
1618 #forward-button {
1619   -moz-margin-start: -4px !important;
1620   padding-left: 5px;
1621   padding-right: 5px;
1622   margin-top: 3px;
1623   margin-bottom: 3px;
1624   border-radius: 0 10000px 10000px 0;
1625 }
1626
1627 #forward-button:-moz-locale-dir(rtl) {
1628   border-radius: 10000px 0 0 10000px;
1629 }
1630
1631 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1632   transition: margin-left 150ms ease-out;
1633 }
1634
1635 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1636   margin-left: -27px !important;
1637 }
1638
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1640   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1641   transition-delay: 100s;
1642 }
1643
1644 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1645   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1646   margin-left: -27.01px !important;
1647 }
1648
1649 #back-button {
1650 /*  padding-top: 3px !important;
1651   padding-bottom: 3px !important;
1652   -moz-padding-start: 5px !important;
1653   -moz-padding-end: 0 !important;*/
1654   position: relative;
1655   z-index: 1;
1656   border-radius: 10000px;
1657   width: 30px;
1658   height: 30px;
1659   margin-top: -2px;
1660   margin-bottom: -2px;
1661 }
1662
1663 #back-button:-moz-locale-dir(rtl) {
1664 }
1665
1666 #back-button > menupopup {
1667   margin-top: -1px !important;
1668 }
1669
1670 #back-button > .toolbarbutton-icon {
1671   border-radius: 10000px !important;
1672   background-clip: padding-box !important;
1673 /*  background-color: hsla(210,25%,98%,.08) !important;
1674   padding: 6px !important;
1675   border-style: none !important;
1676   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1677               0 0 0 1px hsla(210,4%,10%,.25);*/
1678   transition-property: background-color, box-shadow !important;
1679   transition-duration: 250ms !important;
1680 }
1681
1682 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1683 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1684 }
1685
1686 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1687 #back-button[open="true"] > .toolbarbutton-icon {
1688 /*  background-color: hsla(210,4%,10%,.12) !important;
1689   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1690               0 0 0 1px hsla(210,4%,10%,.25),
1691               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1692 }
1693
1694 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1695   transform: scaleX(-1);
1696 }
1697 /*
1698 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1699 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1700   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1701 }
1702
1703 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1704 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1705   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1706 }
1707
1708 #home-button.bookmark-item {
1709   list-style-image: url("chrome://browser/skin/Toolbar.png");
1710 }
1711
1712 #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),
1713 #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),
1714 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1715 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1716 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1717 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1718 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1719   position: relative;
1720   z-index: 1;
1721   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1722 }
1723
1724 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1725 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1726   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1727 }
1728 */
1729
1730 #downloads-button > .toolbarbutton-icon {
1731   margin: 0;
1732 }
1733
1734 /* tabview menu item */
1735
1736 #menu_tabview {
1737   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1738   -moz-image-region: rect(1px, 89px, 17px, 73px);
1739 }
1740
1741 #menu_tabview[groups="0"] {
1742   -moz-image-region: rect(1px, 17px, 17px, 1px);
1743 }
1744
1745 #menu_tabview[groups="1"] {
1746   -moz-image-region: rect(1px, 35px, 17px, 19px);
1747 }
1748
1749 #menu_tabview[groups="2"] {
1750   -moz-image-region: rect(1px, 53px, 17px, 37px);
1751 }
1752
1753 #menu_tabview[groups="3"] {
1754   -moz-image-region: rect(1px, 71px, 17px, 55px);
1755 }
1756
1757 /* undo close tab menu item */
1758 #alltabs_undoCloseTab {
1759   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1760 }
1761
1762 @media (min-resolution: 1.1dppx) {
1763   #alltabs_undoCloseTab {
1764     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1765   }
1766   #alltabs_undoCloseTab > .toolbarbutton-icon {
1767     width: 16px;
1768   }
1769 }
1770
1771 /* zoom control text (reset) button special case: */
1772
1773 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1774   /* To make this line up with the icons, it needs the same height (18px) +
1775    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1776    * increase in text sizes would break things...
1777    */
1778   min-height: 20px;
1779 }
1780
1781 /* ::::: fullscreen window controls ::::: */
1782
1783 #window-controls {
1784   -moz-margin-start: 4px;
1785 }
1786
1787 #minimize-button,
1788 #restore-button,
1789 #close-button {
1790 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1791   padding: 0; */
1792 }
1793
1794 #minimize-button {
1795   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1796 }
1797
1798 #minimize-button:hover {
1799   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1800 }
1801
1802 #restore-button {
1803   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1804 }
1805
1806 #restore-button:hover {
1807   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1808 }
1809
1810 #close-button {
1811   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1812 }
1813
1814 #close-button:hover {
1815   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1816 }
1817
1818 /* ::::: Location Bar ::::: */
1819
1820 #urlbar,
1821 .searchbar-textbox {
1822   border-radius: 5px;
1823   margin: 2px 0;
1824   -moz-margin-start: 3px;
1825 }
1826
1827 #urlbar {
1828   /* make color as light as possible to deal with dark non-domain parts */
1829   color: #FFBFFF;
1830 }
1831
1832 /* overlap the urlbar's border */
1833 #PopupAutoCompleteRichResult {
1834   margin-top: -1px;
1835 }
1836
1837 #urlbar:-moz-lwtheme,
1838 .searchbar-textbox:-moz-lwtheme {
1839   /* background-color: rgba(255,255,255,.8);
1840   @navbarTextboxCustomBorder@
1841   color: black; */
1842 }
1843
1844 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1845 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1846 /*  background-color: rgba(255,255,255,.9);*/
1847 }
1848
1849 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1850 .searchbar-textbox:-moz-lwtheme[focused] {
1851 /*  background-color: white;*/
1852 }
1853
1854 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1855 /*  -moz-border-start: none;
1856   margin-left: 0;*/
1857 }
1858
1859 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1860 /*  border-top-left-radius: 0;
1861   border-bottom-left-radius: 0; */
1862 }
1863
1864 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1865 /*  border-top-right-radius: 0;
1866   border-bottom-right-radius: 0; */
1867 }
1868
1869 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1870 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1871 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1872 }
1873
1874 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1875 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1876   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1877   transform: scaleX(-1);
1878 }
1879
1880 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1881   -moz-box-direction: reverse;
1882 }
1883
1884 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1885 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1886   color: #E7ADE7;
1887 }
1888
1889 #urlbar-container {
1890   -moz-box-orient: horizontal;
1891   -moz-box-align: stretch;
1892 }
1893
1894 .urlbar-textbox-container {
1895   -moz-box-align: stretch;
1896 }
1897
1898 .urlbar-input-box {
1899   -moz-margin-start: 0;
1900 }
1901
1902 #urlbar-icons {
1903   -moz-box-align: center;
1904 }
1905
1906 .urlbar-icon {
1907   padding: 0 2px;
1908   /* 16x16 icon with border-box sizing */
1909   width: 20px;
1910   height: 16px;
1911 }
1912
1913 .search-go-container {
1914   padding: 2px;
1915 }
1916
1917 .search-go-container > .search-go-button {
1918   padding: 0;
1919 }
1920
1921 #urlbar-search-footer {
1922   border-top: 1px solid #A09090;
1923 }
1924
1925 #urlbar-search-settings {
1926 }
1927
1928 #urlbar-search-settings:hover {
1929 }
1930
1931 #urlbar-search-settings:hover:active {
1932 }
1933
1934 #urlbar-search-splitter {
1935   min-width: 6px;
1936   -moz-margin-start: -3px;
1937   border: none;
1938   background: transparent;
1939 }
1940
1941 #urlbar-search-splitter + #urlbar-container > #urlbar,
1942 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1943   -moz-margin-start: 0;
1944 }
1945
1946 #urlbar-display-box {
1947 }
1948
1949 .urlbar-display {
1950   -moz-border-end: 1px solid #9C9CFF;
1951   -moz-margin-end: 3px;
1952   margin-top: 0;
1953   margin-bottom: 0;
1954   -moz-margin-start: 0;
1955   color: #8050B0;
1956 }
1957
1958 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1959
1960 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1961   border-bottom: 1px solid #A09090;
1962   background-color: #000000;
1963   padding: 6px 0;
1964   -moz-padding-start: 44px;
1965   -moz-padding-end: 6px;
1966   background-image: url("chrome://browser/skin/info.svg");
1967   background-clip: padding-box;
1968   background-position: 20px center;
1969   background-repeat: no-repeat;
1970   background-size: 16px 16px;
1971 }
1972
1973 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1974   background-position: right 20px center;
1975 }
1976
1977 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1978   margin: 0;
1979   padding: 0;
1980 }
1981
1982 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1983   -moz-margin-start: 0;
1984 }
1985
1986 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1987   -moz-appearance: none;
1988   min-width: 80px;
1989   border-radius: 3px;
1990   padding: 4px 16px;
1991   margin: 0;
1992   -moz-margin-start: 10px;
1993 }
1994
1995 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1996 }
1997
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1999 }
2000
2001 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2002 }
2003
2004 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2005 }
2006
2007 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2008
2009 #search-container {
2010   min-width: calc(54px + 11ch);
2011 }
2012
2013 /* identity box */
2014
2015 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2016   background-color: var(--identity-box-verified-background-color);
2017 }
2018
2019 #identity-box:-moz-focusring {
2020   outline: 1px dotted #008484;
2021   outline-offset: -1px;
2022 }
2023
2024 #identity-box.verifiedDomain:-moz-focusring,
2025 #identity-box.verifiedIdentity:-moz-focusring {
2026   outline-color: #000000;
2027 }
2028
2029 /* Location bar dropmarker */
2030
2031 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2032   background-color: transparent;
2033 }
2034
2035 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2036 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2037 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2038   border: none;
2039   border-radius: 0px;
2040   transition: opacity 0.15s ease;
2041 }
2042
2043 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2044   opacity: 0;
2045 }
2046
2047 .urlbar-history-dropmarker:hover {
2048 }
2049
2050 .urlbar-history-dropmarker:hover:active,
2051 .urlbar-history-dropmarker[open="true"] {
2052 }
2053
2054 /* page proxy icon */
2055
2056 /* === BEGIN identity-block.inc.css === */
2057
2058 #identity-box {
2059   --identity-box-verified-color: #008484;
2060   /* Default theme does different color per channel, we can't as they do it build-time. */
2061   --identity-box-chrome-color: #9C9CFF;
2062
2063   border-inline-end: 1px solid var(--urlbar-separator-color);
2064   font-size: .9em;
2065   border-radius: 2px;
2066   padding: 3px 5px;
2067   margin-inline-end: 4px;
2068   overflow: hidden;
2069   /* The latter two properties have a transition to handle the delayed hiding of
2070      the forward button when hovered. */
2071   transition: background-color 150ms ease, padding-left, padding-right;
2072 }
2073
2074 #identity-box:-moz-locale-dir(ltr) {
2075   border-top-right-radius: 0;
2076   border-bottom-right-radius: 0;
2077 }
2078
2079 #identity-box:-moz-locale-dir(rtl) {
2080   border-top-left-radius: 0;
2081   border-bottom-left-radius: 0;
2082 }
2083
2084 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2085   color: var(--identity-box-chrome-color);
2086   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2087 }
2088
2089 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2090   color: var(--identity-box-verified-color);
2091   -moz-border-end: 1px solid var(--identity-box-verified-color);
2092 }
2093
2094 #notification-popup-box:not([hidden]) + #identity-box {
2095   padding-inline-start: 10px;
2096   border-radius: 0;
2097 }
2098
2099 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2100 /*   border-radius: 0;
2101   padding-inline-start: 2px; */
2102   padding-inline-end: 2px;
2103   margin-inline-end: 1px;
2104 }
2105
2106 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2107     #notification-popup-box[hidden] + #identity-box {
2108   padding-inline-start: 2px;
2109 }
2110
2111 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2112     #notification-popup-box[hidden] + #identity-box {
2113   /* Forward button hiding is delayed when hovered, so we should use the same
2114      delay for the identity box. We handle both horizontal paddings (for LTR and
2115      RTL), the latter two delays here are for padding-left and padding-right. */
2116   transition-delay: 0s, 100s, 100s;
2117 }
2118
2119 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2120     #notification-popup-box[hidden] + #identity-box {
2121   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2122   padding-inline-start: 2.01px;
2123 }
2124
2125 /* MAIN IDENTITY ICON */
2126
2127 #identity-icon {
2128   width: 16px;
2129   height: 16px;
2130   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2131 }
2132
2133 #identity-box:hover > #identity-icon,
2134 #identity-box[open=true] > #identity-icon {
2135   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2136 }
2137
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2139   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2140 }
2141
2142 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2143   opacity: 0.3;
2144 }
2145
2146 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2147   -moz-image-region: inherit;
2148   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2149   width: 16px;
2150   height: 16px;
2151   opacity: 1;
2152 }
2153
2154 /* TRACKING PROTECTION ICON */
2155
2156 #tracking-protection-icon {
2157   width: 16px;
2158   height: 16px;
2159   margin-inline-start: 2px;
2160   margin-inline-end: 0;
2161   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2162   opacity: 1;
2163 }
2164
2165 #tracking-protection-icon[state="loaded-tracking-content"] {
2166   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2167 }
2168
2169 #tracking-protection-icon[animate] {
2170   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2171 }
2172
2173 #tracking-protection-icon:not([state]) {
2174   margin-inline-end: -18px;
2175   pointer-events: none;
2176   opacity: 0;
2177   /* Only animate the shield in, when it disappears hide it immediately. */
2178   transition: none;
2179 }
2180
2181 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2182   visibility: collapse;
2183 }
2184
2185 /* CONNECTION ICON */
2186
2187 #connection-icon {
2188   width: 16px;
2189   height: 16px;
2190   margin-inline-start: 2px;
2191   visibility: collapse;
2192 }
2193
2194 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2195 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2196   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2197   visibility: visible;
2198 }
2199
2200 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2201 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2202   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2203   visibility: visible;
2204 }
2205
2206 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2207 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2208 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2209   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2210   visibility: visible;
2211 }
2212
2213 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2214   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2215   visibility: visible;
2216 }
2217
2218 /* === END identity-block.inc.css === */
2219
2220 #page-proxy-favicon {
2221   -moz-image-region: rect(0, 16px, 16px, 0);
2222 }
2223
2224 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2225 /*  -moz-margin-end: 1px;*/
2226 }
2227
2228 #identity-box:hover > #page-proxy-favicon {
2229   -moz-image-region: rect(0, 32px, 16px, 16px);
2230 }
2231
2232 #identity-box:hover:active > #page-proxy-favicon,
2233 #identity-box[open=true] > #page-proxy-favicon {
2234   -moz-image-region: rect(0, 48px, 16px, 32px);
2235 }
2236
2237 #identity-box:hover {
2238   background-color: #FFCF00;
2239   color: #000000;
2240 }
2241
2242 #identity-box:hover:active,
2243 #identity-box[open=true] {
2244   background-color: #FF9F00;
2245   color: #000000;
2246 }
2247
2248 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2249 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2250 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2251   background-color: #9C9CFF;
2252   color: #000000;
2253 }
2254
2255 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2256 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2257 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2258   background-color: #008484;
2259   color: #000000;
2260 }
2261
2262 /* autocomplete */
2263
2264 #treecolAutoCompleteImage {
2265   max-width: 36px;
2266 }
2267
2268 .ac-result-type-bookmark,
2269 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2270   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2271   -moz-image-region: rect(0px 16px 16px 0px);
2272   width: 16px;
2273   height: 16px;
2274 }
2275
2276 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2277 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2278 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2279 }
2280
2281 .ac-result-type-keyword,
2282 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2283 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2284   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2285   width: 16px;
2286   height: 16px;
2287 }
2288
2289   .ac-result-type-keyword[selected="true"],
2290   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2291   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2292     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2293   }
2294
2295 .ac-result-type-tag,
2296 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2297   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2298   width: 16px;
2299   height: 16px;
2300 }
2301
2302 .ac-comment,
2303 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2304 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2305   font-size: 1.05em;
2306 }
2307
2308 .ac-extra > .ac-comment,
2309 .ac-url-text,
2310 .ac-action-text {
2311   font-size: 1em;
2312 }
2313
2314 .ac-url-text,
2315 .ac-action-text {
2316   color: #9C9CFF;
2317 }
2318
2319 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2320   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2321   -moz-image-region: rect(0, 16px, 16px, 0);
2322   padding: 0 3px;
2323   width: 22px;
2324   height: 16px;
2325 }
2326
2327 @media (min-resolution: 1.1dppx) {
2328   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2329     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2330     -moz-image-region: rect(0, 32px, 32px, 0);
2331   }
2332 }
2333
2334 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2335   -moz-image-region: rect(16px, 16px, 32px, 0);
2336 }
2337
2338 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2339   color: #8050B0;
2340 }
2341
2342 .ac-comment[selected="true"],
2343 .ac-url-text[selected="true"],
2344 .ac-action-text[selected="true"] {
2345   color: inherit !important;
2346 }
2347
2348 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2349 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2350 {
2351   color: #8050B0;
2352   font-size: smaller;
2353 }
2354
2355 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2356   border-top: 1px solid #9C9CFF;
2357 }
2358
2359 /* combined go/reload/stop button in location bar */
2360
2361 #urlbar-go-button,
2362 #urlbar-reload-button,
2363 #urlbar-stop-button {
2364   border-style: none;
2365   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2366 /*  padding: 0 9px;*/
2367   margin-inline-start: 0px;
2368   border-inline-start: 1px solid var(--urlbar-separator-color);
2369   border-image: linear-gradient(transparent 15%,
2370                                 var(--urlbar-separator-color) 15%,
2371                                 var(--urlbar-separator-color) 85%,
2372                                 transparent 85%);
2373   border-image-slice: 1;
2374 }
2375
2376 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2377   border-top-left-radius: 0px;
2378   border-bottom-left-radius: 0px;
2379 }
2380
2381 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2382   border-top-right-radius: 0px;
2383   border-bottom-right-radius: 0px;
2384 }
2385
2386 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2387 #urlbar-reload-button:not(:hover) {
2388   -moz-border-start-style: none;
2389   -moz-padding-start: 3px;
2390 }
2391
2392 #urlbar-reload-button {
2393   -moz-image-region: rect(0px, 14px, 14px, 0px);
2394 }
2395
2396 #urlbar-reload-button[disabled=true] {
2397   -moz-image-region: rect(28px, 14px, 42px, 0px);
2398 }
2399
2400 #urlbar-reload-button:not([disabled=true]):hover {
2401   -moz-image-region: rect(14px, 14px, 28px, 0px);
2402 }
2403
2404 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2405   transform: scaleX(-1);
2406 }
2407
2408 #urlbar-go-button {
2409   -moz-image-region: rect(0, 42px, 14px, 28px);
2410 }
2411
2412 #urlbar-go-button:hover {
2413   -moz-image-region: rect(14px, 42px, 28px, 28px);
2414 }
2415
2416 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2417   transform: scaleX(-1);
2418 }
2419
2420 #urlbar-stop-button {
2421   -moz-image-region: rect(0px, 28px, 14px, 14px);
2422 }
2423
2424 #urlbar-stop-button:hover {
2425   -moz-image-region: rect(14px, 28px, 28px, 14px);
2426 }
2427
2428 @media (min-resolution: 1.1dppx) {
2429   #urlbar-go-button,
2430   #urlbar-reload-button,
2431   #urlbar-stop-button {
2432     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2433   }
2434
2435   #urlbar-go-button > .toolbarbutton-icon,
2436   #urlbar-reload-button > .toolbarbutton-icon,
2437   #urlbar-stop-button > .toolbarbutton-icon {
2438     width: 14px;
2439   }
2440
2441   #urlbar-go-button {
2442     -moz-image-region: rect(0, 84px, 28px, 56px);
2443   }
2444
2445   #urlbar-go-button:hover {
2446     -moz-image-region: rect(28px, 84px, 56px, 56px);
2447   }
2448
2449   #urlbar-go-button:hover:active {
2450     -moz-image-region: rect(56px, 84px, 84px, 56px);
2451   }
2452
2453   #urlbar-reload-button {
2454     -moz-image-region: rect(0, 28px, 28px, 0);
2455   }
2456
2457   #urlbar-reload-button:not([disabled]):hover {
2458     -moz-image-region: rect(28px, 28px, 56px, 0);
2459   }
2460
2461   #urlbar-reload-button:not([disabled]):hover:active {
2462     -moz-image-region: rect(56px, 28px, 84px, 0);
2463   }
2464
2465   #urlbar-stop-button {
2466     -moz-image-region: rect(0, 56px, 28px, 28px);
2467   }
2468
2469   #urlbar-stop-button:not([disabled]):hover {
2470     -moz-image-region: rect(28px, 56px, 56px, 28px);
2471   }
2472
2473   #urlbar-stop-button:hover:active {
2474     -moz-image-region: rect(56px, 56px, 84px, 28px);
2475   }
2476 }
2477
2478 /* popup blocker button */
2479
2480 #page-report-button {
2481   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2482   -moz-image-region: rect(0, 16px, 16px, 0);
2483 }
2484
2485 #page-report-button:hover ,
2486 #page-report-button:hover:active,
2487 #page-report-button[open="true"] {
2488   -moz-image-region: rect(0, 32px, 16px, 16px);
2489 }
2490
2491 /* Reader mode button */
2492
2493 #reader-mode-button {
2494   list-style-image: url("chrome://browser/skin/readerMode.svg");
2495   -moz-image-region: rect(0, 16px, 16px, 0);
2496 }
2497
2498 #reader-mode-button:hover,
2499 #reader-mode-button[readeractive]:hover {
2500   -moz-image-region: rect(0, 32px, 16px, 16px);
2501 }
2502
2503 #reader-mode-button:hover:active,
2504 #reader-mode-button[readeractive] {
2505   -moz-image-region: rect(0, 48px, 16px, 32px);
2506 }
2507
2508 /* social share panel */
2509
2510 .social-share-frame {
2511   min-width: 756px;
2512   height: 150px;
2513 }
2514
2515 #share-container {
2516   min-width: 756px;
2517   background-color: white;
2518   background-repeat: no-repeat;
2519   background-position: center center;
2520 }
2521 #share-container[loading] {
2522   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2523 }
2524 #share-container > browser {
2525   transition: opacity 150ms ease-in-out;
2526   opacity: 1;
2527 }
2528 #share-container[loading] > browser {
2529   opacity: 0;
2530 }
2531
2532 .social-share-toolbar {
2533   border-bottom: 1px solid #9C9CFF;
2534   padding: 2px;
2535 }
2536
2537 #social-share-provider-buttons {
2538   padding: 0;
2539   margin: 0;
2540 }
2541
2542 .share-provider-button {
2543   padding: 5px;
2544   margin: 2px;
2545 }
2546
2547 .share-provider-button > .toolbarbutton-text {
2548   display: none;
2549 }
2550 .share-provider-button > .toolbarbutton-icon {
2551   width: 16px;
2552   min-height: 16px;
2553   max-height: 16px;
2554 }
2555
2556 /* fixup corners for share panel */
2557 .social-panel > .social-panel-frame {
2558   border-radius: inherit;
2559 }
2560
2561 #social-share-panel {
2562   min-height: 100px;
2563   min-width: 766px;
2564 }
2565
2566 #share-container,
2567 .social-share-frame {
2568   border-top-left-radius: 0;
2569   border-bottom-left-radius: inherit;
2570   border-top-right-radius: 0;
2571   border-bottom-right-radius: inherit;
2572 }
2573
2574 #social-share-panel > .social-share-toolbar {
2575   border-top-left-radius: inherit;
2576   border-top-right-radius: inherit;
2577 }
2578
2579 #social-share-provider-buttons {
2580   border-top-left-radius: inherit;
2581   border-top-right-radius: inherit;
2582 }
2583
2584 /* social recommending panel */
2585
2586 #social-mark-button {
2587   -moz-image-region: rect(0, 16px, 16px, 0);
2588 }
2589
2590 /* bookmarks menu-button */
2591
2592 #bookmarks-menu-button.bookmark-item {
2593   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2594   -moz-image-region: rect(0px 16px 16px 0px);
2595 }
2596
2597 #bookmarks-menu-button.bookmark-item[starred] {
2598   -moz-image-region: rect(0px 32px 16px 16px);
2599 }
2600
2601 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2602   padding-top: 2px;
2603   padding-bottom: 2px;
2604 }
2605
2606 #BMB_bookmarksPopup[side="top"],
2607 #BMB_bookmarksPopup[side="bottom"] {
2608   margin-left: -20px;
2609   margin-right: -20px;
2610 }
2611
2612 #BMB_bookmarksPopup[side="left"],
2613 #BMB_bookmarksPopup[side="right"] {
2614   margin-top: -20px;
2615   margin-bottom: -20px;
2616 }
2617
2618 /* bookmarking panel */
2619
2620 #editBookmarkPanelStarIcon {
2621   list-style-image: url("chrome://browser/skin/places/starred48.png");
2622   width: 48px;
2623   height: 48px;
2624 }
2625
2626 #editBookmarkPanelStarIcon[unstarred] {
2627   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2628 }
2629
2630 #editBookmarkPanelTitle {
2631   font-size: 130%;
2632 }
2633
2634 #editBookmarkPanelHeader,
2635 #editBookmarkPanelContent {
2636   margin-bottom: .5em;
2637 }
2638
2639 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2640 #editBMPanel_folderTree {
2641   min-width: 27em;
2642 }
2643
2644 .panel-promo-box {
2645   margin: 5px 0 -6px;
2646   padding: 5px 0;
2647   border-top: 1px solid #9C9CFF;
2648   border-bottom-left-radius: 5px;
2649   border-bottom-right-radius: 5px;
2650 }
2651
2652 .panel-promo-icon {
2653   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2654   -moz-margin-end: 10px;
2655   vertical-align: middle;
2656 }
2657
2658 .panel-promo-closebutton {
2659   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2660   -moz-margin-end: -3px;
2661   margin-top: -3px;
2662 }
2663
2664 .panel-promo-closebutton:hover {
2665   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2666 }
2667
2668 .panel-promo-closebutton:hover:active {
2669   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2670 }
2671
2672 .panel-promo-closebutton > .toolbarbutton-text {
2673   padding: 0;
2674 }
2675
2676 /* ::::: content area ::::: */
2677
2678 #sidebar-box {
2679   background-color: #9C9CFF;
2680   color: #000000;
2681 }
2682
2683 #sidebar {
2684   background-color: #000000;
2685 }
2686
2687 #sidebar-splitter {
2688   -moz-margin-start: 0;
2689 }
2690
2691 #sidebar-header {
2692   color: #000000;
2693   padding: 2px;
2694 }
2695
2696 #sidebar-title {
2697   -moz-padding-start: 0px;
2698 }
2699
2700 #sidebar-header > .close-icon {
2701 /*  padding: 4px 2px;
2702   margin: 0;
2703   border: none;*/
2704   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2705 }
2706
2707 #sidebar-header > .close-icon:hover,
2708 #sidebar-header > .close-icon:hover:active {
2709   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2710 }
2711
2712 #sidebar-splitter:-moz-locale-dir(ltr),
2713 #sidebar:-moz-locale-dir(ltr) {
2714   border-radius: 0 5px 0 0;
2715 }
2716
2717 #sidebar-splitter:-moz-locale-dir(rtl),
2718 #sidebar:-moz-locale-dir(rtl) {
2719   border-radius: 5px 0 0 0;
2720 }
2721
2722 .browserContainer > findbar {
2723 /*
2724   background-color: -moz-dialog;
2725   color: -moz-DialogText;
2726 */
2727 }
2728
2729 /* Tabstrip */
2730
2731 #TabsToolbar {
2732   min-height: 0;
2733   padding: 0;
2734   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2735 }
2736
2737 #TabsToolbar .toolbar-holder {
2738   background-color: #000000; /* correct effect of being an actual toolbar */
2739 }
2740
2741 #main-window[disablechrome] #TabsToolbar,
2742 #TabsToolbar[tabsontop="false"] {
2743   border-bottom: 1px solid #008484;
2744 }
2745
2746 /* === BEGIN tabs.inc.css === */
2747
2748 :root {
2749   /* --tab-toolbar-navbar-overlap: 1px; */
2750   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2751   /* --tab-min-height: 31px; */
2752 }
2753 #TabsToolbar {
2754   /* --tab-stroke-background-size: auto 100%; */
2755 }
2756
2757 .tabbrowser-tab,
2758 .tabs-newtab-button,
2759 #TabsToolbar > #new-tab-button {
2760   margin-top: 0px;
2761 }
2762
2763 .tabbrowser-tab {
2764   padding: 1px 4px 2px;
2765 }
2766
2767 .tabbrowser-tab:first-of-type {
2768   -moz-margin-start: 2px;
2769 }
2770
2771 .tabs-newtab-button,
2772 #TabsToolbar > #new-tab-button {
2773   border-radius: 8px 8px 0px 0px;
2774   -moz-margin-start: 0;
2775 }
2776
2777 .tabs-newtab-button:not(:hover),
2778 #TabsToolbar > #new-tab-button:not(:hover) {
2779   background-color: #C09070;
2780 }
2781
2782 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2783 .tabbrowser-tab[visuallyselected=true] {
2784 /*  position: relative;
2785   z-index: 2;*/
2786 }
2787
2788 .tab-background-middle {
2789 }
2790
2791 .tab-content {
2792 }
2793
2794 .tab-content[pinned] {
2795 }
2796
2797 .tab-throbber,
2798 .tab-icon-image,
2799 .tab-icon-sound,
2800 .tab-close-button {
2801 }
2802
2803 .tab-throbber,
2804 .tab-icon-image {
2805   height: 16px;
2806   width: 16px;
2807   -moz-margin-end: 3px;
2808 }
2809
2810 .tab-icon-image {
2811   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2812 }
2813
2814 .tab-icon-overlay {
2815   width: 16px;
2816   height: 16px;
2817   margin-top: -8px;
2818   -moz-margin-start: -15px;
2819   position: relative;
2820 }
2821
2822 .tab-icon-overlay[crashed] {
2823   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2824 }
2825
2826 .tab-icon-overlay[soundplaying],
2827 .tab-icon-overlay[muted]:not([crashed]) {
2828   border-radius: 10px;
2829 }
2830
2831 .tab-icon-overlay[soundplaying]:hover,
2832 .tab-icon-overlay[muted]:hover {
2833   background-color: #FFCF00;
2834 }
2835
2836 .tab-icon-overlay[soundplaying] {
2837   display: -moz-box;
2838   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2839 }
2840
2841 .tab-icon-overlay[muted]:not([crashed]) {
2842   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2843 }
2844
2845 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2846   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2847 }
2848
2849
2850 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2851   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2852 }
2853
2854 .tab-throbber[busy] {
2855   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2856 }
2857
2858 .tab-throbber[progress] {
2859   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2860 }
2861
2862 @media (min-resolution: 1.1dppx) {
2863   .tab-throbber[busy] {
2864     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2865   }
2866
2867   .tab-throbber[progress] {
2868     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2869   }
2870 }
2871
2872 .tab-throbber[pinned],
2873 .tab-icon-image[pinned] {
2874   -moz-margin-start: 2px;
2875   -moz-margin-end: 2px;
2876 }
2877
2878 .tab-label {
2879   /* this needs to add up to the 16px of the icon image */
2880   height: 12px;
2881   margin-top: 2px !important;
2882   margin-bottom: 2px !important;
2883 }
2884
2885 .tab-icon-sound {
2886   -moz-margin-start: 4px;
2887   width: 16px;
2888   height: 16px;
2889   padding: 0;
2890 }
2891
2892 .tab-icon-sound[muted] {
2893   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2894 }
2895
2896 .tab-icon-sound[muted]:hover {
2897   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2898 }
2899
2900 .tab-icon-sound[muted]:hover:active {
2901   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2902 }
2903
2904 .tab-icon-sound[soundplaying] {
2905   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2906 }
2907
2908 .tab-icon-sound[soundplaying]:hover {
2909   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2910 }
2911
2912 .tab-icon-sound[soundplaying]:hover:active {
2913   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2914 }
2915
2916 .tab-icon-sound[muted] {
2917   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2918 }
2919
2920 .tab-icon-sound[muted]:hover {
2921   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2922 }
2923
2924 .tab-icon-sound[muted]:hover:active {
2925   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2926 }
2927
2928 .tab-icon-sound[visuallyselected=true][soundplaying] {
2929   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2930 }
2931
2932 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2933   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2934 }
2935
2936 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2937   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2938 }
2939
2940 .tab-icon-sound[visuallyselected=true][muted] {
2941   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2942 }
2943
2944 .tab-icon-sound[visuallyselected=true][muted]:hover {
2945   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2946 }
2947
2948 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2949   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2950 }
2951
2952 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2953   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2954 }
2955
2956 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2957   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2958 }
2959
2960 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2961   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2962 }
2963
2964 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2965   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2966 }
2967
2968 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2969   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2970 }
2971
2972 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2973   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2974 }
2975
2976 .tab-close-button {
2977   margin-top: 1px;
2978   padding: 0;
2979 }
2980
2981 .tab-background,
2982 .tabs-newtab-button {
2983   /* overlap the tab curves */
2984 }
2985
2986 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2987 }
2988
2989 /* Tab Overflow */
2990 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2991 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2992 }
2993
2994 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2995 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2996 }
2997
2998 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2999 }
3000
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3002 }
3003
3004 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3006 }
3007
3008 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3010 }
3011
3012 .tab-background-start[visuallyselected=true]::after,
3013 .tab-background-start[visuallyselected=true]::before,
3014 .tab-background-start,
3015 .tab-background-end,
3016 .tab-background-end[visuallyselected=true]::after,
3017 .tab-background-end[visuallyselected=true]::before {
3018 }
3019
3020 .tabbrowser-tab:not([visuallyselected=true]),
3021 .tabbrowser-tab:-moz-lwtheme {
3022 }
3023
3024 /* tabbrowser-tab focus ring */
3025 .tabbrowser-tab:focus {
3026   outline: 1px dotted;
3027 }
3028
3029 /* Selected tab */
3030
3031 .tabbrowser-tab[visuallyselected="true"] {
3032 }
3033
3034 /* End selected tab */
3035
3036 /* User Context UI - change tab decoration depending on userContextId.
3037    Defaults to gray for unknown usercontextids. */
3038 .tabbrowser-tab[usercontextid] {
3039   background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3040   background-size: auto 2px;
3041   background-repeat: no-repeat;
3042 }
3043
3044 /* Personal User Context */
3045 .tabbrowser-tab[usercontextid="1"] {
3046   background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3047 }
3048 /* Work User Context */
3049 .tabbrowser-tab[usercontextid="2"] {
3050   background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3051 }
3052 /* Banking User Context */
3053 .tabbrowser-tab[usercontextid="3"] {
3054   background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3055 }
3056 /* Shopping User Context */
3057 .tabbrowser-tab[usercontextid="4"] {
3058   background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3059 }
3060
3061 /* Tab pointer-events */
3062 /*
3063 .tabbrowser-tab {
3064   pointer-events: none;
3065 }
3066
3067 .tab-background-middle,
3068 .tabs-newtab-button,
3069 .tab-icon-overlay[soundplaying],
3070 .tab-icon-overlay[muted]:not([crashed]),
3071 .tab-icon-sound,
3072 .tab-close-button {
3073   pointer-events: auto;
3074 }
3075 */
3076 /* Pinned tabs */
3077
3078 /*
3079 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3080 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3081 */
3082 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3083   background-color: #E7ADE7;
3084 }
3085
3086 .tab-label[attention]:not([visuallyselected="true"]) {
3087   font-weight: bold;
3088 }
3089
3090 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3091   background-color: #3333FF;
3092   color: #000000;
3093 }
3094
3095 /* Tab separators */
3096 /*
3097 .tabbrowser-tab::after,
3098 .tabbrowser-tab::before {
3099   width: 1px;
3100   -moz-margin-start: -1px;
3101   background-image: linear-gradient(transparent 5px,
3102                                     currentColor 5px,
3103                                     currentColor calc(100% - 4px),
3104                                     transparent calc(100% - 4px));
3105   opacity: 0.2;
3106 }
3107
3108 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3109 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3110   opacity: 0.4;
3111 }
3112 */
3113 /* Also show separators beside the selected tab when dragging it. */
3114 /*
3115 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3116 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3117 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3118   content: "";
3119   display: -moz-box;
3120 }
3121 */
3122 /* New tab button */
3123
3124 .tabs-newtab-button {
3125   width: 28px;
3126   /* width: calc(36px + var(--tab-curve-width)); */
3127 }
3128
3129 /* === END tabs.inc.css === */
3130
3131 /* Background tabs:
3132  *
3133  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3134  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3135  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3136  */
3137 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3138 /*  clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3139 }
3140
3141 /* Tab DnD indicator */
3142 .tab-drop-indicator {
3143   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3144   margin-bottom: -11px;
3145 }
3146
3147 /* Tab close button */
3148 .tab-close-button {
3149   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3150 }
3151
3152 .tab-close-button:hover,
3153 .tab-close-button:hover[selected="true"] {
3154   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3155 }
3156
3157 .tab-close-button:hover:active,
3158 .tab-close-button:hover:active[selected="true"] {
3159   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3160 }
3161
3162 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3163
3164 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3165 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3166   margin: 0;
3167   padding-top: 0;
3168   padding-bottom: 0;
3169   background-origin: border-box;
3170 }
3171
3172 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3173 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3174 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3175 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3176  }
3177
3178 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3179 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3180  }
3181
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3184 /*  transform: scaleX(-1);*/
3185 }
3186
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3188   transition: 1s background-color ease-out;
3189 }
3190
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3192   background-color: #008484;
3193 }
3194
3195 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3196 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3197 /*  border-width: 0 2px 0 0;
3198   border-style: solid;
3199   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3200 }
3201
3202 .tabs-newtab-button > .toolbarbutton-icon {
3203   margin-top: -1px;
3204   margin-bottom: -1px;
3205 }
3206
3207 .tabs-newtab-button,
3208 #TabsToolbar > #new-tab-button,
3209 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3210 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3211   list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3212   -moz-image-region: rect(0, 16px, 18px, 0);
3213 }
3214
3215 .tabs-newtab-button,
3216 .tabs-newtab-button:hover,
3217 #TabsToolbar > #new-tab-button,
3218 #TabsToolbar > #new-tab-button:hover {
3219   -moz-image-region: rect(0, 32px, 18px, 16px);
3220 }
3221
3222 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3223 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3224 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3225 .tabs-newtab-button:-moz-lwtheme-brighttext,
3226 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3227 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3228 }
3229
3230 #TabsToolbar > #new-tab-button {
3231   width: 26px;
3232 }
3233
3234 #alltabs-button {
3235   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3236 }
3237
3238 #alltabs-button:hover,
3239 #alltabs-button:hover:active,
3240 #alltabs-button[open="true"] {
3241   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3242 }
3243
3244 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3245 #alltabs-button:-moz-lwtheme-brighttext {
3246 }
3247
3248 #alltabs-button > .toolbarbutton-icon {
3249 /*  margin: 0 2px;*/
3250 }
3251
3252 #alltabs-button > .toolbarbutton-menu-dropmarker {
3253   display: none;
3254 }
3255
3256 /* All tabs menupopup */
3257 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3258   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3259   -moz-image-region: auto;
3260 }
3261
3262 .alltabs-item[selected="true"] {
3263   font-weight: bold;
3264 }
3265
3266 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3267   list-style-image: url("chrome://global/skin/icons/loading.gif");
3268 }
3269
3270 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3271   background-color: #402800;
3272 }
3273
3274 .alltabs-endimage[muted] {
3275   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3276 }
3277
3278 .alltabs-endimage[soundplaying] {
3279   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3280 }
3281
3282 toolbarbutton.chevron {
3283   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3284 }
3285
3286 toolbarbutton.chevron:hover {
3287   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3288 }
3289 /*
3290 toolbar[brighttext] toolbarbutton.chevron {
3291   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3292 }
3293 */
3294 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3295 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3296   transform: scaleX(-1);
3297 }
3298
3299 toolbarbutton.chevron > .toolbarbutton-text,
3300 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3301   display: none;
3302 }
3303
3304 toolbarbutton.chevron > .toolbarbutton-icon {
3305   margin: 0;
3306 }
3307
3308 #sidebar-throbber[loading="true"] {
3309   list-style-image: url("chrome://global/skin/icons/loading.gif");
3310   -moz-margin-end: 4px;
3311 }
3312
3313 /* Bookmarks toolbar */
3314 #PlacesToolbarDropIndicator {
3315   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3316 }
3317
3318 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3319   background-color: #008484 !important;
3320   color: #FFCF00 !important;
3321 }
3322
3323 /* rules for menupopup drop indicators */
3324 .menupopup-drop-indicator-bar {
3325   position: relative;
3326   /* these two margins must together compensate the indicator's height */
3327   margin-top: -1px;
3328   margin-bottom: -1px;
3329 }
3330
3331 .menupopup-drop-indicator {
3332   list-style-image: none;
3333   height: 2px;
3334   -moz-margin-end: -4em;
3335   background-color: #008484;
3336 }
3337
3338 /* === BEGIN notification-icons.inc.css === */
3339
3340 .popup-notification-icon {
3341   width: 64px;
3342   height: 64px;
3343   -moz-margin-end: 10px;
3344 }
3345
3346 .popup-notification-icon[popupid="geolocation"] {
3347   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3348 }
3349
3350 .popup-notification-icon[popupid="xpinstall-disabled"],
3351 .popup-notification-icon[popupid="addon-install-blocked"],
3352 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3353   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3354 }
3355
3356 .popup-notification-icon[popupid="addon-progress"] {
3357   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3358 }
3359
3360 .popup-notification-icon[popupid="addon-install-failed"] {
3361   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3362 }
3363
3364 .popup-notification-icon[popupid="addon-install-confirmation"] {
3365   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3366 }
3367
3368 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3369   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3370 }
3371
3372 .popup-notification-icon[popupid="addon-install-complete"] {
3373   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3374 }
3375
3376 .popup-notification-icon[popupid="addon-install-restart"] {
3377   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3378 }
3379
3380 .popup-notification-icon[popupid="click-to-play-plugins"] {
3381   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3382 }
3383
3384 .popup-notification-icon[popupid="web-notifications"] {
3385   list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3386 }
3387
3388 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3389 .popup-notification-icon[popupid*="offline-app-requested"],
3390 .popup-notification-icon[popupid="offline-app-usage"] {
3391   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3392 }
3393
3394 .popup-notification-icon[popupid="password"] {
3395   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3396 }
3397
3398 .popup-notification-icon[popupid="webapps-install-progress"],
3399 .popup-notification-icon[popupid="webapps-install"] {
3400   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3401 }
3402
3403 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3404 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3405   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3406 }
3407
3408 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3409 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3410   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3411 }
3412
3413 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3414 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3415   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3416 }
3417
3418 .popup-notification-icon[popupid="pointerLock"] {
3419   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3420 }
3421
3422 /* Notification icon box */
3423 #notification-popup .panel-promo-box {
3424 /*  margin: 10px -10px -10px; */
3425 }
3426
3427 #notification-popup-box {
3428   position: relative;
3429   background-color: #000000;
3430   background-clip: padding-box;
3431   padding-left: 3px;
3432   padding-right: 8px;
3433   border-radius: 3px 0 0 3px;
3434   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3435   -moz-margin-end: -8px;
3436   border-right-width: 8px;
3437 }
3438
3439 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3440 /*  padding-left: 7px; */
3441 }
3442
3443 /* This changes the direction of the main notification box on the url bar. */
3444 #notification-popup-box:-moz-locale-dir(rtl),
3445 /* This adds a second flip for the notification anchors, as they don't switch direction
3446    for RTL mode. */
3447 .notification-anchor-icon:-moz-locale-dir(rtl) {
3448   transform: scaleX(-1);
3449 }
3450
3451 /* For the anchor icons in the chat window, we don't have the notification popup box,
3452    so we need to cancel the RTL transform. */
3453 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3454   transform: none;
3455 }
3456
3457 .notification-anchor-icon {
3458   list-style-image: url("chrome://global/skin/icons/information-16.png");
3459
3460   width: 16px;
3461   height: 16px;
3462   margin: 0 2px;
3463 }
3464
3465 .notification-anchor-icon:-moz-focusring {
3466   outline: 1px dotted #008484;
3467 }
3468
3469 .identity-notification-icon,
3470 #identity-notification-icon {
3471   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3472 }
3473
3474 .geo-notification-icon,
3475 #geo-notification-icon {
3476   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3477 }
3478
3479 #addons-notification-icon {
3480   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3481 }
3482
3483 #addons-notification-icon:hover {
3484   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3485 }
3486
3487 #addons-notification-icon:hover:active {
3488   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3489 }
3490
3491 .indexedDB-notification-icon,
3492 #indexedDB-notification-icon {
3493   list-style-image: url("chrome://global/skin/icons/question-16.png");
3494 }
3495
3496 #password-notification-icon {
3497   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3498 }
3499
3500 #login-fill-notification-icon {
3501   /* Temporary icon until the capture and fill doorhangers are unified. */
3502   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3503   transform: scaleX(-1);
3504 }
3505
3506 #webapps-notification-icon {
3507   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3508 }
3509
3510 #plugins-notification-icon {
3511   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3512 }
3513
3514 #plugins-notification-icon.plugin-hidden {
3515   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3516 }
3517
3518 #plugins-notification-icon.plugin-blocked {
3519   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3520 }
3521
3522 #plugins-notification-icon {
3523 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3524 }
3525
3526 #plugins-notification-icon:hover {
3527 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3528 }
3529
3530 #notification-popup-box[hidden] {
3531   /* Override display:none to make the pluginBlockedNotification animation work
3532      when showing the notification repeatedly. */
3533   display: -moz-box;
3534   visibility: collapse;
3535 }
3536
3537 #plugins-notification-icon.plugin-blocked[showing] {
3538   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3539 }
3540
3541 @keyframes pluginBlockedNotification {
3542   from {
3543     opacity: 0;
3544   }
3545   to {
3546     opacity: 1;
3547   }
3548 }
3549
3550 .webRTC-shareDevices-notification-icon,
3551 #webRTC-shareDevices-notification-icon {
3552   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3553 }
3554
3555 .webRTC-sharingDevices-notification-icon,
3556 #webRTC-sharingDevices-notification-icon {
3557   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3558 }
3559
3560 .webRTC-shareMicrophone-notification-icon,
3561 #webRTC-shareMicrophone-notification-icon {
3562   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3563 }
3564
3565 .webRTC-sharingMicrophone-notification-icon,
3566 #webRTC-sharingMicrophone-notification-icon {
3567   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3568 }
3569
3570 .webRTC-shareScreen-notification-icon,
3571 #webRTC-shareScreen-notification-icon {
3572   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3573 }
3574
3575 .webRTC-sharingScreen-notification-icon,
3576 #webRTC-sharingScreen-notification-icon {
3577   list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3578 }
3579
3580 .web-notifications-notification-icon,
3581 #web-notifications-notification-icon {
3582   list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3583   -moz-image-region: rect(0, 16px, 16px, 0);
3584 }
3585
3586 .web-notifications-notification-icon:hover,
3587 #web-notifications-notification-icon:hover {
3588   -moz-image-region: rect(0, 32px, 16px, 16px);
3589 }
3590
3591 .web-notifications-notification-icon:hover:active,
3592 #web-notifications-notification-icon:hover:active {
3593   -moz-image-region: rect(0, 48px, 16px, 32px);
3594 }
3595
3596 #pointerLock-notification-icon {
3597   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3598 }
3599
3600 .translate-notification-icon,
3601 #translate-notification-icon {
3602   list-style-image: url("chrome://browser/skin/translation-16.png");
3603   -moz-image-region: rect(0px, 16px, 16px, 0px);
3604 }
3605
3606 .translated-notification-icon,
3607 #translated-notification-icon {
3608   list-style-image: url("chrome://browser/skin/translation-16.png");
3609   -moz-image-region: rect(0px, 32px, 16px, 16px);
3610 }
3611
3612 .popup-notification-icon[popupid="servicesInstall"] {
3613   list-style-image: url("chrome://browser/skin/social/services-64.png");
3614 }
3615 #servicesInstall-notification-icon {
3616   list-style-image: url("chrome://browser/skin/social/services-16.png");
3617 }
3618
3619 /* EME notifications */
3620
3621 .popup-notification-icon[popupid="drmContentPlaying"],
3622 #eme-notification-icon {
3623   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3624 }
3625
3626 #eme-notification-icon:hover:active {
3627   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3628 }
3629
3630 #eme-notification-icon[firstplay=true] {
3631   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3632 }
3633
3634 @keyframes emeTeachingMoment {
3635   0% {transform: translateX(0); }
3636   25% {transform: translateX(3px) }
3637   75% {transform: translateX(-3px) }
3638   100% { transform: translateX(0); }
3639 }
3640
3641 /* HiDPI notification icons */
3642 @media (min-resolution: 1.1dppx) {
3643 /*  #notification-popup-box {
3644     border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3645   }
3646 */
3647   .notification-anchor-icon {
3648     list-style-image: url(chrome://global/skin/icons/information-32.png);
3649   }
3650
3651   .webRTC-shareDevices-notification-icon,
3652   #webRTC-shareDevices-notification-icon {
3653     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3654   }
3655
3656   .webRTC-sharingDevices-notification-icon,
3657   #webRTC-sharingDevices-notification-icon {
3658     list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3659   }
3660
3661   .webRTC-shareMicrophone-notification-icon,
3662   #webRTC-shareMicrophone-notification-icon {
3663     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3664   }
3665
3666   .webRTC-sharingMicrophone-notification-icon,
3667   #webRTC-sharingMicrophone-notification-icon {
3668     list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3669   }
3670
3671   .webRTC-shareScreen-notification-icon,
3672   #webRTC-shareScreen-notification-icon {
3673     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3674   }
3675
3676   .webRTC-sharingScreen-notification-icon,
3677   #webRTC-sharingScreen-notification-icon {
3678     list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3679   }
3680
3681   .popup-notification-icon[popupid="webRTC-sharingDevices"],
3682   .popup-notification-icon[popupid="webRTC-shareDevices"] {
3683     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3684   }
3685
3686   .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3687   .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3688     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3689   }
3690
3691   .popup-notification-icon[popupid="webRTC-sharingScreen"],
3692   .popup-notification-icon[popupid="webRTC-shareScreen"] {
3693     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3694   }
3695 }
3696
3697 /* === END notification-icons.inc.css === */
3698
3699 .popup-notification-body[popupid="addon-progress"],
3700 .popup-notification-body[popupid="addon-install-confirmation"] {
3701   width: 28em;
3702   max-width: 28em;
3703 }
3704
3705 /* Translation infobar */
3706
3707 /* === BEGIN infobar.inc.css === */
3708
3709 notification[value="translation"] .messageImage {
3710   list-style-image: url("chrome://browser/skin/translation-16.png");
3711   -moz-image-region: rect(0, 32px, 16px, 16px);
3712 }
3713
3714 @media (min-resolution: 1.25dppx) {
3715   notification[value="translation"] .messageImage {
3716     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3717     -moz-image-region: rect(0, 64px, 32px, 32px);
3718   }
3719 }
3720
3721 notification[value="translation"][state="translating"] .messageImage {
3722   list-style-image: url("chrome://browser/skin/translating-16.png");
3723   -moz-image-region: auto;
3724 }
3725
3726 @media (min-resolution: 1.25dppx) {
3727   notification[value="translation"][state="translating"] .messageImage {
3728     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3729   }
3730 }
3731
3732 notification[value="translation"] hbox[anonid="details"] {
3733   overflow: hidden;
3734 }
3735
3736 notification[value="translation"] button,
3737 notification[value="translation"] menulist {
3738   min-width: 0;
3739 }
3740
3741 notification[value="translation"] menulist > .menulist-dropmarker {
3742 }
3743
3744 .translation-menupopup arrowscrollbox {
3745   padding-bottom: 0;
3746 }
3747
3748 .translation-attribution {
3749   cursor: pointer;
3750   -moz-box-align: end;
3751   font-size: small;
3752 }
3753
3754 .translation-attribution > label {
3755   margin-bottom: 0;
3756 }
3757
3758 .translation-attribution > image {
3759   width: 70px;
3760 }
3761
3762 .translation-welcome-panel {
3763   width: 305px;
3764 }
3765
3766 .translation-welcome-logo {
3767   height: 32px;
3768   width: 32px;
3769   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3770   -moz-image-region: rect(0, 64px, 32px, 32px);
3771 }
3772
3773 .translation-welcome-content {
3774   -moz-margin-start: 16px;
3775 }
3776
3777 .translation-welcome-headline {
3778   font-size: larger;
3779   font-weight: bold;
3780 }
3781
3782 .translation-welcome-body {
3783   padding: 1em 0;
3784   margin: 0 0;
3785 }
3786
3787 /* === END infobar.inc.css === */
3788
3789 notification[value="translation"] {
3790   min-height: 40px;
3791 }
3792
3793 .translation-menupopup {
3794   -moz-appearance: none;
3795 }
3796
3797 /* Loop/ Hello browser styles */
3798
3799 notification[value="loop-sharing-notification"] .button-menubutton-button {
3800   min-width: 0;
3801   border: 0;
3802   margin: 0;
3803 }
3804
3805 notification[value="loop-sharing-notification"] .messageImage {
3806   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3807 }
3808
3809 /* Bookmarks roots menu-items */
3810 #subscribeToPageMenuitem:not([disabled]),
3811 #subscribeToPageMenupopup,
3812 #BMB_subscribeToPageMenuitem:not([disabled]),
3813 #BMB_subscribeToPageMenupopup {
3814   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3815 }
3816
3817 #bookmarksToolbarFolderMenu,
3818 #BMB_bookmarksToolbar,
3819 #panelMenu_bookmarksToolbar {
3820   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3821   -moz-image-region: auto;
3822 }
3823
3824 #BMB_unsortedBookmarks,
3825 #panelMenu_unsortedBookmarks {
3826   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3827   -moz-image-region: auto;
3828 }
3829
3830 /* ::::: Keyboard UI Panel ::::: */
3831
3832 .KUI-panel {
3833   color: #FF9F00;
3834   border-style: none;
3835   border-radius: 20px;
3836 }
3837
3838 .KUI-panel[level="top"] {
3839   /*background-color: rgba(27%,27%,27%,.65);*/
3840 }
3841
3842 /* Ctrl-Tab */
3843
3844 #ctrlTab-panel {
3845   padding: 20px 10px 10px;
3846   font-weight: bold;
3847 }
3848
3849 .ctrlTab-favicon[src] {
3850   background-color: #000000;
3851   width: 20px;
3852   height: 20px;
3853   padding: 2px;
3854 }
3855
3856 .ctrlTab-preview-inner > .tabPreview-canvas {
3857 }
3858
3859 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3860   margin-bottom: 2px;
3861 }
3862
3863 .ctrlTab-preview-inner {
3864   padding-bottom: 10px;
3865 }
3866
3867 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3868   padding: 10px;
3869   background-color: #000000;
3870   border-radius: .5em;
3871 }
3872
3873 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3874   color: white;
3875   background-color: #000000;
3876   text-shadow: none;
3877   padding: 8px;
3878   border: 2px solid #9C9CFF;
3879   border-radius: .5em;
3880 }
3881
3882 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3883   margin: -10px -10px 0;
3884 }
3885
3886 #ctrlTab-showAll {
3887   margin-top: .5em;
3888 }
3889
3890 /* Sync Panel */
3891
3892 .sync-panel-icon {
3893   height:32px;
3894   width: 32px;
3895   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3896 }
3897
3898 .sync-panel-inner {
3899   width: 0;
3900   padding-left: 10px;
3901 }
3902
3903 .sync-panel-button-box {
3904   margin-top: 1em;
3905 }
3906
3907 #sync-start-panel-title {
3908   font-size: 120%;
3909   font-weight: bold;
3910   margin-bottom: 5px;
3911 }
3912
3913 #sync-start-panel-subtitle {
3914   margin-bottom: 0;
3915 }
3916
3917 /* Status panel */
3918
3919 .statuspanel-label {
3920   margin: 0;
3921   padding: 2px 4px;
3922   background: #404000;
3923   border: 1px none #9C9CFF;
3924   border-top-style: solid;
3925   color: #FF9F00;
3926   text-shadow: none;
3927 }
3928
3929 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3930 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3931   border-right-style: solid;
3932   border-top-right-radius: .3em;
3933   margin-right: 1em;
3934 }
3935
3936 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3937 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3938   border-left-style: solid;
3939   border-top-left-radius: .3em;
3940   margin-left: 1em;
3941 }
3942
3943 /* HACK to abolish devily color on main content */
3944
3945 #content {
3946   background-color: transparent !important;
3947 }
3948
3949 /* === BEGIN fullscreen/warning.inc.css === */
3950
3951 html|*#fullscreen-warning {
3952   align-items: center;
3953   background: rgba(0, 0, 0, 0.9);
3954   border: 2px solid #A09090;
3955   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3956   border-radius: 8px;
3957   padding: 24px 16px;
3958   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3959 }
3960
3961 html|*#fullscreen-warning::before {
3962   margin: 0;
3963   width: 24px; height: 24px;
3964 }
3965
3966 html|*#fullscreen-warning.verifiedIdentity::before,
3967 html|*#fullscreen-warning.verifiedDomain::before {
3968   content: url("chrome://browser/skin/fullscreen/secure.svg");
3969 }
3970
3971 html|*#fullscreen-warning.unknownIdentity::before {
3972   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3973 }
3974
3975 html|*#fullscreen-domain-text,
3976 html|*#fullscreen-generic-text {
3977   font-size: 21px;
3978   font-weight: lighter;
3979   color: #A09090;
3980   margin: 0 16px;
3981 }
3982
3983 html|*#fullscreen-domain {
3984   font-weight: bold;
3985   margin: 0;
3986 }
3987
3988 html|*#fullscreen-exit-button {
3989   padding: 5px 30px;
3990   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3991   font-size: 14px;
3992   font-weight: lighter;
3993   margin: 0;
3994   box-sizing: content-box;
3995
3996   border-radius: 300px;
3997   border: none;
3998   background-color: #C09070;
3999   color: #000000;
4000 }
4001
4002 /* === END fullscreen/warning.inc.css === */
4003
4004 /* === BEGIN commandline.inc.css === */
4005
4006 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4007    We are copy/pasting variables from light-theme and dark-theme,
4008    since they aren't loaded in this context (within browser.css). */
4009 :root #developer-toolbar {
4010   --gcli-background-color: #000000; /* --theme-toolbar-background */
4011   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4012   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4013   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4014   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4015   --selection-background: #008484; /* --theme-selection-background */
4016   --selection-color: #000000; /* --theme-selection-color */
4017 }
4018
4019 /* Developer toolbar */
4020
4021 #developer-toolbar {
4022   border-top: 3px solid var(--gcli-background-color);
4023   border-bottom: none;
4024 }
4025
4026 #developer-toolbar .toolbar-holder {
4027   background-color: #8050B0;
4028   color: #FFCF00;
4029 }
4030
4031 #developer-toolbar .toolbar-holder {
4032   background-color: #8050B0;
4033   color: #FFCF00;
4034 }
4035
4036 #developer-toolbar .toolbar-startcap,
4037 #developer-toolbar .toolbar-endcap{
4038   background-color: #6000CF;
4039 }
4040
4041 #developer-toolbar {
4042 /*  padding: 0;
4043   min-height: 32px; */
4044 }
4045