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