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