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