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