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, #web-apps-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);
913 #web-apps-button[cui-areatype="toolbar"] {
914 -moz-image-region: rect(0, 720px, 18px, 702px);
917 #web-apps-button[cui-areatype="toolbar"]:hover {
918 -moz-image-region: rect(18px, 720px, 36px, 702px);
922 #loop-button > .toolbarbutton-badge-stack {
923 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
924 -moz-image-region: rect(0, 18px, 18px, 0);
927 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
928 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
929 -moz-image-region: rect(0, 90px, 18px, 72px);
932 #loop-button[state="disabled"],
933 #loop-button[disabled="true"],
934 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
935 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
936 -moz-image-region: rect(0, 36px, 18px, 18px);
939 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
940 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
941 -moz-image-region: rect(0, 126px, 18px, 108px);
944 #loop-button:not([disabled="true"])[state="error"],
945 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
946 -moz-image-region: rect(0, 54px, 18px, 36px);
949 #loop-button:not([disabled="true"])[state="action"],
950 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
951 -moz-image-region: rect(0, 72px, 18px, 54px);
954 #loop-button:not([disabled="true"])[state="active"],
955 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
956 -moz-image-region: rect(0, 108px, 18px, 90px);
959 #webide-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 738px, 18px, 720px);
963 #webide-button[cui-areatype="toolbar"]:hover {
964 -moz-image-region: rect(18px, 738px, 36px, 720px);
967 #pocket-button[cui-areatype="toolbar"] {
968 -moz-image-region: rect(0, 774px, 18px, 756px);
971 #pocket-button[cui-areatype="toolbar"]:hover,
972 #pocket-button[cui-areatype="toolbar"][open] {
973 -moz-image-region: rect(18px, 774px, 36px, 756px);
976 /* === END toolbarbuttons.inc.css === */
978 /* === BEGIN menupanel.inc.css === */
980 /* Menu panel and palette styles */
983 /* avoid aero overrides with changed filenames */
984 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
985 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
988 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
989 :-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, #web-apps-button, #webide-button, #loop-button,
996 #pocket-button)[cui-areatype="menu-panel"],
997 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
998 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
999 #social-share-button, #open-file-button, #find-button, #developer-button,
1000 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1001 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1002 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1003 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
1005 list-style-image: var(--menupanel-list-style-image);
1008 #home-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #home-button {
1010 -moz-image-region: rect(0px, 128px, 32px, 96px);
1013 #home-button[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #home-button:hover {
1015 -moz-image-region: rect(32px, 128px, 64px, 96px);
1018 #bookmarks-menu-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1020 -moz-image-region: rect(0px, 192px, 32px, 160px);
1023 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1024 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1025 -moz-image-region: rect(32px, 192px, 64px, 160px);
1028 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1029 -moz-image-region: rect(32px, 192px, 64px, 160px);
1032 #history-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1034 -moz-image-region: rect(0px, 224px, 32px, 192px);
1037 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1039 -moz-image-region: rect(32px, 224px, 64px, 192px);
1042 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1043 -moz-image-region: rect(32px, 224px, 64px, 192px);
1046 #downloads-button[cui-areatype="menu-panel"],
1047 toolbarpaletteitem[place="palette"] > #downloads-button {
1048 -moz-image-region: rect(0px, 256px, 32px, 224px);
1051 #downloads-button[cui-areatype="menu-panel"]:hover,
1052 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1053 -moz-image-region: rect(32px, 256px, 64px, 224px);
1056 #add-ons-button[cui-areatype="menu-panel"],
1057 toolbarpaletteitem[place="palette"] > #add-ons-button {
1058 -moz-image-region: rect(0px, 288px, 32px, 256px);
1061 #add-ons-button[cui-areatype="menu-panel"]:hover,
1062 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1063 -moz-image-region: rect(32px, 288px, 64px, 256px);
1066 #open-file-button[cui-areatype="menu-panel"],
1067 toolbarpaletteitem[place="palette"] > #open-file-button {
1068 -moz-image-region: rect(0px, 320px, 32px, 288px);
1071 #open-file-button[cui-areatype="menu-panel"]:hover,
1072 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1073 -moz-image-region: rect(32px, 320px, 64px, 288px);
1076 #save-page-button[cui-areatype="menu-panel"],
1077 toolbarpaletteitem[place="palette"] > #save-page-button {
1078 -moz-image-region: rect(0px, 352px, 32px, 320px);
1081 #save-page-button[cui-areatype="menu-panel"]:hover,
1082 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1083 -moz-image-region: rect(32px, 352px, 64px, 320px);
1086 #sync-button[cui-areatype="menu-panel"],
1087 toolbarpaletteitem[place="palette"] > #sync-button {
1088 -moz-image-region: rect(0px, 384px, 32px, 352px);
1091 #sync-button[cui-areatype="menu-panel"]:hover,
1092 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1093 -moz-image-region: rect(32px, 384px, 64px, 352px);
1096 #sync-button[cui-areatype="menu-panel"][status="active"] {
1097 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1098 -moz-image-region: rect(0px, 32px, 32px, 0px);
1101 #feed-button[cui-areatype="menu-panel"],
1102 toolbarpaletteitem[place="palette"] > #feed-button {
1103 -moz-image-region: rect(0px, 416px, 32px, 384px);
1106 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1107 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1108 -moz-image-region: rect(32px, 416px, 64px, 384px);
1111 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1112 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1113 -moz-image-region: rect(64px, 416px, 96px, 384px);
1116 #social-share-button[cui-areatype="menu-panel"],
1117 toolbarpaletteitem[place="palette"] > #social-share-button {
1118 -moz-image-region: rect(0px, 448px, 32px, 416px);
1121 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1122 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1123 -moz-image-region: rect(32px, 448px, 64px, 416px);
1126 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1127 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1128 -moz-image-region: rect(64px, 448px, 96px, 416px);
1131 #characterencoding-button[cui-areatype="menu-panel"],
1132 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1133 -moz-image-region: rect(0px, 480px, 32px, 448px);
1136 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1137 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1138 -moz-image-region: rect(32px, 480px, 64px, 448px);
1141 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1142 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1143 -moz-image-region: rect(64px, 480px, 96px, 448px);
1146 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1147 -moz-image-region: rect(32px, 480px, 64px, 448px);
1150 #new-window-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #new-window-button {
1152 -moz-image-region: rect(0px, 512px, 32px, 480px);
1155 #new-window-button[cui-areatype="menu-panel"]:hover,
1156 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1157 -moz-image-region: rect(32px, 512px, 64px, 480px);
1160 #e10s-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #e10s-button {
1162 -moz-image-region: rect(0px, 512px, 32px, 480px);
1165 #e10s-button[cui-areatype="menu-panel"]:hover,
1166 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1167 -moz-image-region: rect(32px, 512px, 64px, 480px);
1170 #new-tab-button[cui-areatype="menu-panel"],
1171 toolbarpaletteitem[place="palette"] > #new-tab-button {
1172 -moz-image-region: rect(0px, 544px, 32px, 512px);
1175 #new-tab-button[cui-areatype="menu-panel"]:hover,
1176 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1177 -moz-image-region: rect(32px, 544px, 64px, 512px);
1180 #privatebrowsing-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1182 -moz-image-region: rect(0px, 576px, 32px, 544px);
1185 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1186 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1187 -moz-image-region: rect(32px, 576px, 64px, 544px);
1190 #tabview-button[cui-areatype="menu-panel"],
1191 toolbarpaletteitem[place="palette"] > #tabview-button {
1192 -moz-image-region: rect(0px, 608px, 32px, 576px);
1195 #tabview-button[cui-areatype="menu-panel"]:hover,
1196 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1197 -moz-image-region: rect(32px, 608px, 64px, 576px);
1200 #find-button[cui-areatype="menu-panel"],
1201 toolbarpaletteitem[place="palette"] > #find-button {
1202 -moz-image-region: rect(0px, 640px, 32px, 608px);
1205 #find-button[cui-areatype="menu-panel"]:hover,
1206 toolbarpaletteitem[place="palette"] > #find-button:hover {
1207 -moz-image-region: rect(32px, 640px, 64px, 608px);
1210 #print-button[cui-areatype="menu-panel"],
1211 toolbarpaletteitem[place="palette"] > #print-button {
1212 -moz-image-region: rect(0px, 672px, 32px, 640px);
1215 #print-button[cui-areatype="menu-panel"]:hover,
1216 toolbarpaletteitem[place="palette"] > #print-button:hover {
1217 -moz-image-region: rect(32px, 672px, 64px, 640px);
1220 #fullscreen-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1222 -moz-image-region: rect(0px, 704px, 32px, 672px);
1225 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1227 -moz-image-region: rect(32px, 704px, 64px, 672px);
1230 #developer-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #developer-button {
1232 -moz-image-region: rect(0px, 736px, 32px, 704px);
1235 #developer-button[cui-areatype="menu-panel"]:hover,
1236 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1237 -moz-image-region: rect(32px, 736px, 64px, 704px);
1240 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1241 -moz-image-region: rect(32px, 736px, 64px, 704px);
1244 #preferences-button[cui-areatype="menu-panel"],
1245 toolbarpaletteitem[place="palette"] > #preferences-button {
1246 -moz-image-region: rect(0px, 768px, 32px, 736px);
1249 #preferences-button[cui-areatype="menu-panel"]:hover,
1250 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1251 -moz-image-region: rect(32px, 768px, 64px, 736px);
1254 #email-link-button[cui-areatype="menu-panel"],
1255 toolbarpaletteitem[place="palette"] > #email-link-button {
1256 -moz-image-region: rect(0, 800px, 32px, 768px);
1259 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1260 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1261 -moz-image-region: rect(32px, 800px, 64px, 768px);
1264 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1265 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1266 -moz-image-region: rect(64px, 800px, 96px, 768px);
1269 #sidebar-button[cui-areatype="menu-panel"],
1270 toolbarpaletteitem[place="palette"] > #sidebar-button {
1271 -moz-image-region: rect(0, 864px, 32px, 832px);
1274 #sidebar-button[cui-areatype="menu-panel"]:hover,
1275 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1276 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1277 -moz-image-region: rect(32px, 864px, 64px, 832px);
1280 #panic-button[cui-areatype="menu-panel"],
1281 toolbarpaletteitem[place="palette"] > #panic-button {
1282 -moz-image-region: rect(0, 896px, 32px, 864px);
1285 #panic-button[cui-areatype="menu-panel"]:hover,
1286 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1287 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1288 -moz-image-region: rect(32px, 896px, 64px, 864px);
1291 #web-apps-button[cui-areatype="menu-panel"],
1292 toolbarpaletteitem[place="palette"] > #web-apps-button {
1293 -moz-image-region: rect(0, 928px, 32px, 896px);
1296 #web-apps-button[cui-areatype="menu-panel"]:hover,
1297 toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
1298 -moz-image-region: rect(32px, 928px, 64px, 896px);
1301 #webide-button[cui-areatype="menu-panel"],
1302 toolbarpaletteitem[place="palette"] > #webide-button {
1303 -moz-image-region: rect(0px, 960px, 32px, 928px);
1306 #webide-button[cui-areatype="menu-panel"]:hover,
1307 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1308 -moz-image-region: rect(32px, 960px, 64px, 928px);
1311 #pocket-button[cui-areatype="menu-panel"],
1312 toolbarpaletteitem[place="palette"] > #pocket-button {
1313 -moz-image-region: rect(0px, 992px, 32px, 960px);
1316 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1317 -moz-image-region: rect(32px, 992px, 64px, 960px);
1320 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1321 -moz-image-region: rect(0, 832px, 32px, 800px);
1324 #loop-button[cui-areatype="menu-panel"],
1325 toolbarpaletteitem[place="palette"] > #loop-button {
1326 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1327 -moz-image-region: rect(0, 32px, 32px, 0);
1330 /* Make sure that the state icons are not shown in the customization palette. */
1331 toolbarpaletteitem[place="palette"] > #loop-button {
1332 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1335 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1336 -moz-image-region: rect(0, 160px, 32px, 128px);
1339 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1340 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1341 -moz-image-region: rect(0, 64px, 32px, 32px);
1344 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1345 -moz-image-region: rect(0, 224px, 32px, 192px);
1348 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1349 -moz-image-region: rect(0, 96px, 32px, 64px);
1352 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1353 -moz-image-region: rect(0, 128px, 32px, 96px);
1356 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1357 -moz-image-region: rect(0, 192px, 32px, 160px);
1360 /* Wide panel control icons */
1362 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1363 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1364 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1365 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1366 list-style-image: var(--menupanel-small-list-style-image);
1369 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1370 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1371 -moz-image-region: rect(0px, 32px, 16px, 16px);
1374 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1375 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1376 -moz-image-region: rect(16px, 32px, 32px, 16px);
1379 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1380 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1381 -moz-image-region: rect(32px, 32px, 48px, 16px);
1384 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1385 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1386 -moz-image-region: rect(0px, 48px, 16px, 32px);
1389 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1390 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1391 -moz-image-region: rect(16px, 48px, 32px, 32px);
1394 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1395 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1396 -moz-image-region: rect(32px, 48px, 48px, 32px);
1399 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1400 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1401 -moz-image-region: rect(0px, 64px, 16px, 48px);
1404 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1405 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1406 -moz-image-region: rect(16px, 64px, 32px, 48px);
1409 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1410 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1411 -moz-image-region: rect(32px, 64px, 48px, 48px);
1414 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1415 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1416 -moz-image-region: rect(0px, 80px, 16px, 64px);
1419 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1420 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1421 -moz-image-region: rect(16px, 80px, 32px, 64px);
1424 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1425 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1426 -moz-image-region: rect(32px, 80px, 48px, 64px);
1429 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1430 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1431 -moz-image-region: rect(0px, 96px, 16px, 80px);
1434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1435 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1436 -moz-image-region: rect(16px, 96px, 32px, 80px);
1439 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1440 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1441 -moz-image-region: rect(32px, 96px, 48px, 80px);
1444 #add-share-provider {
1445 list-style-image: var(--menupanel-small-list-style-image);
1446 -moz-image-region: rect(0px, 96px, 16px, 80px);
1449 /* === END menupanel.inc.css === */
1451 .toolbarbutton-1:not([type="menu-button"]) {
1452 -moz-box-orient: vertical;
1456 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1462 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463 .toolbarbutton-1[disabled="true"]:hover:active,
1464 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1468 .toolbarbutton-1:hover:active,
1469 .toolbarbutton-1[open="true"],
1470 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1472 padding-bottom: 0px;
1473 -moz-padding-start: 3px;
1474 -moz-padding-end: 1px;
1477 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1478 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1479 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1480 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1481 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1484 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1485 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1488 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1489 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1492 .toolbarbutton-1 > .toolbarbutton-icon,
1493 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1497 #nav-bar .toolbarbutton-1,
1498 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1501 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1502 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1503 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1506 #nav-bar #PanelUI-menu-button {
1507 /* -moz-padding-start: 7px;
1508 -moz-padding-end: 5px;*/
1511 #nav-bar .toolbarbutton-1[type=panel],
1512 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1513 /* padding-left: 5px;
1514 padding-right: 5px;*/
1517 #nav-bar .toolbarbutton-1 > menupopup {
1518 /* margin-top: -3px;*/
1521 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1525 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1526 /* -moz-padding-end: 0;*/
1529 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1530 /* -moz-padding-start: 0;
1531 -moz-box-align: center;*/
1534 .findbar-button > .toolbarbutton-text,
1535 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1536 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1538 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1539 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1540 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1541 /* padding: 2px 6px;
1543 border-color: transparent;
1544 transition-property: background-color, border-color;
1545 transition-duration: 150ms;*/
1548 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1555 /* Help SDK icons fit: */
1556 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1557 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1561 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1562 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1566 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1567 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1568 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1569 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1570 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1571 /* -moz-padding-end: 17px;*/
1574 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1577 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1580 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1583 #nav-bar .toolbaritem-combined-buttons {
1584 /* margin-left: 2px;
1585 margin-right: 2px;*/
1588 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1593 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1594 #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 {
1600 -moz-margin-end: -1px;
1604 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1607 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1608 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1612 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1613 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1614 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1615 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1618 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1619 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1620 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1621 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1622 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1623 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1626 #TabsToolbar .toolbarbutton-1,
1627 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1628 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1629 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1632 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1633 #TabsToolbar .toolbarbutton-1[open],
1634 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1635 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1636 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1639 /* unified back/forward button */
1642 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1645 #forward-button > menupopup {
1646 margin-top: 1px !important;
1649 #forward-button > .toolbarbutton-icon {
1650 background-clip: padding-box !important;
1651 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1652 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1656 -moz-margin-start: -4px !important;
1661 border-radius: 0 10000px 10000px 0;
1664 #forward-button:-moz-locale-dir(rtl) {
1665 border-radius: 10000px 0 0 10000px;
1668 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1669 transition: margin-left 150ms ease-out;
1672 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1673 margin-left: -27px !important;
1676 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1677 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1678 transition-delay: 100s;
1681 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1682 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1683 margin-left: -27.01px !important;
1687 /* padding-top: 3px !important;
1688 padding-bottom: 3px !important;
1689 -moz-padding-start: 5px !important;
1690 -moz-padding-end: 0 !important;*/
1693 border-radius: 10000px;
1697 margin-bottom: -2px;
1700 #back-button:-moz-locale-dir(rtl) {
1703 #back-button > menupopup {
1704 margin-top: -1px !important;
1707 #back-button > .toolbarbutton-icon {
1708 border-radius: 10000px !important;
1709 background-clip: padding-box !important;
1710 /* background-color: hsla(210,25%,98%,.08) !important;
1711 padding: 6px !important;
1712 border-style: none !important;
1713 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1714 0 0 0 1px hsla(210,4%,10%,.25);*/
1715 transition-property: background-color, box-shadow !important;
1716 transition-duration: 250ms !important;
1719 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1720 /* background-color: hsla(210,4%,10%,.08) !important;*/
1723 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1724 #back-button[open="true"] > .toolbarbutton-icon {
1725 /* background-color: hsla(210,4%,10%,.12) !important;
1726 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1727 0 0 0 1px hsla(210,4%,10%,.25),
1728 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1731 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1732 transform: scaleX(-1);
1735 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1736 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1737 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1740 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1741 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1742 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1745 #home-button.bookmark-item {
1746 list-style-image: url("chrome://browser/skin/Toolbar.png");
1749 #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),
1750 #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),
1751 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1752 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1753 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1754 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1755 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1758 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1761 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1762 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1763 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1767 #downloads-button > .toolbarbutton-icon {
1771 /* tabview menu item */
1774 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1775 -moz-image-region: rect(1px, 89px, 17px, 73px);
1778 #menu_tabview[groups="0"] {
1779 -moz-image-region: rect(1px, 17px, 17px, 1px);
1782 #menu_tabview[groups="1"] {
1783 -moz-image-region: rect(1px, 35px, 17px, 19px);
1786 #menu_tabview[groups="2"] {
1787 -moz-image-region: rect(1px, 53px, 17px, 37px);
1790 #menu_tabview[groups="3"] {
1791 -moz-image-region: rect(1px, 71px, 17px, 55px);
1794 /* undo close tab menu item */
1795 #alltabs_undoCloseTab {
1796 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1799 @media (min-resolution: 1.1dppx) {
1800 #alltabs_undoCloseTab {
1801 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1803 #alltabs_undoCloseTab > .toolbarbutton-icon {
1808 /* zoom control text (reset) button special case: */
1810 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1811 /* To make this line up with the icons, it needs the same height (18px) +
1812 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1813 * increase in text sizes would break things...
1818 /* ::::: fullscreen window controls ::::: */
1821 -moz-margin-start: 4px;
1827 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1832 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1835 #minimize-button:hover {
1836 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1840 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1843 #restore-button:hover {
1844 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1848 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1851 #close-button:hover {
1852 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1855 /* ::::: Location Bar ::::: */
1858 .searchbar-textbox {
1861 -moz-margin-start: 3px;
1865 /* make color as light as possible to deal with dark non-domain parts */
1869 /* overlap the urlbar's border */
1870 #PopupAutoCompleteRichResult {
1874 #urlbar:-moz-lwtheme,
1875 .searchbar-textbox:-moz-lwtheme {
1876 /* background-color: rgba(255,255,255,.8);
1877 @navbarTextboxCustomBorder@
1881 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1882 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1883 /* background-color: rgba(255,255,255,.9);*/
1886 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1887 .searchbar-textbox:-moz-lwtheme[focused] {
1888 /* background-color: white;*/
1891 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1892 /* -moz-border-start: none;
1896 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1897 /* border-top-left-radius: 0;
1898 border-bottom-left-radius: 0; */
1901 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1902 /* border-top-right-radius: 0;
1903 border-bottom-right-radius: 0; */
1906 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1907 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1908 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1911 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1912 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1913 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1914 transform: scaleX(-1);
1917 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1918 -moz-box-direction: reverse;
1921 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1922 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1927 -moz-box-orient: horizontal;
1928 -moz-box-align: stretch;
1931 .urlbar-textbox-container {
1932 -moz-box-align: stretch;
1936 -moz-margin-start: 0;
1940 -moz-box-align: center;
1947 .search-go-container {
1951 .search-go-container > .search-go-button {
1955 #urlbar-search-footer {
1956 border-top: 1px solid #A09090;
1959 #urlbar-search-settings {
1962 #urlbar-search-settings:hover {
1965 #urlbar-search-settings:hover:active {
1968 #urlbar-search-splitter {
1970 -moz-margin-start: -3px;
1972 background: transparent;
1975 #urlbar-search-splitter + #urlbar-container > #urlbar,
1976 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1977 -moz-margin-start: 0;
1980 #urlbar-display-box {
1984 -moz-border-end: 1px solid #9C9CFF;
1985 -moz-margin-end: 3px;
1988 -moz-margin-start: 0;
1992 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1994 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1995 border-bottom: 1px solid #A09090;
1996 background-color: #000000;
1998 -moz-padding-start: 44px;
1999 -moz-padding-end: 6px;
2000 background-image: url("chrome://browser/skin/info.svg");
2001 background-clip: padding-box;
2002 background-position: 20px center;
2003 background-repeat: no-repeat;
2004 background-size: 16px 16px;
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2008 background-position: right 20px center;
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2016 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2017 -moz-margin-start: 0;
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2021 -moz-appearance: none;
2026 -moz-margin-start: 10px;
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2032 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2035 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2038 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2041 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2044 min-width: calc(54px + 11ch);
2049 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2050 var(--identity-box-verified-background-color);
2053 #identity-box:-moz-focusring {
2054 outline: 1px dotted #008484;
2055 outline-offset: -1px;
2058 #identity-box.verifiedDomain:-moz-focusring,
2059 #identity-box.verifiedIdentity:-moz-focusring {
2060 outline-color: #000000;
2063 /* Location bar dropmarker */
2065 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2066 background-color: transparent;
2069 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2070 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2071 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2076 .urlbar-history-dropmarker:hover {
2079 .urlbar-history-dropmarker:hover:active,
2080 .urlbar-history-dropmarker[open="true"] {
2083 /* page proxy icon */
2085 /* === BEGIN identity-block.inc.css === */
2088 --identity-box-verified-color: #008484;
2089 /* Default theme does different color per channel, we can't as they do it build-time. */
2090 --identity-box-chrome-color: #9C9CFF;
2092 border-inline-end: 1px solid --urlbar-separator-color);
2096 margin-inline-end: 4px;
2098 /* The latter two properties have a transition to handle the delayed hiding of
2099 the forward button when hovered. */
2100 transition: background-color 150ms ease, padding-left, padding-right;
2103 #identity-box:-moz-locale-dir(ltr) {
2104 border-top-right-radius: 0;
2105 border-bottom-right-radius: 0;
2108 #identity-box:-moz-locale-dir(rtl) {
2109 border-top-left-radius: 0;
2110 border-bottom-left-radius: 0;
2113 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2114 color: var(--identity-box-chrome-color);
2115 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2118 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2119 color: var(--identity-box-verified-color);
2120 -moz-border-end: 1px solid var(--identity-box-verified-color);
2123 #notification-popup-box:not([hidden]) + #identity-box {
2124 padding-inline-start: 10px !important;
2128 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2129 /* border-radius: 0; */
2130 -moz-padding-start: 2px;
2131 -moz-padding-end: 2px;
2132 -moz-margin-end: 1px;
2135 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2136 #notification-popup-box[hidden] + #identity-box {
2137 padding-inline-start: 2px;
2140 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2141 #notification-popup-box[hidden] + #identity-box {
2142 /* Forward button hiding is delayed when hovered, so we should use the same
2143 delay for the identity box. We handle both horizontal paddings (for LTR and
2144 RTL), the latter two delays here are for padding-left and padding-right. */
2145 transition-delay: 0s, 100s, 100s;
2148 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2149 #notification-popup-box[hidden] + #identity-box {
2150 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2151 padding-inline-start: 2.01px;
2154 /* TRACKING PROTECTION ICON */
2156 #tracking-protection-icon {
2159 margin-inline-start: 0;
2160 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2164 #tracking-protection-icon[state="loaded-tracking-content"] {
2165 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2168 #tracking-protection-icon[animate] {
2169 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2172 #tracking-protection-icon:not([state]) {
2173 margin-inline-start: -18px;
2174 pointer-events: none;
2176 /* Only animate the shield in, when it disappears hide it immediately. */
2180 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2181 visibility: collapse;
2184 /* MAIN IDENTITY ICON */
2186 #page-proxy-favicon {
2189 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2193 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2194 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2197 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2198 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2199 list-style-image: url("chrome://browser/skin/identity-secure.svg");
2202 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2203 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2206 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2207 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2208 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2209 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2212 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2213 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2216 #page-proxy-favicon[pageproxystate="invalid"] {
2220 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2221 list-style-image: url("chrome://branding/content/icon64.png");
2224 #identity-popup-brandName {
2228 margin-bottom: .5em;
2231 #identity-popup-content-box {
2235 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2236 -moz-image-region: inherit;
2237 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2243 /* MAIN IDENTITY ICON */
2248 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2251 #identity-box:hover > #identity-icon,
2252 #identity-box[open=true] > #identity-icon {
2253 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2256 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2257 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2260 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2264 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2265 -moz-image-region: inherit;
2266 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2272 /* TRACKING PROTECTION ICON */
2274 #tracking-protection-icon {
2277 margin-inline-start: 2px;
2278 margin-inline-end: 0;
2279 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2283 #tracking-protection-icon[state="loaded-tracking-content"] {
2284 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2287 #tracking-protection-icon[animate] {
2288 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2291 #tracking-protection-icon:not([state]) {
2292 margin-inline-end: -18px;
2293 pointer-events: none;
2295 /* Only animate the shield in, when it disappears hide it immediately. */
2299 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2300 visibility: collapse;
2303 /* CONNECTION ICON */
2308 margin-inline-start: 2px;
2309 visibility: collapse;
2312 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2313 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2314 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2315 visibility: visible;
2318 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2319 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2320 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2321 visibility: visible;
2324 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2325 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2326 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2327 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2328 visibility: visible;
2331 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2332 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2333 visibility: visible;
2336 /* === END identity-block.inc.css === */
2338 #page-proxy-favicon {
2339 -moz-image-region: rect(0, 16px, 16px, 0);
2342 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2343 /* -moz-margin-end: 1px;*/
2346 #identity-box:hover > #page-proxy-favicon {
2347 -moz-image-region: rect(0, 32px, 16px, 16px);
2350 #identity-box:hover:active > #page-proxy-favicon,
2351 #identity-box[open=true] > #page-proxy-favicon {
2352 -moz-image-region: rect(0, 48px, 16px, 32px);
2355 #identity-box:hover {
2356 background-color: #FFCF00;
2360 #identity-box:hover:active,
2361 #identity-box[open=true] {
2362 background-color: #FF9F00;
2366 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2367 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2369 background-color: #9C9CFF;
2373 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2376 background-color: #008484;
2382 #treecolAutoCompleteImage {
2386 .ac-result-type-bookmark,
2387 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2388 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2389 -moz-image-region: rect(0px 16px 16px 0px);
2394 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2395 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2396 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2399 .ac-result-type-keyword,
2400 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2401 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2402 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2407 .ac-result-type-keyword[selected="true"],
2408 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2409 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2410 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2413 .ac-result-type-tag,
2414 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2415 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2421 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2422 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2426 .ac-extra > .ac-comment,
2437 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2438 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2439 -moz-image-region: rect(0, 16px, 16px, 0);
2445 @media (min-resolution: 1.1dppx) {
2446 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2447 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2448 -moz-image-region: rect(0, 32px, 32px, 0);
2452 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2453 -moz-image-region: rect(16px, 16px, 32px, 0);
2456 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2460 .ac-comment[selected="true"],
2461 .ac-url-text[selected="true"],
2462 .ac-action-text[selected="true"] {
2463 color: inherit !important;
2466 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2467 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2473 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2474 border-top: 1px solid #9C9CFF;
2477 /* combined go/reload/stop button in location bar */
2480 #urlbar-reload-button,
2481 #urlbar-stop-button {
2483 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2484 /* padding: 0 9px;*/
2485 margin-inline-start: 0px;
2486 border-inline-start: 1px solid var(--urlbar-separator-color);
2487 border-image: linear-gradient(transparent 15%,
2488 var(--urlbar-separator-color) 15%,
2489 var(--urlbar-separator-color) 85%,
2491 border-image-slice: 1;
2494 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2495 border-top-left-radius: 0px;
2496 border-bottom-left-radius: 0px;
2499 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2500 border-top-right-radius: 0px;
2501 border-bottom-right-radius: 0px;
2504 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2505 #urlbar-reload-button:not(:hover) {
2506 -moz-border-start-style: none;
2507 -moz-padding-start: 3px;
2510 #urlbar-reload-button {
2511 -moz-image-region: rect(0px, 14px, 14px, 0px);
2514 #urlbar-reload-button[disabled=true] {
2515 -moz-image-region: rect(28px, 14px, 42px, 0px);
2518 #urlbar-reload-button:not([disabled=true]):hover {
2519 -moz-image-region: rect(14px, 14px, 28px, 0px);
2522 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2523 transform: scaleX(-1);
2527 -moz-image-region: rect(0, 42px, 14px, 28px);
2530 #urlbar-go-button:hover {
2531 -moz-image-region: rect(14px, 42px, 28px, 28px);
2534 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2535 transform: scaleX(-1);
2538 #urlbar-stop-button {
2539 -moz-image-region: rect(0px, 28px, 14px, 14px);
2542 #urlbar-stop-button:hover {
2543 -moz-image-region: rect(14px, 28px, 28px, 14px);
2546 @media (min-resolution: 1.1dppx) {
2548 #urlbar-reload-button,
2549 #urlbar-stop-button {
2550 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2553 #urlbar-go-button > .toolbarbutton-icon,
2554 #urlbar-reload-button > .toolbarbutton-icon,
2555 #urlbar-stop-button > .toolbarbutton-icon {
2560 -moz-image-region: rect(0, 84px, 28px, 56px);
2563 #urlbar-go-button:hover {
2564 -moz-image-region: rect(28px, 84px, 56px, 56px);
2567 #urlbar-go-button:hover:active {
2568 -moz-image-region: rect(56px, 84px, 84px, 56px);
2571 #urlbar-reload-button {
2572 -moz-image-region: rect(0, 28px, 28px, 0);
2575 #urlbar-reload-button:not([disabled]):hover {
2576 -moz-image-region: rect(28px, 28px, 56px, 0);
2579 #urlbar-reload-button:not([disabled]):hover:active {
2580 -moz-image-region: rect(56px, 28px, 84px, 0);
2583 #urlbar-stop-button {
2584 -moz-image-region: rect(0, 56px, 28px, 28px);
2587 #urlbar-stop-button:not([disabled]):hover {
2588 -moz-image-region: rect(28px, 56px, 56px, 28px);
2591 #urlbar-stop-button:hover:active {
2592 -moz-image-region: rect(56px, 56px, 84px, 28px);
2596 /* popup blocker button */
2598 #page-report-button {
2599 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2600 -moz-image-region: rect(0, 16px, 16px, 0);
2603 #page-report-button:hover ,
2604 #page-report-button:hover:active,
2605 #page-report-button[open="true"] {
2606 -moz-image-region: rect(0, 32px, 16px, 16px);
2609 /* Reader mode button */
2611 #reader-mode-button {
2612 list-style-image: url("chrome://browser/skin/readerMode.svg");
2613 -moz-image-region: rect(0, 16px, 16px, 0);
2616 #reader-mode-button:hover,
2617 #reader-mode-button[readeractive]:hover {
2618 -moz-image-region: rect(0, 32px, 16px, 16px);
2621 #reader-mode-button:hover:active,
2622 #reader-mode-button[readeractive] {
2623 -moz-image-region: rect(0, 48px, 16px, 32px);
2626 /* social share panel */
2628 .social-share-frame {
2635 background-color: white;
2636 background-repeat: no-repeat;
2637 background-position: center center;
2639 #share-container[loading] {
2640 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2642 #share-container > browser {
2643 transition: opacity 150ms ease-in-out;
2646 #share-container[loading] > browser {
2650 .social-share-toolbar {
2651 border-bottom: 1px solid #9C9CFF;
2655 #social-share-provider-buttons {
2660 .share-provider-button {
2665 .share-provider-button > .toolbarbutton-text {
2668 .share-provider-button > .toolbarbutton-icon {
2674 /* fixup corners for share panel */
2675 .social-panel > .social-panel-frame {
2676 border-radius: inherit;
2679 #social-share-panel {
2685 .social-share-frame {
2686 border-top-left-radius: 0;
2687 border-bottom-left-radius: inherit;
2688 border-top-right-radius: 0;
2689 border-bottom-right-radius: inherit;
2692 #social-share-panel > .social-share-toolbar {
2693 border-top-left-radius: inherit;
2694 border-top-right-radius: inherit;
2697 #social-share-provider-buttons {
2698 border-top-left-radius: inherit;
2699 border-top-right-radius: inherit;
2702 /* social recommending panel */
2704 #social-mark-button {
2705 -moz-image-region: rect(0, 16px, 16px, 0);
2708 /* bookmarks menu-button */
2710 #bookmarks-menu-button.bookmark-item {
2711 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2712 -moz-image-region: rect(0px 16px 16px 0px);
2715 #bookmarks-menu-button.bookmark-item[starred] {
2716 -moz-image-region: rect(0px 32px 16px 16px);
2719 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2721 padding-bottom: 2px;
2724 #BMB_bookmarksPopup[side="top"],
2725 #BMB_bookmarksPopup[side="bottom"] {
2727 margin-right: -20px;
2730 #BMB_bookmarksPopup[side="left"],
2731 #BMB_bookmarksPopup[side="right"] {
2733 margin-bottom: -20px;
2736 /* bookmarking panel */
2738 #editBookmarkPanelStarIcon {
2739 list-style-image: url("chrome://browser/skin/places/starred48.png");
2744 #editBookmarkPanelStarIcon[unstarred] {
2745 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2748 #editBookmarkPanelTitle {
2752 #editBookmarkPanelHeader,
2753 #editBookmarkPanelContent {
2754 margin-bottom: .5em;
2757 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2758 #editBMPanel_folderTree {
2765 border-top: 1px solid #9C9CFF;
2766 border-bottom-left-radius: 5px;
2767 border-bottom-right-radius: 5px;
2771 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2772 -moz-margin-end: 10px;
2773 vertical-align: middle;
2776 .panel-promo-closebutton {
2777 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2778 -moz-margin-end: -3px;
2782 .panel-promo-closebutton:hover {
2783 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2786 .panel-promo-closebutton:hover:active {
2787 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2790 .panel-promo-closebutton > .toolbarbutton-text {
2794 /* ::::: content area ::::: */
2797 background-color: #9C9CFF;
2802 background-color: #000000;
2806 -moz-margin-start: 0;
2815 -moz-padding-start: 0px;
2818 #sidebar-header > .close-icon {
2819 /* padding: 4px 2px;
2822 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2825 #sidebar-header > .close-icon:hover,
2826 #sidebar-header > .close-icon:hover:active {
2827 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2830 #sidebar-splitter:-moz-locale-dir(ltr),
2831 #sidebar:-moz-locale-dir(ltr) {
2832 border-radius: 0 5px 0 0;
2835 #sidebar-splitter:-moz-locale-dir(rtl),
2836 #sidebar:-moz-locale-dir(rtl) {
2837 border-radius: 5px 0 0 0;
2840 .browserContainer > findbar {
2842 background-color: -moz-dialog;
2843 color: -moz-DialogText;
2852 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2855 #TabsToolbar .toolbar-holder {
2856 background-color: #000000; /* correct effect of being an actual toolbar */
2859 #main-window[disablechrome] #TabsToolbar,
2860 #TabsToolbar[tabsontop="false"] {
2861 border-bottom: 1px solid #008484;
2864 /* === BEGIN tabs.inc.css === */
2867 /* --tab-toolbar-navbar-overlap: 1px; */
2868 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2869 /* --tab-min-height: 31px; */
2872 /* --tab-stroke-background-size: auto 100%; */
2876 .tabs-newtab-button,
2877 #TabsToolbar > #new-tab-button {
2882 padding: 1px 4px 2px;
2885 .tabbrowser-tab:first-of-type {
2886 -moz-margin-start: 2px;
2889 .tabs-newtab-button,
2890 #TabsToolbar > #new-tab-button {
2891 border-radius: 8px 8px 0px 0px;
2892 -moz-margin-start: 0;
2895 .tabs-newtab-button:not(:hover),
2896 #TabsToolbar > #new-tab-button:not(:hover) {
2897 background-color: #C09070;
2900 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2901 .tabbrowser-tab[visuallyselected=true] {
2902 /* position: relative;
2906 .tab-background-middle {
2912 .tab-content[pinned] {
2925 -moz-margin-end: 3px;
2929 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2935 /* margin-top: -12px; */
2936 -moz-margin-start: -16px;
2940 .tab-icon-overlay[crashed] {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2944 .tab-icon-overlay[soundplaying],
2945 .tab-icon-overlay[muted]:not([crashed]) {
2949 .tab-icon-overlay[soundplaying]:hover,
2950 .tab-icon-overlay[muted]:hover {
2951 background-color: #FFCF00;
2954 .tab-icon-overlay[soundplaying] {
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2959 .tab-icon-overlay[muted]:not([crashed]) {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2963 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2968 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2972 .tab-throbber[busy] {
2973 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2976 .tab-throbber[progress] {
2977 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2980 .tab-throbber[pinned],
2981 .tab-icon-image[pinned] {
2982 -moz-margin-start: 2px;
2983 -moz-margin-end: 2px;
2987 /* this needs to add up to the 16px of the icon image */
2989 margin-top: 2px !important;
2990 margin-bottom: 2px !important;
2994 -moz-margin-start: 4px;
3000 .tab-icon-sound[muted] {
3001 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3004 .tab-icon-sound[muted]:hover {
3005 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3008 .tab-icon-sound[muted]:hover:active {
3009 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3012 .tab-icon-sound[soundplaying] {
3013 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3016 .tab-icon-sound[soundplaying]:hover {
3017 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3020 .tab-icon-sound[soundplaying]:hover:active {
3021 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3024 .tab-icon-sound[muted] {
3025 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3028 .tab-icon-sound[muted]:hover {
3029 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3032 .tab-icon-sound[muted]:hover:active {
3033 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3036 .tab-icon-sound[visuallyselected=true][soundplaying] {
3037 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3040 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3041 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3044 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3045 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3048 .tab-icon-sound[visuallyselected=true][muted] {
3049 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3052 .tab-icon-sound[visuallyselected=true][muted]:hover {
3053 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3056 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3057 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3060 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3061 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3064 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3065 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3068 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3069 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3072 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3073 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3076 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3077 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3080 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3081 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3090 .tabs-newtab-button {
3091 /* overlap the tab curves */
3094 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3098 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3102 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3106 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3112 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3113 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3116 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3117 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3120 .tab-background-start[visuallyselected=true]::after,
3121 .tab-background-start[visuallyselected=true]::before,
3122 .tab-background-start,
3123 .tab-background-end,
3124 .tab-background-end[visuallyselected=true]::after,
3125 .tab-background-end[visuallyselected=true]::before {
3128 .tabbrowser-tab:not([visuallyselected=true]),
3129 .tabbrowser-tab:-moz-lwtheme {
3132 /* tabbrowser-tab focus ring */
3133 .tabbrowser-tab:focus {
3134 outline: 1px dotted;
3139 .tabbrowser-tab[visuallyselected="true"] {
3142 /* End selected tab */
3144 /* Tab pointer-events */
3147 pointer-events: none;
3150 .tab-background-middle,
3151 .tabs-newtab-button,
3152 .tab-icon-overlay[soundplaying],
3153 .tab-icon-overlay[muted]:not([crashed]),
3156 pointer-events: auto;
3161 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3162 background-color: #E7ADE7;
3165 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3166 background-color: #3333FF;
3170 /* Tab separators */
3172 .tabbrowser-tab::after,
3173 .tabbrowser-tab::before {
3175 -moz-margin-start: -1px;
3176 background-image: linear-gradient(transparent 5px,
3178 currentColor calc(100% - 4px),
3179 transparent calc(100% - 4px));
3183 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3184 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3188 /* Also show separators beside the selected tab when dragging it. */
3190 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3191 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3192 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3197 /* New tab button */
3199 .tabs-newtab-button {
3201 /* width: calc(36px + var(--tab-curve-width)); */
3204 /* === END tabs.inc.css === */
3208 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3209 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3210 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3212 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3213 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3216 /* Tab DnD indicator */
3217 .tab-drop-indicator {
3218 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3219 margin-bottom: -11px;
3222 /* Tab close button */
3224 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3227 .tab-close-button:hover,
3228 .tab-close-button:hover[selected="true"] {
3229 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3232 .tab-close-button:hover:active,
3233 .tab-close-button:hover:active[selected="true"] {
3234 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3237 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3239 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3240 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3244 background-origin: border-box;
3247 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3249 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3250 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3253 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3254 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3257 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3258 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3259 /* transform: scaleX(-1);*/
3262 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3263 transition: 1s background-color ease-out;
3266 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3267 background-color: #008484;
3270 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3271 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3272 /* border-width: 0 2px 0 0;
3273 border-style: solid;
3274 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3277 .tabs-newtab-button > .toolbarbutton-icon {
3279 margin-bottom: -1px;
3282 .tabs-newtab-button,
3283 #TabsToolbar > #new-tab-button,
3284 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3285 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3286 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3287 -moz-image-region: rect(0, 16px, 18px, 0);
3290 .tabs-newtab-button,
3291 .tabs-newtab-button:hover,
3292 #TabsToolbar > #new-tab-button,
3293 #TabsToolbar > #new-tab-button:hover {
3294 -moz-image-region: rect(0, 32px, 18px, 16px);
3297 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3298 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3299 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3300 .tabs-newtab-button:-moz-lwtheme-brighttext,
3301 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3302 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3305 #TabsToolbar > #new-tab-button {
3310 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3313 #alltabs-button:hover,
3314 #alltabs-button:hover:active,
3315 #alltabs-button[open="true"] {
3316 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3319 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3320 #alltabs-button:-moz-lwtheme-brighttext {
3323 #alltabs-button > .toolbarbutton-icon {
3327 #alltabs-button > .toolbarbutton-menu-dropmarker {
3331 /* All tabs menupopup */
3332 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3333 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3334 -moz-image-region: auto;
3337 .alltabs-item[selected="true"] {
3341 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3342 list-style-image: url("chrome://global/skin/icons/loading.gif");
3345 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3346 background-color: #402800;
3349 toolbarbutton.chevron {
3350 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3353 toolbarbutton.chevron:hover {
3354 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3357 toolbar[brighttext] toolbarbutton.chevron {
3358 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3361 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3362 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3363 transform: scaleX(-1);
3366 toolbarbutton.chevron > .toolbarbutton-text,
3367 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3371 toolbarbutton.chevron > .toolbarbutton-icon {
3375 #sidebar-throbber[loading="true"] {
3376 list-style-image: url("chrome://global/skin/icons/loading.gif");
3377 -moz-margin-end: 4px;
3380 /* Bookmarks toolbar */
3381 #PlacesToolbarDropIndicator {
3382 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3385 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3386 background-color: #008484 !important;
3387 color: #FFCF00 !important;
3390 /* rules for menupopup drop indicators */
3391 .menupopup-drop-indicator-bar {
3393 /* these two margins must together compensate the indicator's height */
3395 margin-bottom: -1px;
3398 .menupopup-drop-indicator {
3399 list-style-image: none;
3401 -moz-margin-end: -4em;
3402 background-color: #008484;
3405 /* === BEGIN notification-icons.inc.css === */
3407 .popup-notification-icon {
3410 -moz-margin-end: 10px;
3413 .popup-notification-icon[popupid="geolocation"] {
3414 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3417 .popup-notification-icon[popupid="push"] {
3418 list-style-image: url(chrome://browser/skin/Push-64.png);
3421 .popup-notification-icon[popupid="xpinstall-disabled"],
3422 .popup-notification-icon[popupid="addon-install-blocked"],
3423 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3424 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3427 .popup-notification-icon[popupid="addon-progress"] {
3428 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3431 .popup-notification-icon[popupid="addon-install-failed"] {
3432 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3435 .popup-notification-icon[popupid="addon-install-confirmation"] {
3436 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3439 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3440 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3443 .popup-notification-icon[popupid="addon-install-complete"] {
3444 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3447 .popup-notification-icon[popupid="addon-install-restart"] {
3448 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3451 .popup-notification-icon[popupid="click-to-play-plugins"] {
3452 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3455 .popup-notification-icon[popupid="web-notifications"] {
3456 list-style-image: url("chrome://browser/skin/notification-64.png");
3459 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3460 .popup-notification-icon[popupid*="offline-app-requested"],
3461 .popup-notification-icon[popupid="offline-app-usage"] {
3462 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3465 .popup-notification-icon[popupid="password"] {
3466 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3469 .popup-notification-icon[popupid="webapps-install-progress"],
3470 .popup-notification-icon[popupid="webapps-install"] {
3471 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3474 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3475 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3476 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3479 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3480 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3481 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3484 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3485 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3486 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3489 .popup-notification-icon[popupid="pointerLock"] {
3490 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3493 /* Notification icon box */
3494 #notification-popup .panel-promo-box {
3495 /* margin: 10px -10px -10px; */
3498 #notification-popup-box {
3500 background-color: #000000;
3501 background-clip: padding-box;
3504 border-radius: 3px 0 0 3px;
3505 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3506 -moz-margin-end: -8px;
3507 border-right-width: 8px;
3510 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3511 /* padding-left: 7px; */
3514 /* This changes the direction of the main notification box on the url bar. */
3515 #notification-popup-box:-moz-locale-dir(rtl),
3516 /* This adds a second flip for the notification anchors, as they don't switch direction
3518 .notification-anchor-icon:-moz-locale-dir(rtl) {
3519 transform: scaleX(-1);
3522 /* For the anchor icons in the chat window, we don't have the notification popup box,
3523 so we need to cancel the RTL transform. */
3524 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3528 .notification-anchor-icon {
3529 list-style-image: url("chrome://global/skin/icons/information-16.png");
3536 .notification-anchor-icon:-moz-focusring {
3537 outline: 1px dotted #008484;
3540 .identity-notification-icon,
3541 #identity-notification-icon {
3542 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3545 .geo-notification-icon,
3546 #geo-notification-icon {
3547 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3550 #push-notification-icon {
3551 list-style-image: url(chrome://browser/skin/Push-16.png);
3554 #addons-notification-icon {
3555 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3558 #addons-notification-icon:hover {
3559 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3562 #addons-notification-icon:hover:active {
3563 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3566 .indexedDB-notification-icon,
3567 #indexedDB-notification-icon {
3568 list-style-image: url("chrome://global/skin/icons/question-16.png");
3571 #password-notification-icon {
3572 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3575 #login-fill-notification-icon {
3576 /* Temporary icon until the capture and fill doorhangers are unified. */
3577 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3578 transform: scaleX(-1);
3581 #webapps-notification-icon {
3582 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3585 #plugins-notification-icon {
3586 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3589 #plugins-notification-icon.plugin-hidden {
3590 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3593 #plugins-notification-icon.plugin-blocked {
3594 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3597 #plugins-notification-icon {
3598 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3601 #plugins-notification-icon:hover {
3602 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3605 #notification-popup-box[hidden] {
3606 /* Override display:none to make the pluginBlockedNotification animation work
3607 when showing the notification repeatedly. */
3609 visibility: collapse;
3612 #plugins-notification-icon.plugin-blocked[showing] {
3613 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3616 @keyframes pluginBlockedNotification {
3625 .webRTC-shareDevices-notification-icon,
3626 #webRTC-shareDevices-notification-icon {
3627 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3630 .webRTC-sharingDevices-notification-icon,
3631 #webRTC-sharingDevices-notification-icon {
3632 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3635 .webRTC-shareMicrophone-notification-icon,
3636 #webRTC-shareMicrophone-notification-icon {
3637 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3640 .webRTC-sharingMicrophone-notification-icon,
3641 #webRTC-sharingMicrophone-notification-icon {
3642 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3645 .webRTC-shareScreen-notification-icon,
3646 #webRTC-shareScreen-notification-icon {
3647 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3650 .webRTC-sharingScreen-notification-icon,
3651 #webRTC-sharingScreen-notification-icon {
3652 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3655 .web-notifications-notification-icon,
3656 #web-notifications-notification-icon {
3657 list-style-image: url("chrome://browser/skin/notification-16.png");
3660 #pointerLock-notification-icon {
3661 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3664 .translate-notification-icon,
3665 #translate-notification-icon {
3666 list-style-image: url("chrome://browser/skin/translation-16.png");
3667 -moz-image-region: rect(0px, 16px, 16px, 0px);
3670 .translated-notification-icon,
3671 #translated-notification-icon {
3672 list-style-image: url("chrome://browser/skin/translation-16.png");
3673 -moz-image-region: rect(0px, 32px, 16px, 16px);
3676 .popup-notification-icon[popupid="servicesInstall"] {
3677 list-style-image: url("chrome://browser/skin/social/services-64.png");
3679 #servicesInstall-notification-icon {
3680 list-style-image: url("chrome://browser/skin/social/services-16.png");
3683 /* EME notifications */
3685 .popup-notification-icon[popupid="drmContentPlaying"],
3686 #eme-notification-icon {
3687 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3690 #eme-notification-icon:hover:active {
3691 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3694 #eme-notification-icon[firstplay=true] {
3695 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3698 @keyframes emeTeachingMoment {
3699 0% {transform: translateX(0); }
3700 25% {transform: translateX(3px) }
3701 75% {transform: translateX(-3px) }
3702 100% { transform: translateX(0); }
3705 /* HiDPI notification icons */
3706 @media (min-resolution: 1.1dppx) {
3707 /* #notification-popup-box {
3708 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3711 .notification-anchor-icon {
3712 list-style-image: url(chrome://global/skin/icons/information-32.png);
3715 .webRTC-shareDevices-notification-icon,
3716 #webRTC-shareDevices-notification-icon {
3717 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3720 .webRTC-sharingDevices-notification-icon,
3721 #webRTC-sharingDevices-notification-icon {
3722 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3725 .webRTC-shareMicrophone-notification-icon,
3726 #webRTC-shareMicrophone-notification-icon {
3727 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3730 .webRTC-sharingMicrophone-notification-icon,
3731 #webRTC-sharingMicrophone-notification-icon {
3732 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3735 .webRTC-shareScreen-notification-icon,
3736 #webRTC-shareScreen-notification-icon {
3737 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3740 .webRTC-sharingScreen-notification-icon,
3741 #webRTC-sharingScreen-notification-icon {
3742 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3745 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3746 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3747 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3750 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3751 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3752 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3755 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3756 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3757 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3761 /* === END notification-icons.inc.css === */
3763 .popup-notification-body[popupid="addon-progress"],
3764 .popup-notification-body[popupid="addon-install-confirmation"] {
3769 /* Translation infobar */
3771 /* === BEGIN infobar.inc.css === */
3773 notification[value="translation"] .messageImage {
3774 list-style-image: url("chrome://browser/skin/translation-16.png");
3775 -moz-image-region: rect(0, 32px, 16px, 16px);
3778 @media (min-resolution: 1.25dppx) {
3779 notification[value="translation"] .messageImage {
3780 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3781 -moz-image-region: rect(0, 64px, 32px, 32px);
3785 notification[value="translation"][state="translating"] .messageImage {
3786 list-style-image: url("chrome://browser/skin/translating-16.png");
3787 -moz-image-region: auto;
3790 @media (min-resolution: 1.25dppx) {
3791 notification[value="translation"][state="translating"] .messageImage {
3792 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3796 notification[value="translation"] hbox[anonid="details"] {
3800 notification[value="translation"] button,
3801 notification[value="translation"] menulist {
3805 notification[value="translation"] menulist > .menulist-dropmarker {
3808 .translation-menupopup arrowscrollbox {
3812 .translation-attribution {
3814 -moz-box-align: end;
3818 .translation-attribution > label {
3822 .translation-attribution > image {
3826 .translation-welcome-panel {
3830 .translation-welcome-logo {
3833 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3834 -moz-image-region: rect(0, 64px, 32px, 32px);
3837 .translation-welcome-content {
3838 -moz-margin-start: 16px;
3841 .translation-welcome-headline {
3846 .translation-welcome-body {
3851 /* === END infobar.inc.css === */
3853 notification[value="translation"] {
3857 .translation-menupopup {
3858 -moz-appearance: none;
3861 /* Loop/ Hello browser styles */
3863 notification[value="loop-sharing-notification"] .button-menubutton-button {
3869 notification[value="loop-sharing-notification"] .messageImage {
3870 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3873 /* Bookmarks roots menu-items */
3874 #subscribeToPageMenuitem:not([disabled]),
3875 #subscribeToPageMenupopup,
3876 #BMB_subscribeToPageMenuitem:not([disabled]),
3877 #BMB_subscribeToPageMenupopup {
3878 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3881 #bookmarksToolbarFolderMenu,
3882 #BMB_bookmarksToolbar,
3883 #panelMenu_bookmarksToolbar {
3884 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3885 -moz-image-region: auto;
3888 #BMB_unsortedBookmarks,
3889 #panelMenu_unsortedBookmarks {
3890 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3891 -moz-image-region: auto;
3897 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3900 /* ::::: Keyboard UI Panel ::::: */
3905 border-radius: 20px;
3908 .KUI-panel[level="top"] {
3909 /*background-color: rgba(27%,27%,27%,.65);*/
3915 padding: 20px 10px 10px;
3919 .ctrlTab-favicon[src] {
3920 background-color: #000000;
3926 .ctrlTab-preview-inner > .tabPreview-canvas {
3929 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3933 .ctrlTab-preview-inner {
3934 padding-bottom: 10px;
3937 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3939 background-color: #000000;
3940 border-radius: .5em;
3943 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3945 background-color: #000000;
3948 border: 2px solid #9C9CFF;
3949 border-radius: .5em;
3952 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3953 margin: -10px -10px 0;
3965 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3973 .sync-panel-button-box {
3977 #sync-error-panel-title,
3978 #sync-start-panel-title {
3984 #sync-start-panel-subtitle,
3985 #sync-error-panel-subtitle {
3991 .statuspanel-label {
3994 background: #404000;
3995 border: 1px none #9C9CFF;
3996 border-top-style: solid;
4001 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4002 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4003 border-right-style: solid;
4004 border-top-right-radius: .3em;
4008 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4009 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4010 border-left-style: solid;
4011 border-top-left-radius: .3em;
4015 /* HACK to abolish devily color on main content */
4018 background-color: transparent !important;
4021 /* === BEGIN fullscreen/warning.inc.css === */
4023 #fullscreen-warning {
4024 align-items: center;
4025 background: rgba(0, 0, 0, 0.9);
4026 border: 2px solid #A09090;
4027 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4030 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4033 #fullscreen-warning::before {
4035 width: 24px; height: 24px;
4038 #fullscreen-warning.verifiedIdentity::before,
4039 #fullscreen-warning.verifiedDomain::before {
4040 content: url("chrome://browser/skin/fullscreen/secure.svg");
4043 #fullscreen-warning.unknownIdentity::before {
4044 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4047 #fullscreen-domain-text,
4048 #fullscreen-generic-text {
4050 font-weight: lighter;
4055 #fullscreen-domain {
4060 #fullscreen-exit-button {
4062 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4064 font-weight: lighter;
4067 box-sizing: content-box;
4069 border-radius: 300px;
4071 background-color: #C09070;
4075 /* === END fullscreen/warning.inc.css === */
4077 /* === BEGIN commandline.inc.css === */
4079 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4080 We are copy/pasting variables from light-theme and dark-theme,
4081 since they aren't loaded in this context (within browser.css). */
4082 :root #developer-toolbar {
4083 --gcli-background-color: #000000; /* --theme-toolbar-background */
4084 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4085 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4086 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4087 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4088 --selection-background: #008484; /* --theme-selection-background */
4089 --selection-color: #000000; /* --theme-selection-color */
4092 /* Developer toolbar */
4094 #developer-toolbar {
4095 border-top: 3px solid var(--gcli-background-color);
4096 border-bottom: none;
4099 #developer-toolbar .toolbar-holder {
4100 background-color: #8050B0;
4104 #developer-toolbar .toolbar-holder {
4105 background-color: #8050B0;
4109 #developer-toolbar .toolbar-startcap,
4110 #developer-toolbar .toolbar-endcap{
4111 background-color: #6000CF;
4114 #developer-toolbar {
4116 min-height: 32px; */
4119 #developer-toolbar > toolbarbutton {
4125 .developer-toolbar-button > image {
4126 /* margin: auto 10px; */
4129 #developer-toolbar-toolbox-button > label {
4133 .developer-toolbar-button > .toolbarbutton-icon,
4134 #developer-toolbar-closebutton > .toolbarbutton-icon {
4139 #developer-toolbar-toolbox-button {
4140 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4141 -moz-image-region: rect(0px, 16px, 16px, 0px);
4144 #developer-toolbar-toolbox-button > label {
4148 #developer-toolbar-toolbox-button:hover,
4149 #developer-toolbar-toolbox-button:hover:active,
4150 #developer-toolbar-toolbox-button[checked=true] {
4151 -moz-image-region: rect(0px, 32px, 16px, 16px);
4154 @media (min-resolution: 2dppx) {
4155 #developer-toolbar-toolbox-button {
4156 list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4157 -moz-image-region: rect(0px, 32px, 32px, 0px);
4160 #developer-toolbar-toolbox-button:hover,
4161 #developer-toolbar-toolbox-button:hover:active,
4162 #developer-toolbar-toolbox-button[checked=true] {
4163 -moz-image-region: rect(0px, 64px, 32px, 32px);
4167 #developer-toolbar-closebutton {
4168 list-style-image: url("chrome://browser/skin/devtools/close.png");
4169 -moz-image-region: rect(0px, 16px, 16px, 0px);
4174 #developer-toolbar-closebutton > .toolbarbutton-icon {
4177 #developer-toolbar-closebutton > .toolbarbutton-text {
4181 #developer-toolbar-closebutton:hover,
4182 #developer-toolbar-closebutton:hover:active {
4183 -moz-image-region: rect(0px, 32px, 16px, 16px);
4186 @media (min-resolution: 2dppx) {
4187 #developer-toolbar-closebutton {
4188 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4189 -moz-image-region: rect(0px, 32px, 32px, 0px);
4192 #developer-toolbar-closebutton:hover,
4193 #developer-toolbar-closebutton:hover:active {
4194 -moz-image-region: rect(0px, 64px, 32px, 32px);
4200 html|*#gcli-tooltip-frame,
4201 html|*#gcli-output-frame {
4204 background-color: transparent;
4210 background-color: transparent;
4213 .gclitoolbar-input-node,
4214 .gclitoolbar-complete-node {
4216 -moz-box-align: center;
4220 background-color: transparent;
4223 .gclitoolbar-input-node {
4224 /* line-height: 32px;
4225 outline-style: none; */
4226 background-repeat: no-repeat;
4227 background-color: var(--gcli-input-background);
4230 .gclitoolbar-input-node[focused="true"] {
4231 background-color: var(--gcli-input-focused-background);
4234 .gclitoolbar-input-node::before {
4236 display: inline-block;
4237 -moz-box-ordinal-group: 0;
4241 background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4242 background-position: 0 center;
4243 background-size: 32px 16px;
4246 .gclitoolbar-input-node[focused="true"]::before {
4247 background-position: -16px center;
4250 @media (min-resolution: 2dppx) {
4251 .gclitoolbar-input-node::before {
4252 background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4256 .gclitoolbar-input-node:not([focused="true"]) {
4257 border-color: transparent;
4260 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4261 background-color: var(--selection-background);
4262 color: var(--selection-color);
4265 .gclitoolbar-complete-node {
4267 background-color: transparent;
4270 pointer-events: none;
4273 .gcli-in-incomplete,
4277 .gcli-in-closebrace,
4284 .gcli-in-incomplete {
4285 border-bottom: 2px dotted #8050B0;
4289 border-bottom: 2px dotted #FF0000;
4300 .gcli-in-closebrace {
4304 /* === END commandline.inc.css === */
4306 /* === BEGIN responsivedesign.inc.css === */
4308 /* Responsive Mode */
4310 .browserContainer[responsivemode] {
4311 background-color: #221500;
4312 padding: 0 20px 20px 20px;
4315 .browserStack[responsivemode] {
4316 box-shadow: 0 0 7px #9C9CFF;
4319 .devtools-responsiveui-toolbar {
4320 background: transparent;
4321 /* text color is textColor from dark theme, since no theme is applied to
4322 * the responsive toolbar.
4328 border-bottom-width: 0;
4331 .devtools-responsiveui-menulist,
4332 .devtools-responsiveui-toolbarbutton {
4333 -moz-box-align: center;
4335 /* min-height: 22px;*/
4336 /* margin: 0 3px; */
4339 .devtools-responsiveui-menulist .menulist-editable-box {
4340 background-color: transparent;
4343 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4348 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4349 /* background: hsla(212,7%,57%,.35);*/
4352 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4357 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4358 -moz-box-orient: horizontal;
4361 .devtools-responsiveui-menulist:-moz-focusring,
4362 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4363 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4364 outline-offset: -4px;*/
4367 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4371 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4372 /* border-color: hsla(210,8%,5%,.6);
4373 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4374 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); */
4377 .devtools-responsiveui-menulist[open=true],
4378 .devtools-responsiveui-toolbarbutton[open=true],
4379 .devtools-responsiveui-toolbarbutton[checked=true] {
4380 /* border-color: hsla(210,8%,5%,.6) !important;
4381 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4382 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); */
4385 .devtools-responsiveui-toolbarbutton[checked=true] {
4386 /* color: hsl(208,100%,60%); */
4389 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4390 /* background-color: transparent !important;*/
4393 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4394 /* background-color: hsla(210,8%,5%,.2) !important;*/
4397 .devtools-responsiveui-menulist > .menulist-label-box {
4401 .devtools-responsiveui-menulist > .menulist-dropmarker {
4402 /* display: -moz-box;
4403 background-color: transparent;
4404 list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4405 -moz-box-align: center;
4410 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4413 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4414 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4417 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4418 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4421 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4422 /* padding: 0 1px;*/
4423 -moz-box-align: stretch;
4426 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4427 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4428 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4429 -moz-box-align: center;
4433 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4434 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4438 .devtools-responsiveui-close {
4439 list-style-image: url("chrome://browser/skin/devtools/close.png");
4440 -moz-image-region: rect(0px,16px,16px,0px);
4443 .devtools-responsiveui-close:hover {
4444 -moz-image-region: rect(0px,32px,16px,16px);
4447 .devtools-responsiveui-rotate {
4448 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4449 -moz-image-region: rect(0px,16px,16px,0px);
4452 .devtools-responsiveui-rotate:hover {
4453 -moz-image-region: rect(0px,32px,16px,16px);
4456 @media (min-resolution: 2dppx) {
4457 .devtools-responsiveui-close {
4458 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4461 .devtools-responsiveui-close:hover {
4462 -moz-image-region: rect(0px,64px,32px,32px);
4465 .devtools-responsiveui-rotate {
4466 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4469 .devtools-responsiveui-rotate:hover {
4470 -moz-image-region: rect(0px,64px,32px,32px);
4474 .devtools-responsiveui-touch {
4475 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4476 -moz-image-region: rect(0px,16px,16px,0px);
4479 .devtools-responsiveui-touch:hover,
4480 .devtools-responsiveui-touch[checked],
4481 .devtools-responsiveui-touch[checked]:hover {
4482 -moz-image-region: rect(0px,32px,16px,16px);
4485 @media (min-resolution: 2dppx) {
4486 .devtools-responsiveui-touch {
4487 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4488 -moz-image-region: rect(0px,32px,32px,0px);
4491 .devtools-responsiveui-touch:hover,
4492 .devtools-responsiveui-touch[checked],
4493 .devtools-responsiveui-touch[checked]:hover {
4494 -moz-image-region: rect(0px,64px,32px,32px);
4498 .devtools-responsiveui-screenshot {
4499 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4500 -moz-image-region: rect(0px,16px,16px,0px);
4503 .devtools-responsiveui-screenshot:hover {
4504 -moz-image-region: rect(0px,32px,16px,16px);
4507 @media (min-resolution: 2dppx) {
4508 .devtools-responsiveui-screenshot {
4509 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4512 .devtools-responsiveui-screenshot:hover {
4513 -moz-image-region: rect(0px,64px,32px,32px);
4517 .devtools-responsiveui-resizebarV {
4521 transform: translate(12px, -12px);
4522 background-size: cover;
4523 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4526 .devtools-responsiveui-resizebarH {
4530 transform: translate(-12px, 12px);
4531 background-size: cover;
4532 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4535 .devtools-responsiveui-resizehandle {
4539 transform: translate(12px, 12px);
4540 background-size: cover;
4541 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4544 /* FxOS custom mode with additional buttons and phone look'n feel */
4546 /* Hide devtools manual resizer */
4547 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4548 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4549 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4553 /* Gives responsive mode a phone look'n feel */
4554 .browserStack[responsivemode].fxos-mode {
4555 padding: 60px 15px 0;
4557 border-radius: 25px / 20px;
4558 border-bottom-left-radius: 0;
4559 border-bottom-right-radius: 0;
4560 border: 1px solid #FFFFFF;
4561 border-bottom-width: 0;
4563 background-color: #353535;
4565 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4567 background-image: linear-gradient(to right, #111 11%, #333 56%);
4571 .devtools-responsiveui-hardware-buttons {
4572 -moz-appearance: none;
4575 border: 1px solid #FFFFFF;
4576 border-bottom-left-radius: 25px;
4577 border-bottom-right-radius: 25px;
4578 border-top-width: 0;
4580 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4582 background-image: linear-gradient(to right, #111 11%, #333 56%);
4585 .devtools-responsiveui-home-button {
4586 -moz-user-focus: ignore;
4589 list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4592 .devtools-responsiveui-sleep-button {
4593 -moz-user-focus: ignore;
4594 -moz-appearance: none;
4595 /* compensate browserStack top padding */
4603 border: 1px solid #444;
4604 border-top-right-radius: 12px;
4605 border-top-left-radius: 12px;
4606 border-bottom-color: transparent;
4608 background-image: linear-gradient(to top, #111 11%, #333 56%);
4611 .devtools-responsiveui-sleep-button:hover:active {
4612 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4615 .devtools-responsiveui-volume-buttons {
4619 .devtools-responsiveui-volume-up-button,
4620 .devtools-responsiveui-volume-down-button {
4621 -moz-user-focus: ignore;
4622 -moz-appearance: none;
4623 border: 1px solid red;
4627 border: 1px solid #444;
4628 border-right-color: transparent;
4630 background-image: linear-gradient(to right, #111 11%, #333 56%);
4633 .devtools-responsiveui-volume-up-button:hover:active,
4634 .devtools-responsiveui-volume-down-button:hover:active {
4635 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4638 .devtools-responsiveui-volume-up-button {
4639 border-top-left-radius: 12px;
4642 .devtools-responsiveui-volume-down-button {
4643 border-bottom-left-radius: 12px;
4646 @media (min-resolution: 2dppx) {
4647 .devtools-responsiveui-resizebarV {
4648 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4651 .devtools-responsiveui-resizebarH {
4652 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4655 .devtools-responsiveui-resizehandle {
4656 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4660 /* === END responsivedesign.inc.css === */
4662 /* === including indicator.css is done at the start of the file === */
4666 #developer-toolbar-toolbox-button[error-count]:before {
4670 background-color: #FF0000;
4672 -moz-margin-end: 5px;
4675 /* Social toolbar item */
4677 #social-notification-icon-mentions {
4678 background-color: #000000;
4680 -moz-margin-start: 2px;
4683 #social-notification-icon-mentions:hover {
4684 background-color: #FFCF00;
4687 #social-notification-icon-mentions[open="true"] {
4688 background-color: #FF9F00;
4691 #social-sidebar-splitter {
4695 #socialActivatedNotification .popup-notification-button-container {
4699 .social-activation-icon {
4706 #social-activation-message {
4710 #social-activation-message > label {
4714 /* social toolbar provider menu */
4715 .social-statusarea-popup {
4718 margin-right: -12px;
4721 .social-statusarea-user {
4722 border-bottom: 1px solid #9C9CFF;
4723 background-color: #000000;
4729 .social-statusarea-user-portrait {
4736 .social-statusarea-loggedInStatus {
4737 background: transparent;
4742 list-style-image: none;
4745 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4746 text-decoration: underline;
4749 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4753 .social-panel-frame {
4754 border-radius: inherit;
4757 /* === BEGIN chat.inc.css === */
4759 #social-sidebar-header {
4763 #manage-share-providers,
4764 #social-sidebar-button {
4765 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4766 -moz-image-region: rect(0, 468px, 18px, 450px);
4769 #social-sidebar-button {
4770 -moz-appearance: none;
4775 #manage-share-providers > .toolbarbutton-icon,
4776 #social-sidebar-button > .toolbarbutton-icon {
4780 #manage-share-providers:hover,
4781 #manage-share-providers:hover:active,
4782 #social-sidebar-button:hover,
4783 #social-sidebar-button:hover:active {
4784 -moz-image-region: rect(18px, 468px, 36px, 450px);
4786 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4790 #social-sidebar-button[loading="true"] {
4791 list-style-image: url("chrome://global/skin/icons/loading.gif");
4794 #social-sidebar-favico {
4807 .chat-toolbarbutton {
4808 -moz-appearance: none;
4815 .chat-toolbarbutton:hover {
4816 /* background-color: rgba(255,255,255,.35);*/
4819 .chat-toolbarbutton:hover:active {
4820 /* background-color: rgba(255,255,255,.5);*/
4823 .chat-toolbarbutton > .toolbarbutton-text {
4827 .chat-toolbarbutton > .toolbarbutton-icon {
4832 .chat-close-button {
4833 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4836 .chat-close-button:-moz-any(:hover,:hover:active) {
4837 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4840 .chat-minimize-button {
4841 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4844 .chat-minimize-button:-moz-any(:hover,:hover:active) {
4845 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4849 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4850 transform: rotate(180deg);
4853 .chat-swap-button:-moz-any(:hover,:hover:active) {
4854 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4857 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4863 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4869 background-color: #9C9CFF;
4877 border-bottom: 1px solid #008484;
4881 .chat-titlebar > .notification-anchor-icon {
4886 .chat-titlebar[minimized="true"] {
4887 border-bottom: none;
4890 .chat-titlebar[selected] {
4891 background-color: #008484;
4894 .chat-titlebar[activity] {
4895 background-color: #E7ADE7;
4898 chatbox[dark=true] > .chat-titlebar,
4899 chatbox[dark=true] > .chat-titlebar[selected] {
4900 /* border-bottom: none;
4901 background-color: #000;
4902 background-image: none;*/
4905 chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
4906 /* font-weight: normal;
4917 list-style-image: url("chrome://browser/skin/social/services-16.png");
4918 background-color: #000000;
4924 border-top: 1px solid #008484;
4925 -moz-border-end: 1px solid #008484;
4928 @media (min-resolution: 2dppx) {
4930 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4934 .chatbar-button > .toolbarbutton-icon {
4938 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4945 .chatbar-button > .toolbarbutton-icon {
4949 .chatbar-button:hover > .toolbarbutton-icon,
4950 .chatbar-button[open="true"] > .toolbarbutton-icon {
4954 .chatbar-button:hover,
4955 .chatbar-button[open="true"] {
4958 .chatbar-button > .toolbarbutton-text,
4959 .chatbar-button > .toolbarbutton-menu-dropmarker {
4963 .chatbar-button[activity]:not([open="true"]) {
4964 background-color: #E7ADE7;
4967 .chatbar-button > menupopup > menuitem[activity] {
4972 background: transparent;
4977 -moz-margin-end: 20px;
4983 -moz-margin-start: 4px;
4984 background-color: #000000;
4985 border: 1px solid #9C9CFF;
4986 border-bottom: none;
4987 border-top-left-radius: 2.5px;
4988 border-top-right-radius: 2.5px;
4991 chatbox[minimized="true"] {
4997 -moz-margin-start: 0px;
5003 /* === END chat.inc.css === */
5006 /* background-color: #c4cfde; */
5009 .chat-titlebar[selected] {
5010 /* background-color: #dae3f0; */
5014 -moz-appearance: none;
5015 /* background-color: #c4cfde; */
5018 .chatbar-button > .toolbarbutton-icon {
5019 /* -moz-margin-end: 0; */
5022 .chatbar-button:hover,
5023 .chatbar-button[open="true"] {
5024 /* background-color: #dae3f0; */
5027 .chatbar-button[activity]:not([open="true"]) {
5031 /* border-top-left-radius: 2.5px;
5032 border-top-right-radius: 2.5px; */
5035 /* === BEGIN plugin-doorhanger.inc.css === */
5038 * Plugin Doorhanger Styles
5041 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5042 padding: 6px 1px 2px;
5045 .click-to-play-plugins-notification-center-box {
5048 .plugin-popupnotification-centeritem:nth-child(odd) {
5049 /* background-color: rgba(0,0,0,0.1);*/
5052 .center-item-label {
5054 text-overflow: ellipsis;
5057 .center-item-warning-icon {
5058 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5059 background-repeat: no-repeat;
5062 -moz-margin-start: 6px;
5065 .click-to-play-plugins-notification-button-container {
5068 .click-to-play-popup-button {
5072 .click-to-play-plugins-notification-description-box {
5076 padding-bottom: 3px;
5079 .click-to-play-plugins-outer-description {
5083 .click-to-play-plugins-notification-link,
5088 .messageImage[value="plugin-hidden"] {
5089 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5092 /* Keep any changes to this style in sync with pluginProblem.css */
5093 notification.pluginVulnerable {
5096 notification.pluginVulnerable .messageImage {
5097 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5100 /* === END plugin-doorhanger.inc.css === */
5102 /* === BEGIN login-doorhanger.inc.css === */
5104 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5105 /* Since we display a sliding subview that extends to the border, we cannot
5106 * keep the default padding of arrow panels. We use the same padding in the
5107 * individual content views instead. Since we removed the padding, we also
5108 * have to ensure the contents are clipped to the border box. */
5113 #login-fill-mainview,
5114 #login-fill-details {
5115 padding: var(--panel-arrowcontent-padding);
5118 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5119 transform: translateX(-14px);
5122 #login-fill-mainview,
5123 #login-fill-details {
5124 transition: transform 150ms;
5127 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5128 transform: translateX(105%);
5131 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5132 transform: translateX(-105%);
5135 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5136 background-color: hsla(240,39%,100%,.1);
5139 #login-fill-testing {
5145 border: 1px solid #9C9CFF;
5149 .login-fill-item[disabled] {
5151 background-color: #000000;
5154 .login-fill-item[disabled][selected] {
5155 background-color: #008484;
5163 .login-fill-item.different-hostname > .login-hostname {
5173 #login-fill-details {
5175 background: var(--panel-arrowcontent-background);
5176 color: var(--panel-arrowcontent-color);
5177 background-clip: padding-box;
5178 border-left: 1px solid #9C9CFF;
5179 -moz-margin-start: 38px;
5182 /* === END login-doorhanger.inc.css === */
5184 /* === BEGIN customizeMode.inc.css === */
5186 /* Customization mode */
5188 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5192 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5193 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5194 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5199 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5200 pointer-events: none;
5203 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5204 #PanelUI-contents > .panel-customization-placeholder {
5205 -moz-outline-radius: 2.5px;
5206 outline: 1px dashed transparent;
5209 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5210 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5211 -moz-box-ordinal-group: 0;
5216 outline-offset: -2px;
5217 pointer-events: none;
5223 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5224 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5225 offset from the bottom effectively the same as other targets (-2px). */
5226 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5230 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5231 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5232 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5233 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5237 /* Most target outlines are shown on hover and drag over but the panel menu uses
5238 placeholders instead. */
5239 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5240 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5241 /* nav-bar and panel outlines are always shown */
5242 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5243 outline-color: #A09090;
5246 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5247 transition: outline-color 250ms linear;
5250 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5251 transition: outline-color 250ms linear;
5252 outline-color: #9C9CFF;
5255 #PanelUI-contents > .panel-customization-placeholder {
5257 outline-offset: -5px;
5260 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5262 /* padding-left: 10px;
5263 padding-right: 10px;*/
5266 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5270 #customization-container {
5271 background-color: #000000;
5275 #customization-palette,
5276 #customization-empty {
5277 padding: 0 15px 15px;
5280 #customization-header {
5282 line-height: 1.75em;
5285 margin: 25px 25px 12px;
5286 padding-bottom: 12px;
5287 border-bottom: 1px solid #A09090;
5290 #customization-panel-container {
5291 padding: 10px 10px 0px;
5294 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5295 #customization-footer {
5296 /*background-color: rgb(236,236,236);*/
5299 #customization-footer {
5300 border-top: 1px solid #9C9CFF;
5304 .customizationmode-button {
5308 .customizationmode-button:hover {
5311 #customization-titlebar-visibility-button[checked],
5312 #customization-devedition-theme-button[checked] {
5313 background-color: #008484;
5316 #customization-titlebar-visibility-button[checked]:hover,
5317 #customization-devedition-theme-button[checked]:hover {
5318 background-color: #FFCF00;
5321 #customization-titlebar-visibility-button[checked]:hover:active,
5322 #customization-devedition-theme-button[checked]:hover:active {
5323 background-color: #FF9F00;
5326 .customizationmode-button[disabled="true"] {
5329 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5330 .customizationmode-button > .button-box > .button-icon {
5334 #customization-titlebar-visibility-button {
5335 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5336 -moz-image-region: rect(0, 16px, 16px, 0);
5339 #customization-titlebar-visibility-button:hover {
5340 -moz-image-region: rect(16px, 16px, 32px, 0);
5343 #customization-lwtheme-button,
5344 #customization-titlebar-visibility-button {
5348 #customization-titlebar-visibility-button > .button-box {
5350 padding-bottom: 1px;
5353 #customization-titlebar-visibility-button:hover:active > .button-box {
5358 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5359 #customization-titlebar-visibility-button > .button-box > .button-text {
5360 /* Sadly, button.css thinks its margins are perfect for everyone. */
5361 -moz-margin-start: 5px !important;
5364 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5368 background-size: contain;
5371 #customization-titlebar-visibility-button > .button-box > .button-icon {
5372 vertical-align: middle;
5375 #customization-titlebar-visibility-button[checked] {
5376 -moz-image-region: rect(0, 32px, 16px, 16px);
5377 background-color: #008484;
5380 #customization-titlebar-visibility-button[checked]:hover {
5381 -moz-image-region: rect(16px, 32px, 32px, 16px);
5382 background-color: #FFCF00;
5385 #customization-titlebar-visibility-button[checked]:hover:active {
5386 background-color: #FF9F00;
5389 @media (min-resolution: 1.1dppx) {
5390 #customization-titlebar-visibility-button {
5391 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5392 -moz-image-region: rect(0, 48px, 48px, 0);
5395 #customization-titlebar-visibility-button:hover {
5396 -moz-image-region: rect(48px, 48px, 96px, 0);
5399 #customization-titlebar-visibility-button[checked] {
5400 -moz-image-region: rect(0, 96px, 48px, 48px);
5403 #customization-titlebar-visibility-button[checked]:hover {
5404 -moz-image-region: rect(48px, 96px, 96px, 48px);
5408 #main-window[customize-entered] #customization-panel-container {
5409 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5410 background-position: left top;
5411 background-repeat: repeat;
5412 background-size: auto;
5413 background-attachment: fixed;
5416 toolbarpaletteitem[place="toolbar"] {
5417 transition: border-width 250ms ease-in-out;
5420 toolbarpaletteitem[mousedown] {
5421 outline: 1px solid #008484;
5422 cursor: -moz-grabbing;
5426 .panel-customization-placeholder,
5427 toolbarpaletteitem[place="palette"],
5428 toolbarpaletteitem[place="panel"] {
5429 transition: transform .3s ease-in-out;
5432 #customization-palette {
5433 transition: opacity .3s ease-in-out;
5437 #customization-palette[showing="true"] {
5441 toolbarpaletteitem[notransition].panel-customization-placeholder,
5442 toolbarpaletteitem[notransition][place="toolbar"],
5443 toolbarpaletteitem[notransition][place="palette"],
5444 toolbarpaletteitem[notransition][place="panel"] {
5448 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5449 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5450 toolbarpaletteitem > toolbaritem.panel-wide-item,
5451 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5452 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5455 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5456 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5457 transform: scale(1.3);
5460 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5461 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5462 transform: scale(1.1);
5465 /* Override the toolkit styling for items being dragged over. */
5466 toolbarpaletteitem[place="toolbar"] {
5467 border-left-width: 0;
5468 border-right-width: 0;
5473 #customization-palette:not([hidden]) {
5474 margin-bottom: 25px;
5477 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5478 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5479 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5480 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5484 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5485 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5495 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5496 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5500 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5501 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5504 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5505 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5509 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5510 -moz-box-pack: center;
5514 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5515 -moz-margin-end: 5px;
5518 #customization-palette > toolbarpaletteitem > label {
5524 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5525 -moz-box-orient: vertical;
5526 /* Make the panel padding uniform across all platforms due to the
5527 styling of the section headers and footer. */
5531 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5536 .customization-lwtheme-menu-theme {
5537 -moz-appearance: none;
5540 -moz-padding-end: 5px;
5542 -moz-padding-start: 0;
5545 .customization-lwtheme-menu-theme[defaulttheme] {
5546 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5549 .customization-lwtheme-menu-theme[active="true"] {
5550 background-color: #008484;
5553 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5557 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5561 #customization-lwtheme-menu-header,
5562 #customization-lwtheme-menu-recommended {
5567 #customization-lwtheme-menu-header,
5568 #customization-lwtheme-menu-recommended,
5569 #customization-lwtheme-menu-footer {
5570 background-color: #A09090;
5572 margin-right: -10px;
5576 #customization-lwtheme-menu-header {
5578 border-top-right-radius: 3px;
5579 border-top-left-radius: 3px;
5582 #customization-lwtheme-menu-recommended {
5585 #customization-lwtheme-menu-footer {
5586 margin-bottom: -10px;
5587 border-bottom-right-radius: 3px;
5588 border-bottom-left-radius: 3px;
5591 .customization-lwtheme-menu-footeritem {
5592 -moz-appearance: none;
5594 background-color: #C09070;
5596 border: 1px solid transparent;
5602 .customization-lwtheme-menu-footeritem:hover {
5603 background-color: #FFCF00;
5606 .customization-lwtheme-menu-footeritem:first-child {
5609 /* === END customizeMode.inc.css === */
5611 /* === BEGIN customizeTip.inc.css === */
5613 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5620 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5621 border: 1px solid #9C9CFF;
5625 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5626 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5629 .customization-tipPanel-infoBox {
5630 margin: 20px 25px 25px;
5632 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5633 background-repeat: no-repeat;
5636 .customization-tipPanel-content {
5642 .customization-tipPanel-em {
5647 .customization-tipPanel-contentImage {
5649 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5657 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5658 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5661 .customization-tipPanel-link {
5662 -moz-appearance: none;
5663 background: transparent;
5671 .customization-tipPanel-link > .button-box > .button-text {
5672 margin: 0 !important;
5675 .customization-tipPanel-closeBox > .close-icon {
5676 -moz-appearance: none;
5678 -moz-margin-end: -25px;
5681 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5682 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5683 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5686 /* === END customizeTip.inc.css === */
5689 * This next rule is a hack to disable subpixel anti-aliasing on all
5690 * labels during the customize mode transition. Subpixel anti-aliasing
5691 * on Windows with Direct2D layers acceleration is particularly slow to
5692 * paint, so this hack is how we sidestep that performance bottleneck.
5694 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5695 transform: perspective(0.01px);
5698 #main-window[customize-entered] > #tab-view-deck {
5699 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5700 background-attachment: fixed;
5703 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5704 background-repeat: no-repeat;
5705 background-position: right top;
5706 background-attachment: fixed;
5707 /* The image will get set from CustomizeMode.jsm */
5708 background-image: none;
5709 background-color: transparent;
5712 #main-window[customization-lwtheme]:-moz-lwtheme {
5713 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5714 background-repeat: repeat;
5715 background-attachment: fixed;
5716 background-position: left top;
5719 #main-window[customize-entered] #browser-bottombox,
5720 #main-window[customize-entered] #customization-container {
5721 border-left: 1px solid #9C9CFF;
5722 border-right: 1px solid #9C9CFF;
5723 background-clip: padding-box;
5726 #main-window[customize-entered] #browser-bottombox {
5727 border-bottom: 1px solid #9C9CFF;
5730 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5734 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5738 /* End customization mode */
5740 /* Private browsing indicators */
5743 * Currently, we have two places where we put private browsing indicators on
5744 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5745 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5746 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5747 * want the bottom border of the image to line up with the bottom of the window
5748 * caption buttons. That's why there's so much special-casing going on in here.
5750 .private-browsing-indicator {
5752 pointer-events: none;
5755 #private-browsing-indicator-titlebar {
5760 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5764 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5768 #TabsToolbar > .private-browsing-indicator {
5769 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5770 -moz-margin-start: 4px;
5774 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5775 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5776 * min/max/close window buttons.
5778 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5779 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5780 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5781 -moz-margin-end: 4px;
5787 /* This one is for Linux */
5788 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5789 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5793 /* End private browsing indicators */
5795 /* === BEGIN UITour.inc.css === */
5799 #UITourHighlightContainer {
5800 -moz-appearance: none;
5802 background-color: transparent;
5803 /* This is a buffer to compensate for the movement in the "wobble" effect */
5808 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5809 border-radius: 40px;
5810 border: 1px solid #9C9CFF;
5811 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5812 on Linux without an X compositor where opacity is either 0 or 1. */
5813 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5818 #UITourTooltipBody {
5819 -moz-margin-end: 14px;
5822 #UITourTooltipBody > vbox {
5826 #UITourTooltipIconContainer {
5827 -moz-margin-start: -16px;
5830 #UITourTooltipIcon {
5833 -moz-margin-start: 28px;
5834 -moz-margin-end: 28px;
5837 #UITourTooltipTitle,
5838 #UITourTooltipDescription {
5842 #UITourTooltipTitle {
5845 -moz-margin-start: 0;
5850 #UITourTooltipDescription {
5851 -moz-margin-start: 0;
5854 line-height: 1.8rem;
5855 margin-bottom: 0; /* Override global.css */
5858 #UITourTooltipClose {
5859 -moz-appearance: none;
5861 background-color: transparent;
5863 -moz-margin-start: 4px;
5867 #UITourTooltipClose > .toolbarbutton-text {
5871 #UITourTooltipButtons {
5873 background-color: rgba(0,0,0,.2);
5874 border-top: 1px solid rgba(0,0,0,.4);
5875 margin: 24px -16px -16px;
5879 #UITourTooltipButtons > label,
5880 #UITourTooltipButtons > button {
5884 #UITourTooltipButtons > label:first-child,
5885 #UITourTooltipButtons > button:first-child {
5886 -moz-margin-start: 0;
5889 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5892 -moz-margin-end: 5px;
5895 #UITourTooltipButtons > label,
5896 #UITourTooltipButtons > button .button-text {
5900 #UITourTooltipButtons > button:not(.button-link) {
5901 -moz-appearance: none;
5902 background-color: #C09070;
5903 border-radius: 3000px;
5907 transition-property: background-color, color;
5908 transition-duration: 150ms;
5911 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5912 background-color: #FFCF00;
5916 #UITourTooltipButtons > label,
5917 #UITourTooltipButtons > button.button-link {
5918 -moz-appearance: none;
5919 background: transparent;
5922 color: rgba(0,0,0,0.35);
5924 padding-right: 10px;
5927 #UITourTooltipButtons > button.button-link:hover {
5931 /* The primary button gets the same color as the customize button. */
5932 #UITourTooltipButtons > button.button-primary {
5933 background-color: #A06060; /* LCARS default button background color */
5936 padding-right: 30px;
5939 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5940 background-color: #FFCF00;
5944 /* Notification overrides for Heartbeat UI */
5946 notification.heartbeat {
5947 background-color: #A09090;
5951 @keyframes pulse-onshow {
5954 transform: scale(1.0);
5958 transform: scale(1.1);
5961 transform: scale(1.0);
5964 transform: scale(1.1);
5967 transform: scale(1.0);
5971 @keyframes pulse-twice {
5973 transform: scale(1.1);
5976 transform: scale(0.8);
5979 transform: scale(1);
5983 .messageText.heartbeat {
5985 /* text-shadow: none; */
5986 -moz-margin-start: 0px;
5989 .messageImage.heartbeat {
5992 -moz-margin-start: 8px;
5993 -moz-margin-end: 8px;
5996 .messageImage.heartbeat.pulse-onshow {
5997 animation-name: pulse-onshow;
5998 animation-duration: 1.5s;
5999 animation-iteration-count: 1;
6000 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6003 .messageImage.heartbeat.pulse-twice {
6004 animation-name: pulse-twice;
6005 animation-duration: 1s;
6006 animation-iteration-count: 2;
6007 animation-timing-function: linear;
6010 /* Learn More link styles */
6011 .heartbeat > .text-link {
6013 -moz-margin-start: 0px;
6016 .heartbeat > .text-link:hover {
6018 text-decoration: none;
6021 .heartbeat > .text-link:hover:active {
6025 /* Heartbeat UI Rating Star Classes */
6026 .heartbeat > #star-rating-container {
6028 /* margin-bottom: 4px;*/
6031 .heartbeat > #star-rating-container > #star5 {
6032 -moz-box-ordinal-group: 5;
6035 .heartbeat > #star-rating-container > #star4 {
6036 -moz-box-ordinal-group: 4;
6039 .heartbeat > #star-rating-container > #star3 {
6040 -moz-box-ordinal-group: 3;
6043 .heartbeat > #star-rating-container > #star2 {
6044 -moz-box-ordinal-group: 2;
6047 .heartbeat > #star-rating-container > .star-x {
6048 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6050 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6051 -moz-margin-end: 4px !important;
6056 .heartbeat > #star-rating-container > .star-x:hover,
6057 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6058 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6061 /* === END UITour.inc.css === */
6063 #UITourTooltipButtons {
6065 * Override the --panel-arrowcontent-padding so the background extends
6066 * to the sides and bottom of the panel.
6069 margin-right: -10px;
6070 margin-bottom: -10px;
6073 /* === BEGIN contextmenu.inc.css === */
6075 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6078 #context-navigation > .menuitem-iconic {
6080 -moz-box-pack: center;
6081 -moz-box-align: center;
6084 #context-navigation > .menuitem-iconic[disabled="true"] {
6085 background-color: transparent;
6088 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6089 -moz-appearance: none;
6092 #context-back > .menu-iconic-left {
6093 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6094 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6095 -moz-image-region: rect(0, 54px, 18px, 36px);
6098 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6099 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6100 -moz-image-region: rect(18px, 54px, 36px, 36px);
6103 #context-back[disabled="true"] > .menu-iconic-left {
6104 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6105 -moz-image-region: rect(36px, 54px, 54px, 36px);
6108 #context-forward > .menu-iconic-left {
6109 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6110 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6111 -moz-image-region: rect(0, 72px, 18px, 54px);
6114 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6115 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6116 -moz-image-region: rect(18px, 72px, 36px, 54px);
6119 #context-forward[disabled="true"] > .menu-iconic-left {
6120 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6121 -moz-image-region: rect(36px, 72px, 54px, 54px);
6124 #context-reload > .menu-iconic-left {
6125 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6126 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6127 -moz-image-region: rect(0, 14px, 14px, 0);
6130 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6131 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6132 -moz-image-region: rect(14px, 14px, 28px, 0);
6135 #context-reload[disabled="true"] > .menu-iconic-left {
6136 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6137 -moz-image-region: rect(28px, 14px, 42px, 0);
6140 #context-stop > .menu-iconic-left {
6141 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6142 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6143 -moz-image-region: rect(0, 28px, 14px, 14px);
6146 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6147 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6148 -moz-image-region: rect(14px, 28px, 28px, 14px);
6151 #context-stop[disabled="true"] > .menu-iconic-left {
6152 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6153 -moz-image-region: rect(28px, 28px, 42px, 14px);
6156 #context-bookmarkpage > .menu-iconic-left {
6157 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6158 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6159 -moz-image-region: rect(0, 144px, 18px, 126px);
6162 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6163 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6164 -moz-image-region: rect(18px, 144px, 36px, 126px);
6167 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6168 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6169 -moz-image-region: rect(36px, 144px, 54px, 126px);
6172 #context-bookmarkpage[starred=true] {
6173 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6174 -moz-image-region: rect(0px, 162px, 18px, 144px);
6177 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6178 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6179 -moz-image-region: rect(18px, 162px, 36px, 144px);
6182 #context-bookmarkpage[starred=true][disabled=true] {
6183 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6184 -moz-image-region: rect(36px, 162px, 54px, 144px);
6187 #context-back:-moz-locale-dir(rtl),
6188 #context-forward:-moz-locale-dir(rtl),
6189 #context-reload:-moz-locale-dir(rtl) {
6190 transform: scaleX(-1);
6193 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6194 width: 18px; /*16px;*/
6195 height: 18px; /*16px;*/
6199 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6200 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6206 #context-media-eme-learnmore {
6207 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6210 #context-media-eme-learnmore {
6211 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6214 /* === END contextmenu.inc.css === */
6216 #context-navigation {
6219 #context-sep-navigation {
6220 /* margin-top: -4px; */
6223 .browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {