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