first part of syncing LCARStrek with Firefox 52 browser windows theme changes
[themes.git] / LCARStrek / browser / browser.css
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this
3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
7
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
11
12 toolbar {
13   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14 }
15
16 toolbar[customizable="true"] {
17   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18 }
19
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22   toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24   }
25 }
26
27 toolbar[type="menubar"][autohide="true"] {
28   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29 }
30
31 #toolbar-menubar[autohide="true"] {
32   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33 }
34
35 menubar {
36   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
37 }
38
39 :root {
40   /*--backbutton-urlbar-overlap: 5px;*/
41
42   /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43   --forwardbutton-width: 27px;
44   /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45   --forwardbutton-width: 25px;*/
46
47   --identity-box-verified-background-color: #000000;
48
49   --panel-separator-color: #A09090;
50   --arrowpanel-hover: #FFCF00;
51   --arrowpanel-active: #FF9F00;
52   --arrowpanel-dimmed: #402000;
53 /*  --arrowpanel-dimmed-further: 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-sharing");
2035 }
2036
2037 #identity-box[sharing="microphone"] > #sharing-icon {
2038   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2039 }
2040
2041 #identity-box[sharing="screen"] > #sharing-icon {
2042   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2043
2044 }
2045
2046 #identity-box[sharing] > #sharing-icon {
2047   display: -moz-box;
2048   animation-delay: -1.5s;
2049 }
2050
2051 #identity-box[sharing] > #identity-icon,
2052 #sharing-icon {
2053   animation: 3s linear pulse infinite;
2054 }
2055
2056 @keyframes pulse {
2057   0%, 16.66%, 83.33%, 100% {
2058     opacity: 0;
2059   }
2060   33.33%, 66.66% {
2061     opacity: 1;
2062   }
2063 }
2064
2065 /* TRACKING PROTECTION ICON */
2066
2067 #tracking-protection-icon {
2068   width: 16px;
2069   height: 16px;
2070   margin-inline-start: 2px;
2071   margin-inline-end: 0;
2072 }
2073
2074 #tracking-protection-icon[animate] {
2075   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2076 }
2077
2078 #tracking-protection-icon:not([state]) {
2079   margin-inline-end: -18px;
2080   pointer-events: none;
2081   opacity: 0;
2082   /* Only animate the shield in, when it disappears hide it immediately. */
2083   transition: none;
2084 }
2085
2086 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2087   visibility: collapse;
2088 }
2089
2090 /* CONNECTION ICON */
2091
2092 #connection-icon {
2093   width: 16px;
2094   height: 16px;
2095   margin-inline-start: 2px;
2096   visibility: collapse;
2097 }
2098
2099 /* === END identity-block.inc.css === */
2100
2101 #page-proxy-favicon {
2102   -moz-image-region: rect(0, 16px, 16px, 0);
2103 }
2104
2105 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2106 /*  margin-inline-end: 1px;*/
2107 }
2108
2109 #identity-box:hover > #page-proxy-favicon {
2110   -moz-image-region: rect(0, 32px, 16px, 16px);
2111 }
2112
2113 #identity-box:hover:active > #page-proxy-favicon,
2114 #identity-box[open=true] > #page-proxy-favicon {
2115   -moz-image-region: rect(0, 48px, 16px, 32px);
2116 }
2117
2118 #identity-box:hover {
2119   background-color: #FFCF00;
2120   color: #000000;
2121 }
2122
2123 #identity-box:hover:active,
2124 #identity-box[open=true] {
2125   background-color: #FF9F00;
2126   color: #000000;
2127 }
2128
2129 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2130 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2132   background-color: #A09090;
2133   color: #000000;
2134 }
2135
2136 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2137 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2139   color: #000000;
2140 }
2141
2142 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2143 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2145   background-color: #008484;
2146   color: #000000;
2147 }
2148
2149 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2152   color: #000000;
2153 }
2154
2155 #identity-box:hover > image,
2156 #identity-box:hover:active > image,
2157 #identity-box[open=true] > image {
2158   filter: url(chrome://global/skin/filters.svg#active-icon-state);
2159 }
2160
2161 /* autocomplete */
2162
2163 #treecolAutoCompleteImage {
2164   max-width: 36px;
2165 }
2166
2167 /*
2168 .autocomplete-richlistbox {
2169   padding: 4px;
2170 }
2171
2172 .autocomplete-richlistitem {
2173   height: 30px;
2174   min-height: 30px;
2175   font: message-box;
2176   border-radius: 2px;
2177   border: 1px solid transparent;
2178 }
2179
2180 .autocomplete-richlistitem[selected=true] {
2181   background-color: hsl(210, 80%, 52%);
2182 }
2183 */
2184 .ac-title {
2185   font-size: 14px;
2186 /*  color: hsl(0, 0%, 0%);*/
2187 }
2188
2189 .ac-tags {
2190   font-size: 12px;
2191 }
2192 /*
2193 html|span.ac-tag {
2194   background-color: hsl(216, 0%, 88%);
2195   color: hsl(0, 0%, 0%);
2196   border-radius: 2px;
2197   border: 1px solid transparent;
2198   padding: 0 1px;
2199 }
2200 */
2201
2202 .ac-separator,
2203 .ac-url,
2204 .ac-action {
2205   font-size: 12px;
2206 }
2207
2208 .ac-separator {
2209 /*  color: hsl(0, 0%, 50%);*/
2210 }
2211
2212 .ac-url {
2213   color: #9C9CFF;
2214 }
2215
2216 .ac-action {
2217   color: #9C9CFF;
2218 }
2219
2220 .ac-title[selected=true],
2221 .ac-separator[selected],
2222 .ac-url[selected=true],
2223 .ac-action[selected=true] {
2224   color: #000000;
2225 }
2226
2227 .ac-tags-text[selected] > html|span.ac-tag {
2228   background-color: #A09090;
2229   color: #000000;
2230 }
2231
2232 html|span.ac-emphasize-text-title,
2233 html|span.ac-emphasize-text-tag,
2234 html|span.ac-emphasize-text-url {
2235   font-weight: 600;
2236 }
2237
2238 .ac-type-icon[type=bookmark] {
2239   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2240 }
2241
2242 .ac-type-icon[type=bookmark][selected][current] {
2243 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2244 }
2245
2246 .ac-result-type-bookmark,
2247 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2248   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2249   -moz-image-region: rect(0px 16px 16px 0px);
2250   width: 16px;
2251   height: 16px;
2252 }
2253
2254 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2255 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2256 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2257 }
2258
2259 .ac-type-icon[type=keyword],
2260 .ac-site-icon[type=searchengine],
2261 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2262   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2263 }
2264
2265 .ac-type-icon[type=keyword][selected],
2266 .ac-site-icon[type=searchengine][selected],
2267 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2268   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2269 }
2270
2271 .ac-result-type-tag,
2272 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2273   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2274   width: 16px;
2275   height: 16px;
2276 }
2277
2278 .ac-type-icon[type=switchtab],
2279 .ac-type-icon[type=remotetab] {
2280   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2281 }
2282
2283 .ac-type-icon[type=switchtab][selected],
2284 .ac-type-icon[type=remotetab][selected] {
2285   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2286 }
2287
2288 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2289 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2290 {
2291   color: #8050B0;
2292   font-size: smaller;
2293 }
2294
2295 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2296   border-top: 1px solid #9C9CFF;
2297 }
2298
2299 /* combined go/reload/stop button in location bar */
2300
2301 #urlbar-go-button,
2302 #urlbar-reload-button,
2303 #urlbar-stop-button {
2304   border-style: none;
2305   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2306 /*  margin: 0 9px; */
2307   margin-inline-start: 0px;
2308   border-inline-start: 1px solid var(--urlbar-separator-color);
2309   border-image: linear-gradient(transparent 15%,
2310                                 var(--urlbar-separator-color) 15%,
2311                                 var(--urlbar-separator-color) 85%,
2312                                 transparent 85%);
2313   border-image-slice: 1;
2314 }
2315
2316 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2317   border-top-left-radius: 0px;
2318   border-bottom-left-radius: 0px;
2319 }
2320
2321 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2322   border-top-right-radius: 0px;
2323   border-bottom-right-radius: 0px;
2324 }
2325
2326 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2327 #urlbar-reload-button:not(:hover) {
2328   border-inline-start-style: none;
2329   padding-inline-start: 3px;
2330 }
2331
2332 #urlbar-reload-button {
2333   -moz-image-region: rect(0px, 14px, 14px, 0px);
2334 }
2335
2336 #urlbar-reload-button[disabled=true] {
2337   -moz-image-region: rect(28px, 14px, 42px, 0px);
2338 }
2339
2340 #urlbar-reload-button:not([disabled=true]):hover {
2341   -moz-image-region: rect(14px, 14px, 28px, 0px);
2342 }
2343
2344 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2345   transform: scaleX(-1);
2346 }
2347
2348 #urlbar-go-button {
2349   -moz-image-region: rect(0, 42px, 14px, 28px);
2350 }
2351
2352 #urlbar-go-button:hover {
2353   -moz-image-region: rect(14px, 42px, 28px, 28px);
2354 }
2355
2356 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2357   transform: scaleX(-1);
2358 }
2359
2360 #urlbar-stop-button {
2361   -moz-image-region: rect(0px, 28px, 14px, 14px);
2362 }
2363
2364 #urlbar-stop-button:hover {
2365   -moz-image-region: rect(14px, 28px, 28px, 14px);
2366 }
2367
2368 @media (min-resolution: 1.1dppx) {
2369   #urlbar-go-button,
2370   #urlbar-reload-button,
2371   #urlbar-stop-button {
2372     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2373   }
2374
2375   #urlbar-go-button > .toolbarbutton-icon,
2376   #urlbar-reload-button > .toolbarbutton-icon,
2377   #urlbar-stop-button > .toolbarbutton-icon {
2378     width: 14px;
2379   }
2380
2381   #urlbar-go-button {
2382     -moz-image-region: rect(0, 84px, 28px, 56px);
2383   }
2384
2385   #urlbar-go-button:hover {
2386     -moz-image-region: rect(28px, 84px, 56px, 56px);
2387   }
2388
2389   #urlbar-go-button:hover:active {
2390     -moz-image-region: rect(56px, 84px, 84px, 56px);
2391   }
2392
2393   #urlbar-reload-button {
2394     -moz-image-region: rect(0, 28px, 28px, 0);
2395   }
2396
2397   #urlbar-reload-button:not([disabled]):hover {
2398     -moz-image-region: rect(28px, 28px, 56px, 0);
2399   }
2400
2401   #urlbar-reload-button:not([disabled]):hover:active {
2402     -moz-image-region: rect(56px, 28px, 84px, 0);
2403   }
2404
2405   #urlbar-stop-button {
2406     -moz-image-region: rect(0, 56px, 28px, 28px);
2407   }
2408
2409   #urlbar-stop-button:not([disabled]):hover {
2410     -moz-image-region: rect(28px, 56px, 56px, 28px);
2411   }
2412
2413   #urlbar-stop-button:hover:active {
2414     -moz-image-region: rect(56px, 56px, 84px, 28px);
2415   }
2416 }
2417
2418 /* popup blocker button */
2419
2420 #page-report-button {
2421   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2422   -moz-image-region: rect(0, 16px, 16px, 0);
2423 }
2424
2425 #page-report-button:hover ,
2426 #page-report-button:hover:active,
2427 #page-report-button[open="true"] {
2428   -moz-image-region: rect(0, 32px, 16px, 16px);
2429 }
2430
2431 /* Reader mode button */
2432
2433 #reader-mode-button {
2434   list-style-image: url("chrome://browser/skin/readerMode.svg");
2435   -moz-image-region: rect(0, 16px, 16px, 0);
2436 }
2437
2438 #reader-mode-button:hover,
2439 #reader-mode-button[readeractive]:hover {
2440   -moz-image-region: rect(0, 32px, 16px, 16px);
2441 }
2442
2443 #reader-mode-button:hover:active,
2444 #reader-mode-button[readeractive] {
2445   -moz-image-region: rect(0, 48px, 16px, 32px);
2446 }
2447
2448 /* social share panel */
2449
2450 /* === BEGIN social.inc.css === */
2451
2452 #manage-share-providers {
2453   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2454   -moz-image-region: rect(0, 468px, 18px, 450px);
2455 }
2456
2457 #manage-share-providers > .toolbarbutton-icon {
2458   min-height: 18px;
2459   min-width: 18px;
2460 }
2461
2462 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2463   padding: 0;
2464 }
2465 /* fixup corners for share panel */
2466 .social-panel > .social-panel-frame {
2467   border-radius: inherit;
2468 }
2469
2470 /* === END social.inc.css === */
2471
2472 .social-panel-frame {
2473   border-radius: inherit;
2474 }
2475
2476 .social-share-frame {
2477   min-width: 756px;
2478   height: 150px;
2479 }
2480
2481 #share-container {
2482   min-width: 756px;
2483   background-color: white;
2484   background-repeat: no-repeat;
2485   background-position: center center;
2486 }
2487 #share-container[loading] {
2488   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2489 }
2490 #share-container > browser {
2491   transition: opacity 150ms ease-in-out;
2492   opacity: 1;
2493 }
2494 #share-container[loading] > browser {
2495   opacity: 0;
2496 }
2497
2498 .social-share-toolbar {
2499   border-bottom: 1px solid #9C9CFF;
2500   padding: 2px;
2501 }
2502
2503 #social-share-provider-buttons {
2504   padding: 0;
2505   margin: 0;
2506 }
2507
2508 .share-provider-button {
2509   padding: 5px;
2510   margin: 2px;
2511 }
2512
2513 .share-provider-button > .toolbarbutton-text {
2514   display: none;
2515 }
2516 .share-provider-button > .toolbarbutton-icon {
2517   width: 16px;
2518   min-height: 16px;
2519   max-height: 16px;
2520 }
2521
2522 #social-share-panel {
2523   min-height: 100px;
2524   min-width: 766px;
2525 }
2526
2527 #share-container,
2528 .social-share-frame {
2529   border-top-left-radius: 0;
2530   border-bottom-left-radius: inherit;
2531   border-top-right-radius: 0;
2532   border-bottom-right-radius: inherit;
2533 }
2534
2535 #social-share-panel > .social-share-toolbar {
2536   border-top-left-radius: inherit;
2537   border-top-right-radius: inherit;
2538 }
2539
2540 #social-share-provider-buttons {
2541   border-top-left-radius: inherit;
2542   border-top-right-radius: inherit;
2543 }
2544
2545 /* bookmarks menu-button */
2546
2547 #bookmarks-menu-button.bookmark-item {
2548   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2549   -moz-image-region: rect(0px 16px 16px 0px);
2550 }
2551
2552 #bookmarks-menu-button.bookmark-item[starred] {
2553   -moz-image-region: rect(0px 32px 16px 16px);
2554 }
2555
2556 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2557   padding-top: 2px;
2558   padding-bottom: 2px;
2559 }
2560
2561 #BMB_bookmarksPopup[side="top"],
2562 #BMB_bookmarksPopup[side="bottom"] {
2563   margin-left: -20px;
2564   margin-right: -20px;
2565 }
2566
2567 #BMB_bookmarksPopup[side="left"],
2568 #BMB_bookmarksPopup[side="right"] {
2569   margin-top: -20px;
2570   margin-bottom: -20px;
2571 }
2572
2573 /* bookmarking panel */
2574
2575 #editBookmarkPanelStarIcon {
2576   list-style-image: url("chrome://browser/skin/places/starred48.png");
2577   width: 48px;
2578   height: 48px;
2579 }
2580
2581 #editBookmarkPanelStarIcon[unstarred] {
2582   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2583 }
2584
2585 #editBookmarkPanelTitle {
2586   font-size: 130%;
2587 }
2588
2589 #editBookmarkPanelHeader,
2590 #editBookmarkPanelContent {
2591   margin-bottom: .5em;
2592 }
2593
2594 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2595 #editBMPanel_folderTree {
2596   min-width: 27em;
2597 }
2598
2599 /* ::::: content area ::::: */
2600
2601 #sidebar-box {
2602   background-color: #9C9CFF;
2603   color: #000000;
2604 }
2605
2606 #sidebar {
2607   background-color: #000000;
2608 }
2609
2610 #sidebar-splitter {
2611   margin-inline-start: 0;
2612 }
2613
2614 #sidebar-header {
2615   color: #000000;
2616   padding: 2px;
2617 }
2618
2619 #sidebar-title {
2620   padding-inline-start: 0px;
2621 }
2622
2623 #sidebar-header > .close-icon {
2624 /*  padding: 4px 2px;
2625   margin: 0;
2626   border: none;*/
2627   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2628 }
2629
2630 #sidebar-header > .close-icon:hover,
2631 #sidebar-header > .close-icon:hover:active {
2632   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2633 }
2634
2635 #sidebar-splitter:-moz-locale-dir(ltr),
2636 #sidebar:-moz-locale-dir(ltr) {
2637   border-radius: 0 5px 0 0;
2638 }
2639
2640 #sidebar-splitter:-moz-locale-dir(rtl),
2641 #sidebar:-moz-locale-dir(rtl) {
2642   border-radius: 5px 0 0 0;
2643 }
2644
2645 .browserContainer > findbar {
2646 /*
2647   background-color: -moz-dialog;
2648   color: -moz-DialogText;
2649 */
2650 }
2651
2652 /* Tabstrip */
2653
2654 #TabsToolbar {
2655   min-height: 0;
2656   padding: 0;
2657   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2658 }
2659
2660 #TabsToolbar .toolbar-holder {
2661   background-color: #000000; /* correct effect of being an actual toolbar */
2662 }
2663
2664 #main-window[disablechrome] #TabsToolbar,
2665 #TabsToolbar[tabsontop="false"] {
2666   border-bottom: 1px solid #008484;
2667 }
2668
2669 /* === BEGIN tabs.inc.css === */
2670
2671 :root {
2672   /* --tab-toolbar-navbar-overlap: 1px; */
2673   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2674   /* --tab-min-height: 31px; */
2675 }
2676 #TabsToolbar {
2677   /* --tab-stroke-background-size: auto 100%; */
2678 }
2679
2680 .tabbrowser-tab,
2681 .tabs-newtab-button,
2682 #TabsToolbar > #new-tab-button {
2683   margin-top: 0px;
2684 }
2685
2686 .tabbrowser-tab {
2687   padding: 1px 4px 2px;
2688 }
2689
2690 .tabbrowser-tab:first-of-type {
2691   margin-inline-start: 2px;
2692 }
2693
2694 .tabs-newtab-button,
2695 #TabsToolbar > #new-tab-button,
2696 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2697 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2698   border-radius: 8px 8px 0px 0px;
2699   margin-inline-start: 0;
2700 }
2701
2702 .tabs-newtab-button:not(:hover),
2703 #TabsToolbar > #new-tab-button:not(:hover),
2704 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2705 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2706   background-color: #C09070;
2707 }
2708
2709 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2710 .tabbrowser-tab[visuallyselected=true] {
2711 /*  position: relative;
2712   z-index: 2;*/
2713 }
2714
2715 .tab-background-middle {
2716 }
2717
2718 .tab-content {
2719 }
2720
2721 .tab-content[pinned] {
2722 }
2723
2724 .tab-throbber,
2725 .tab-icon-image,
2726 .tab-sharing-icon-overlay,
2727 .tab-icon-sound,
2728 .tab-close-button {
2729 }
2730
2731 .tab-throbber,
2732 .tab-sharing-icon-overlay,
2733 .tab-icon-image {
2734   height: 16px;
2735   width: 16px;
2736   margin-inline-end: 3px;
2737 }
2738
2739 .tab-icon-image {
2740   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2741 }
2742
2743 .tab-icon-image[sharing]:not([selected]),
2744 .tab-sharing-icon-overlay {
2745   animation: 3s linear pulse infinite;
2746 }
2747
2748 @keyframes pulse {
2749   0%, 16.66%, 83.33%, 100% {
2750     opacity: 0;
2751   }
2752   33.33%, 66.66% {
2753     opacity: 1;
2754   }
2755 }
2756
2757 .tab-icon-image[sharing]:not([selected]) {
2758   animation-delay: -1.5s;
2759 }
2760
2761 .tab-sharing-icon-overlay {
2762   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2763   margin-inline-start: -22px;
2764   position: relative;
2765 }
2766
2767 .tab-sharing-icon-overlay[sharing="camera"] {
2768   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2769 }
2770
2771 .tab-sharing-icon-overlay[sharing="microphone"] {
2772   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2773 }
2774
2775 .tab-sharing-icon-overlay[sharing="screen"] {
2776   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2777 }
2778
2779 .tab-icon-overlay {
2780   width: 16px;
2781   height: 16px;
2782   margin-top: -8px;
2783   margin-inline-start: -15px;
2784   margin-inline-end: -1px;
2785   position: relative;
2786 }
2787
2788 .tab-icon-overlay[crashed] {
2789   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2790 }
2791
2792 .tab-icon-overlay[soundplaying],
2793 .tab-icon-overlay[muted]:not([crashed]) {
2794   border-radius: 10px;
2795 }
2796
2797 .tab-icon-overlay[soundplaying]:hover,
2798 .tab-icon-overlay[muted]:hover {
2799   background-color: #FFCF00;
2800 }
2801
2802 .tab-icon-overlay[soundplaying] {
2803   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2804 }
2805
2806 .tab-icon-overlay[muted]:not([crashed]) {
2807   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2808 }
2809
2810 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2811   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2812 }
2813
2814
2815 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2816   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2817 }
2818
2819 .tab-throbber[busy] {
2820   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2821 }
2822
2823 .tab-throbber[progress] {
2824   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2825 }
2826
2827 @media (min-resolution: 1.1dppx) {
2828   .tab-throbber[busy] {
2829     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2830   }
2831
2832   .tab-throbber[progress] {
2833     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2834   }
2835 }
2836
2837 .tab-throbber[pinned],
2838 .tab-icon-image[pinned] {
2839   margin-inline-start: 2px;
2840   margin-inline-end: 2px;
2841 }
2842
2843 .tab-label {
2844   /* this needs to add up to the 16px of the icon image */
2845   height: 12px;
2846   margin-top: 2px !important;
2847   margin-bottom: 2px !important;
2848 }
2849
2850 .tab-icon-sound {
2851   margin-inline-start: 4px;
2852   width: 16px;
2853   height: 16px;
2854   padding: 0;
2855 }
2856
2857 .tab-icon-sound[soundplaying],
2858 .tab-icon-sound[muted] {
2859   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2860   filter: url(chrome://browser/skin/filters.svg#fill);
2861   fill: currentColor;
2862 }
2863
2864 .tab-icon-sound[muted] {
2865   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2866 }
2867
2868 .tab-close-button {
2869   margin-top: 1px;
2870   padding: 0;
2871 }
2872
2873 .tab-background,
2874 .tabs-newtab-button {
2875   /* overlap the tab curves */
2876 }
2877
2878 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2879 }
2880
2881 /* Tab Overflow */
2882 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2883 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2884 }
2885
2886 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2887 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2888 }
2889
2890 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2891 }
2892
2893 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2894 }
2895
2896 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2897 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2898 }
2899
2900 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2901 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2902 }
2903
2904 .tab-background-start[selected=true]::after,
2905 .tab-background-start[selected=true]::before,
2906 .tab-background-start,
2907 .tab-background-end,
2908 .tab-background-end[selected=true]::after,
2909 .tab-background-end[selected=true]::before {
2910 }
2911
2912 .tabbrowser-tab:not([visuallyselected=true]),
2913 .tabbrowser-tab:-moz-lwtheme {
2914 }
2915
2916 /* tabbrowser-tab focus ring */
2917 .tabbrowser-tab:focus {
2918   outline: 1px dotted;
2919 }
2920
2921 /* Selected tab */
2922
2923 .tabbrowser-tab[visuallyselected="true"] {
2924 }
2925
2926 /* End selected tab */
2927
2928 /* Tab pointer-events */
2929 /*
2930 .tabbrowser-tab {
2931   pointer-events: none;
2932 }
2933
2934 .tab-background-middle,
2935 .tabs-newtab-button,
2936 .tab-icon-overlay[soundplaying],
2937 .tab-icon-overlay[muted]:not([crashed]),
2938 .tab-icon-sound,
2939 .tab-close-button {
2940   pointer-events: auto;
2941 }
2942 */
2943 /* Pinned tabs */
2944
2945 /*
2946 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2947 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2948 */
2949 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2950   background-color: #E7ADE7;
2951 }
2952
2953 .tab-label[attention]:not([selected="true"]) {
2954   font-weight: bold;
2955 }
2956
2957 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
2958   background-color: #3333FF;
2959   color: #000000;
2960 }
2961
2962 /* Tab separators */
2963 /*
2964 .tabbrowser-tab::after,
2965 .tabbrowser-tab::before {
2966   width: 1px;
2967   margin-inline-start: -1px;
2968   background-image: linear-gradient(transparent 5px,
2969                                     currentColor 5px,
2970                                     currentColor calc(100% - 4px),
2971                                     transparent calc(100% - 4px));
2972   opacity: 0.2;
2973 }
2974
2975 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
2976 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
2977   opacity: 0.4;
2978 }
2979 */
2980 /* Also show separators beside the selected tab when dragging it. */
2981 /*
2982 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2983 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2984 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2985   content: "";
2986   display: -moz-box;
2987 }
2988 */
2989 /* New tab button */
2990
2991 .tabs-newtab-button {
2992   width: 28px;
2993   /* width: calc(36px + var(--tab-curve-width)); */
2994 }
2995 @media (min-resolution: 1.1dppx) {
2996   /* image preloading hack from like lowdpi styles */
2997   #tabbrowser-tabs::before {
2998   }
2999
3000   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3001   .tabs-newtab-button:hover {
3002   }
3003
3004   .tab-background-middle[selected=true] {
3005   }
3006
3007   .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3008   .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3009   }
3010
3011   .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3012   .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3013   }
3014
3015   .tab-icon-image {
3016     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3017   }
3018 }
3019
3020 /* All tabs menupopup */
3021
3022 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3023   background-color: #402800;
3024 }
3025
3026 .alltabs-endimage[soundplaying],
3027 .alltabs-endimage[muted] {
3028   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3029   filter: url(chrome://browser/skin/filters.svg#fill);
3030   fill: currentColor;
3031 }
3032
3033 .alltabs-endimage[muted] {
3034   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3035 }
3036
3037 /* === END tabs.inc.css === */
3038
3039 /* Tab DnD indicator */
3040 .tab-drop-indicator {
3041   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3042   margin-bottom: -11px;
3043 }
3044
3045 /* Tab close button */
3046 .tab-close-button {
3047   list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3048   -moz-image-region: auto !important;
3049 }
3050
3051 .tab-close-button:hover,
3052 .tab-close-button:hover[selected="true"] {
3053   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3054   -moz-image-region: auto !important;
3055 }
3056
3057 .tab-close-button:hover:active,
3058 .tab-close-button:hover:active[selected="true"] {
3059   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3060   -moz-image-region: auto !important;
3061 }
3062
3063 .tab-close-button > .button-icon,
3064 .tab-close-button > .button-box > .button-icon,
3065 .tab-close-button > .toolbarbutton-icon {
3066   width: auto !important;
3067 }
3068
3069
3070 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3071
3072 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3073 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3074   margin: 0;
3075   padding-top: 0;
3076   padding-bottom: 0;
3077   background-origin: border-box;
3078 }
3079
3080 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3081 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3082 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3083 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3084  }
3085
3086 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3087 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3088  }
3089
3090 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3091 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3092 /*  transform: scaleX(-1);*/
3093 }
3094
3095 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3096   transition: 1s background-color ease-out;
3097 }
3098
3099 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3100   background-color: #008484;
3101 }
3102
3103 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3104 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3105 /*  border-width: 0 2px 0 0;
3106   border-style: solid;
3107   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3108 }
3109
3110 .tabs-newtab-button > .toolbarbutton-icon {
3111   margin-top: -1px;
3112   margin-bottom: -1px;
3113 }
3114
3115 .tabs-newtab-button,
3116 #TabsToolbar > #new-tab-button,
3117 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3118 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3119   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3120   -moz-image-region: auto;
3121 }
3122
3123 .tabs-newtab-button,
3124 .tabs-newtab-button:hover,
3125 #TabsToolbar > #new-tab-button,
3126 #TabsToolbar > #new-tab-button:hover {
3127 }
3128
3129 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3130 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3131 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3132 .tabs-newtab-button:-moz-lwtheme-brighttext,
3133 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3134 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3135 }
3136
3137 #TabsToolbar > #new-tab-button {
3138   width: 26px;
3139 }
3140
3141 #alltabs-button {
3142   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3143 }
3144
3145 #alltabs-button:hover,
3146 #alltabs-button:hover:active,
3147 #alltabs-button[open="true"] {
3148   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3149 }
3150
3151 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3152 #alltabs-button:-moz-lwtheme-brighttext {
3153 }
3154
3155 #alltabs-button > .toolbarbutton-icon {
3156 /*  margin: 0 2px;*/
3157 }
3158
3159 #alltabs-button > .toolbarbutton-menu-dropmarker {
3160   display: none;
3161 }
3162
3163 /* All tabs menupopup */
3164 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3165   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3166   -moz-image-region: auto;
3167 }
3168
3169 .alltabs-item[selected="true"] {
3170   font-weight: bold;
3171 }
3172
3173 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3174   list-style-image: url("chrome://global/skin/icons/loading.png");
3175 }
3176
3177 @media (min-resolution: 1.1dppx) {
3178   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3179     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3180   }
3181 }
3182
3183 toolbarbutton.chevron {
3184   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3185 }
3186
3187 toolbarbutton.chevron:hover {
3188   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3189 }
3190 /*
3191 toolbar[brighttext] toolbarbutton.chevron {
3192   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3193 }
3194 */
3195 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3196 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3197   transform: scaleX(-1);
3198 }
3199
3200 toolbarbutton.chevron > .toolbarbutton-text,
3201 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3202   display: none;
3203 }
3204
3205 toolbarbutton.chevron > .toolbarbutton-icon {
3206   margin: 0;
3207 }
3208
3209 #sidebar-throbber[loading="true"] {
3210   list-style-image: url("chrome://global/skin/icons/loading.png");
3211   margin-inline-end: 4px;
3212 }
3213
3214 @media (min-resolution: 1.1dppx) {
3215   #sidebar-throbber[loading="true"] {
3216     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3217     width: 16px;
3218   }
3219 }
3220
3221 /* Bookmarks toolbar */
3222 #PlacesToolbarDropIndicator {
3223   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3224 }
3225
3226 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3227   background-color: #008484 !important;
3228   color: #FFCF00 !important;
3229 }
3230
3231 /* rules for menupopup drop indicators */
3232 .menupopup-drop-indicator-bar {
3233   position: relative;
3234   /* these two margins must together compensate the indicator's height */
3235   margin-top: -1px;
3236   margin-bottom: -1px;
3237 }
3238
3239 .menupopup-drop-indicator {
3240   list-style-image: none;
3241   height: 2px;
3242   margin-inline-end: -4em;
3243   background-color: #008484;
3244 }
3245
3246 /* === BEGIN notification-icons.inc.css === */
3247
3248 #notification-popup-box {
3249   border-radius: 3px 0 0 3px;
3250   padding: 5px 0px;
3251   margin: -5px 0px;
3252   margin-inline-end: -5px;
3253   padding-inline-end: 5px;
3254 }
3255
3256 .notification-anchor-icon,
3257 #blocked-permissions-container > .blocked-permission-icon {
3258   width: 16px;
3259   height: 16px;
3260   margin-inline-start: 2px;
3261 }
3262
3263 /* This class can be used alone or in combination with the class defining the
3264    type of icon displayed. This rule must be defined before the others in order
3265    for its list-style-image to be overridden. */
3266 .notification-anchor-icon {
3267   list-style-image: url("chrome://global/skin/icons/information-16.png");
3268 }
3269
3270 .notification-anchor-icon:-moz-focusring {
3271   outline: 1px dotted #008484;
3272 }
3273
3274 @media (min-resolution: 1.1dppx) {
3275   .notification-anchor-icon {
3276     list-style-image: url(chrome://global/skin/icons/information-32.png);
3277   }
3278 }
3279
3280 .popup-notification-icon {
3281   width: 64px;
3282   height: 64px;
3283   margin-inline-end: 10px;
3284 }
3285
3286 .notification-anchor-icon:not(.plugin-blocked),
3287 #blocked-permissions-container > .blocked-permission-icon {
3288   filter: url(chrome://global/skin/filters.svg#fill);
3289   fill: currentColor;
3290 }
3291
3292 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3293 }
3294
3295 /* INDIVIDUAL NOTIFICATIONS */
3296
3297 .popup-notification-icon[popupid="web-notifications"],
3298 .desktop-notification-icon {
3299   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3300 }
3301
3302 .desktop-notification-icon.blocked-permission-icon {
3303   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3304 }
3305
3306 .geo-icon {
3307   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3308 }
3309
3310 .geo-icon.blocked-permission-icon {
3311   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3312 }
3313
3314 .popup-notification-icon[popupid="geolocation"] {
3315   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3316 }
3317
3318 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3319 .indexedDB-icon {
3320   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3321 }
3322
3323 .indexedDB-icon.blocked-permission-icon {
3324   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3325 }
3326
3327 .login-icon {
3328   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3329 }
3330
3331 .popup-notification-icon[popupid="password"] {
3332   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3333 }
3334
3335 .camera-icon,
3336 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3337   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3338 }
3339
3340 .camera-icon.in-use {
3341   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3342 }
3343
3344 .camera-icon.blocked-permission-icon {
3345   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3346 }
3347
3348 .microphone-icon {
3349   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3350 }
3351
3352 .microphone-icon.in-use {
3353   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3354 }
3355
3356 .microphone-icon.blocked-permission-icon {
3357   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3358 }
3359
3360 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3361   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3362 }
3363
3364 .popup-notification-icon[popupid="webRTC-shareScreen"],
3365 .screen-icon {
3366   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3367 }
3368
3369 .screen-icon.in-use {
3370   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3371 }
3372
3373 .screen-icon.blocked-permission-icon {
3374   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3375 }
3376
3377 /* This icon has a block sign in it, so we don't need a blocked version. */
3378 .popup-icon {
3379   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3380 }
3381
3382 /* EME */
3383
3384 .popup-notification-icon[popupid="drmContentPlaying"],
3385 .drm-icon {
3386   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3387 }
3388
3389 .drm-icon:hover:active {
3390   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3391 }
3392
3393 #eme-notification-icon[firstplay=true] {
3394   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3395 }
3396
3397 @keyframes emeTeachingMoment {
3398   0% {transform: translateX(0); }
3399   25% {transform: translateX(3px) }
3400   75% {transform: translateX(-3px) }
3401   100% { transform: translateX(0); }
3402 }
3403
3404 /* INSTALL ADDONS */
3405
3406 .install-icon {
3407   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3408 }
3409
3410 .popup-notification-icon[popupid="xpinstall-disabled"],
3411 .popup-notification-icon[popupid="addon-install-blocked"],
3412 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3413   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3414 }
3415
3416 .popup-notification-icon[popupid="addon-progress"] {
3417   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3418 }
3419
3420 .popup-notification-icon[popupid="addon-install-failed"] {
3421   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3422 }
3423
3424 .popup-notification-icon[popupid="addon-install-confirmation"] {
3425   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3426 }
3427
3428 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3429   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3430 }
3431
3432 .popup-notification-icon[popupid="addon-install-complete"] {
3433   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3434 }
3435
3436 .popup-notification-icon[popupid="addon-install-restart"] {
3437   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3438 }
3439
3440 .popup-notification-icon[popupid="click-to-play-plugins"] {
3441   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3442 }
3443
3444 /* OFFLINE APPS */
3445
3446 .popup-notification-icon[popupid*="offline-app-requested"],
3447 .popup-notification-icon[popupid="offline-app-usage"] {
3448   list-style-image: url(chrome://global/skin/icons/question-64.png);
3449 }
3450
3451 /* PLUGINS */
3452
3453 .plugin-icon {
3454   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3455 }
3456
3457 .plugin-icon.plugin-blocked {
3458   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3459 }
3460
3461 #notification-popup-box[hidden] {
3462   /* Override display:none to make the pluginBlockedNotification animation work
3463      when showing the notification repeatedly. */
3464   display: -moz-box;
3465   visibility: collapse;
3466 }
3467
3468 #plugins-notification-icon.plugin-blocked[showing] {
3469   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3470 }
3471
3472 @keyframes pluginBlockedNotification {
3473   from {
3474     opacity: 0;
3475   }
3476   to {
3477     opacity: 1;
3478   }
3479 }
3480
3481 /* SOCIAL API */
3482
3483 .popup-notification-icon[popupid="servicesInstall"] {
3484   list-style-image: url(chrome://browser/skin/social/services-64.png);
3485 }
3486
3487 .service-icon {
3488   list-style-image: url(chrome://browser/skin/social/services-16.png);
3489 }
3490
3491 /* TRANSLATION */
3492
3493 .translation-icon {
3494   list-style-image: url(chrome://browser/skin/translation-16.png);
3495   -moz-image-region: rect(0px, 16px, 16px, 0px);
3496 }
3497
3498 .translation-icon.in-use {
3499   -moz-image-region: rect(0px, 32px, 16px, 16px);
3500 }
3501
3502 /* === END notification-icons.inc.css === */
3503
3504 .popup-notification-body[popupid="addon-progress"],
3505 .popup-notification-body[popupid="addon-install-confirmation"] {
3506   width: 28em;
3507   max-width: 28em;
3508 }
3509
3510 /* Translation infobar */
3511
3512 /* === BEGIN infobar.inc.css === */
3513
3514 notification[value="translation"] .messageImage {
3515   list-style-image: url("chrome://browser/skin/translation-16.png");
3516   -moz-image-region: rect(0, 32px, 16px, 16px);
3517 }
3518
3519 @media (min-resolution: 1.25dppx) {
3520   notification[value="translation"] .messageImage {
3521     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3522     -moz-image-region: rect(0, 64px, 32px, 32px);
3523   }
3524 }
3525
3526 notification[value="translation"][state="translating"] .messageImage {
3527   list-style-image: url("chrome://browser/skin/translating-16.png");
3528   -moz-image-region: auto;
3529 }
3530
3531 @media (min-resolution: 1.25dppx) {
3532   notification[value="translation"][state="translating"] .messageImage {
3533     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3534   }
3535 }
3536
3537 notification[value="translation"] hbox[anonid="details"] {
3538   overflow: hidden;
3539 }
3540
3541 notification[value="translation"] button,
3542 notification[value="translation"] menulist {
3543   min-width: 0;
3544 }
3545
3546 notification[value="translation"] menulist > .menulist-dropmarker {
3547 }
3548
3549 .translation-menupopup arrowscrollbox {
3550   padding-bottom: 0;
3551 }
3552
3553 .translation-attribution {
3554   cursor: pointer;
3555   -moz-box-align: end;
3556   font-size: small;
3557 }
3558
3559 .translation-attribution > label {
3560   margin-bottom: 0;
3561 }
3562
3563 .translation-attribution > image {
3564   width: 70px;
3565 }
3566
3567 .translation-welcome-panel {
3568   width: 305px;
3569 }
3570
3571 .translation-welcome-logo {
3572   height: 32px;
3573   width: 32px;
3574   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3575   -moz-image-region: rect(0, 64px, 32px, 32px);
3576 }
3577
3578 .translation-welcome-content {
3579   margin-inline-start: 16px;
3580 }
3581
3582 .translation-welcome-headline {
3583   font-size: larger;
3584   font-weight: bold;
3585 }
3586
3587 .translation-welcome-body {
3588   padding: 1em 0;
3589   margin: 0 0;
3590 }
3591
3592 /* === END infobar.inc.css === */
3593
3594 notification[value="translation"] {
3595   min-height: 40px;
3596 }
3597
3598 .translation-menupopup {
3599   -moz-appearance: none;
3600 }
3601
3602 /* Bookmarks roots menu-items */
3603 #subscribeToPageMenuitem:not([disabled]),
3604 #subscribeToPageMenupopup {
3605   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3606 }
3607
3608 #bookmarksToolbarFolderMenu,
3609 #BMB_bookmarksToolbar,
3610 #panelMenu_bookmarksToolbar {
3611   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3612   -moz-image-region: auto;
3613 }
3614
3615 #BMB_unsortedBookmarks,
3616 #panelMenu_unsortedBookmarks {
3617   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3618   -moz-image-region: auto;
3619 }
3620
3621 /* Status panel */
3622
3623 .statuspanel-label {
3624   margin: 0;
3625   padding: 2px 4px;
3626   background: #404000;
3627   border: 1px none #9C9CFF;
3628   border-top-style: solid;
3629   color: #FF9F00;
3630   text-shadow: none;
3631 }
3632
3633 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3634 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3635   border-right-style: solid;
3636   border-top-right-radius: .3em;
3637   margin-right: 1em;
3638 }
3639
3640 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3641 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3642   border-left-style: solid;
3643   border-top-left-radius: .3em;
3644   margin-left: 1em;
3645 }
3646
3647 /* HACK to abolish devily color on main content */
3648
3649 #content {
3650   background-color: transparent !important;
3651 }
3652
3653 /* === BEGIN fullscreen/warning.inc.css === */
3654
3655 html|*.pointerlockfswarning {
3656   align-items: center;
3657   background: rgba(0, 0, 0, 0.9);
3658   border: 2px solid #A09090;
3659   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3660   border-radius: 8px;
3661   padding: 24px 16px;
3662   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3663 }
3664
3665 html|*.pointerlockfswarning::before {
3666   margin: 0;
3667   width: 24px; height: 24px;
3668 }
3669
3670 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3671 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3672   content: url("chrome://browser/skin/fullscreen/secure.svg");
3673 }
3674
3675 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3676   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3677 }
3678
3679 html|*.pointerlockfswarning-domain-text,
3680 html|*.pointerlockfswarning-generic-text {
3681   font-size: 21px;
3682   font-weight: lighter;
3683   color: #A09090;
3684   margin: 0 16px;
3685 }
3686
3687 html|*.pointerlockfswarning-domain {
3688   font-weight: bold;
3689   margin: 0;
3690 }
3691
3692 html|*.pointerlockfswarning-exit-button {
3693   padding: 5px 30px;
3694   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3695   font-size: 14px;
3696   font-weight: lighter;
3697   margin: 0;
3698   box-sizing: content-box;
3699
3700   border-radius: 300px;
3701   border: none;
3702   background-color: #C09070;
3703   color: #000000;
3704 }
3705
3706 /* === END fullscreen/warning.inc.css === */
3707
3708 /* === BEGIN ctrlTab.inc.css === */
3709
3710 /* Ctrl-Tab */
3711
3712 #ctrlTab-panel {
3713   -moz-appearance: none;
3714   background: rgba(0%,0%,0%,.7);
3715   color: #FF9F00;
3716   border-style: none;
3717   padding: 20px 10px 10px;
3718   font-weight: bold;
3719 }
3720
3721 .ctrlTab-favicon[src] {
3722   background-color: #000000;
3723   width: 20px;
3724   height: 20px;
3725   padding: 2px;
3726 }
3727
3728 .ctrlTab-preview-inner > .tabPreview-canvas {
3729 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3730 }
3731
3732 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3733   margin-bottom: 2px;
3734 }
3735
3736 .ctrlTab-preview-inner {
3737   padding: 8px;
3738   border: 2px solid transparent;
3739   border-radius: .5em;
3740 }
3741
3742 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3743   margin: -10px -10px 0;
3744 }
3745
3746 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3747   background-color: #000000;
3748 }
3749
3750 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3751   color: #A09090;
3752   background-color: #000000;
3753   text-shadow: none;
3754   border-color: #9C9CFF;
3755 }
3756
3757 #ctrlTab-showAll {
3758   margin-top: .5em;
3759 }
3760
3761 /* === END ctrlTab.inc.css === */
3762
3763 /* === BEGIN commandline.inc.css === */
3764
3765 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3766    We are copy/pasting variables from light-theme and dark-theme,
3767    since they aren't loaded in this context (within browser.css). */
3768 :root #developer-toolbar {
3769   --gcli-background-color: #000000; /* --theme-toolbar-background */
3770   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3771   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3772   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3773   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3774   --selection-background: #008484; /* --theme-selection-background */
3775   --selection-color: #000000; /* --theme-selection-color */
3776   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3777   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3778 }
3779
3780 /* Developer toolbar */
3781
3782 #developer-toolbar {
3783   border-top: 3px solid var(--gcli-background-color);
3784   border-bottom: none;
3785 }
3786
3787 #developer-toolbar .toolbar-holder {
3788   background-color: #8050B0;
3789   color: #FFCF00;
3790 }
3791
3792 #developer-toolbar .toolbar-holder {
3793   background-color: #8050B0;
3794   color: #FFCF00;
3795 }
3796
3797 #developer-toolbar .toolbar-startcap,
3798 #developer-toolbar .toolbar-endcap{
3799   background-color: #6000CF;
3800 }
3801
3802 #developer-toolbar {
3803 /*  padding: 0;
3804   min-height: 32px; */
3805 }
3806
3807 #developer-toolbar > toolbarbutton {
3808 /*  border: none;
3809   background-color: transparent;
3810   margin: 0;
3811   padding: 0 10px;
3812   width: 32px; */
3813 }
3814
3815 .developer-toolbar-button > image {
3816 /*  margin: auto 10px; */
3817 }
3818
3819 #developer-toolbar-toolbox-button > label {
3820   display: none;
3821 }
3822
3823 .developer-toolbar-button > .toolbarbutton-icon {
3824   width: 16px;
3825   height: 16px;
3826 }
3827
3828 #developer-toolbar-toolbox-button {
3829   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3830   -moz-image-region: rect(0px, 16px, 16px, 0px);
3831 }
3832
3833 #developer-toolbar-toolbox-button > label {
3834   display: none;
3835 }
3836
3837 #developer-toolbar-toolbox-button:hover,
3838 #developer-toolbar-toolbox-button:hover:active,
3839 #developer-toolbar-toolbox-button[checked=true] {
3840   -moz-image-region: rect(0px, 32px, 16px, 16px);
3841 }
3842
3843 @media (min-resolution: 2dppx) {
3844   #developer-toolbar-toolbox-button {
3845     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3846     -moz-image-region: rect(0px, 32px, 32px, 0px);
3847   }
3848
3849   #developer-toolbar-toolbox-button:hover,
3850   #developer-toolbar-toolbox-button:hover:active,
3851   #developer-toolbar-toolbox-button[checked=true] {
3852     -moz-image-region: rect(0px, 64px, 32px, 32px);
3853   }
3854 }
3855
3856 /* GCLI */
3857
3858 html|*#gcli-tooltip-frame,
3859 html|*#gcli-output-frame {
3860   padding: 0;
3861   border-width: 0;
3862   background-color: transparent;
3863 }
3864
3865 #gcli-output,
3866 #gcli-tooltip {
3867   border-width: 0;
3868   background-color: transparent;
3869 }
3870
3871 .gclitoolbar-input-node,
3872 .gclitoolbar-complete-node {
3873   margin: 1px 3px;
3874   -moz-box-align: center;
3875   padding-top: 0;
3876   padding-bottom: 0;
3877   padding-right: 8px;
3878   background-color: transparent;
3879 }
3880
3881 .gclitoolbar-input-node {
3882 /*  line-height: 32px;
3883   outline-style: none; */
3884   background-repeat: no-repeat;
3885   background-color: var(--gcli-input-background);
3886 }
3887
3888 .gclitoolbar-input-node[focused="true"] {
3889   background-color: var(--gcli-input-focused-background);
3890 }
3891
3892 .gclitoolbar-input-node::before {
3893   content: "";
3894   display: inline-block;
3895   -moz-box-ordinal-group: 0;
3896   width: 16px;
3897   height: 16px;
3898   margin: 0 2px;
3899   background-image: var(--command-line-image);
3900 }
3901
3902 .gclitoolbar-input-node[focused="true"]::before {
3903   background-image: var(--command-line-image-focus);
3904 }
3905
3906 .gclitoolbar-input-node:not([focused="true"]) {
3907   border-color: transparent;
3908 }
3909
3910 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3911   background-color: var(--selection-background);
3912   color: var(--selection-color);
3913 }
3914
3915 .gclitoolbar-complete-node {
3916   padding-left: 21px;
3917   background-color: transparent;
3918   color: transparent;
3919   z-index: 100;
3920   pointer-events: none;
3921 }
3922
3923 .gcli-in-incomplete,
3924 .gcli-in-error,
3925 .gcli-in-ontab,
3926 .gcli-in-todo,
3927 .gcli-in-closebrace,
3928 .gcli-in-param,
3929 .gcli-in-valid {
3930   margin: 0;
3931   padding: 0;
3932 }
3933
3934 .gcli-in-incomplete {
3935   border-bottom: 2px dotted #8050B0;
3936 }
3937
3938 .gcli-in-error {
3939   border-bottom: 2px dotted #FF0000;
3940 }
3941
3942 .gcli-in-ontab {
3943   color: #9C9CFF;
3944 }
3945
3946 .gcli-in-todo {
3947   color: #795900;
3948 }
3949
3950 .gcli-in-closebrace {
3951   color: #8050B0;
3952 }
3953
3954 /* === END commandline.inc.css === */
3955
3956 /* === BEGIN responsivedesign.inc.css === */
3957
3958 /* Responsive Mode */
3959
3960 .browserContainer[responsivemode] {
3961   background-color: #221500;
3962   padding: 0 20px 20px 20px;
3963 }
3964
3965 .browserStack[responsivemode] {
3966   box-shadow: 0 0 7px #9C9CFF;
3967 }
3968
3969 .devtools-responsiveui-toolbar {
3970   background: transparent;
3971   /* text color is textColor from dark theme, since no theme is applied to
3972    * the responsive toolbar.
3973    */
3974   color: #FF9F00;
3975   margin: 10px 0;
3976   padding: 0;
3977   box-shadow: none;
3978   border-bottom-width: 0;
3979 }
3980
3981 .devtools-responsiveui-textinput {
3982 /*  -moz-appearance: none;
3983   background: #333;
3984   color: #fff;
3985   border: 1px solid #111;
3986   border-radius: 2px;
3987   padding: 0 5px;*/
3988   width: 200px;
3989   margin: 0;
3990 }
3991
3992 .devtools-responsiveui-textinput[attention] {
3993 /*  border-color: #38ace6;
3994   background: rgba(56,172,230,0.4);*/
3995 }
3996
3997 .devtools-responsiveui-menulist,
3998 .devtools-responsiveui-toolbarbutton {
3999   -moz-box-align: center;
4000   min-width: 32px;
4001 /*  min-height: 22px;*/
4002 /*  margin: 0 3px; */
4003 }
4004
4005 .devtools-responsiveui-menulist .menulist-editable-box {
4006   background-color: transparent;
4007 }
4008
4009 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4010   color: inherit;
4011   text-align: center;
4012 }
4013
4014 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4015 /*  background: hsla(212,7%,57%,.35);*/
4016 }
4017
4018 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4019   width: 16px;
4020   height: 16px;
4021 }
4022
4023 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4024   -moz-box-orient: horizontal;
4025 }
4026
4027 .devtools-responsiveui-menulist:-moz-focusring,
4028 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4029 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4030   outline-offset: -4px;*/
4031 }
4032
4033 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4034   display: none;
4035 }
4036
4037 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4038 /*  border-color: hsla(210,8%,5%,.6);
4039   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4040   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); */
4041 }
4042
4043 .devtools-responsiveui-menulist[open=true],
4044 .devtools-responsiveui-toolbarbutton[open=true],
4045 .devtools-responsiveui-toolbarbutton[checked=true] {
4046 /*  border-color: hsla(210,8%,5%,.6) !important;
4047   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4048   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); */
4049 }
4050
4051 .devtools-responsiveui-toolbarbutton[checked=true] {
4052 /*  color: hsl(208,100%,60%); */
4053 }
4054
4055 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4056 /*  background-color: transparent !important;*/
4057 }
4058
4059 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4060 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4061 }
4062
4063 .devtools-responsiveui-menulist > .menulist-label-box {
4064   text-align: center;
4065 }
4066
4067 .devtools-responsiveui-menulist&nb