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