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