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