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/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
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");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
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");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 --identity-box-verified-background-color: #000000;
44 --panel-separator-color: #A09090;
46 --urlbar-separator-color: #9C9CFF;
50 -moz-box-orient: vertical; /* for flex hack */
54 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
57 /* ::::: primary toolbar ::::: */
59 .toolbar-primary > .toolbar-box > .toolbar-holder {
60 background-color: #A09090;
63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
65 background-color: #9C9CFF;
68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
69 are not autohiding the menubar. */
70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
84 /* margin-top: var(--space-above-tabbar);*/
87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
89 #toolbar-menubar:not([autohide="true"]) {
90 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102 /* 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 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110 outline-color: #A09090;
116 #navigator-toolbox::after {
119 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 #navigator-toolbox > toolbar {
126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130 overflow: -moz-hidden-unscrollable;
132 transition: min-height 170ms ease-out, max-height 170ms ease-out;
135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
138 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143 /* Indent also due to non-applicable aero rule in original Windows theme. */
144 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
147 background-color: #6000CF;
151 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153 background-color: #8050B0;
157 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
161 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
165 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
173 #titlebar-buttonbox > .titlebar-button {
179 /* Position the toolbar above the bottom of background tabs */
184 #personal-bookmarks {
185 /* min-height: 24px; */
188 #PersonalToolbar > #home-button {
189 -moz-box-orient: horizontal;
192 #PersonalToolbar > #home-button > .toolbarbutton-text {
196 #print-preview-toolbar:not(:-moz-lwtheme) {
197 /* -moz-appearance: toolbox; */
200 #browser-bottombox:not(:-moz-lwtheme) {
203 /* ::::: titlebar ::::: */
207 background-color: #6000CF;
210 #titlebar:-moz-window-inactive {
211 background-color: #8050B0;
215 #main-window[sizemode="normal"] > #titlebar {
220 #main-window[sizemode="maximized"] > #titlebar {
224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
226 #main-window[sizemode="normal"] > #titlebar,
227 #main-window[sizemode="maximized"] > #titlebar {
229 /* There is a margin-bottom set to -23 by code. */
233 /* The button box must appear on top of the navigator-toolbox in order for
234 * click and hover mouse events to work properly for the button in the restored
235 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236 * can swallow those events. It will also place the buttons above the fog on
237 * themes with Aero Glass.
240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
241 -moz-appearance: none;
244 -moz-margin-end: 3px;
248 .titlebar-placeholder[type="appmenu-button"] {
252 .titlebar-placeholder[type="caption-buttons"] {
256 /* titlebar command buttons */
258 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
261 #titlebar-min:hover {
262 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
266 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
269 #titlebar-max:hover {
270 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
273 #main-window[sizemode="maximized"] #titlebar-max {
274 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
277 #main-window[sizemode="maximized"] #titlebar-max:hover {
278 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
282 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
285 #titlebar-close:hover {
286 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
291 #titlebar-fullscreen-button {
292 -moz-appearance: none;
293 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294 -moz-image-region: rect(0px, 16px, 16px, 0px);
297 #titlebar-fullscreen-button:hover {
298 -moz-image-region: rect(0px, 32px, 16px, 16px);
301 @media (min-resolution: 2dppx) {
302 #titlebar-fullscreen-button {
303 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304 -moz-image-region: rect(0px, 32px, 32px, 0px);
307 #titlebar-fullscreen-button:hover {
308 -moz-image-region: rect(0px, 64px, 32px, 32px);
314 /* ::::: bookmark buttons ::::: */
316 toolbarbutton.bookmark-item:not(.subviewbutton),
317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323 toolbarbutton.bookmark-item[open="true"] {
326 -moz-padding-start: 4px;
327 -moz-padding-end: 2px;*/
330 .bookmark-item > .toolbarbutton-icon,
331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
334 -moz-margin-start: 1px;
335 -moz-margin-end: 2px;
340 /* Force the display of the label for bookmarks */
341 .bookmark-item > .toolbarbutton-text,
342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
343 display: -moz-box !important;
346 .bookmark-item > .toolbarbutton-menu-dropmarker {
350 #bookmarks-toolbar-placeholder {
351 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
352 -moz-box-orient: horizontal;
355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
360 /* ----- BOOKMARK STAR ANIMATION ----- */
362 @keyframes animation-bookmarkAdded {
363 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
366 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
369 @keyframes animation-bookmarkPulse {
370 from { transform: scale(1); }
371 50% { transform: scale(1.3); }
372 to { transform: scale(1); }
375 #bookmarked-notification-container {
384 #bookmarked-notification {
385 background-size: 16px;
386 background-position: center;
387 background-repeat: no-repeat;
393 #bookmarked-notification-dropmarker-anchor {
398 #bookmarked-notification-dropmarker-icon {
404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406 animation: animation-bookmarkAdded 800ms;
407 animation-timing-function: ease, ease, ease;
410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
411 list-style-image: none !important;
414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
416 animation: animation-bookmarkPulse 300ms;
417 animation-delay: 600ms;
418 animation-timing-function: ease-out;
421 /* ::::: bookmark menus ::::: */
424 menuitem.bookmark-item {
429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435 -moz-padding-start: 0px;
438 /* ::::: bookmark items ::::: */
441 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
442 -moz-image-region: auto;
445 .bookmark-item[container] {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
447 -moz-image-region: auto;
450 .bookmark-item[container][open] {
451 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
452 -moz-image-region: auto;
455 .bookmark-item[container][livemark] {
456 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
457 -moz-image-region: auto;
460 .bookmark-item[container][livemark] .bookmark-item {
461 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
462 -moz-image-region: rect(0px, 16px, 16px, 0px);
465 .bookmark-item[container][livemark] .bookmark-item[visited] {
466 -moz-image-region: rect(0px, 32px, 16px, 16px);
469 .bookmark-item[container][query] {
470 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
471 -moz-image-region: auto;
474 .bookmark-item[query][tagContainer] {
475 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476 -moz-image-region: auto;
479 .bookmark-item[query][dayContainer] {
480 list-style-image: url("chrome://communicator/skin/history/calendar.png");
481 -moz-image-region: auto;
484 .bookmark-item[query][hostContainer] {
485 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
486 -moz-image-region: auto;
489 .bookmark-item[query][hostContainer][open] {
490 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
491 -moz-image-region: auto;
494 .bookmark-item[cutting] > .toolbarbutton-icon,
495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
499 .bookmark-item[cutting] > .toolbarbutton-text,
500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
504 /* ::::: primary toolbar buttons ::::: */
506 /* === BEGIN toolbarbuttons.inc.css === */
508 /* Whole section of this included file: */
509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
511 #social-share-button, #open-file-button, #find-button, #developer-button,
512 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
513 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
515 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
518 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
520 toolbar[brighttext] #pocket-button,
522 list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
526 -moz-image-region: rect(0, 36px, 18px, 18px);
529 #back-button:hover:not([disabled="true"]) {
530 -moz-image-region: rect(18px, 36px, 36px, 18px);
533 #back-button[disabled="true"] {
534 -moz-image-region: rect(36px, 36px, 54px, 18px);
538 -moz-image-region: rect(0, 72px, 18px, 54px);
541 #forward-button:hover:not([disabled="true"]) {
542 -moz-image-region: rect(18px, 72px, 36px, 54px);
545 #forward-button[disabled="true"] {
546 -moz-image-region: rect(36px, 72px, 54px, 54px);
549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
550 #forward-button:-moz-locale-dir(rtl) {
551 transform: scaleX(-1);
554 #home-button[cui-areatype="toolbar"] {
555 -moz-image-region: rect(0, 126px, 18px, 108px);
558 #home-button[cui-areatype="toolbar"]:hover {
559 -moz-image-region: rect(18px, 126px, 36px, 108px);
562 #bookmarks-menu-button[cui-areatype="toolbar"] {
563 -moz-image-region: rect(0, 144px, 18px, 126px);
566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
568 -moz-image-region: rect(18px, 144px, 36px, 126px);
571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
573 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
574 background-color: transparent !important;
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
578 -moz-image-region: rect(0, 162px, 18px, 144px);
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
584 /* When starred and clicked (for edit/delete dialog),
585 * then only the menubutton-button itself is open, but not the whole menubutton. */
586 -moz-image-region: rect(18px, 162px, 36px, 144px);
589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
590 -moz-image-region: rect(0, 630px, 18px, 612px);
593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
595 -moz-box-align: center;
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
600 -moz-image-region: rect(18px, 630px, 36px, 612px);
603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
607 -moz-padding-start: 2px;
608 -moz-padding-end: 0px;
611 #history-panelmenu[cui-areatype="toolbar"] {
612 -moz-image-region: rect(0, 180px, 18px, 162px);
615 #history-panelmenu[cui-areatype="toolbar"]:hover,
616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
617 -moz-image-region: rect(18px, 180px, 36px, 162px);
620 #downloads-button[cui-areatype="toolbar"] {
621 -moz-image-region: rect(0, 198px, 18px, 180px);
624 #downloads-button[cui-areatype="toolbar"]:hover,
625 #downloads-button[cui-areatype="toolbar"][open="true"] {
626 -moz-image-region: rect(18px, 198px, 36px, 180px);
629 #add-ons-button[cui-areatype="toolbar"] {
630 -moz-image-region: rect(0, 216px, 18px, 198px);
633 #add-ons-button[cui-areatype="toolbar"]:hover {
634 -moz-image-region: rect(18px, 216px, 36px, 198px);
637 #open-file-button[cui-areatype="toolbar"] {
638 -moz-image-region: rect(0, 234px, 18px, 216px);
641 #open-file-button[cui-areatype="toolbar"]:hover {
642 -moz-image-region: rect(18px, 234px, 36px, 216px);
645 #save-page-button[cui-areatype="toolbar"] {
646 -moz-image-region: rect(0, 252px, 18px, 234px);
649 #save-page-button[cui-areatype="toolbar"]:hover {
650 -moz-image-region: rect(18px, 252px, 36px, 234px);
653 #sync-button[cui-areatype="toolbar"] {
654 -moz-image-region: rect(0, 270px, 18px, 252px);
657 #sync-button[cui-areatype="toolbar"]:hover {
658 -moz-image-region: rect(18px, 270px, 36px, 252px);
661 #sync-button[cui-areatype="toolbar"][status="active"],
662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
663 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
664 -moz-image-region: rect(0, 18px, 18px, 0px);
668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
670 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
674 #feed-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 288px, 18px, 270px);
678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
680 -moz-image-region: rect(18px, 288px, 36px, 270px);
683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
684 -moz-image-region: rect(36px, 288px, 54px, 270px);
687 #social-share-button[cui-areatype="toolbar"] {
688 -moz-image-region: rect(0px, 306px, 18px, 288px);
691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
692 #social-share-button[cui-areatype="toolbar"][open="true"] {
693 -moz-image-region: rect(18px, 306px, 36px, 288px);
696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
697 -moz-image-region: rect(36px, 306px, 54px, 288px);
700 #characterencoding-button[cui-areatype="toolbar"] {
701 -moz-image-region: rect(0, 324px, 18px, 306px);
704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
706 -moz-image-region: rect(18px, 324px, 36px, 306px);
709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
710 -moz-image-region: rect(36px, 324px, 54px, 306px);
713 #new-window-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 342px, 18px, 324px);
717 #new-window-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 342px, 36px, 324px);
721 #e10s-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 342px, 18px, 324px);
725 #e10s-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 342px, 36px, 324px);
729 #e10s-button > .toolbarbutton-icon {
730 transform: scaleY(-1);
733 #new-tab-button[cui-areatype="toolbar"] {
734 -moz-image-region: rect(0, 360px, 18px, 342px);
737 #new-tab-button[cui-areatype="toolbar"]:hover {
738 -moz-image-region: rect(18px, 360px, 36px, 342px);
741 #privatebrowsing-button[cui-areatype="toolbar"] {
742 -moz-image-region: rect(0, 378px, 18px, 360px);
745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
746 -moz-image-region: rect(18px, 378px, 36px, 360px);
749 #find-button[cui-areatype="toolbar"] {
750 -moz-image-region: rect(0, 396px, 18px, 378px);
753 #find-button[cui-areatype="toolbar"]:hover {
754 -moz-image-region: rect(18px, 396px, 36px, 378px);
757 #print-button[cui-areatype="toolbar"] {
758 -moz-image-region: rect(0, 414px, 18px, 396px);
761 #print-button[cui-areatype="toolbar"]:hover {
762 -moz-image-region: rect(18px, 414px, 36px, 396px);
765 #fullscreen-button[cui-areatype="toolbar"] {
766 -moz-image-region: rect(0, 432px, 18px, 414px);
769 #fullscreen-button[cui-areatype="toolbar"]:hover {
770 -moz-image-region: rect(18px, 432px, 36px, 414px);
773 #developer-button[cui-areatype="toolbar"] {
774 -moz-image-region: rect(0, 450px, 18px, 432px);
777 #developer-button[cui-areatype="toolbar"]:hover,
778 #developer-button[cui-areatype="toolbar"][open="true"] {
779 -moz-image-region: rect(18px, 450px, 36px, 432px);
782 #preferences-button[cui-areatype="toolbar"] {
783 -moz-image-region: rect(0, 468px, 18px, 450px);
786 #preferences-button[cui-areatype="toolbar"]:hover {
787 -moz-image-region: rect(18px, 468px, 36px, 450px);
790 #PanelUI-menu-button {
791 -moz-image-region: rect(0, 486px, 18px, 468px);
794 #PanelUI-menu-button:hover,
795 #PanelUI-menu-button[open="true"] {
796 -moz-image-region: rect(18px, 486px, 36px, 468px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
800 -moz-image-region: rect(0, 504px, 18px, 486px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
804 -moz-image-region: rect(18px, 504px, 36px, 486px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
808 -moz-image-region: rect(36px, 504px, 54px, 486px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
812 -moz-image-region: rect(0, 522px, 18px, 504px);
815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
816 -moz-image-region: rect(18px, 522px, 36px, 504px);
819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
820 -moz-image-region: rect(36px, 522px, 54px, 504px);
823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
824 -moz-image-region: rect(0, 540px, 18px, 522px);
827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
828 -moz-image-region: rect(18px, 540px, 36px, 522px);
831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
832 -moz-image-region: rect(36px, 540px, 54px, 522px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
836 -moz-image-region: rect(0, 558px, 18px, 540px);
839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
840 -moz-image-region: rect(18px, 558px, 36px, 540px);
843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
844 -moz-image-region: rect(36px, 558px, 54px, 540px);
847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
848 -moz-image-region: rect(0, 576px, 18px, 558px);
851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
852 -moz-image-region: rect(18px, 576px, 36px, 558px);
855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
856 -moz-image-region: rect(36px, 576px, 54px, 558px);
859 #nav-bar-overflow-button {
860 -moz-image-region: rect(0, 612px, 18px, 594px);
863 #nav-bar-overflow-button:hover,
864 #nav-bar-overflow-button[open="true"] {
865 -moz-image-region: rect(18px, 612px, 36px, 594px);
868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
869 transform: scaleX(-1);
873 -moz-image-region: rect(0, 648px, 18px, 630px);
876 #tabview-button:hover {
877 -moz-image-region: rect(18px, 648px, 36px, 630px);
880 #email-link-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 666px, 18px, 648px);
884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
885 -moz-image-region: rect(18px, 666px, 36px, 648px);
888 #email-button[cui-areatype="toolbar"][disabled="true"] {
889 -moz-image-region: rect(36px, 666px, 54px, 648px);
892 #sidebar-button[cui-areatype="toolbar"] {
893 -moz-image-region: rect(0, 684px, 18px, 666px);
896 #sidebar-button[cui-areatype="toolbar"]:hover {
897 -moz-image-region: rect(18px, 684px, 36px, 666px);
900 #panic-button[cui-areatype="toolbar"] {
901 -moz-image-region: rect(0, 702px, 18px, 684px);
904 #panic-button[cui-areatype="toolbar"]:hover,
905 #panic-button[cui-areatype="toolbar"][open] {
906 -moz-image-region: rect(18px, 702px, 36px, 684px);
909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
910 transform: scaleX(-1);
914 #loop-button > .toolbarbutton-badge-stack {
915 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
916 -moz-image-region: rect(0, 18px, 18px, 0);
919 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
920 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
921 -moz-image-region: rect(0, 90px, 18px, 72px);
924 #loop-button[state="disabled"],
925 #loop-button[disabled="true"],
926 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
927 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
928 -moz-image-region: rect(0, 36px, 18px, 18px);
931 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
932 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
933 -moz-image-region: rect(0, 126px, 18px, 108px);
936 #loop-button:not([disabled="true"])[state="error"],
937 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
938 -moz-image-region: rect(0, 54px, 18px, 36px);
941 #loop-button:not([disabled="true"])[state="action"],
942 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
943 -moz-image-region: rect(0, 72px, 18px, 54px);
946 #loop-button:not([disabled="true"])[state="active"],
947 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
948 -moz-image-region: rect(0, 108px, 18px, 90px);
951 #webide-button[cui-areatype="toolbar"] {
952 -moz-image-region: rect(0, 738px, 18px, 720px);
955 #webide-button[cui-areatype="toolbar"]:hover {
956 -moz-image-region: rect(18px, 738px, 36px, 720px);
959 #pocket-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 774px, 18px, 756px);
963 #pocket-button[cui-areatype="toolbar"]:hover,
964 #pocket-button[cui-areatype="toolbar"][open] {
965 -moz-image-region: rect(18px, 774px, 36px, 756px);
968 /* === END toolbarbuttons.inc.css === */
970 /* === BEGIN menupanel.inc.css === */
972 /* Menu panel and palette styles */
975 /* avoid aero overrides with changed filenames */
976 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
977 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
980 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
981 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
982 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
983 #social-share-button, #open-file-button, #find-button, #developer-button,
984 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
985 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
986 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
987 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
988 #pocket-button)[cui-areatype="menu-panel"],
989 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
990 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
991 #social-share-button, #open-file-button, #find-button, #developer-button,
992 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
993 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
994 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
995 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
997 list-style-image: var(--menupanel-list-style-image);
1000 #home-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #home-button {
1002 -moz-image-region: rect(0px, 128px, 32px, 96px);
1005 #home-button[cui-areatype="menu-panel"]:hover,
1006 toolbarpaletteitem[place="palette"] > #home-button:hover {
1007 -moz-image-region: rect(32px, 128px, 64px, 96px);
1010 #bookmarks-menu-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1012 -moz-image-region: rect(0px, 192px, 32px, 160px);
1015 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1016 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1017 -moz-image-region: rect(32px, 192px, 64px, 160px);
1020 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1021 -moz-image-region: rect(32px, 192px, 64px, 160px);
1024 #history-panelmenu[cui-areatype="menu-panel"],
1025 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1026 -moz-image-region: rect(0px, 224px, 32px, 192px);
1029 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1030 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1031 -moz-image-region: rect(32px, 224px, 64px, 192px);
1034 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1035 -moz-image-region: rect(32px, 224px, 64px, 192px);
1038 #downloads-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #downloads-button {
1040 -moz-image-region: rect(0px, 256px, 32px, 224px);
1043 #downloads-button[cui-areatype="menu-panel"]:hover,
1044 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1045 -moz-image-region: rect(32px, 256px, 64px, 224px);
1048 #add-ons-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #add-ons-button {
1050 -moz-image-region: rect(0px, 288px, 32px, 256px);
1053 #add-ons-button[cui-areatype="menu-panel"]:hover,
1054 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1055 -moz-image-region: rect(32px, 288px, 64px, 256px);
1058 #open-file-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #open-file-button {
1060 -moz-image-region: rect(0px, 320px, 32px, 288px);
1063 #open-file-button[cui-areatype="menu-panel"]:hover,
1064 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1065 -moz-image-region: rect(32px, 320px, 64px, 288px);
1068 #save-page-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #save-page-button {
1070 -moz-image-region: rect(0px, 352px, 32px, 320px);
1073 #save-page-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1075 -moz-image-region: rect(32px, 352px, 64px, 320px);
1078 #sync-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #sync-button {
1080 -moz-image-region: rect(0px, 384px, 32px, 352px);
1083 #sync-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1085 -moz-image-region: rect(32px, 384px, 64px, 352px);
1088 #sync-button[cui-areatype="menu-panel"][status="active"] {
1089 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1090 -moz-image-region: rect(0px, 32px, 32px, 0px);
1093 #feed-button[cui-areatype="menu-panel"],
1094 toolbarpaletteitem[place="palette"] > #feed-button {
1095 -moz-image-region: rect(0px, 416px, 32px, 384px);
1098 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1099 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1100 -moz-image-region: rect(32px, 416px, 64px, 384px);
1103 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1104 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1105 -moz-image-region: rect(64px, 416px, 96px, 384px);
1108 #social-share-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #social-share-button {
1110 -moz-image-region: rect(0px, 448px, 32px, 416px);
1113 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1115 -moz-image-region: rect(32px, 448px, 64px, 416px);
1118 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1120 -moz-image-region: rect(64px, 448px, 96px, 416px);
1123 #characterencoding-button[cui-areatype="menu-panel"],
1124 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1125 -moz-image-region: rect(0px, 480px, 32px, 448px);
1128 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1130 -moz-image-region: rect(32px, 480px, 64px, 448px);
1133 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1135 -moz-image-region: rect(64px, 480px, 96px, 448px);
1138 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1139 -moz-image-region: rect(32px, 480px, 64px, 448px);
1142 #new-window-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #new-window-button {
1144 -moz-image-region: rect(0px, 512px, 32px, 480px);
1147 #new-window-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1149 -moz-image-region: rect(32px, 512px, 64px, 480px);
1152 #e10s-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #e10s-button {
1154 -moz-image-region: rect(0px, 512px, 32px, 480px);
1157 #e10s-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1159 -moz-image-region: rect(32px, 512px, 64px, 480px);
1162 #new-tab-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #new-tab-button {
1164 -moz-image-region: rect(0px, 544px, 32px, 512px);
1167 #new-tab-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1169 -moz-image-region: rect(32px, 544px, 64px, 512px);
1172 #privatebrowsing-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1174 -moz-image-region: rect(0px, 576px, 32px, 544px);
1177 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1179 -moz-image-region: rect(32px, 576px, 64px, 544px);
1182 #tabview-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #tabview-button {
1184 -moz-image-region: rect(0px, 608px, 32px, 576px);
1187 #tabview-button[cui-areatype="menu-panel"]:hover,
1188 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1189 -moz-image-region: rect(32px, 608px, 64px, 576px);
1192 #find-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #find-button {
1194 -moz-image-region: rect(0px, 640px, 32px, 608px);
1197 #find-button[cui-areatype="menu-panel"]:hover,
1198 toolbarpaletteitem[place="palette"] > #find-button:hover {
1199 -moz-image-region: rect(32px, 640px, 64px, 608px);
1202 #print-button[cui-areatype="menu-panel"],
1203 toolbarpaletteitem[place="palette"] > #print-button {
1204 -moz-image-region: rect(0px, 672px, 32px, 640px);
1207 #print-button[cui-areatype="menu-panel"]:hover,
1208 toolbarpaletteitem[place="palette"] > #print-button:hover {
1209 -moz-image-region: rect(32px, 672px, 64px, 640px);
1212 #fullscreen-button[cui-areatype="menu-panel"],
1213 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1214 -moz-image-region: rect(0px, 704px, 32px, 672px);
1217 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1218 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1219 -moz-image-region: rect(32px, 704px, 64px, 672px);
1222 #developer-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #developer-button {
1224 -moz-image-region: rect(0px, 736px, 32px, 704px);
1227 #developer-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1229 -moz-image-region: rect(32px, 736px, 64px, 704px);
1232 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1233 -moz-image-region: rect(32px, 736px, 64px, 704px);
1236 #preferences-button[cui-areatype="menu-panel"],
1237 toolbarpaletteitem[place="palette"] > #preferences-button {
1238 -moz-image-region: rect(0px, 768px, 32px, 736px);
1241 #preferences-button[cui-areatype="menu-panel"]:hover,
1242 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1243 -moz-image-region: rect(32px, 768px, 64px, 736px);
1246 #email-link-button[cui-areatype="menu-panel"],
1247 toolbarpaletteitem[place="palette"] > #email-link-button {
1248 -moz-image-region: rect(0, 800px, 32px, 768px);
1251 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1252 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1253 -moz-image-region: rect(32px, 800px, 64px, 768px);
1256 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1257 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1258 -moz-image-region: rect(64px, 800px, 96px, 768px);
1261 #sidebar-button[cui-areatype="menu-panel"],
1262 toolbarpaletteitem[place="palette"] > #sidebar-button {
1263 -moz-image-region: rect(0, 864px, 32px, 832px);
1266 #sidebar-button[cui-areatype="menu-panel"]:hover,
1267 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1268 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1269 -moz-image-region: rect(32px, 864px, 64px, 832px);
1272 #panic-button[cui-areatype="menu-panel"],
1273 toolbarpaletteitem[place="palette"] > #panic-button {
1274 -moz-image-region: rect(0, 896px, 32px, 864px);
1277 #panic-button[cui-areatype="menu-panel"]:hover,
1278 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1279 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1280 -moz-image-region: rect(32px, 896px, 64px, 864px);
1283 #webide-button[cui-areatype="menu-panel"],
1284 toolbarpaletteitem[place="palette"] > #webide-button {
1285 -moz-image-region: rect(0px, 960px, 32px, 928px);
1288 #webide-button[cui-areatype="menu-panel"]:hover,
1289 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1290 -moz-image-region: rect(32px, 960px, 64px, 928px);
1293 #pocket-button[cui-areatype="menu-panel"],
1294 toolbarpaletteitem[place="palette"] > #pocket-button {
1295 -moz-image-region: rect(0px, 992px, 32px, 960px);
1298 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1299 -moz-image-region: rect(32px, 992px, 64px, 960px);
1302 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1303 -moz-image-region: rect(0, 832px, 32px, 800px);
1306 #loop-button[cui-areatype="menu-panel"],
1307 toolbarpaletteitem[place="palette"] > #loop-button {
1308 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1309 -moz-image-region: rect(0, 32px, 32px, 0);
1312 /* Make sure that the state icons are not shown in the customization palette. */
1313 toolbarpaletteitem[place="palette"] > #loop-button {
1314 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1317 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1318 -moz-image-region: rect(0, 160px, 32px, 128px);
1321 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1322 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1323 -moz-image-region: rect(0, 64px, 32px, 32px);
1326 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1327 -moz-image-region: rect(0, 224px, 32px, 192px);
1330 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1331 -moz-image-region: rect(0, 96px, 32px, 64px);
1334 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1335 -moz-image-region: rect(0, 128px, 32px, 96px);
1338 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1339 -moz-image-region: rect(0, 192px, 32px, 160px);
1342 /* Wide panel control icons */
1344 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1345 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1346 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1347 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1348 list-style-image: var(--menupanel-small-list-style-image);
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1353 -moz-image-region: rect(0px, 32px, 16px, 16px);
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1358 -moz-image-region: rect(16px, 32px, 32px, 16px);
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1363 -moz-image-region: rect(32px, 32px, 48px, 16px);
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1368 -moz-image-region: rect(0px, 48px, 16px, 32px);
1371 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1372 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1373 -moz-image-region: rect(16px, 48px, 32px, 32px);
1376 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1377 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1378 -moz-image-region: rect(32px, 48px, 48px, 32px);
1381 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1382 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1383 -moz-image-region: rect(0px, 64px, 16px, 48px);
1386 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1387 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1388 -moz-image-region: rect(16px, 64px, 32px, 48px);
1391 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1392 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1393 -moz-image-region: rect(32px, 64px, 48px, 48px);
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1398 -moz-image-region: rect(0px, 80px, 16px, 64px);
1401 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1402 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1403 -moz-image-region: rect(16px, 80px, 32px, 64px);
1406 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1407 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1408 -moz-image-region: rect(32px, 80px, 48px, 64px);
1411 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1412 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1413 -moz-image-region: rect(0px, 96px, 16px, 80px);
1416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1417 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1418 -moz-image-region: rect(16px, 96px, 32px, 80px);
1421 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1422 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1423 -moz-image-region: rect(32px, 96px, 48px, 80px);
1426 #add-share-provider {
1427 list-style-image: var(--menupanel-small-list-style-image);
1428 -moz-image-region: rect(0px, 96px, 16px, 80px);
1431 /* === END menupanel.inc.css === */
1433 .toolbarbutton-1:not([type="menu-button"]) {
1434 -moz-box-orient: vertical;
1438 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1444 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1445 .toolbarbutton-1[disabled="true"]:hover:active,
1446 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1450 .toolbarbutton-1:hover:active,
1451 .toolbarbutton-1[open="true"],
1452 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1454 padding-bottom: 0px;
1455 -moz-padding-start: 3px;
1456 -moz-padding-end: 1px;
1459 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1460 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1461 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1462 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1463 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1466 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1467 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1470 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1471 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1474 .toolbarbutton-1 > .toolbarbutton-icon,
1475 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1479 #nav-bar .toolbarbutton-1,
1480 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1483 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1484 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1485 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1488 #nav-bar #PanelUI-menu-button {
1489 /* -moz-padding-start: 7px;
1490 -moz-padding-end: 5px;*/
1493 #nav-bar .toolbarbutton-1[type=panel],
1494 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1495 /* padding-left: 5px;
1496 padding-right: 5px;*/
1499 #nav-bar .toolbarbutton-1 > menupopup {
1500 /* margin-top: -3px;*/
1503 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1507 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1508 /* -moz-padding-end: 0;*/
1511 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1512 /* -moz-padding-start: 0;
1513 -moz-box-align: center;*/
1516 .findbar-button > .toolbarbutton-text,
1517 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1518 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1519 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1520 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1521 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1522 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1523 /* padding: 2px 6px;
1525 border-color: transparent;
1526 transition-property: background-color, border-color;
1527 transition-duration: 150ms;*/
1530 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1531 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1532 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1537 /* Help SDK icons fit: */
1538 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1539 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1543 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1544 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1548 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1551 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1552 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1553 /* -moz-padding-end: 17px;*/
1556 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1557 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1558 /* horizontal padding + border + icon width */
1559 /* max-width: 43px;*/
1562 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1565 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1568 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1571 #nav-bar .toolbaritem-combined-buttons {
1572 /* margin-left: 2px;
1573 margin-right: 2px;*/
1576 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1581 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1582 #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 {
1588 -moz-margin-end: -1px;
1592 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1595 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1596 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1597 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1598 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1599 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1600 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1601 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1602 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1603 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1606 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1607 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1608 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1614 #TabsToolbar .toolbarbutton-1,
1615 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1616 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1617 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1620 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1621 #TabsToolbar .toolbarbutton-1[open],
1622 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1623 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1624 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1627 /* unified back/forward button */
1630 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1633 #forward-button > menupopup {
1634 margin-top: 1px !important;
1637 #forward-button > .toolbarbutton-icon {
1638 background-clip: padding-box !important;
1639 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1640 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1644 -moz-margin-start: -4px !important;
1649 border-radius: 0 10000px 10000px 0;
1652 #forward-button:-moz-locale-dir(rtl) {
1653 border-radius: 10000px 0 0 10000px;
1656 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1657 transition: margin-left 150ms ease-out;
1660 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1661 margin-left: -27px !important;
1664 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1665 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1666 transition-delay: 100s;
1669 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1670 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1671 margin-left: -27.01px !important;
1675 /* padding-top: 3px !important;
1676 padding-bottom: 3px !important;
1677 -moz-padding-start: 5px !important;
1678 -moz-padding-end: 0 !important;*/
1681 border-radius: 10000px;
1685 margin-bottom: -2px;
1688 #back-button:-moz-locale-dir(rtl) {
1691 #back-button > menupopup {
1692 margin-top: -1px !important;
1695 #back-button > .toolbarbutton-icon {
1696 border-radius: 10000px !important;
1697 background-clip: padding-box !important;
1698 /* background-color: hsla(210,25%,98%,.08) !important;
1699 padding: 6px !important;
1700 border-style: none !important;
1701 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1702 0 0 0 1px hsla(210,4%,10%,.25);*/
1703 transition-property: background-color, box-shadow !important;
1704 transition-duration: 250ms !important;
1707 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1708 /* background-color: hsla(210,4%,10%,.08) !important;*/
1711 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1712 #back-button[open="true"] > .toolbarbutton-icon {
1713 /* background-color: hsla(210,4%,10%,.12) !important;
1714 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1715 0 0 0 1px hsla(210,4%,10%,.25),
1716 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1719 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1720 transform: scaleX(-1);
1723 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1724 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1725 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1728 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1729 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1730 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1733 #home-button.bookmark-item {
1734 list-style-image: url("chrome://browser/skin/Toolbar.png");
1737 #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),
1738 #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),
1739 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1740 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1741 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1742 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1743 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1746 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1751 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1755 #downloads-button > .toolbarbutton-icon {
1759 /* tabview menu item */
1762 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1763 -moz-image-region: rect(1px, 89px, 17px, 73px);
1766 #menu_tabview[groups="0"] {
1767 -moz-image-region: rect(1px, 17px, 17px, 1px);
1770 #menu_tabview[groups="1"] {
1771 -moz-image-region: rect(1px, 35px, 17px, 19px);
1774 #menu_tabview[groups="2"] {
1775 -moz-image-region: rect(1px, 53px, 17px, 37px);
1778 #menu_tabview[groups="3"] {
1779 -moz-image-region: rect(1px, 71px, 17px, 55px);
1782 /* undo close tab menu item */
1783 #alltabs_undoCloseTab {
1784 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1787 @media (min-resolution: 1.1dppx) {
1788 #alltabs_undoCloseTab {
1789 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1791 #alltabs_undoCloseTab > .toolbarbutton-icon {
1796 /* zoom control text (reset) button special case: */
1798 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1799 /* To make this line up with the icons, it needs the same height (18px) +
1800 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1801 * increase in text sizes would break things...
1806 /* ::::: fullscreen window controls ::::: */
1809 -moz-margin-start: 4px;
1815 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1820 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1823 #minimize-button:hover {
1824 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1828 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1831 #restore-button:hover {
1832 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1836 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1839 #close-button:hover {
1840 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1843 /* ::::: Location Bar ::::: */
1846 .searchbar-textbox {
1849 -moz-margin-start: 3px;
1853 /* make color as light as possible to deal with dark non-domain parts */
1857 /* overlap the urlbar's border */
1858 #PopupAutoCompleteRichResult {
1862 #urlbar:-moz-lwtheme,
1863 .searchbar-textbox:-moz-lwtheme {
1864 /* background-color: rgba(255,255,255,.8);
1865 @navbarTextboxCustomBorder@
1869 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1870 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1871 /* background-color: rgba(255,255,255,.9);*/
1874 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1875 .searchbar-textbox:-moz-lwtheme[focused] {
1876 /* background-color: white;*/
1879 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1880 /* -moz-border-start: none;
1884 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1885 /* border-top-left-radius: 0;
1886 border-bottom-left-radius: 0; */
1889 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1890 /* border-top-right-radius: 0;
1891 border-bottom-right-radius: 0; */
1894 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1895 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1896 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1899 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1900 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1901 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1902 transform: scaleX(-1);
1905 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1906 -moz-box-direction: reverse;
1909 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1910 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1915 -moz-box-orient: horizontal;
1916 -moz-box-align: stretch;
1919 .urlbar-textbox-container {
1920 -moz-box-align: stretch;
1924 -moz-margin-start: 0;
1928 -moz-box-align: center;
1933 /* 16x16 icon with border-box sizing */
1938 .search-go-container {
1942 .search-go-container > .search-go-button {
1946 #urlbar-search-footer {
1947 border-top: 1px solid #A09090;
1950 #urlbar-search-settings {
1953 #urlbar-search-settings:hover {
1956 #urlbar-search-settings:hover:active {
1959 #urlbar-search-splitter {
1961 -moz-margin-start: -3px;
1963 background: transparent;
1966 #urlbar-search-splitter + #urlbar-container > #urlbar,
1967 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1968 -moz-margin-start: 0;
1971 #urlbar-display-box {
1975 -moz-border-end: 1px solid #9C9CFF;
1976 -moz-margin-end: 3px;
1979 -moz-margin-start: 0;
1983 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1985 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1986 border-bottom: 1px solid #A09090;
1987 background-color: #000000;
1989 -moz-padding-start: 44px;
1990 -moz-padding-end: 6px;
1991 background-image: url("chrome://browser/skin/info.svg");
1992 background-clip: padding-box;
1993 background-position: 20px center;
1994 background-repeat: no-repeat;
1995 background-size: 16px 16px;
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1999 background-position: right 20px center;
2002 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2008 -moz-margin-start: 0;
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2012 -moz-appearance: none;
2017 -moz-margin-start: 10px;
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2023 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2026 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2032 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2035 min-width: calc(54px + 11ch);
2040 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2041 var(--identity-box-verified-background-color);
2044 #identity-box:-moz-focusring {
2045 outline: 1px dotted #008484;
2046 outline-offset: -1px;
2049 #identity-box.verifiedDomain:-moz-focusring,
2050 #identity-box.verifiedIdentity:-moz-focusring {
2051 outline-color: #000000;
2054 /* Location bar dropmarker */
2056 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2057 background-color: transparent;
2060 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2061 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2062 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2065 transition: opacity 0.15s ease;
2068 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2072 .urlbar-history-dropmarker:hover {
2075 .urlbar-history-dropmarker:hover:active,
2076 .urlbar-history-dropmarker[open="true"] {
2079 /* page proxy icon */
2081 /* === BEGIN identity-block.inc.css === */
2084 --identity-box-verified-color: #008484;
2085 /* Default theme does different color per channel, we can't as they do it build-time. */
2086 --identity-box-chrome-color: #9C9CFF;
2088 border-inline-end: 1px solid --urlbar-separator-color);
2092 margin-inline-end: 4px;
2094 /* The latter two properties have a transition to handle the delayed hiding of
2095 the forward button when hovered. */
2096 transition: background-color 150ms ease, padding-left, padding-right;
2099 #identity-box:-moz-locale-dir(ltr) {
2100 border-top-right-radius: 0;
2101 border-bottom-right-radius: 0;
2104 #identity-box:-moz-locale-dir(rtl) {
2105 border-top-left-radius: 0;
2106 border-bottom-left-radius: 0;
2109 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2110 color: var(--identity-box-chrome-color);
2111 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2114 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2115 color: var(--identity-box-verified-color);
2116 -moz-border-end: 1px solid var(--identity-box-verified-color);
2119 #notification-popup-box:not([hidden]) + #identity-box {
2120 padding-inline-start: 10px;
2124 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2125 /* border-radius: 0;
2126 padding-inline-start: 2px; */
2127 padding-inline-end: 2px;
2128 margin-inline-end: 1px;
2131 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2132 #notification-popup-box[hidden] + #identity-box {
2133 padding-inline-start: 2px;
2136 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2137 #notification-popup-box[hidden] + #identity-box {
2138 /* Forward button hiding is delayed when hovered, so we should use the same
2139 delay for the identity box. We handle both horizontal paddings (for LTR and
2140 RTL), the latter two delays here are for padding-left and padding-right. */
2141 transition-delay: 0s, 100s, 100s;
2144 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2145 #notification-popup-box[hidden] + #identity-box {
2146 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2147 padding-inline-start: 2.01px;
2150 /* MAIN IDENTITY ICON */
2155 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2158 #identity-box:hover > #identity-icon,
2159 #identity-box[open=true] > #identity-icon {
2160 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2163 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2164 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2167 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2171 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2172 -moz-image-region: inherit;
2173 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2179 /* TRACKING PROTECTION ICON */
2181 #tracking-protection-icon {
2184 margin-inline-start: 2px;
2185 margin-inline-end: 0;
2186 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2190 #tracking-protection-icon[state="loaded-tracking-content"] {
2191 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2194 #tracking-protection-icon[animate] {
2195 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2198 #tracking-protection-icon:not([state]) {
2199 margin-inline-end: -18px;
2200 pointer-events: none;
2202 /* Only animate the shield in, when it disappears hide it immediately. */
2206 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2207 visibility: collapse;
2210 /* CONNECTION ICON */
2215 margin-inline-start: 2px;
2216 visibility: collapse;
2219 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2220 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2221 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2222 visibility: visible;
2225 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2226 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2227 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2228 visibility: visible;
2231 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2232 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2233 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2234 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2235 visibility: visible;
2238 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2239 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2240 visibility: visible;
2243 /* === END identity-block.inc.css === */
2245 #page-proxy-favicon {
2246 -moz-image-region: rect(0, 16px, 16px, 0);
2249 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2250 /* -moz-margin-end: 1px;*/
2253 #identity-box:hover > #page-proxy-favicon {
2254 -moz-image-region: rect(0, 32px, 16px, 16px);
2257 #identity-box:hover:active > #page-proxy-favicon,
2258 #identity-box[open=true] > #page-proxy-favicon {
2259 -moz-image-region: rect(0, 48px, 16px, 32px);
2262 #identity-box:hover {
2263 background-color: #FFCF00;
2267 #identity-box:hover:active,
2268 #identity-box[open=true] {
2269 background-color: #FF9F00;
2273 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2274 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2275 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2276 background-color: #9C9CFF;
2280 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2281 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2282 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2283 background-color: #008484;
2289 #treecolAutoCompleteImage {
2293 .ac-result-type-bookmark,
2294 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2295 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2296 -moz-image-region: rect(0px 16px 16px 0px);
2301 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2302 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2303 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2306 .ac-result-type-keyword,
2307 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2308 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2309 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2314 .ac-result-type-keyword[selected="true"],
2315 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2316 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2317 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2320 .ac-result-type-tag,
2321 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2322 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2328 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2329 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2333 .ac-extra > .ac-comment,
2344 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2345 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2346 -moz-image-region: rect(0, 16px, 16px, 0);
2352 @media (min-resolution: 1.1dppx) {
2353 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2354 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2355 -moz-image-region: rect(0, 32px, 32px, 0);
2359 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2360 -moz-image-region: rect(16px, 16px, 32px, 0);
2363 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2367 .ac-comment[selected="true"],
2368 .ac-url-text[selected="true"],
2369 .ac-action-text[selected="true"] {
2370 color: inherit !important;
2373 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2374 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2380 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2381 border-top: 1px solid #9C9CFF;
2384 /* combined go/reload/stop button in location bar */
2387 #urlbar-reload-button,
2388 #urlbar-stop-button {
2390 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2391 /* padding: 0 9px;*/
2392 margin-inline-start: 0px;
2393 border-inline-start: 1px solid var(--urlbar-separator-color);
2394 border-image: linear-gradient(transparent 15%,
2395 var(--urlbar-separator-color) 15%,
2396 var(--urlbar-separator-color) 85%,
2398 border-image-slice: 1;
2401 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2402 border-top-left-radius: 0px;
2403 border-bottom-left-radius: 0px;
2406 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2407 border-top-right-radius: 0px;
2408 border-bottom-right-radius: 0px;
2411 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2412 #urlbar-reload-button:not(:hover) {
2413 -moz-border-start-style: none;
2414 -moz-padding-start: 3px;
2417 #urlbar-reload-button {
2418 -moz-image-region: rect(0px, 14px, 14px, 0px);
2421 #urlbar-reload-button[disabled=true] {
2422 -moz-image-region: rect(28px, 14px, 42px, 0px);
2425 #urlbar-reload-button:not([disabled=true]):hover {
2426 -moz-image-region: rect(14px, 14px, 28px, 0px);
2429 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2430 transform: scaleX(-1);
2434 -moz-image-region: rect(0, 42px, 14px, 28px);
2437 #urlbar-go-button:hover {
2438 -moz-image-region: rect(14px, 42px, 28px, 28px);
2441 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2442 transform: scaleX(-1);
2445 #urlbar-stop-button {
2446 -moz-image-region: rect(0px, 28px, 14px, 14px);
2449 #urlbar-stop-button:hover {
2450 -moz-image-region: rect(14px, 28px, 28px, 14px);
2453 @media (min-resolution: 1.1dppx) {
2455 #urlbar-reload-button,
2456 #urlbar-stop-button {
2457 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2460 #urlbar-go-button > .toolbarbutton-icon,
2461 #urlbar-reload-button > .toolbarbutton-icon,
2462 #urlbar-stop-button > .toolbarbutton-icon {
2467 -moz-image-region: rect(0, 84px, 28px, 56px);
2470 #urlbar-go-button:hover {
2471 -moz-image-region: rect(28px, 84px, 56px, 56px);
2474 #urlbar-go-button:hover:active {
2475 -moz-image-region: rect(56px, 84px, 84px, 56px);
2478 #urlbar-reload-button {
2479 -moz-image-region: rect(0, 28px, 28px, 0);
2482 #urlbar-reload-button:not([disabled]):hover {
2483 -moz-image-region: rect(28px, 28px, 56px, 0);
2486 #urlbar-reload-button:not([disabled]):hover:active {
2487 -moz-image-region: rect(56px, 28px, 84px, 0);
2490 #urlbar-stop-button {
2491 -moz-image-region: rect(0, 56px, 28px, 28px);
2494 #urlbar-stop-button:not([disabled]):hover {
2495 -moz-image-region: rect(28px, 56px, 56px, 28px);
2498 #urlbar-stop-button:hover:active {
2499 -moz-image-region: rect(56px, 56px, 84px, 28px);
2503 /* popup blocker button */
2505 #page-report-button {
2506 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2507 -moz-image-region: rect(0, 16px, 16px, 0);
2510 #page-report-button:hover ,
2511 #page-report-button:hover:active,
2512 #page-report-button[open="true"] {
2513 -moz-image-region: rect(0, 32px, 16px, 16px);
2516 /* Reader mode button */
2518 #reader-mode-button {
2519 list-style-image: url("chrome://browser/skin/readerMode.svg");
2520 -moz-image-region: rect(0, 16px, 16px, 0);
2523 #reader-mode-button:hover,
2524 #reader-mode-button[readeractive]:hover {
2525 -moz-image-region: rect(0, 32px, 16px, 16px);
2528 #reader-mode-button:hover:active,
2529 #reader-mode-button[readeractive] {
2530 -moz-image-region: rect(0, 48px, 16px, 32px);
2533 /* social share panel */
2535 .social-share-frame {
2542 background-color: white;
2543 background-repeat: no-repeat;
2544 background-position: center center;
2546 #share-container[loading] {
2547 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2549 #share-container > browser {
2550 transition: opacity 150ms ease-in-out;
2553 #share-container[loading] > browser {
2557 .social-share-toolbar {
2558 border-bottom: 1px solid #9C9CFF;
2562 #social-share-provider-buttons {
2567 .share-provider-button {
2572 .share-provider-button > .toolbarbutton-text {
2575 .share-provider-button > .toolbarbutton-icon {
2581 /* fixup corners for share panel */
2582 .social-panel > .social-panel-frame {
2583 border-radius: inherit;
2586 #social-share-panel {
2592 .social-share-frame {
2593 border-top-left-radius: 0;
2594 border-bottom-left-radius: inherit;
2595 border-top-right-radius: 0;
2596 border-bottom-right-radius: inherit;
2599 #social-share-panel > .social-share-toolbar {
2600 border-top-left-radius: inherit;
2601 border-top-right-radius: inherit;
2604 #social-share-provider-buttons {
2605 border-top-left-radius: inherit;
2606 border-top-right-radius: inherit;
2609 /* social recommending panel */
2611 #social-mark-button {
2612 -moz-image-region: rect(0, 16px, 16px, 0);
2615 /* bookmarks menu-button */
2617 #bookmarks-menu-button.bookmark-item {
2618 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2619 -moz-image-region: rect(0px 16px 16px 0px);
2622 #bookmarks-menu-button.bookmark-item[starred] {
2623 -moz-image-region: rect(0px 32px 16px 16px);
2626 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2628 padding-bottom: 2px;
2631 #BMB_bookmarksPopup[side="top"],
2632 #BMB_bookmarksPopup[side="bottom"] {
2634 margin-right: -20px;
2637 #BMB_bookmarksPopup[side="left"],
2638 #BMB_bookmarksPopup[side="right"] {
2640 margin-bottom: -20px;
2643 /* bookmarking panel */
2645 #editBookmarkPanelStarIcon {
2646 list-style-image: url("chrome://browser/skin/places/starred48.png");
2651 #editBookmarkPanelStarIcon[unstarred] {
2652 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2655 #editBookmarkPanelTitle {
2659 #editBookmarkPanelHeader,
2660 #editBookmarkPanelContent {
2661 margin-bottom: .5em;
2664 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2665 #editBMPanel_folderTree {
2672 border-top: 1px solid #9C9CFF;
2673 border-bottom-left-radius: 5px;
2674 border-bottom-right-radius: 5px;
2678 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2679 -moz-margin-end: 10px;
2680 vertical-align: middle;
2683 .panel-promo-closebutton {
2684 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2685 -moz-margin-end: -3px;
2689 .panel-promo-closebutton:hover {
2690 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2693 .panel-promo-closebutton:hover:active {
2694 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2697 .panel-promo-closebutton > .toolbarbutton-text {
2701 /* ::::: content area ::::: */
2704 background-color: #9C9CFF;
2709 background-color: #000000;
2713 -moz-margin-start: 0;
2722 -moz-padding-start: 0px;
2725 #sidebar-header > .close-icon {
2726 /* padding: 4px 2px;
2729 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2732 #sidebar-header > .close-icon:hover,
2733 #sidebar-header > .close-icon:hover:active {
2734 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2737 #sidebar-splitter:-moz-locale-dir(ltr),
2738 #sidebar:-moz-locale-dir(ltr) {
2739 border-radius: 0 5px 0 0;
2742 #sidebar-splitter:-moz-locale-dir(rtl),
2743 #sidebar:-moz-locale-dir(rtl) {
2744 border-radius: 5px 0 0 0;
2747 .browserContainer > findbar {
2749 background-color: -moz-dialog;
2750 color: -moz-DialogText;
2759 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2762 #TabsToolbar .toolbar-holder {
2763 background-color: #000000; /* correct effect of being an actual toolbar */
2766 #main-window[disablechrome] #TabsToolbar,
2767 #TabsToolbar[tabsontop="false"] {
2768 border-bottom: 1px solid #008484;
2771 /* === BEGIN tabs.inc.css === */
2774 /* --tab-toolbar-navbar-overlap: 1px; */
2775 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2776 /* --tab-min-height: 31px; */
2779 /* --tab-stroke-background-size: auto 100%; */
2783 .tabs-newtab-button,
2784 #TabsToolbar > #new-tab-button {
2789 padding: 1px 4px 2px;
2792 .tabbrowser-tab:first-of-type {
2793 -moz-margin-start: 2px;
2796 .tabs-newtab-button,
2797 #TabsToolbar > #new-tab-button {
2798 border-radius: 8px 8px 0px 0px;
2799 -moz-margin-start: 0;
2802 .tabs-newtab-button:not(:hover),
2803 #TabsToolbar > #new-tab-button:not(:hover) {
2804 background-color: #C09070;
2807 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2808 .tabbrowser-tab[visuallyselected=true] {
2809 /* position: relative;
2813 .tab-background-middle {
2819 .tab-content[pinned] {
2832 -moz-margin-end: 3px;
2836 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2843 -moz-margin-start: -15px;
2847 .tab-icon-overlay[crashed] {
2848 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2851 .tab-icon-overlay[soundplaying],
2852 .tab-icon-overlay[muted]:not([crashed]) {
2853 border-radius: 10px;
2856 .tab-icon-overlay[soundplaying]:hover,
2857 .tab-icon-overlay[muted]:hover {
2858 background-color: #FFCF00;
2861 .tab-icon-overlay[soundplaying] {
2863 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2866 .tab-icon-overlay[muted]:not([crashed]) {
2867 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2870 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2871 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2875 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2876 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2879 .tab-throbber[busy] {
2880 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2883 .tab-throbber[progress] {
2884 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2887 @media (min-resolution: 1.1dppx) {
2888 .tab-throbber[busy] {
2889 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2892 .tab-throbber[progress] {
2893 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2897 .tab-throbber[pinned],
2898 .tab-icon-image[pinned] {
2899 -moz-margin-start: 2px;
2900 -moz-margin-end: 2px;
2904 /* this needs to add up to the 16px of the icon image */
2906 margin-top: 2px !important;
2907 margin-bottom: 2px !important;
2911 -moz-margin-start: 4px;
2917 .tab-icon-sound[muted] {
2918 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2921 .tab-icon-sound[muted]:hover {
2922 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2925 .tab-icon-sound[muted]:hover:active {
2926 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2929 .tab-icon-sound[soundplaying] {
2930 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2933 .tab-icon-sound[soundplaying]:hover {
2934 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2937 .tab-icon-sound[soundplaying]:hover:active {
2938 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2941 .tab-icon-sound[muted] {
2942 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2945 .tab-icon-sound[muted]:hover {
2946 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2949 .tab-icon-sound[muted]:hover:active {
2950 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2953 .tab-icon-sound[visuallyselected=true][soundplaying] {
2954 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2957 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2958 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2961 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2962 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2965 .tab-icon-sound[visuallyselected=true][muted] {
2966 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2969 .tab-icon-sound[visuallyselected=true][muted]:hover {
2970 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2973 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2974 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2977 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2978 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2981 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2982 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2985 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2986 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2989 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2990 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2993 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2994 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2997 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2998 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3007 .tabs-newtab-button {
3008 /* overlap the tab curves */
3011 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3015 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3016 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3019 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3026 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3029 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3030 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3033 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3034 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3037 .tab-background-start[visuallyselected=true]::after,
3038 .tab-background-start[visuallyselected=true]::before,
3039 .tab-background-start,
3040 .tab-background-end,
3041 .tab-background-end[visuallyselected=true]::after,
3042 .tab-background-end[visuallyselected=true]::before {
3045 .tabbrowser-tab:not([visuallyselected=true]),
3046 .tabbrowser-tab:-moz-lwtheme {
3049 /* tabbrowser-tab focus ring */
3050 .tabbrowser-tab:focus {
3051 outline: 1px dotted;
3056 .tabbrowser-tab[visuallyselected="true"] {
3059 /* End selected tab */
3061 /* User Context UI - change tab decoration depending on userContextId.
3062 Defaults to gray for unknown usercontextids. */
3063 .tabbrowser-tab[usercontextid] {
3064 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3065 background-size: auto 2px;
3066 background-repeat: no-repeat;
3069 /* Personal User Context */
3070 .tabbrowser-tab[usercontextid="1"] {
3071 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3073 /* Work User Context */
3074 .tabbrowser-tab[usercontextid="2"] {
3075 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3077 /* Banking User Context */
3078 .tabbrowser-tab[usercontextid="3"] {
3079 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3081 /* Shopping User Context */
3082 .tabbrowser-tab[usercontextid="4"] {
3083 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3086 /* Tab pointer-events */
3089 pointer-events: none;
3092 .tab-background-middle,
3093 .tabs-newtab-button,
3094 .tab-icon-overlay[soundplaying],
3095 .tab-icon-overlay[muted]:not([crashed]),
3098 pointer-events: auto;
3104 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3105 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3107 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3108 background-color: #E7ADE7;
3111 .tab-label[attention]:not([visuallyselected="true"]) {
3115 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3116 background-color: #3333FF;
3120 /* Tab separators */
3122 .tabbrowser-tab::after,
3123 .tabbrowser-tab::before {
3125 -moz-margin-start: -1px;
3126 background-image: linear-gradient(transparent 5px,
3128 currentColor calc(100% - 4px),
3129 transparent calc(100% - 4px));
3133 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3134 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3138 /* Also show separators beside the selected tab when dragging it. */
3140 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3141 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3142 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3147 /* New tab button */
3149 .tabs-newtab-button {
3151 /* width: calc(36px + var(--tab-curve-width)); */
3154 /* === END tabs.inc.css === */
3158 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3159 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3160 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3162 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3163 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3166 /* Tab DnD indicator */
3167 .tab-drop-indicator {
3168 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3169 margin-bottom: -11px;
3172 /* Tab close button */
3174 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3177 .tab-close-button:hover,
3178 .tab-close-button:hover[selected="true"] {
3179 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3182 .tab-close-button:hover:active,
3183 .tab-close-button:hover:active[selected="true"] {
3184 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3187 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3189 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3190 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3194 background-origin: border-box;
3197 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3198 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3199 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3200 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3203 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3204 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3207 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3208 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3209 /* transform: scaleX(-1);*/
3212 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3213 transition: 1s background-color ease-out;
3216 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3217 background-color: #008484;
3220 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3221 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3222 /* border-width: 0 2px 0 0;
3223 border-style: solid;
3224 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3227 .tabs-newtab-button > .toolbarbutton-icon {
3229 margin-bottom: -1px;
3232 .tabs-newtab-button,
3233 #TabsToolbar > #new-tab-button,
3234 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3235 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3236 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3237 -moz-image-region: rect(0, 16px, 18px, 0);
3240 .tabs-newtab-button,
3241 .tabs-newtab-button:hover,
3242 #TabsToolbar > #new-tab-button,
3243 #TabsToolbar > #new-tab-button:hover {
3244 -moz-image-region: rect(0, 32px, 18px, 16px);
3247 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3249 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3250 .tabs-newtab-button:-moz-lwtheme-brighttext,
3251 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3252 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3255 #TabsToolbar > #new-tab-button {
3260 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3263 #alltabs-button:hover,
3264 #alltabs-button:hover:active,
3265 #alltabs-button[open="true"] {
3266 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3269 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3270 #alltabs-button:-moz-lwtheme-brighttext {
3273 #alltabs-button > .toolbarbutton-icon {
3277 #alltabs-button > .toolbarbutton-menu-dropmarker {
3281 /* All tabs menupopup */
3282 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3283 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3284 -moz-image-region: auto;
3287 .alltabs-item[selected="true"] {
3291 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3292 list-style-image: url("chrome://global/skin/icons/loading.gif");
3295 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3296 background-color: #402800;
3299 .alltabs-endimage[muted] {
3300 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3303 .alltabs-endimage[soundplaying] {
3304 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3307 toolbarbutton.chevron {
3308 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3311 toolbarbutton.chevron:hover {
3312 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3315 toolbar[brighttext] toolbarbutton.chevron {
3316 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3319 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3320 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3321 transform: scaleX(-1);
3324 toolbarbutton.chevron > .toolbarbutton-text,
3325 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3329 toolbarbutton.chevron > .toolbarbutton-icon {
3333 #sidebar-throbber[loading="true"] {
3334 list-style-image: url("chrome://global/skin/icons/loading.gif");
3335 -moz-margin-end: 4px;
3338 /* Bookmarks toolbar */
3339 #PlacesToolbarDropIndicator {
3340 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3343 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3344 background-color: #008484 !important;
3345 color: #FFCF00 !important;
3348 /* rules for menupopup drop indicators */
3349 .menupopup-drop-indicator-bar {
3351 /* these two margins must together compensate the indicator's height */
3353 margin-bottom: -1px;
3356 .menupopup-drop-indicator {
3357 list-style-image: none;
3359 -moz-margin-end: -4em;
3360 background-color: #008484;
3363 /* === BEGIN notification-icons.inc.css === */
3365 .popup-notification-icon {
3368 -moz-margin-end: 10px;
3371 .popup-notification-icon[popupid="geolocation"] {
3372 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3375 .popup-notification-icon[popupid="xpinstall-disabled"],
3376 .popup-notification-icon[popupid="addon-install-blocked"],
3377 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3378 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3381 .popup-notification-icon[popupid="addon-progress"] {
3382 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3385 .popup-notification-icon[popupid="addon-install-failed"] {
3386 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3389 .popup-notification-icon[popupid="addon-install-confirmation"] {
3390 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3393 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3394 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3397 .popup-notification-icon[popupid="addon-install-complete"] {
3398 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3401 .popup-notification-icon[popupid="addon-install-restart"] {
3402 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3405 .popup-notification-icon[popupid="click-to-play-plugins"] {
3406 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3409 .popup-notification-icon[popupid="web-notifications"] {
3410 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3413 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3414 .popup-notification-icon[popupid*="offline-app-requested"],
3415 .popup-notification-icon[popupid="offline-app-usage"] {
3416 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3419 .popup-notification-icon[popupid="password"] {
3420 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3423 .popup-notification-icon[popupid="webapps-install-progress"],
3424 .popup-notification-icon[popupid="webapps-install"] {
3425 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3428 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3429 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3430 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3433 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3434 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3435 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3438 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3439 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3440 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3443 .popup-notification-icon[popupid="pointerLock"] {
3444 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3447 /* Notification icon box */
3448 #notification-popup .panel-promo-box {
3449 /* margin: 10px -10px -10px; */
3452 #notification-popup-box {
3454 background-color: #000000;
3455 background-clip: padding-box;
3458 border-radius: 3px 0 0 3px;
3459 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3460 -moz-margin-end: -8px;
3461 border-right-width: 8px;
3464 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3465 /* padding-left: 7px; */
3468 /* This changes the direction of the main notification box on the url bar. */
3469 #notification-popup-box:-moz-locale-dir(rtl),
3470 /* This adds a second flip for the notification anchors, as they don't switch direction
3472 .notification-anchor-icon:-moz-locale-dir(rtl) {
3473 transform: scaleX(-1);
3476 /* For the anchor icons in the chat window, we don't have the notification popup box,
3477 so we need to cancel the RTL transform. */
3478 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3482 .notification-anchor-icon {
3483 list-style-image: url("chrome://global/skin/icons/information-16.png");
3490 .notification-anchor-icon:-moz-focusring {
3491 outline: 1px dotted #008484;
3494 .identity-notification-icon,
3495 #identity-notification-icon {
3496 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3499 .geo-notification-icon,
3500 #geo-notification-icon {
3501 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3504 #addons-notification-icon {
3505 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3508 #addons-notification-icon:hover {
3509 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3512 #addons-notification-icon:hover:active {
3513 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3516 .indexedDB-notification-icon,
3517 #indexedDB-notification-icon {
3518 list-style-image: url("chrome://global/skin/icons/question-16.png");
3521 #password-notification-icon {
3522 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3525 #login-fill-notification-icon {
3526 /* Temporary icon until the capture and fill doorhangers are unified. */
3527 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3528 transform: scaleX(-1);
3531 #webapps-notification-icon {
3532 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3535 #plugins-notification-icon {
3536 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3539 #plugins-notification-icon.plugin-hidden {
3540 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3543 #plugins-notification-icon.plugin-blocked {
3544 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3547 #plugins-notification-icon {
3548 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3551 #plugins-notification-icon:hover {
3552 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3555 #notification-popup-box[hidden] {
3556 /* Override display:none to make the pluginBlockedNotification animation work
3557 when showing the notification repeatedly. */
3559 visibility: collapse;
3562 #plugins-notification-icon.plugin-blocked[showing] {
3563 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3566 @keyframes pluginBlockedNotification {
3575 .webRTC-shareDevices-notification-icon,
3576 #webRTC-shareDevices-notification-icon {
3577 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3580 .webRTC-sharingDevices-notification-icon,
3581 #webRTC-sharingDevices-notification-icon {
3582 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3585 .webRTC-shareMicrophone-notification-icon,
3586 #webRTC-shareMicrophone-notification-icon {
3587 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3590 .webRTC-sharingMicrophone-notification-icon,
3591 #webRTC-sharingMicrophone-notification-icon {
3592 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3595 .webRTC-shareScreen-notification-icon,
3596 #webRTC-shareScreen-notification-icon {
3597 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3600 .webRTC-sharingScreen-notification-icon,
3601 #webRTC-sharingScreen-notification-icon {
3602 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3605 .web-notifications-notification-icon,
3606 #web-notifications-notification-icon {
3607 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3608 -moz-image-region: rect(0, 16px, 16px, 0);
3611 .web-notifications-notification-icon:hover,
3612 #web-notifications-notification-icon:hover {
3613 -moz-image-region: rect(0, 32px, 16px, 16px);
3616 .web-notifications-notification-icon:hover:active,
3617 #web-notifications-notification-icon:hover:active {
3618 -moz-image-region: rect(0, 48px, 16px, 32px);
3621 #pointerLock-notification-icon {
3622 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3625 .translate-notification-icon,
3626 #translate-notification-icon {
3627 list-style-image: url("chrome://browser/skin/translation-16.png");
3628 -moz-image-region: rect(0px, 16px, 16px, 0px);
3631 .translated-notification-icon,
3632 #translated-notification-icon {
3633 list-style-image: url("chrome://browser/skin/translation-16.png");
3634 -moz-image-region: rect(0px, 32px, 16px, 16px);
3637 .popup-notification-icon[popupid="servicesInstall"] {
3638 list-style-image: url("chrome://browser/skin/social/services-64.png");
3640 #servicesInstall-notification-icon {
3641 list-style-image: url("chrome://browser/skin/social/services-16.png");
3644 /* EME notifications */
3646 .popup-notification-icon[popupid="drmContentPlaying"],
3647 #eme-notification-icon {
3648 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3651 #eme-notification-icon:hover:active {
3652 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3655 #eme-notification-icon[firstplay=true] {
3656 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3659 @keyframes emeTeachingMoment {
3660 0% {transform: translateX(0); }
3661 25% {transform: translateX(3px) }
3662 75% {transform: translateX(-3px) }
3663 100% { transform: translateX(0); }
3666 /* HiDPI notification icons */
3667 @media (min-resolution: 1.1dppx) {
3668 /* #notification-popup-box {
3669 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3672 .notification-anchor-icon {
3673 list-style-image: url(chrome://global/skin/icons/information-32.png);
3676 .webRTC-shareDevices-notification-icon,
3677 #webRTC-shareDevices-notification-icon {
3678 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3681 .webRTC-sharingDevices-notification-icon,
3682 #webRTC-sharingDevices-notification-icon {
3683 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3686 .webRTC-shareMicrophone-notification-icon,
3687 #webRTC-shareMicrophone-notification-icon {
3688 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3691 .webRTC-sharingMicrophone-notification-icon,
3692 #webRTC-sharingMicrophone-notification-icon {
3693 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3696 .webRTC-shareScreen-notification-icon,
3697 #webRTC-shareScreen-notification-icon {
3698 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3701 .webRTC-sharingScreen-notification-icon,
3702 #webRTC-sharingScreen-notification-icon {
3703 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3706 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3707 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3708 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3711 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3712 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3713 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3716 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3717 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3718 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3722 /* === END notification-icons.inc.css === */
3724 .popup-notification-body[popupid="addon-progress"],
3725 .popup-notification-body[popupid="addon-install-confirmation"] {
3730 /* Translation infobar */
3732 /* === BEGIN infobar.inc.css === */
3734 notification[value="translation"] .messageImage {
3735 list-style-image: url("chrome://browser/skin/translation-16.png");
3736 -moz-image-region: rect(0, 32px, 16px, 16px);
3739 @media (min-resolution: 1.25dppx) {
3740 notification[value="translation"] .messageImage {
3741 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3742 -moz-image-region: rect(0, 64px, 32px, 32px);
3746 notification[value="translation"][state="translating"] .messageImage {
3747 list-style-image: url("chrome://browser/skin/translating-16.png");
3748 -moz-image-region: auto;
3751 @media (min-resolution: 1.25dppx) {
3752 notification[value="translation"][state="translating"] .messageImage {
3753 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3757 notification[value="translation"] hbox[anonid="details"] {
3761 notification[value="translation"] button,
3762 notification[value="translation"] menulist {
3766 notification[value="translation"] menulist > .menulist-dropmarker {
3769 .translation-menupopup arrowscrollbox {
3773 .translation-attribution {
3775 -moz-box-align: end;
3779 .translation-attribution > label {
3783 .translation-attribution > image {
3787 .translation-welcome-panel {
3791 .translation-welcome-logo {
3794 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3795 -moz-image-region: rect(0, 64px, 32px, 32px);
3798 .translation-welcome-content {
3799 -moz-margin-start: 16px;
3802 .translation-welcome-headline {
3807 .translation-welcome-body {
3812 /* === END infobar.inc.css === */
3814 notification[value="translation"] {
3818 .translation-menupopup {
3819 -moz-appearance: none;
3822 /* Loop/ Hello browser styles */
3824 notification[value="loop-sharing-notification"] .button-menubutton-button {
3830 notification[value="loop-sharing-notification"] .messageImage {
3831 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3834 /* Bookmarks roots menu-items */
3835 #subscribeToPageMenuitem:not([disabled]),
3836 #subscribeToPageMenupopup,
3837 #BMB_subscribeToPageMenuitem:not([disabled]),
3838 #BMB_subscribeToPageMenupopup {
3839 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3842 #bookmarksToolbarFolderMenu,
3843 #BMB_bookmarksToolbar,
3844 #panelMenu_bookmarksToolbar {
3845 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3846 -moz-image-region: auto;
3849 #BMB_unsortedBookmarks,
3850 #panelMenu_unsortedBookmarks {
3851 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3852 -moz-image-region: auto;
3858 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3861 /* ::::: Keyboard UI Panel ::::: */
3866 border-radius: 20px;
3869 .KUI-panel[level="top"] {
3870 /*background-color: rgba(27%,27%,27%,.65);*/
3876 padding: 20px 10px 10px;
3880 .ctrlTab-favicon[src] {
3881 background-color: #000000;
3887 .ctrlTab-preview-inner > .tabPreview-canvas {
3890 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3894 .ctrlTab-preview-inner {
3895 padding-bottom: 10px;
3898 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3900 background-color: #000000;
3901 border-radius: .5em;
3904 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3906 background-color: #000000;
3909 border: 2px solid #9C9CFF;
3910 border-radius: .5em;
3913 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3914 margin: -10px -10px 0;
3926 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3934 .sync-panel-button-box {
3938 #sync-start-panel-title {
3944 #sync-start-panel-subtitle {
3950 .statuspanel-label {
3953 background: #404000;
3954 border: 1px none #9C9CFF;
3955 border-top-style: solid;
3960 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3961 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3962 border-right-style: solid;
3963 border-top-right-radius: .3em;
3967 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3968 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3969 border-left-style: solid;
3970 border-top-left-radius: .3em;
3974 /* HACK to abolish devily color on main content */
3977 background-color: transparent !important;
3980 /* === BEGIN fullscreen/warning.inc.css === */
3982 html|*#fullscreen-warning {
3983 align-items: center;
3984 background: rgba(0, 0, 0, 0.9);
3985 border: 2px solid #A09090;
3986 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3989 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3992 html|*#fullscreen-warning::before {
3994 width: 24px; height: 24px;
3997 html|*#fullscreen-warning.verifiedIdentity::before,
3998 html|*#fullscreen-warning.verifiedDomain::before {
3999 content: url("chrome://browser/skin/fullscreen/secure.svg");
4002 html|*#fullscreen-warning.unknownIdentity::before {
4003 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4006 html|*#fullscreen-domain-text,
4007 html|*#fullscreen-generic-text {
4009 font-weight: lighter;
4014 html|*#fullscreen-domain {
4019 html|*#fullscreen-exit-button {
4021 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4023 font-weight: lighter;
4025 box-sizing: content-box;
4027 border-radius: 300px;
4029 background-color: #C09070;
4033 /* === END fullscreen/warning.inc.css === */
4035 /* === BEGIN commandline.inc.css === */
4037 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4038 We are copy/pasting variables from light-theme and dark-theme,
4039 since they aren't loaded in this context (within browser.css). */
4040 :root #developer-toolbar {
4041 --gcli-background-color: #000000; /* --theme-toolbar-background */
4042 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4043 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4044 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4045 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4046 --selection-background: #008484; /* --theme-selection-background */
4047 --selection-color: #000000; /* --theme-selection-color */
4050 /* Developer toolbar */
4052 #developer-toolbar {
4053 border-top: 3px solid var(--gcli-background-color);
4054 border-bottom: none;
4057 #developer-toolbar .toolbar-holder {
4058 background-color: #8050B0;
4062 #developer-toolbar .toolbar-holder {
4063 background-color: #8050B0;
4067 #developer-toolbar .toolbar-startcap,
4068 #developer-toolbar .toolbar-endcap{
4069 background-color: #6000CF;
4072 #developer-toolbar {
4074 min-height: 32px; */
4077 #developer-toolbar > toolbarbutton {
4083 .developer-toolbar-button > image {
4084 /* margin: auto 10px; */
4087 #developer-toolbar-toolbox-button > label {
4091 .developer-toolbar-button > .toolbarbutton-icon,
4092 #developer-toolbar-closebutton > .toolbarbutton-icon {
4097 #developer-toolbar-toolbox-button {
4098 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
4099 -moz-image-region: rect(0px, 16px, 16px, 0px);
4102 #developer-toolbar-toolbox-button > label {
4106 #developer-toolbar-toolbox-button:hover,
4107 #developer-toolbar-toolbox-button:hover:active,
4108 #developer-toolbar-toolbox-button[checked=true] {
4109 -moz-image-region: rect(0px, 32px, 16px, 16px);
4112 @media (min-resolution: 2dppx) {
4113 #developer-toolbar-toolbox-button {
4114 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
4115 -moz-image-region: rect(0px, 32px, 32px, 0px);
4118 #developer-toolbar-toolbox-button:hover,
4119 #developer-toolbar-toolbox-button:hover:active,
4120 #developer-toolbar-toolbox-button[checked=true] {
4121 -moz-image-region: rect(0px, 64px, 32px, 32px);
4125 #developer-toolbar-closebutton {
4126 list-style-image: url("chrome://devtools/skin/close.png");
4127 -moz-image-region: rect(0px, 16px, 16px, 0px);
4132 #developer-toolbar-closebutton > .toolbarbutton-icon {
4135 #developer-toolbar-closebutton > .toolbarbutton-text {
4139 #developer-toolbar-closebutton:hover,
4140 #developer-toolbar-closebutton:hover:active {
4141 -moz-image-region: rect(0px, 32px, 16px, 16px);
4144 @media (min-resolution: 2dppx) {
4145 #developer-toolbar-closebutton {
4146 list-style-image: url("chrome://devtools/skin/close@2x.png");
4147 -moz-image-region: rect(0px, 32px, 32px, 0px);
4150 #developer-toolbar-closebutton:hover,
4151 #developer-toolbar-closebutton:hover:active {
4152 -moz-image-region: rect(0px, 64px, 32px, 32px);
4158 html|*#gcli-tooltip-frame,
4159 html|*#gcli-output-frame {
4162 background-color: transparent;
4168 background-color: transparent;
4171 .gclitoolbar-input-node,
4172 .gclitoolbar-complete-node {
4174 -moz-box-align: center;
4178 background-color: transparent;
4181 .gclitoolbar-input-node {
4182 /* line-height: 32px;
4183 outline-style: none; */
4184 background-repeat: no-repeat;
4185 background-color: var(--gcli-input-background);
4188 .gclitoolbar-input-node[focused="true"] {
4189 background-color: var(--gcli-input-focused-background);
4192 .gclitoolbar-input-node::before {
4194 display: inline-block;
4195 -moz-box-ordinal-group: 0;
4199 background-image: url("chrome://devtools/skin/commandline-icon.png");
4200 background-position: 0 center;
4201 background-size: 32px 16px;
4204 .gclitoolbar-input-node[focused="true"]::before {
4205 background-position: -16px center;
4208 @media (min-resolution: 2dppx) {
4209 .gclitoolbar-input-node::before {
4210 background-image: url("chrome://devtools/skin/commandline-icon@2x.png");
4214 .gclitoolbar-input-node:not([focused="true"]) {
4215 border-color: transparent;
4218 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4219 background-color: var(--selection-background);
4220 color: var(--selection-color);
4223 .gclitoolbar-complete-node {
4225 background-color: transparent;
4228 pointer-events: none;
4231 .gcli-in-incomplete,
4235 .gcli-in-closebrace,
4242 .gcli-in-incomplete {
4243 border-bottom: 2px dotted #8050B0;
4247 border-bottom: 2px dotted #FF0000;
4258 .gcli-in-closebrace {
4262 /* === END commandline.inc.css === */
4264 /* === BEGIN responsivedesign.inc.css === */
4266 /* Responsive Mode */
4268 .browserContainer[responsivemode] {
4269 background-color: #221500;
4270 padding: 0 20px 20px 20px;
4273 .browserStack[responsivemode] {
4274 box-shadow: 0 0 7px #9C9CFF;
4277 .devtools-responsiveui-toolbar {
4278 background: transparent;
4279 /* text color is textColor from dark theme, since no theme is applied to
4280 * the responsive toolbar.
4286 border-bottom-width: 0;
4289 .devtools-responsiveui-menulist,
4290 .devtools-responsiveui-toolbarbutton {
4291 -moz-box-align: center;
4293 /* min-height: 22px;*/
4294 /* margin: 0 3px; */
4297 .devtools-responsiveui-menulist .menulist-editable-box {
4298 background-color: transparent;
4301 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4306 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4307 /* background: hsla(212,7%,57%,.35);*/
4310 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4315 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4316 -moz-box-orient: horizontal;
4319 .devtools-responsiveui-menulist:-moz-focusring,
4320 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4321 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4322 outline-offset: -4px;*/
4325 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4329 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4330 /* border-color: hsla(210,8%,5%,.6);
4331 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4332 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); */
4335 .devtools-responsiveui-menulist[open=true],
4336 .devtools-responsiveui-toolbarbutton[open=true],
4337 .devtools-responsiveui-toolbarbutton[checked=true] {
4338 /* border-color: hsla(210,8%,5%,.6) !important;
4339 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4340 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); */
4343 .devtools-responsiveui-toolbarbutton[checked=true] {
4344 /* color: hsl(208,100%,60%); */
4347 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4348 /* background-color: transparent !important;*/
4351 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4352 /* background-color: hsla(210,8%,5%,.2) !important;*/
4355 .devtools-responsiveui-menulist > .menulist-label-box {
4359 .devtools-responsiveui-menulist > .menulist-dropmarker {
4360 /* display: -moz-box;
4361 background-color: transparent;
4362 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4363 -moz-box-align: center;
4368 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4371 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4372 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4375 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4376 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4379 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4380 /* padding: 0 1px;*/
4381 -moz-box-align: stretch;
4384 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4385 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4386 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4387 -moz-box-align: center;
4391 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4392 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4396 .devtools-responsiveui-close {
4397 list-style-image: url("chrome://devtools/skin/close.png");
4398 -moz-image-region: rect(0px,16px,16px,0px);
4401 .devtools-responsiveui-close:hover {
4402 -moz-image-region: rect(0px,32px,16px,16px);
4405 .devtools-responsiveui-rotate {
4406 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4407 -moz-image-region: rect(0px,16px,16px,0px);
4410 .devtools-responsiveui-rotate:hover {
4411 -moz-image-region: rect(0px,32px,16px,16px);
4414 @media (min-resolution: 2dppx) {
4415 .devtools-responsiveui-close {
4416 list-style-image: url("chrome://devtools/skin/close@2x.png");
4419 .devtools-responsiveui-close:hover {
4420 -moz-image-region: rect(0px,64px,32px,32px);
4423 .devtools-responsiveui-rotate {
4424 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4427 .devtools-responsiveui-rotate:hover {
4428 -moz-image-region: rect(0px,64px,32px,32px);
4432 .devtools-responsiveui-touch {
4433 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4434 -moz-image-region: rect(0px,16px,16px,0px);
4437 .devtools-responsiveui-touch:hover,
4438 .devtools-responsiveui-touch[checked],
4439 .devtools-responsiveui-touch[checked]:hover {
4440 -moz-image-region: rect(0px,32px,16px,16px);
4443 @media (min-resolution: 2dppx) {
4444 .devtools-responsiveui-touch {
4445 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4446 -moz-image-region: rect(0px,32px,32px,0px);
4449 .devtools-responsiveui-touch:hover,
4450 .devtools-responsiveui-touch[checked],
4451 .devtools-responsiveui-touch[checked]:hover {
4452 -moz-image-region: rect(0px,64px,32px,32px);
4456 .devtools-responsiveui-screenshot {
4457 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4458 -moz-image-region: rect(0px,16px,16px,0px);
4461 .devtools-responsiveui-screenshot:hover {
4462 -moz-image-region: rect(0px,32px,16px,16px);
4465 @media (min-resolution: 2dppx) {
4466 .devtools-responsiveui-screenshot {
4467 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4470 .devtools-responsiveui-screenshot:hover {
4471 -moz-image-region: rect(0px,64px,32px,32px);
4475 .devtools-responsiveui-resizebarV {
4479 transform: translate(12px, -12px);
4480 background-size: cover;
4481 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4484 .devtools-responsiveui-resizebarH {
4488 transform: translate(-12px, 12px);
4489 background-size: cover;
4490 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4493 .devtools-responsiveui-resizehandle {
4497 transform: translate(12px, 12px);
4498 background-size: cover;
4499 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4502 /* FxOS custom mode with additional buttons and phone look'n feel */
4504 /* Hide devtools manual resizer */
4505 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4506 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4507 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4511 /* Gives responsive mode a phone look'n feel */
4512 .browserStack[responsivemode].fxos-mode {
4513 padding: 60px 15px 0;
4515 border-radius: 25px / 20px;
4516 border-bottom-left-radius: 0;
4517 border-bottom-right-radius: 0;
4518 border: 1px solid #FFFFFF;
4519 border-bottom-width: 0;
4521 background-color: #353535;
4523 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4525 background-image: linear-gradient(to right, #111 11%, #333 56%);
4529 .devtools-responsiveui-hardware-buttons {
4530 -moz-appearance: none;
4533 border: 1px solid #FFFFFF;
4534 border-bottom-left-radius: 25px;
4535 border-bottom-right-radius: 25px;
4536 border-top-width: 0;
4538 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4540 background-image: linear-gradient(to right, #111 11%, #333 56%);
4543 .devtools-responsiveui-home-button {
4544 -moz-user-focus: ignore;
4547 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4550 .devtools-responsiveui-sleep-button {
4551 -moz-user-focus: ignore;
4552 -moz-appearance: none;
4553 /* compensate browserStack top padding */
4561 border: 1px solid #444;
4562 border-top-right-radius: 12px;
4563 border-top-left-radius: 12px;
4564 border-bottom-color: transparent;
4566 background-image: linear-gradient(to top, #111 11%, #333 56%);
4569 .devtools-responsiveui-sleep-button:hover:active {
4570 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4573 .devtools-responsiveui-volume-buttons {
4577 .devtools-responsiveui-volume-up-button,
4578 .devtools-responsiveui-volume-down-button {
4579 -moz-user-focus: ignore;
4580 -moz-appearance: none;
4581 border: 1px solid red;
4585 border: 1px solid #444;
4586 border-right-color: transparent;
4588 background-image: linear-gradient(to right, #111 11%, #333 56%);
4591 .devtools-responsiveui-volume-up-button:hover:active,
4592 .devtools-responsiveui-volume-down-button:hover:active {
4593 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4596 .devtools-responsiveui-volume-up-button {
4597 border-top-left-radius: 12px;
4600 .devtools-responsiveui-volume-down-button {
4601 border-bottom-left-radius: 12px;
4604 @media (min-resolution: 2dppx) {
4605 .devtools-responsiveui-resizebarV {
4606 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4609 .devtools-responsiveui-resizebarH {
4610 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4613 .devtools-responsiveui-resizehandle {
4614 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4618 /* === END responsivedesign.inc.css === */
4620 /* === including indicator.css is done at the start of the file === */
4624 #developer-toolbar-toolbox-button[error-count]:before {
4628 background-color: #FF0000;
4630 -moz-margin-end: 5px;
4633 /* Social toolbar item */
4635 #social-notification-icon-mentions {
4636 background-color: #000000;
4638 -moz-margin-start: 2px;
4641 #social-notification-icon-mentions:hover {
4642 background-color: #FFCF00;
4645 #social-notification-icon-mentions[open="true"] {
4646 background-color: #FF9F00;
4649 #social-sidebar-splitter {
4653 #socialActivatedNotification .popup-notification-button-container {
4657 .social-activation-icon {
4664 #social-activation-message {
4668 #social-activation-message > label {
4672 /* social toolbar provider menu */
4673 .social-statusarea-popup {
4676 margin-right: -12px;
4679 .social-statusarea-user {
4680 border-bottom: 1px solid #9C9CFF;
4681 background-color: #000000;
4687 .social-statusarea-user-portrait {
4694 .social-statusarea-loggedInStatus {
4695 background: transparent;
4700 list-style-image: none;
4703 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4704 text-decoration: underline;
4707 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4711 .social-panel-frame {
4712 border-radius: inherit;
4715 /* === BEGIN chat.inc.css === */
4717 #social-sidebar-header {
4721 #manage-share-providers,
4722 #social-sidebar-button {
4723 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4724 -moz-image-region: rect(0, 468px, 18px, 450px);
4727 #social-sidebar-button {
4728 -moz-appearance: none;
4733 #manage-share-providers > .toolbarbutton-icon,
4734 #social-sidebar-button > .toolbarbutton-icon {
4738 #manage-share-providers:hover,
4739 #manage-share-providers:hover:active,
4740 #social-sidebar-button:hover,
4741 #social-sidebar-button:hover:active {
4742 -moz-image-region: rect(18px, 468px, 36px, 450px);
4744 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4748 #social-sidebar-button[loading="true"] {
4749 list-style-image: url("chrome://global/skin/icons/loading.gif");
4752 #social-sidebar-favico {
4765 .chat-toolbarbutton {
4766 -moz-appearance: none;
4773 .chat-toolbarbutton > .toolbarbutton-text {
4777 .chat-toolbarbutton > .toolbarbutton-icon {
4782 .chat-close-button {
4783 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4786 .chat-close-button:hover {
4787 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4790 .chat-close-button:hover:active {
4791 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4794 .chat-minimize-button {
4795 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4798 .chat-minimize-button:hover {
4799 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4802 .chat-minimize-button:hover:active {
4803 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4807 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4808 transform: rotate(180deg);
4811 .chat-swap-button:hover {
4812 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4815 .chat-swap-button:hover:active {
4816 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4819 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4823 chatbox[src^="about:loopconversation#"] .chat-minimize-button {
4824 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
4827 chatbox[src^="about:loopconversation#"] .chat-swap-button {
4828 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
4832 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4833 background-color: #FF0000;
4834 border: 1px solid #FFC000;
4835 border-top-right-radius: 4px;
4839 margin-bottom: -5px;
4840 -moz-margin-start: 6px;
4841 -moz-margin-end: -5px;
4844 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4845 background-color: #FFCF00;
4846 border-color: #FF0000;
4855 chatbox[src^="about:loopconversation#"] .chat-title {
4860 background-color: #9C9CFF;
4867 border: 1px solid #008484;
4869 border-top-left-radius: 4px;
4870 border-top-right-radius: 4px;
4872 background-color: #A09090;
4875 .chat-titlebar[selected] {
4876 background-color: #008484;
4879 chatbox[src^="about:loopconversation#"] > .chat-titlebar {
4880 background-color: #008484;
4881 border-color: #008484;
4884 .chat-titlebar > .notification-anchor-icon {
4889 .chat-titlebar[minimized="true"] {
4890 border-bottom: none;
4893 .chat-titlebar[selected] {
4894 background-color: #008484;
4897 .chat-titlebar[activity] {
4898 background-color: #E7ADE7;
4908 list-style-image: url("chrome://browser/skin/social/services-16.png");
4909 background-color: #000000;
4915 border-top: 1px solid #008484;
4916 -moz-border-end: 1px solid #008484;
4919 @media (min-resolution: 2dppx) {
4921 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4925 .chatbar-button:hover {
4926 background-color: #FFCF00;
4928 .chatbar-button[open="true"] {
4929 background-color: #FF9F00;
4932 .chatbar-button[activity]:not([open]) {
4933 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4936 .chatbar-button > .toolbarbutton-icon {
4940 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4947 .chatbar-button > .toolbarbutton-icon {
4951 .chatbar-button:hover > .toolbarbutton-icon,
4952 .chatbar-button[open="true"] > .toolbarbutton-icon {
4956 .chatbar-button:hover,
4957 .chatbar-button[open="true"] {
4960 .chatbar-button > .toolbarbutton-text,
4961 .chatbar-button > .toolbarbutton-menu-dropmarker {
4965 .chatbar-button[activity]:not([open="true"]) {
4966 background-color: #E7ADE7;
4969 .chatbar-button > menupopup > menuitem[activity] {
4974 background: transparent;
4979 -moz-margin-end: 20px;
4983 -moz-margin-start: 4px;
4984 background-color: transparent;
4988 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4990 /* border-top-left-radius: 4px;
4991 border-top-right-radius: 4px;*/
4992 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4994 /* -moz-margin-end: 5px;*/
4997 chatbox[minimized="true"] {
5003 -moz-margin-start: 0px;
5009 /* === END chat.inc.css === */
5011 /* === BEGIN plugin-doorhanger.inc.css === */
5014 * Plugin Doorhanger Styles
5017 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5018 padding: 6px 1px 2px;
5021 .click-to-play-plugins-notification-center-box {
5024 .plugin-popupnotification-centeritem:nth-child(odd) {
5025 /* background-color: rgba(0,0,0,0.1);*/
5028 .center-item-label {
5030 text-overflow: ellipsis;
5033 .center-item-warning-icon {
5034 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5035 background-repeat: no-repeat;
5038 -moz-margin-start: 6px;
5041 .click-to-play-plugins-notification-button-container {
5044 .click-to-play-popup-button {
5048 .click-to-play-plugins-notification-description-box {
5052 padding-bottom: 3px;
5055 .click-to-play-plugins-outer-description {
5059 .click-to-play-plugins-notification-link,
5064 .messageImage[value="plugin-hidden"] {
5065 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5068 /* Keep any changes to this style in sync with pluginProblem.css */
5069 notification.pluginVulnerable {
5072 notification.pluginVulnerable .messageImage {
5073 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5076 /* === END plugin-doorhanger.inc.css === */
5078 /* === BEGIN login-doorhanger.inc.css === */
5080 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5081 /* Since we display a sliding subview that extends to the border, we cannot
5082 * keep the default padding of arrow panels. We use the same padding in the
5083 * individual content views instead. Since we removed the padding, we also
5084 * have to ensure the contents are clipped to the border box. */
5089 #login-fill-mainview,
5090 #login-fill-details {
5091 padding: var(--panel-arrowcontent-padding);
5094 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5095 transform: translateX(-14px);
5098 #login-fill-mainview,
5099 #login-fill-details {
5100 transition: transform 150ms;
5103 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5104 transform: translateX(105%);
5107 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5108 transform: translateX(-105%);
5111 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5112 background-color: hsla(240,39%,100%,.1);
5115 #login-fill-testing {
5121 border: 1px solid #9C9CFF;
5125 .login-fill-item[disabled] {
5127 background-color: #000000;
5130 .login-fill-item[disabled][selected] {
5131 background-color: #008484;
5139 .login-fill-item.different-hostname > .login-hostname {
5149 #login-fill-details {
5151 background: var(--panel-arrowcontent-background);
5152 color: var(--panel-arrowcontent-color);
5153 background-clip: padding-box;
5154 border-left: 1px solid #9C9CFF;
5155 -moz-margin-start: 38px;
5158 /* === END login-doorhanger.inc.css === */
5160 /* === BEGIN customizeMode.inc.css === */
5162 /* Customization mode */
5164 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5168 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5169 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5170 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5175 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5176 pointer-events: none;
5179 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5180 #PanelUI-contents > .panel-customization-placeholder {
5181 -moz-outline-radius: 2.5px;
5182 outline: 1px dashed transparent;
5185 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5186 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5187 -moz-box-ordinal-group: 0;
5192 outline-offset: -2px;
5193 pointer-events: none;
5199 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5200 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5201 offset from the bottom effectively the same as other targets (-2px). */
5202 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5206 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5207 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5208 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5209 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5213 /* Most target outlines are shown on hover and drag over but the panel menu uses
5214 placeholders instead. */
5215 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5216 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5217 /* nav-bar and panel outlines are always shown */
5218 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5219 outline-color: #A09090;
5222 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5223 transition: outline-color 250ms linear;
5226 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5227 transition: outline-color 250ms linear;
5228 outline-color: #9C9CFF;
5231 #PanelUI-contents > .panel-customization-placeholder {
5233 outline-offset: -5px;
5236 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5238 /* padding-left: 10px;
5239 padding-right: 10px;*/
5242 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5246 #customization-container {
5247 background-color: #000000;
5251 #customization-palette,
5252 #customization-empty {
5253 padding: 0 15px 15px;
5256 #customization-header {
5258 line-height: 1.75em;
5261 margin: 25px 25px 12px;
5262 padding-bottom: 12px;
5263 border-bottom: 1px solid #A09090;
5266 #customization-panel-container {
5267 padding: 10px 10px 0px;
5270 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5271 #customization-footer {
5272 /*background-color: rgb(236,236,236);*/
5275 #customization-footer {
5276 border-top: 1px solid #9C9CFF;
5280 .customizationmode-button {
5284 .customizationmode-button:hover {
5287 #customization-titlebar-visibility-button[checked],
5288 #customization-devedition-theme-button[checked] {
5289 background-color: #008484;
5292 #customization-titlebar-visibility-button[checked]:hover,
5293 #customization-devedition-theme-button[checked]:hover {
5294 background-color: #FFCF00;
5297 #customization-titlebar-visibility-button[checked]:hover:active,
5298 #customization-devedition-theme-button[checked]:hover:active {
5299 background-color: #FF9F00;
5302 .customizationmode-button[disabled="true"] {
5305 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5306 .customizationmode-button > .button-box > .button-icon {
5310 #customization-titlebar-visibility-button {
5311 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5312 -moz-image-region: rect(0, 16px, 16px, 0);
5315 #customization-titlebar-visibility-button:hover {
5316 -moz-image-region: rect(16px, 16px, 32px, 0);
5319 #customization-lwtheme-button,
5320 #customization-titlebar-visibility-button {
5324 #customization-titlebar-visibility-button > .button-box {
5326 padding-bottom: 1px;
5329 #customization-titlebar-visibility-button:hover:active > .button-box {
5334 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5335 #customization-titlebar-visibility-button > .button-box > .button-text {
5336 /* Sadly, button.css thinks its margins are perfect for everyone. */
5337 -moz-margin-start: 5px !important;
5340 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5344 background-size: contain;
5347 #customization-titlebar-visibility-button > .button-box > .button-icon {
5348 vertical-align: middle;
5351 #customization-titlebar-visibility-button[checked] {
5352 -moz-image-region: rect(0, 32px, 16px, 16px);
5353 background-color: #008484;
5356 #customization-titlebar-visibility-button[checked]:hover {
5357 -moz-image-region: rect(16px, 32px, 32px, 16px);
5358 background-color: #FFCF00;
5361 #customization-titlebar-visibility-button[checked]:hover:active {
5362 background-color: #FF9F00;
5365 @media (min-resolution: 1.1dppx) {
5366 #customization-titlebar-visibility-button {
5367 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5368 -moz-image-region: rect(0, 48px, 48px, 0);
5371 #customization-titlebar-visibility-button:hover {
5372 -moz-image-region: rect(48px, 48px, 96px, 0);
5375 #customization-titlebar-visibility-button[checked] {
5376 -moz-image-region: rect(0, 96px, 48px, 48px);
5379 #customization-titlebar-visibility-button[checked]:hover {
5380 -moz-image-region: rect(48px, 96px, 96px, 48px);
5384 #main-window[customize-entered] #customization-panel-container {
5385 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5386 background-position: left top;
5387 background-repeat: repeat;
5388 background-size: auto;
5389 background-attachment: fixed;
5392 toolbarpaletteitem[place="toolbar"] {
5393 transition: border-width 250ms ease-in-out;
5396 toolbarpaletteitem[mousedown] {
5397 outline: 1px solid #008484;
5398 cursor: -moz-grabbing;
5402 .panel-customization-placeholder,
5403 toolbarpaletteitem[place="palette"],
5404 toolbarpaletteitem[place="panel"] {
5405 transition: transform .3s ease-in-out;
5408 #customization-palette {
5409 transition: opacity .3s ease-in-out;
5413 #customization-palette[showing="true"] {
5417 toolbarpaletteitem[notransition].panel-customization-placeholder,
5418 toolbarpaletteitem[notransition][place="toolbar"],
5419 toolbarpaletteitem[notransition][place="palette"],
5420 toolbarpaletteitem[notransition][place="panel"] {
5424 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5425 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5426 toolbarpaletteitem > toolbaritem.panel-wide-item,
5427 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5428 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5431 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5432 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5433 transform: scale(1.3);
5436 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5437 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5438 transform: scale(1.1);
5441 /* Override the toolkit styling for items being dragged over. */
5442 toolbarpaletteitem[place="toolbar"] {
5443 border-left-width: 0;
5444 border-right-width: 0;
5449 #customization-palette:not([hidden]) {
5450 margin-bottom: 25px;
5453 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5454 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5455 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5456 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5460 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5461 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5471 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5472 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5476 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5477 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5480 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5481 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5485 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5486 -moz-box-pack: center;
5490 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5491 -moz-margin-end: 5px;
5494 #customization-palette > toolbarpaletteitem > label {
5500 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5501 -moz-box-orient: vertical;
5502 /* Make the panel padding uniform across all platforms due to the
5503 styling of the section headers and footer. */
5507 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5512 .customization-lwtheme-menu-theme {
5513 -moz-appearance: none;
5516 -moz-padding-end: 5px;
5518 -moz-padding-start: 0;
5521 .customization-lwtheme-menu-theme[defaulttheme] {
5522 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5525 .customization-lwtheme-menu-theme[active="true"] {
5526 background-color: #008484;
5529 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5533 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5537 #customization-lwtheme-menu-header,
5538 #customization-lwtheme-menu-recommended {
5543 #customization-lwtheme-menu-header,
5544 #customization-lwtheme-menu-recommended,
5545 #customization-lwtheme-menu-footer {
5546 background-color: #A09090;
5548 margin-right: -10px;
5552 #customization-lwtheme-menu-header {
5554 border-top-right-radius: 3px;
5555 border-top-left-radius: 3px;
5558 #customization-lwtheme-menu-recommended {
5561 #customization-lwtheme-menu-footer {
5562 margin-bottom: -10px;
5563 border-bottom-right-radius: 3px;
5564 border-bottom-left-radius: 3px;
5567 .customization-lwtheme-menu-footeritem {
5568 -moz-appearance: none;
5570 background-color: #C09070;
5572 border: 1px solid transparent;
5578 .customization-lwtheme-menu-footeritem:hover {
5579 background-color: #FFCF00;
5582 .customization-lwtheme-menu-footeritem:first-child {
5585 /* === END customizeMode.inc.css === */
5587 /* === BEGIN customizeTip.inc.css === */
5589 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5596 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5597 border: 1px solid #9C9CFF;
5601 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5602 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5605 .customization-tipPanel-infoBox {
5606 margin: 20px 25px 25px;
5608 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5609 background-repeat: no-repeat;
5612 .customization-tipPanel-content {
5618 .customization-tipPanel-em {
5623 .customization-tipPanel-contentImage {
5625 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5633 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5634 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5637 .customization-tipPanel-link {
5638 -moz-appearance: none;
5639 background: transparent;
5647 .customization-tipPanel-link > .button-box > .button-text {
5648 margin: 0 !important;
5651 .customization-tipPanel-closeBox > .close-icon {
5652 -moz-appearance: none;
5654 -moz-margin-end: -25px;
5657 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5658 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5659 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5662 /* === END customizeTip.inc.css === */
5665 * This next rule is a hack to disable subpixel anti-aliasing on all
5666 * labels during the customize mode transition. Subpixel anti-aliasing
5667 * on Windows with Direct2D layers acceleration is particularly slow to
5668 * paint, so this hack is how we sidestep that performance bottleneck.
5670 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5671 transform: perspective(0.01px);
5674 #main-window[customize-entered] > #tab-view-deck {
5675 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5676 background-attachment: fixed;
5679 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5680 background-repeat: no-repeat;
5681 background-position: right top;
5682 background-attachment: fixed;
5683 /* The image will get set from CustomizeMode.jsm */
5684 background-image: none;
5685 background-color: transparent;
5688 #main-window[customization-lwtheme]:-moz-lwtheme {
5689 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5690 background-repeat: repeat;
5691 background-attachment: fixed;
5692 background-position: left top;
5695 #main-window[customize-entered] #browser-bottombox,
5696 #main-window[customize-entered] #customization-container {
5697 border-left: 1px solid #9C9CFF;
5698 border-right: 1px solid #9C9CFF;
5699 background-clip: padding-box;
5702 #main-window[customize-entered] #browser-bottombox {
5703 border-bottom: 1px solid #9C9CFF;
5706 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5710 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5714 /* End customization mode */
5716 /* Private browsing indicators */
5719 * Currently, we have two places where we put private browsing indicators on
5720 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5721 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5722 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5723 * want the bottom border of the image to line up with the bottom of the window
5724 * caption buttons. That's why there's so much special-casing going on in here.
5726 .private-browsing-indicator {
5728 pointer-events: none;
5731 #private-browsing-indicator-titlebar {
5736 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5740 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5744 #TabsToolbar > .private-browsing-indicator {
5745 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5746 -moz-margin-start: 4px;
5750 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5751 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5752 * min/max/close window buttons.
5754 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5755 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5756 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5757 -moz-margin-end: 4px;
5763 /* This one is for Linux */
5764 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5765 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5769 /* End private browsing indicators */
5771 /* === BEGIN UITour.inc.css === */
5775 #UITourHighlightContainer {
5776 -moz-appearance: none;
5778 background-color: transparent;
5779 /* This is a buffer to compensate for the movement in the "wobble" effect */
5784 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5785 border-radius: 40px;
5786 border: 1px solid #9C9CFF;
5787 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5788 on Linux without an X compositor where opacity is either 0 or 1. */
5789 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5794 #UITourTooltipBody {
5795 -moz-margin-end: 14px;
5798 #UITourTooltipBody > vbox {
5802 #UITourTooltipIconContainer {
5803 -moz-margin-start: -16px;
5806 #UITourTooltipIcon {
5809 -moz-margin-start: 28px;
5810 -moz-margin-end: 28px;
5813 #UITourTooltipTitle,
5814 #UITourTooltipDescription {
5818 #UITourTooltipTitle {
5821 -moz-margin-start: 0;
5826 #UITourTooltipDescription {
5827 -moz-margin-start: 0;
5830 line-height: 1.8rem;
5831 margin-bottom: 0; /* Override global.css */
5834 #UITourTooltipClose {
5835 -moz-appearance: none;
5837 background-color: transparent;
5839 -moz-margin-start: 4px;
5843 #UITourTooltipClose > .toolbarbutton-text {
5847 #UITourTooltipButtons {
5849 background-color: rgba(0,0,0,.2);
5850 border-top: 1px solid rgba(0,0,0,.4);
5851 margin: 24px -16px -16px;
5855 #UITourTooltipButtons > label,
5856 #UITourTooltipButtons > button {
5860 #UITourTooltipButtons > label:first-child,
5861 #UITourTooltipButtons > button:first-child {
5862 -moz-margin-start: 0;
5865 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5868 -moz-margin-end: 5px;
5871 #UITourTooltipButtons > label,
5872 #UITourTooltipButtons > button .button-text {
5876 #UITourTooltipButtons > button:not(.button-link) {
5877 -moz-appearance: none;
5878 background-color: #C09070;
5879 border-radius: 3000px;
5883 transition-property: background-color, color;
5884 transition-duration: 150ms;
5887 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5888 background-color: #FFCF00;
5892 #UITourTooltipButtons > label,
5893 #UITourTooltipButtons > button.button-link {
5894 -moz-appearance: none;
5895 background: transparent;
5898 color: rgba(0,0,0,0.35);
5900 padding-right: 10px;
5903 #UITourTooltipButtons > button.button-link:hover {
5907 /* The primary button gets the same color as the customize button. */
5908 #UITourTooltipButtons > button.button-primary {
5909 background-color: #A06060; /* LCARS default button background color */
5912 padding-right: 30px;
5915 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5916 background-color: #FFCF00;
5920 /* Notification overrides for Heartbeat UI */
5922 notification.heartbeat {
5923 background-color: #A09090;
5927 @keyframes pulse-onshow {
5930 transform: scale(1.0);
5934 transform: scale(1.1);
5937 transform: scale(1.0);
5940 transform: scale(1.1);
5943 transform: scale(1.0);
5947 @keyframes pulse-twice {
5949 transform: scale(1.1);
5952 transform: scale(0.8);
5955 transform: scale(1);
5959 .messageText.heartbeat {
5961 /* text-shadow: none; */
5962 -moz-margin-start: 0px;
5965 .messageImage.heartbeat {
5968 -moz-margin-start: 8px;
5969 -moz-margin-end: 8px;
5972 .messageImage.heartbeat.pulse-onshow {
5973 animation-name: pulse-onshow;
5974 animation-duration: 1.5s;
5975 animation-iteration-count: 1;
5976 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5979 .messageImage.heartbeat.pulse-twice {
5980 animation-name: pulse-twice;
5981 animation-duration: 1s;
5982 animation-iteration-count: 2;
5983 animation-timing-function: linear;
5986 /* Learn More link styles */
5987 .heartbeat > .text-link {
5989 -moz-margin-start: 0px;
5992 .heartbeat > .text-link:hover {
5994 text-decoration: none;
5997 .heartbeat > .text-link:hover:active {
6001 /* Heartbeat UI Rating Star Classes */
6002 .heartbeat > #star-rating-container {
6004 /* margin-bottom: 4px;*/
6007 .heartbeat > #star-rating-container > #star5 {
6008 -moz-box-ordinal-group: 5;
6011 .heartbeat > #star-rating-container > #star4 {
6012 -moz-box-ordinal-group: 4;
6015 .heartbeat > #star-rating-container > #star3 {
6016 -moz-box-ordinal-group: 3;
6019 .heartbeat > #star-rating-container > #star2 {
6020 -moz-box-ordinal-group: 2;
6023 .heartbeat > #star-rating-container > .star-x {
6024 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6026 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6027 -moz-margin-end: 4px !important;
6032 .heartbeat > #star-rating-container > .star-x:hover,
6033 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6034 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6037 /* === END UITour.inc.css === */
6039 #UITourTooltipButtons {
6041 * Override the --panel-arrowcontent-padding so the background extends
6042 * to the sides and bottom of the panel.
6045 margin-right: -10px;
6046 margin-bottom: -10px;
6049 /* === BEGIN contextmenu.inc.css === */
6051 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6054 #context-navigation > .menuitem-iconic {
6056 -moz-box-pack: center;
6057 -moz-box-align: center;
6060 #context-navigation > .menuitem-iconic[disabled="true"] {
6061 background-color: transparent;
6064 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6065 -moz-appearance: none;
6068 #context-back > .menu-iconic-left {
6069 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6070 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6071 -moz-image-region: rect(0, 54px, 18px, 36px);
6074 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6075 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6076 -moz-image-region: rect(18px, 54px, 36px, 36px);
6079 #context-back[disabled="true"] > .menu-iconic-left {
6080 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6081 -moz-image-region: rect(36px, 54px, 54px, 36px);
6084 #context-forward > .menu-iconic-left {
6085 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6086 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6087 -moz-image-region: rect(0, 72px, 18px, 54px);
6090 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6091 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6092 -moz-image-region: rect(18px, 72px, 36px, 54px);
6095 #context-forward[disabled="true"] > .menu-iconic-left {
6096 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6097 -moz-image-region: rect(36px, 72px, 54px, 54px);
6100 #context-reload > .menu-iconic-left {
6101 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6102 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6103 -moz-image-region: rect(0, 14px, 14px, 0);
6106 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6107 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6108 -moz-image-region: rect(14px, 14px, 28px, 0);
6111 #context-reload[disabled="true"] > .menu-iconic-left {
6112 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6113 -moz-image-region: rect(28px, 14px, 42px, 0);
6116 #context-stop > .menu-iconic-left {
6117 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6118 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6119 -moz-image-region: rect(0, 28px, 14px, 14px);
6122 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6123 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6124 -moz-image-region: rect(14px, 28px, 28px, 14px);
6127 #context-stop[disabled="true"] > .menu-iconic-left {
6128 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6129 -moz-image-region: rect(28px, 28px, 42px, 14px);
6132 #context-bookmarkpage > .menu-iconic-left {
6133 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6134 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6135 -moz-image-region: rect(0, 144px, 18px, 126px);
6138 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6139 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6140 -moz-image-region: rect(18px, 144px, 36px, 126px);
6143 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6144 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6145 -moz-image-region: rect(36px, 144px, 54px, 126px);
6148 #context-bookmarkpage[starred=true] {
6149 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6150 -moz-image-region: rect(0px, 162px, 18px, 144px);
6153 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6154 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6155 -moz-image-region: rect(18px, 162px, 36px, 144px);
6158 #context-bookmarkpage[starred=true][disabled=true] {
6159 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6160 -moz-image-region: rect(36px, 162px, 54px, 144px);
6163 #context-back:-moz-locale-dir(rtl),
6164 #context-forward:-moz-locale-dir(rtl),
6165 #context-reload:-moz-locale-dir(rtl) {
6166 transform: scaleX(-1);
6169 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6170 width: 18px; /*16px;*/
6171 height: 18px; /*16px;*/
6175 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6176 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6182 #context-media-eme-learnmore {
6183 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6186 #context-media-eme-learnmore {
6187 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6190 /* === END contextmenu.inc.css === */
6192 #context-navigation {
6195 #context-sep-navigation {
6196 /* margin-top: -4px; */
6199 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6204 /* === BEGIN usercontext.inc.css === */
6206 /* User Context UI browser styles */
6208 #menu_newUserContextTabPersonal {
6209 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6212 #menu_newUserContextTabWork {
6213 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6216 #menu_newUserContextTabBanking {
6217 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6220 #menu_newUserContextTabShopping {
6221 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6224 /* URL Bar Decoration */
6226 #userContext-indicator {
6231 #userContext-label {
6232 margin-inline-end: 3px;
6236 #userContext-icons:not([usercontextid]) {
6240 #userContext-icons {
6241 -moz-box-align: center;
6244 /* Personal User Context */
6245 #userContext-icons[usercontextid="1"] > #userContext-label {
6248 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6249 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6252 /* Work User Context */
6253 #userContext-icons[usercontextid="2"] > #userContext-label {
6256 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6257 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6260 /* Banking User Context */
6261 #userContext-icons[usercontextid="3"] > #userContext-label {
6264 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6265 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6268 /* Shopping User Context */
6269 #userContext-icons[usercontextid="4"] > #userContext-label {
6272 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6273 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6276 /* === END usercontext.inc.css === */