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 .searchbar-engine-button,
1948 .search-go-container {
1952 .search-go-container > .search-go-button {
1956 #urlbar-search-footer {
1957 border-top: 1px solid #A09090;
1960 #urlbar-search-settings {
1963 #urlbar-search-settings:hover {
1966 #urlbar-search-settings:hover:active {
1969 #urlbar-search-splitter {
1971 -moz-margin-start: -3px;
1973 background: transparent;
1976 #urlbar-search-splitter + #urlbar-container > #urlbar,
1977 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1978 -moz-margin-start: 0;
1981 #urlbar-display-box {
1985 -moz-border-end: 1px solid #9C9CFF;
1986 -moz-margin-end: 3px;
1989 -moz-margin-start: 0;
1993 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1995 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1996 border-bottom: 1px solid #A09090;
1997 background-color: #000000;
1999 -moz-padding-start: 44px;
2000 -moz-padding-end: 6px;
2001 background-image: url("chrome://browser/skin/info.svg");
2002 background-clip: padding-box;
2003 background-position: 20px center;
2004 background-repeat: no-repeat;
2005 background-size: 16px 16px;
2008 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2009 background-position: right 20px center;
2012 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2017 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2018 -moz-margin-start: 0;
2021 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2022 -moz-appearance: none;
2023 -moz-user-focus: ignore;
2028 -moz-margin-start: 10px;
2031 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2034 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2037 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2040 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2043 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2046 min-width: calc(54px + 11ch);
2051 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2052 var(--identity-box-verified-background-color);
2055 #identity-box:-moz-focusring {
2056 outline: 1px dotted #008484;
2057 outline-offset: -1px;
2060 #identity-box.verifiedDomain:-moz-focusring,
2061 #identity-box.verifiedIdentity:-moz-focusring {
2062 outline-color: #000000;
2065 /* Location bar dropmarker */
2067 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2068 background-color: transparent;
2071 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2072 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2073 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2078 .urlbar-history-dropmarker:hover {
2081 .urlbar-history-dropmarker:hover:active,
2082 .urlbar-history-dropmarker[open="true"] {
2085 /* page proxy icon */
2087 /* === BEGIN identity-block.inc.css === */
2090 --identity-box-verified-color: #008484;
2091 /* Default theme does different color per channel, we can't as they do it build-time. */
2092 --identity-box-chrome-color: #9C9CFF;
2094 border-inline-end: 1px solid --urlbar-separator-color);
2098 margin-inline-end: 4px;
2100 /* The latter two properties have a transition to handle the delayed hiding of
2101 the forward button when hovered. */
2102 transition: background-color 150ms ease, padding-left, padding-right;
2105 #identity-box:-moz-locale-dir(ltr) {
2106 border-top-right-radius: 0;
2107 border-bottom-right-radius: 0;
2110 #identity-box:-moz-locale-dir(rtl) {
2111 border-top-left-radius: 0;
2112 border-bottom-left-radius: 0;
2115 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2116 color: var(--identity-box-chrome-color);
2117 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2120 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2121 color: var(--identity-box-verified-color);
2122 -moz-border-end: 1px solid var(--identity-box-verified-color);
2125 #notification-popup-box:not([hidden]) + #identity-box {
2126 padding-inline-start: 10px !important;
2130 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2131 /* border-radius: 0; */
2132 -moz-padding-start: 2px;
2133 -moz-padding-end: 2px;
2134 -moz-margin-end: 1px;
2137 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2138 #notification-popup-box[hidden] + #identity-box {
2139 padding-inline-start: 2px;
2142 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2143 #notification-popup-box[hidden] + #identity-box {
2144 /* Forward button hiding is delayed when hovered, so we should use the same
2145 delay for the identity box. We handle both horizontal paddings (for LTR and
2146 RTL), the latter two delays here are for padding-left and padding-right. */
2147 transition-delay: 0s, 100s, 100s;
2150 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2151 #notification-popup-box[hidden] + #identity-box {
2152 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2153 padding-inline-start: 2.01px;
2156 /* TRACKING PROTECTION ICON */
2158 #tracking-protection-icon {
2161 margin-inline-start: 0;
2162 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2166 #tracking-protection-icon[state="loaded-tracking-content"] {
2167 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2170 #tracking-protection-icon[animate] {
2171 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2174 #tracking-protection-icon:not([state]) {
2175 margin-inline-start: -18px;
2176 pointer-events: none;
2178 /* Only animate the shield in, when it disappears hide it immediately. */
2182 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2183 visibility: collapse;
2186 /* MAIN IDENTITY ICON */
2188 #page-proxy-favicon {
2191 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2195 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2196 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2199 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2200 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2201 list-style-image: url("chrome://browser/skin/identity-secure.svg");
2204 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2205 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2208 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2209 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2210 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2211 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2214 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2215 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2218 #page-proxy-favicon[pageproxystate="invalid"] {
2222 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2223 list-style-image: url("chrome://branding/content/icon64.png");
2226 #identity-popup-brandName {
2230 margin-bottom: .5em;
2233 #identity-popup-content-box {
2237 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2238 -moz-image-region: inherit;
2239 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2245 /* MAIN IDENTITY ICON */
2250 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2253 #identity-box:hover > #identity-icon,
2254 #identity-box[open=true] > #identity-icon {
2255 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2258 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2259 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2262 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2266 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2267 -moz-image-region: inherit;
2268 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2274 /* TRACKING PROTECTION ICON */
2276 #tracking-protection-icon {
2279 margin-inline-start: 2px;
2280 margin-inline-end: 0;
2281 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2285 #tracking-protection-icon[state="loaded-tracking-content"] {
2286 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2289 #tracking-protection-icon[animate] {
2290 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2293 #tracking-protection-icon:not([state]) {
2294 margin-inline-end: -18px;
2295 pointer-events: none;
2297 /* Only animate the shield in, when it disappears hide it immediately. */
2301 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2302 visibility: collapse;
2305 /* CONNECTION ICON */
2310 margin-inline-start: 2px;
2311 visibility: collapse;
2314 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2315 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2316 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2317 visibility: visible;
2320 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2321 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2322 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2323 visibility: visible;
2326 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2327 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2328 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2329 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2330 visibility: visible;
2333 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2334 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2335 visibility: visible;
2338 /* === END identity-block.inc.css === */
2340 #page-proxy-favicon {
2341 -moz-image-region: rect(0, 16px, 16px, 0);
2344 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2345 /* -moz-margin-end: 1px;*/
2348 #identity-box:hover > #page-proxy-favicon {
2349 -moz-image-region: rect(0, 32px, 16px, 16px);
2352 #identity-box:hover:active > #page-proxy-favicon,
2353 #identity-box[open=true] > #page-proxy-favicon {
2354 -moz-image-region: rect(0, 48px, 16px, 32px);
2357 #identity-box:hover {
2358 background-color: #FFCF00;
2362 #identity-box:hover:active,
2363 #identity-box[open=true] {
2364 background-color: #FF9F00;
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2369 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2370 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2371 background-color: #9C9CFF;
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2376 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2377 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2378 background-color: #008484;
2384 #treecolAutoCompleteImage {
2388 .ac-result-type-bookmark,
2389 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2390 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2391 -moz-image-region: rect(0px 16px 16px 0px);
2396 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2397 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2398 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2401 .ac-result-type-keyword,
2402 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2403 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2404 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2409 .ac-result-type-keyword[selected="true"],
2410 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2411 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2412 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2415 .ac-result-type-tag,
2416 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2417 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2423 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2424 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2428 .ac-extra > .ac-comment,
2439 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2440 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2441 -moz-image-region: rect(0, 16px, 16px, 0);
2447 @media (min-resolution: 1.1dppx) {
2448 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2449 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2450 -moz-image-region: rect(0, 32px, 32px, 0);
2454 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2455 -moz-image-region: rect(16px, 16px, 32px, 0);
2458 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2462 .ac-comment[selected="true"],
2463 .ac-url-text[selected="true"],
2464 .ac-action-text[selected="true"] {
2465 color: inherit !important;
2468 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2469 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2475 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2476 border-top: 1px solid #9C9CFF;
2479 /* combined go/reload/stop button in location bar */
2482 #urlbar-reload-button,
2483 #urlbar-stop-button {
2485 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2486 /* padding: 0 9px;*/
2487 margin-inline-start: 0px;
2488 border-inline-start: 1px solid var(--urlbar-separator-color);
2489 border-image: linear-gradient(transparent 15%,
2490 var(--urlbar-separator-color) 15%,
2491 var(--urlbar-separator-color) 85%,
2493 border-image-slice: 1;
2496 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2497 border-top-left-radius: 0px;
2498 border-bottom-left-radius: 0px;
2501 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2502 border-top-right-radius: 0px;
2503 border-bottom-right-radius: 0px;
2506 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2507 #urlbar-reload-button:not(:hover) {
2508 -moz-border-start-style: none;
2509 -moz-padding-start: 3px;
2512 #urlbar-reload-button {
2513 -moz-image-region: rect(0px, 14px, 14px, 0px);
2516 #urlbar-reload-button[disabled=true] {
2517 -moz-image-region: rect(28px, 14px, 42px, 0px);
2520 #urlbar-reload-button:not([disabled=true]):hover {
2521 -moz-image-region: rect(14px, 14px, 28px, 0px);
2524 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2525 transform: scaleX(-1);
2529 -moz-image-region: rect(0, 42px, 14px, 28px);
2532 #urlbar-go-button:hover {
2533 -moz-image-region: rect(14px, 42px, 28px, 28px);
2536 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2537 transform: scaleX(-1);
2540 #urlbar-stop-button {
2541 -moz-image-region: rect(0px, 28px, 14px, 14px);
2544 #urlbar-stop-button:hover {
2545 -moz-image-region: rect(14px, 28px, 28px, 14px);
2548 @media (min-resolution: 1.1dppx) {
2550 #urlbar-reload-button,
2551 #urlbar-stop-button {
2552 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2555 #urlbar-go-button > .toolbarbutton-icon,
2556 #urlbar-reload-button > .toolbarbutton-icon,
2557 #urlbar-stop-button > .toolbarbutton-icon {
2562 -moz-image-region: rect(0, 84px, 28px, 56px);
2565 #urlbar-go-button:hover {
2566 -moz-image-region: rect(28px, 84px, 56px, 56px);
2569 #urlbar-go-button:hover:active {
2570 -moz-image-region: rect(56px, 84px, 84px, 56px);
2573 #urlbar-reload-button {
2574 -moz-image-region: rect(0, 28px, 28px, 0);
2577 #urlbar-reload-button:not([disabled]):hover {
2578 -moz-image-region: rect(28px, 28px, 56px, 0);
2581 #urlbar-reload-button:not([disabled]):hover:active {
2582 -moz-image-region: rect(56px, 28px, 84px, 0);
2585 #urlbar-stop-button {
2586 -moz-image-region: rect(0, 56px, 28px, 28px);
2589 #urlbar-stop-button:not([disabled]):hover {
2590 -moz-image-region: rect(28px, 56px, 56px, 28px);
2593 #urlbar-stop-button:hover:active {
2594 -moz-image-region: rect(56px, 56px, 84px, 28px);
2598 /* popup blocker button */
2600 #page-report-button {
2601 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2602 -moz-image-region: rect(0, 16px, 16px, 0);
2605 #page-report-button:hover ,
2606 #page-report-button:hover:active,
2607 #page-report-button[open="true"] {
2608 -moz-image-region: rect(0, 32px, 16px, 16px);
2611 /* Reader mode button */
2613 #reader-mode-button {
2614 list-style-image: url("chrome://browser/skin/readerMode.svg");
2615 -moz-image-region: rect(0, 16px, 16px, 0);
2618 #reader-mode-button:hover,
2619 #reader-mode-button[readeractive]:hover {
2620 -moz-image-region: rect(0, 32px, 16px, 16px);
2623 #reader-mode-button:hover:active,
2624 #reader-mode-button[readeractive] {
2625 -moz-image-region: rect(0, 48px, 16px, 32px);
2628 /* social share panel */
2630 .social-share-frame {
2637 background-color: white;
2638 background-repeat: no-repeat;
2639 background-position: center center;
2641 #share-container[loading] {
2642 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2644 #share-container > browser {
2645 transition: opacity 150ms ease-in-out;
2648 #share-container[loading] > browser {
2652 .social-share-toolbar {
2653 border-bottom: 1px solid #9C9CFF;
2657 #social-share-provider-buttons {
2662 .share-provider-button {
2667 .share-provider-button > .toolbarbutton-text {
2670 .share-provider-button > .toolbarbutton-icon {
2676 /* fixup corners for share panel */
2677 .social-panel > .social-panel-frame {
2678 border-radius: inherit;
2681 #social-share-panel {
2687 .social-share-frame {
2688 border-top-left-radius: 0;
2689 border-bottom-left-radius: inherit;
2690 border-top-right-radius: 0;
2691 border-bottom-right-radius: inherit;
2694 #social-share-panel > .social-share-toolbar {
2695 border-top-left-radius: inherit;
2696 border-top-right-radius: inherit;
2699 #social-share-provider-buttons {
2700 border-top-left-radius: inherit;
2701 border-top-right-radius: inherit;
2704 /* social recommending panel */
2706 #social-mark-button {
2707 -moz-image-region: rect(0, 16px, 16px, 0);
2710 /* bookmarks menu-button */
2712 #bookmarks-menu-button.bookmark-item {
2713 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2714 -moz-image-region: rect(0px 16px 16px 0px);
2717 #bookmarks-menu-button.bookmark-item[starred] {
2718 -moz-image-region: rect(0px 32px 16px 16px);
2721 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2722 -moz-margin-start: 5px;
2725 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2727 padding-bottom: 2px;
2730 #BMB_bookmarksPopup[side="top"],
2731 #BMB_bookmarksPopup[side="bottom"] {
2733 margin-right: -20px;
2736 #BMB_bookmarksPopup[side="left"],
2737 #BMB_bookmarksPopup[side="right"] {
2739 margin-bottom: -20px;
2742 /* bookmarking panel */
2744 #editBookmarkPanelStarIcon {
2745 list-style-image: url("chrome://browser/skin/places/starred48.png");
2750 #editBookmarkPanelStarIcon[unstarred] {
2751 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2754 #editBookmarkPanelTitle {
2758 #editBookmarkPanelHeader,
2759 #editBookmarkPanelContent {
2760 margin-bottom: .5em;
2763 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2764 #editBMPanel_folderTree {
2771 border-top: 1px solid #9C9CFF;
2772 border-bottom-left-radius: 5px;
2773 border-bottom-right-radius: 5px;
2777 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2778 -moz-margin-end: 10px;
2779 vertical-align: middle;
2782 .panel-promo-closebutton {
2783 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2784 -moz-margin-end: -3px;
2788 .panel-promo-closebutton:hover {
2789 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2792 .panel-promo-closebutton:hover:active {
2793 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2796 .panel-promo-closebutton > .toolbarbutton-text {
2800 /* ::::: content area ::::: */
2803 background-color: #9C9CFF;
2808 background-color: #000000;
2812 -moz-margin-start: 0;
2821 -moz-padding-start: 0px;
2824 #sidebar-header > .close-icon {
2825 /* padding: 4px 2px;
2828 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2831 #sidebar-header > .close-icon:hover,
2832 #sidebar-header > .close-icon:hover:active {
2833 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2836 #sidebar-splitter:-moz-locale-dir(ltr),
2837 #sidebar:-moz-locale-dir(ltr) {
2838 border-radius: 0 5px 0 0;
2841 #sidebar-splitter:-moz-locale-dir(rtl),
2842 #sidebar:-moz-locale-dir(rtl) {
2843 border-radius: 5px 0 0 0;
2846 .browserContainer > findbar {
2848 background-color: -moz-dialog;
2849 color: -moz-DialogText;
2858 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2861 #TabsToolbar .toolbar-holder {
2862 background-color: #000000; /* correct effect of being an actual toolbar */
2865 #main-window[disablechrome] #TabsToolbar,
2866 #TabsToolbar[tabsontop="false"] {
2867 border-bottom: 1px solid #008484;
2870 /* === BEGIN tabs.inc.css === */
2873 /* --tab-toolbar-navbar-overlap: 1px; */
2874 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2875 /* --tab-min-height: 31px; */
2878 /* --tab-stroke-background-size: auto 100%; */
2882 .tabs-newtab-button,
2883 #TabsToolbar > #new-tab-button {
2888 padding: 1px 4px 2px;
2891 .tabbrowser-tab:first-of-type {
2892 -moz-margin-start: 2px;
2895 .tabs-newtab-button,
2896 #TabsToolbar > #new-tab-button {
2897 border-radius: 8px 8px 0px 0px;
2898 -moz-margin-start: 0;
2901 .tabs-newtab-button:not(:hover),
2902 #TabsToolbar > #new-tab-button:not(:hover) {
2903 background-color: #C09070;
2906 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2907 .tabbrowser-tab[visuallyselected=true] {
2908 /* position: relative;
2912 .tab-background-middle {
2918 .tab-content[pinned] {
2931 -moz-margin-end: 3px;
2935 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2941 /* margin-top: -12px; */
2942 -moz-margin-start: -16px;
2946 .tab-icon-overlay[crashed] {
2947 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2950 .tab-icon-overlay[soundplaying],
2951 .tab-icon-overlay[muted]:not([crashed]) {
2955 .tab-icon-overlay[soundplaying]:hover,
2956 .tab-icon-overlay[muted]:hover {
2957 background-color: #FFCF00;
2960 .tab-icon-overlay[soundplaying] {
2962 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2965 .tab-icon-overlay[muted]:not([crashed]) {
2966 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2969 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2970 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2974 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2975 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2978 .tab-throbber[busy] {
2979 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2982 .tab-throbber[progress] {
2983 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2986 .tab-throbber[pinned],
2987 .tab-icon-image[pinned] {
2988 -moz-margin-start: 2px;
2989 -moz-margin-end: 2px;
2993 /* this needs to add up to the 16px of the icon image */
2995 margin-top: 2px !important;
2996 margin-bottom: 2px !important;
3000 -moz-margin-start: 4px;
3006 .tab-icon-sound[muted] {
3007 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3010 .tab-icon-sound[muted]:hover {
3011 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3014 .tab-icon-sound[muted]:hover:active {
3015 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3018 .tab-icon-sound[soundplaying] {
3019 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3022 .tab-icon-sound[soundplaying]:hover {
3023 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3026 .tab-icon-sound[soundplaying]:hover:active {
3027 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3030 .tab-icon-sound[muted] {
3031 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3034 .tab-icon-sound[muted]:hover {
3035 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3038 .tab-icon-sound[muted]:hover:active {
3039 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3042 .tab-icon-sound[visuallyselected=true][soundplaying] {
3043 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3046 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3047 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3050 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3051 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3054 .tab-icon-sound[visuallyselected=true][muted] {
3055 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3058 .tab-icon-sound[visuallyselected=true][muted]:hover {
3059 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3062 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3063 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3066 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3067 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3070 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3071 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3074 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3075 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3078 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3079 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3082 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3083 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3086 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3087 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3096 .tabs-newtab-button {
3097 /* overlap the tab curves */
3100 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3104 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3105 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3108 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3112 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3115 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3118 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3119 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3122 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3123 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3126 .tab-background-start[visuallyselected=true]::after,
3127 .tab-background-start[visuallyselected=true]::before,
3128 .tab-background-start,
3129 .tab-background-end,
3130 .tab-background-end[visuallyselected=true]::after,
3131 .tab-background-end[visuallyselected=true]::before {
3134 .tabbrowser-tab:not([visuallyselected=true]),
3135 .tabbrowser-tab:-moz-lwtheme {
3138 /* tabbrowser-tab focus ring */
3139 .tabbrowser-tab:focus {
3140 outline: 1px dotted;
3145 .tabbrowser-tab[visuallyselected="true"] {
3148 /* End selected tab */
3150 /* Tab pointer-events */
3153 pointer-events: none;
3156 .tab-background-middle,
3157 .tabs-newtab-button,
3158 .tab-icon-overlay[soundplaying],
3159 .tab-icon-overlay[muted]:not([crashed]),
3162 pointer-events: auto;
3167 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3168 background-color: #E7ADE7;
3171 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3172 background-color: #3333FF;
3176 /* Tab separators */
3178 .tabbrowser-tab::after,
3179 .tabbrowser-tab::before {
3181 -moz-margin-start: -1px;
3182 background-image: linear-gradient(transparent 5px,
3184 currentColor calc(100% - 4px),
3185 transparent calc(100% - 4px));
3189 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3190 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3194 /* Also show separators beside the selected tab when dragging it. */
3196 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3197 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3198 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3203 /* New tab button */
3205 .tabs-newtab-button {
3207 /* width: calc(36px + var(--tab-curve-width)); */
3210 /* === END tabs.inc.css === */
3214 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3215 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3216 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3218 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3219 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3222 /* Tab DnD indicator */
3223 .tab-drop-indicator {
3224 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3225 margin-bottom: -11px;
3228 /* Tab close button */
3230 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3233 .tab-close-button:hover,
3234 .tab-close-button:hover[selected="true"] {
3235 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3238 .tab-close-button:hover:active,
3239 .tab-close-button:hover:active[selected="true"] {
3240 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3243 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3245 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3246 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3250 background-origin: border-box;
3253 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3254 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3255 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3256 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3259 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3260 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3263 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3264 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3265 /* transform: scaleX(-1);*/
3268 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3269 transition: 1s background-color ease-out;
3272 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3273 background-color: #008484;
3276 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3277 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3278 /* border-width: 0 2px 0 0;
3279 border-style: solid;
3280 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3283 .tabs-newtab-button > .toolbarbutton-icon {
3285 margin-bottom: -1px;
3288 .tabs-newtab-button,
3289 #TabsToolbar > #new-tab-button,
3290 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3291 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3292 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3293 -moz-image-region: rect(0, 16px, 18px, 0);
3296 .tabs-newtab-button,
3297 .tabs-newtab-button:hover,
3298 #TabsToolbar > #new-tab-button,
3299 #TabsToolbar > #new-tab-button:hover {
3300 -moz-image-region: rect(0, 32px, 18px, 16px);
3303 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3304 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3305 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3306 .tabs-newtab-button:-moz-lwtheme-brighttext,
3307 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3308 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3311 #TabsToolbar > #new-tab-button {
3316 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3319 #alltabs-button:hover,
3320 #alltabs-button:hover:active,
3321 #alltabs-button[open="true"] {
3322 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3325 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3326 #alltabs-button:-moz-lwtheme-brighttext {
3329 #alltabs-button > .toolbarbutton-icon {
3333 #alltabs-button > .toolbarbutton-menu-dropmarker {
3337 /* All tabs menupopup */
3338 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3339 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3340 -moz-image-region: auto;
3343 .alltabs-item[selected="true"] {
3347 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3348 list-style-image: url("chrome://global/skin/icons/loading.gif");
3351 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3352 background-color: #402800;
3355 toolbarbutton.chevron {
3356 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3359 toolbarbutton.chevron:hover {
3360 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3363 toolbar[brighttext] toolbarbutton.chevron {
3364 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3367 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3368 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3369 transform: scaleX(-1);
3372 toolbarbutton.chevron > .toolbarbutton-text,
3373 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3377 toolbarbutton.chevron > .toolbarbutton-icon {
3381 #sidebar-throbber[loading="true"] {
3382 list-style-image: url("chrome://global/skin/icons/loading.gif");
3383 -moz-margin-end: 4px;
3386 /* Bookmarks toolbar */
3387 #PlacesToolbarDropIndicator {
3388 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3391 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3392 background-color: #008484 !important;
3393 color: #FFCF00 !important;
3396 /* rules for menupopup drop indicators */
3397 .menupopup-drop-indicator-bar {
3399 /* these two margins must together compensate the indicator's height */
3401 margin-bottom: -1px;
3404 .menupopup-drop-indicator {
3405 list-style-image: none;
3407 -moz-margin-end: -4em;
3408 background-color: #008484;
3411 /* === BEGIN notification-icons.inc.css === */
3413 .popup-notification-icon {
3416 -moz-margin-end: 10px;
3419 .popup-notification-icon[popupid="geolocation"] {
3420 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3423 .popup-notification-icon[popupid="push"] {
3424 list-style-image: url(chrome://browser/skin/Push-64.png);
3427 .popup-notification-icon[popupid="xpinstall-disabled"],
3428 .popup-notification-icon[popupid="addon-install-blocked"],
3429 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3430 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3433 .popup-notification-icon[popupid="addon-progress"] {
3434 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3437 .popup-notification-icon[popupid="addon-install-failed"] {
3438 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3441 .popup-notification-icon[popupid="addon-install-confirmation"] {
3442 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3445 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3446 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3449 .popup-notification-icon[popupid="addon-install-complete"] {
3450 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3453 .popup-notification-icon[popupid="addon-install-restart"] {
3454 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3457 .popup-notification-icon[popupid="click-to-play-plugins"] {
3458 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3461 .popup-notification-icon[popupid="web-notifications"] {
3462 list-style-image: url("chrome://browser/skin/notification-64.png");
3465 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3466 .popup-notification-icon[popupid*="offline-app-requested"],
3467 .popup-notification-icon[popupid="offline-app-usage"] {
3468 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3471 .popup-notification-icon[popupid="password"] {
3472 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3475 .popup-notification-icon[popupid="webapps-install-progress"],
3476 .popup-notification-icon[popupid="webapps-install"] {
3477 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3480 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3481 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3482 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3485 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3486 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3487 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3490 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3491 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3492 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3495 .popup-notification-icon[popupid="pointerLock"] {
3496 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3499 /* Notification icon box */
3500 #notification-popup .panel-promo-box {
3501 /* margin: 10px -10px -10px; */
3504 #notification-popup-box {
3506 background-color: #000000;
3507 background-clip: padding-box;
3510 border-radius: 3px 0 0 3px;
3511 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3512 -moz-margin-end: -8px;
3513 border-right-width: 8px;
3516 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3517 /* padding-left: 7px; */
3520 #notification-popup-box:-moz-locale-dir(rtl),
3521 .notification-anchor-icon:-moz-locale-dir(rtl) {
3522 transform: scaleX(-1);
3525 .notification-anchor-icon {
3526 list-style-image: url("chrome://global/skin/icons/information-16.png");
3533 .notification-anchor-icon:-moz-focusring {
3534 outline: 1px dotted #008484;
3537 .identity-notification-icon,
3538 #identity-notification-icon {
3539 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3542 .geo-notification-icon,
3543 #geo-notification-icon {
3544 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3547 #push-notification-icon {
3548 list-style-image: url(chrome://browser/skin/Push-16.png);
3551 #addons-notification-icon {
3552 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3555 #addons-notification-icon:hover {
3556 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3559 #addons-notification-icon:hover:active {
3560 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3563 .indexedDB-notification-icon,
3564 #indexedDB-notification-icon {
3565 list-style-image: url("chrome://global/skin/icons/question-16.png");
3568 #password-notification-icon {
3569 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3572 #login-fill-notification-icon {
3573 /* Temporary icon until the capture and fill doorhangers are unified. */
3574 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3575 transform: scaleX(-1);
3578 #webapps-notification-icon {
3579 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3582 #plugins-notification-icon {
3583 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3586 #plugins-notification-icon.plugin-hidden {
3587 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3590 #plugins-notification-icon.plugin-blocked {
3591 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3594 #plugins-notification-icon {
3595 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3598 #plugins-notification-icon:hover {
3599 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3602 #notification-popup-box[hidden] {
3603 /* Override display:none to make the pluginBlockedNotification animation work
3604 when showing the notification repeatedly. */
3606 visibility: collapse;
3609 #plugins-notification-icon.plugin-blocked[showing] {
3610 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3613 @keyframes pluginBlockedNotification {
3622 .webRTC-shareDevices-notification-icon,
3623 #webRTC-shareDevices-notification-icon {
3624 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3627 .webRTC-sharingDevices-notification-icon,
3628 #webRTC-sharingDevices-notification-icon {
3629 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3632 .webRTC-shareMicrophone-notification-icon,
3633 #webRTC-shareMicrophone-notification-icon {
3634 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3637 .webRTC-sharingMicrophone-notification-icon,
3638 #webRTC-sharingMicrophone-notification-icon {
3639 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3642 .webRTC-shareScreen-notification-icon,
3643 #webRTC-shareScreen-notification-icon {
3644 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3647 .webRTC-sharingScreen-notification-icon,
3648 #webRTC-sharingScreen-notification-icon {
3649 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3652 .web-notifications-notification-icon,
3653 #web-notifications-notification-icon {
3654 list-style-image: url("chrome://browser/skin/notification-16.png");
3657 #pointerLock-notification-icon {
3658 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3661 .translate-notification-icon,
3662 #translate-notification-icon {
3663 list-style-image: url("chrome://browser/skin/translation-16.png");
3664 -moz-image-region: rect(0px, 16px, 16px, 0px);
3667 .translated-notification-icon,
3668 #translated-notification-icon {
3669 list-style-image: url("chrome://browser/skin/translation-16.png");
3670 -moz-image-region: rect(0px, 32px, 16px, 16px);
3673 .popup-notification-icon[popupid="servicesInstall"] {
3674 list-style-image: url("chrome://browser/skin/social/services-64.png");
3676 #servicesInstall-notification-icon {
3677 list-style-image: url("chrome://browser/skin/social/services-16.png");
3680 /* EME notifications */
3682 .popup-notification-icon[popupid="drmContentPlaying"],
3683 #eme-notification-icon {
3684 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3687 #eme-notification-icon:hover:active {
3688 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3691 #eme-notification-icon[firstplay=true] {
3692 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3695 @keyframes emeTeachingMoment {
3696 0% {transform: translateX(0); }
3697 25% {transform: translateX(3px) }
3698 75% {transform: translateX(-3px) }
3699 100% { transform: translateX(0); }
3702 /* HiDPI notification icons */
3703 @media (min-resolution: 1.1dppx) {
3704 /* #notification-popup-box {
3705 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3708 .notification-anchor-icon {
3709 list-style-image: url(chrome://global/skin/icons/information-32.png);
3712 .webRTC-shareDevices-notification-icon,
3713 #webRTC-shareDevices-notification-icon {
3714 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3717 .webRTC-sharingDevices-notification-icon,
3718 #webRTC-sharingDevices-notification-icon {
3719 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3722 .webRTC-shareMicrophone-notification-icon,
3723 #webRTC-shareMicrophone-notification-icon {
3724 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3727 .webRTC-sharingMicrophone-notification-icon,
3728 #webRTC-sharingMicrophone-notification-icon {
3729 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3732 .webRTC-shareScreen-notification-icon,
3733 #webRTC-shareScreen-notification-icon {
3734 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3737 .webRTC-sharingScreen-notification-icon,
3738 #webRTC-sharingScreen-notification-icon {
3739 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3742 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3743 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3744 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3747 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3748 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3749 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3752 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3753 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3754 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3758 /* === END notification-icons.inc.css === */
3760 .popup-notification-body[popupid="addon-progress"],
3761 .popup-notification-body[popupid="addon-install-confirmation"] {
3766 /* Translation infobar */
3768 /* === BEGIN infobar.inc.css === */
3770 notification[value="translation"] .messageImage {
3771 list-style-image: url("chrome://browser/skin/translation-16.png");
3772 -moz-image-region: rect(0, 32px, 16px, 16px);
3775 @media (min-resolution: 1.25dppx) {
3776 notification[value="translation"] .messageImage {
3777 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3778 -moz-image-region: rect(0, 64px, 32px, 32px);
3782 notification[value="translation"][state="translating"] .messageImage {
3783 list-style-image: url("chrome://browser/skin/translating-16.png");
3784 -moz-image-region: auto;
3787 @media (min-resolution: 1.25dppx) {
3788 notification[value="translation"][state="translating"] .messageImage {
3789 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3793 notification[value="translation"] hbox[anonid="details"] {
3797 notification[value="translation"] button,
3798 notification[value="translation"] menulist {
3802 notification[value="translation"] menulist > .menulist-dropmarker {
3805 .translation-menupopup arrowscrollbox {
3809 .translation-attribution {
3811 -moz-box-align: end;
3815 .translation-attribution > label {
3819 .translation-attribution > image {
3823 .translation-welcome-panel {
3827 .translation-welcome-logo {
3830 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3831 -moz-image-region: rect(0, 64px, 32px, 32px);
3834 .translation-welcome-content {
3835 -moz-margin-start: 16px;
3838 .translation-welcome-headline {
3843 .translation-welcome-body {
3848 /* === END infobar.inc.css === */
3850 notification[value="translation"] {
3854 .translation-menupopup {
3855 -moz-appearance: none;
3858 /* Loop/ Hello browser styles */
3860 notification[value="loop-sharing-notification"] .button-menubutton-button {
3866 notification[value="loop-sharing-notification"] .messageImage {
3867 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3870 /* Bookmarks roots menu-items */
3871 #subscribeToPageMenuitem:not([disabled]),
3872 #subscribeToPageMenupopup,
3873 #BMB_subscribeToPageMenuitem:not([disabled]),
3874 #BMB_subscribeToPageMenupopup {
3875 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3878 #bookmarksToolbarFolderMenu,
3879 #BMB_bookmarksToolbar,
3880 #panelMenu_bookmarksToolbar {
3881 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3882 -moz-image-region: auto;
3885 #BMB_unsortedBookmarks,
3886 #panelMenu_unsortedBookmarks {
3887 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3888 -moz-image-region: auto;
3894 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3897 /* ::::: Keyboard UI Panel ::::: */
3902 border-radius: 20px;
3905 .KUI-panel[level="top"] {
3906 /*background-color: rgba(27%,27%,27%,.65);*/
3912 padding: 20px 10px 10px;
3916 .ctrlTab-favicon[src] {
3917 background-color: #000000;
3923 .ctrlTab-preview-inner > .tabPreview-canvas {
3926 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3930 .ctrlTab-preview-inner {
3931 padding-bottom: 10px;
3934 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3936 background-color: #000000;
3937 border-radius: .5em;
3940 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3942 background-color: #000000;
3945 border: 2px solid #9C9CFF;
3946 border-radius: .5em;
3949 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3950 margin: -10px -10px 0;
3962 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3970 .sync-panel-button-box {
3974 #sync-error-panel-title,
3975 #sync-start-panel-title {
3981 #sync-start-panel-subtitle,
3982 #sync-error-panel-subtitle {
3988 .statuspanel-label {
3991 background: #404000;
3992 border: 1px none #9C9CFF;
3993 border-top-style: solid;
3998 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3999 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4000 border-right-style: solid;
4001 border-top-right-radius: .3em;
4005 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4006 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4007 border-left-style: solid;
4008 border-top-left-radius: .3em;
4012 /* HACK to abolish devily color on main content */
4015 background-color: transparent !important;
4018 /* === BEGIN fullscreen/warning.inc.css === */
4020 #fullscreen-warning {
4021 align-items: center;
4022 background: rgba(0, 0, 0, 0.9);
4023 border: 2px solid #A09090;
4024 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4027 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4030 #fullscreen-warning::before {
4032 width: 24px; height: 24px;
4035 #fullscreen-warning.verifiedIdentity::before,
4036 #fullscreen-warning.verifiedDomain::before {
4037 content: url("chrome://browser/skin/fullscreen/secure.svg");
4040 #fullscreen-warning.unknownIdentity::before {
4041 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4044 #fullscreen-domain-text,
4045 #fullscreen-generic-text {
4047 font-weight: lighter;
4052 #fullscreen-domain {
4057 #fullscreen-exit-button {
4059 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4061 font-weight: lighter;
4064 box-sizing: content-box;
4066 border-radius: 300px;
4068 background-color: #C09070;
4072 /* === END fullscreen/warning.inc.css === */
4074 /* === BEGIN commandline.inc.css === */
4076 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4077 We are copy/pasting variables from light-theme and dark-theme,
4078 since they aren't loaded in this context (within browser.css). */
4079 :root #developer-toolbar {
4080 --gcli-background-color: #000000; /* --theme-toolbar-background */
4081 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4082 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4083 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4084 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4085 --selection-background: #008484; /* --theme-selection-background */
4086 --selection-color: #000000; /* --theme-selection-color */
4089 /* Developer toolbar */
4091 #developer-toolbar {
4092 border-top: 3px solid var(--gcli-background-color);
4093 border-bottom: none;
4096 #developer-toolbar .toolbar-holder {
4097 background-color: #8050B0;
4101 #developer-toolbar .toolbar-holder {
4102 background-color: #8050B0;
4106 #developer-toolbar .toolbar-startcap,
4107 #developer-toolbar .toolbar-endcap{
4108 background-color: #6000CF;
4111 #developer-toolbar {
4113 min-height: 32px; */
4116 #developer-toolbar > toolbarbutton {
4122 .developer-toolbar-button > image {
4123 /* margin: auto 10px; */
4126 #developer-toolbar-toolbox-button > label {
4130 .developer-toolbar-button > .toolbarbutton-icon,
4131 #developer-toolbar-closebutton > .toolbarbutton-icon {
4136 #developer-toolbar-toolbox-button {
4137 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4138 -moz-image-region: rect(0px, 16px, 16px, 0px);
4141 #developer-toolbar-toolbox-button > label {
4145 #developer-toolbar-toolbox-button:hover,
4146 #developer-toolbar-toolbox-button:hover:active,
4147 #developer-toolbar-toolbox-button[checked=true] {
4148 -moz-image-region: rect(0px, 32px, 16px, 16px);
4151 @media (min-resolution: 2dppx) {
4152 #developer-toolbar-toolbox-button {
4153 list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4154 -moz-image-region: rect(0px, 32px, 32px, 0px);
4157 #developer-toolbar-toolbox-button:hover,
4158 #developer-toolbar-toolbox-button:hover:active,
4159 #developer-toolbar-toolbox-button[checked=true] {
4160 -moz-image-region: rect(0px, 64px, 32px, 32px);
4164 #developer-toolbar-closebutton {
4165 list-style-image: url("chrome://browser/skin/devtools/close.png");
4166 -moz-image-region: rect(0px, 16px, 16px, 0px);
4171 #developer-toolbar-closebutton > .toolbarbutton-icon {
4174 #developer-toolbar-closebutton > .toolbarbutton-text {
4178 #developer-toolbar-closebutton:hover,
4179 #developer-toolbar-closebutton:hover:active {
4180 -moz-image-region: rect(0px, 32px, 16px, 16px);
4183 @media (min-resolution: 2dppx) {
4184 #developer-toolbar-closebutton {
4185 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4186 -moz-image-region: rect(0px, 32px, 32px, 0px);
4189 #developer-toolbar-closebutton:hover,
4190 #developer-toolbar-closebutton:hover:active {
4191 -moz-image-region: rect(0px, 64px, 32px, 32px);
4197 html|*#gcli-tooltip-frame,
4198 html|*#gcli-output-frame {
4201 background-color: transparent;
4207 background-color: transparent;
4210 .gclitoolbar-input-node,
4211 .gclitoolbar-complete-node {
4213 -moz-box-align: center;
4217 background-color: transparent;
4220 .gclitoolbar-input-node {
4221 /* line-height: 32px;
4222 outline-style: none; */
4223 background-repeat: no-repeat;
4224 background-color: var(--gcli-input-background);
4227 .gclitoolbar-input-node[focused="true"] {
4228 background-color: var(--gcli-input-focused-background);
4231 .gclitoolbar-input-node::before {
4233 display: inline-block;
4234 -moz-box-ordinal-group: 0;
4238 background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4239 background-position: 0 center;
4240 background-size: 32px 16px;
4243 .gclitoolbar-input-node[focused="true"]::before {
4244 background-position: -16px center;
4247 @media (min-resolution: 2dppx) {
4248 .gclitoolbar-input-node::before {
4249 background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4253 .gclitoolbar-input-node:not([focused="true"]) {
4254 border-color: transparent;
4257 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4258 background-color: var(--selection-background);
4259 color: var(--selection-color);
4262 .gclitoolbar-complete-node {
4264 background-color: transparent;
4267 pointer-events: none;
4270 .gcli-in-incomplete,
4274 .gcli-in-closebrace,
4281 .gcli-in-incomplete {
4282 border-bottom: 2px dotted #8050B0;
4286 border-bottom: 2px dotted #FF0000;
4297 .gcli-in-closebrace {
4301 /* === END commandline.inc.css === */
4303 /* === BEGIN responsivedesign.inc.css === */
4305 /* Responsive Mode */
4307 .browserContainer[responsivemode] {
4308 background-color: #221500;
4309 padding: 0 20px 20px 20px;
4312 .browserStack[responsivemode] {
4313 box-shadow: 0 0 7px #9C9CFF;
4316 .devtools-responsiveui-toolbar {
4317 background: transparent;
4318 /* text color is textColor from dark theme, since no theme is applied to
4319 * the responsive toolbar.
4325 border-bottom-width: 0;
4328 .devtools-responsiveui-menulist,
4329 .devtools-responsiveui-toolbarbutton {
4330 -moz-box-align: center;
4332 /* min-height: 22px;*/
4333 /* margin: 0 3px; */
4336 .devtools-responsiveui-menulist .menulist-editable-box {
4337 background-color: transparent;
4340 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4345 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4346 /* background: hsla(212,7%,57%,.35);*/
4349 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4354 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4355 -moz-box-orient: horizontal;
4358 .devtools-responsiveui-menulist:-moz-focusring,
4359 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4360 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4361 outline-offset: -4px;*/
4364 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4368 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4369 /* border-color: hsla(210,8%,5%,.6);
4370 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4371 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); */
4374 .devtools-responsiveui-menulist[open=true],
4375 .devtools-responsiveui-toolbarbutton[open=true],
4376 .devtools-responsiveui-toolbarbutton[checked=true] {
4377 /* border-color: hsla(210,8%,5%,.6) !important;
4378 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4379 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); */
4382 .devtools-responsiveui-toolbarbutton[checked=true] {
4383 /* color: hsl(208,100%,60%); */
4386 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4387 /* background-color: transparent !important;*/
4390 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4391 /* background-color: hsla(210,8%,5%,.2) !important;*/
4394 .devtools-responsiveui-menulist > .menulist-label-box {
4398 .devtools-responsiveui-menulist > .menulist-dropmarker {
4399 /* display: -moz-box;
4400 background-color: transparent;
4401 list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4402 -moz-box-align: center;
4407 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4410 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4411 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4414 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4415 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4418 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4419 /* padding: 0 1px;*/
4420 -moz-box-align: stretch;
4423 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4424 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4425 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4426 -moz-box-align: center;
4430 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4431 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4435 .devtools-responsiveui-close {
4436 list-style-image: url("chrome://browser/skin/devtools/close.png");
4437 -moz-image-region: rect(0px,16px,16px,0px);
4440 .devtools-responsiveui-close:hover {
4441 -moz-image-region: rect(0px,32px,16px,16px);
4444 .devtools-responsiveui-rotate {
4445 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4446 -moz-image-region: rect(0px,16px,16px,0px);
4449 .devtools-responsiveui-rotate:hover {
4450 -moz-image-region: rect(0px,32px,16px,16px);
4453 @media (min-resolution: 2dppx) {
4454 .devtools-responsiveui-close {
4455 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4458 .devtools-responsiveui-close:hover {
4459 -moz-image-region: rect(0px,64px,32px,32px);
4462 .devtools-responsiveui-rotate {
4463 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4466 .devtools-responsiveui-rotate:hover {
4467 -moz-image-region: rect(0px,64px,32px,32px);
4471 .devtools-responsiveui-touch {
4472 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4473 -moz-image-region: rect(0px,16px,16px,0px);
4476 .devtools-responsiveui-touch:hover,
4477 .devtools-responsiveui-touch[checked],
4478 .devtools-responsiveui-touch[checked]:hover {
4479 -moz-image-region: rect(0px,32px,16px,16px);
4482 @media (min-resolution: 2dppx) {
4483 .devtools-responsiveui-touch {
4484 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4485 -moz-image-region: rect(0px,32px,32px,0px);
4488 .devtools-responsiveui-touch:hover,
4489 .devtools-responsiveui-touch[checked],
4490 .devtools-responsiveui-touch[checked]:hover {
4491 -moz-image-region: rect(0px,64px,32px,32px);
4495 .devtools-responsiveui-screenshot {
4496 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4497 -moz-image-region: rect(0px,16px,16px,0px);
4500 .devtools-responsiveui-screenshot:hover {
4501 -moz-image-region: rect(0px,32px,16px,16px);
4504 @media (min-resolution: 2dppx) {
4505 .devtools-responsiveui-screenshot {
4506 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4509 .devtools-responsiveui-screenshot:hover {
4510 -moz-image-region: rect(0px,64px,32px,32px);
4514 .devtools-responsiveui-resizebarV {
4518 transform: translate(12px, -12px);
4519 background-size: cover;
4520 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4523 .devtools-responsiveui-resizebarH {
4527 transform: translate(-12px, 12px);
4528 background-size: cover;
4529 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4532 .devtools-responsiveui-resizehandle {
4536 transform: translate(12px, 12px);
4537 background-size: cover;
4538 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4541 /* FxOS custom mode with additional buttons and phone look'n feel */
4543 /* Hide devtools manual resizer */
4544 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4545 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4546 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4550 /* Gives responsive mode a phone look'n feel */
4551 .browserStack[responsivemode].fxos-mode {
4552 padding: 60px 15px 0;
4554 border-radius: 25px / 20px;
4555 border-bottom-left-radius: 0;
4556 border-bottom-right-radius: 0;
4557 border: 1px solid #FFFFFF;
4558 border-bottom-width: 0;
4560 background-color: #353535;
4562 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4564 background-image: linear-gradient(to right, #111 11%, #333 56%);
4568 .devtools-responsiveui-hardware-buttons {
4569 -moz-appearance: none;
4572 border: 1px solid #FFFFFF;
4573 border-bottom-left-radius: 25px;
4574 border-bottom-right-radius: 25px;
4575 border-top-width: 0;
4577 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4579 background-image: linear-gradient(to right, #111 11%, #333 56%);
4582 .devtools-responsiveui-home-button {
4583 -moz-user-focus: ignore;
4586 list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4589 .devtools-responsiveui-sleep-button {
4590 -moz-user-focus: ignore;
4591 -moz-appearance: none;
4592 /* compensate browserStack top padding */
4600 border: 1px solid #444;
4601 border-top-right-radius: 12px;
4602 border-top-left-radius: 12px;
4603 border-bottom-color: transparent;
4605 background-image: linear-gradient(to top, #111 11%, #333 56%);
4608 .devtools-responsiveui-sleep-button:hover:active {
4609 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4612 .devtools-responsiveui-volume-buttons {
4616 .devtools-responsiveui-volume-up-button,
4617 .devtools-responsiveui-volume-down-button {
4618 -moz-user-focus: ignore;
4619 -moz-appearance: none;
4620 border: 1px solid red;
4624 border: 1px solid #444;
4625 border-right-color: transparent;
4627 background-image: linear-gradient(to right, #111 11%, #333 56%);
4630 .devtools-responsiveui-volume-up-button:hover:active,
4631 .devtools-responsiveui-volume-down-button:hover:active {
4632 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4635 .devtools-responsiveui-volume-up-button {
4636 border-top-left-radius: 12px;
4639 .devtools-responsiveui-volume-down-button {
4640 border-bottom-left-radius: 12px;
4643 @media (min-resolution: 2dppx) {
4644 .devtools-responsiveui-resizebarV {
4645 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4648 .devtools-responsiveui-resizebarH {
4649 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4652 .devtools-responsiveui-resizehandle {
4653 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4657 /* === END responsivedesign.inc.css === */
4659 /* === including indicator.css is done at the start of the file === */
4663 #developer-toolbar-toolbox-button[error-count]:before {
4667 background-color: #FF0000;
4669 -moz-margin-end: 5px;
4672 /* Social toolbar item */
4674 #social-notification-icon-mentions {
4675 background-color: #000000;
4677 -moz-margin-start: 2px;
4680 #social-notification-icon-mentions:hover {
4681 background-color: #FFCF00;
4684 #social-notification-icon-mentions[open="true"] {
4685 background-color: #FF9F00;
4688 #social-sidebar-splitter {
4692 #socialActivatedNotification .popup-notification-button-container {
4696 .social-activation-icon {
4703 #social-activation-message {
4707 #social-activation-message > label {
4711 /* social toolbar provider menu */
4712 .social-statusarea-popup {
4715 margin-right: -12px;
4718 .social-statusarea-user {
4719 border-bottom: 1px solid #9C9CFF;
4720 background-color: #000000;
4726 .social-statusarea-user-portrait {
4733 .social-statusarea-loggedInStatus {
4734 background: transparent;
4739 list-style-image: none;
4742 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4743 text-decoration: underline;
4746 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4750 .social-panel-frame {
4751 border-radius: inherit;
4754 /* === BEGIN chat.inc.css === */
4756 #social-sidebar-header {
4760 #manage-share-providers,
4761 #social-sidebar-button {
4762 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4763 -moz-image-region: rect(0, 468px, 18px, 450px);
4766 #social-sidebar-button {
4767 -moz-appearance: none;
4772 #manage-share-providers > .toolbarbutton-icon,
4773 #social-sidebar-button > .toolbarbutton-icon {
4777 #manage-share-providers:hover,
4778 #manage-share-providers:hover:active,
4779 #social-sidebar-button:hover,
4780 #social-sidebar-button:hover:active {
4781 -moz-image-region: rect(18px, 468px, 36px, 450px);
4783 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4787 #social-sidebar-button[loading="true"] {
4788 list-style-image: url("chrome://global/skin/icons/loading.gif");
4791 #social-sidebar-favico {
4804 .chat-toolbarbutton {
4805 -moz-appearance: none;
4812 .chat-toolbarbutton:hover {
4813 /* background-color: rgba(255,255,255,.35);*/
4816 .chat-toolbarbutton:hover:active {
4817 /* background-color: rgba(255,255,255,.5);*/
4820 .chat-toolbarbutton > .toolbarbutton-text {
4824 .chat-toolbarbutton > .toolbarbutton-icon {
4829 .chat-close-button {
4830 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4833 .chat-close-button:-moz-any(:hover,:hover:active) {
4834 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4837 .chat-minimize-button {
4838 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4841 .chat-minimize-button:-moz-any(:hover,:hover:active) {
4842 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4846 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4847 transform: rotate(180deg);
4850 .chat-swap-button:-moz-any(:hover,:hover:active) {
4851 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4854 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4860 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4866 background-color: #9C9CFF;
4874 border-bottom: 1px solid #008484;
4878 .chat-titlebar > .notification-anchor-icon {
4883 .chat-titlebar[minimized="true"] {
4884 border-bottom: none;
4887 .chat-titlebar[selected] {
4888 background-color: #008484;
4891 .chat-titlebar[activity] {
4892 background-color: #E7ADE7;
4895 chatbox[dark=true] > .chat-titlebar,
4896 chatbox[dark=true] > .chat-titlebar[selected] {
4897 /* border-bottom: none;
4898 background-color: #000;
4899 background-image: none;*/
4902 chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
4903 /* font-weight: normal;
4914 list-style-image: url("chrome://browser/skin/social/services-16.png");
4915 background-color: #000000;
4921 border-top: 1px solid #008484;
4922 -moz-border-end: 1px solid #008484;
4925 @media (min-resolution: 2dppx) {
4927 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4931 .chatbar-button > .toolbarbutton-icon {
4935 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4942 .chatbar-button > .toolbarbutton-icon {
4946 .chatbar-button:hover > .toolbarbutton-icon,
4947 .chatbar-button[open="true"] > .toolbarbutton-icon {
4951 .chatbar-button:hover,
4952 .chatbar-button[open="true"] {
4955 .chatbar-button > .toolbarbutton-text,
4956 .chatbar-button > .toolbarbutton-menu-dropmarker {
4960 .chatbar-button[activity]:not([open="true"]) {
4961 background-color: #E7ADE7;
4964 .chatbar-button > menupopup > menuitem[activity] {
4969 background: transparent;
4974 -moz-margin-end: 20px;
4980 -moz-margin-start: 4px;
4981 background-color: #000000;
4982 border: 1px solid #9C9CFF;
4983 border-bottom: none;
4984 border-top-left-radius: 2.5px;
4985 border-top-right-radius: 2.5px;
4988 chatbox[minimized="true"] {
4994 -moz-margin-start: 0px;
5000 /* === END chat.inc.css === */
5003 /* background-color: #c4cfde; */
5006 .chat-titlebar[selected] {
5007 /* background-color: #dae3f0; */
5011 -moz-appearance: none;
5012 /* background-color: #c4cfde; */
5015 .chatbar-button > .toolbarbutton-icon {
5016 /* -moz-margin-end: 0; */
5019 .chatbar-button:hover,
5020 .chatbar-button[open="true"] {
5021 /* background-color: #dae3f0; */
5024 .chatbar-button[activity]:not([open="true"]) {
5028 /* border-top-left-radius: 2.5px;
5029 border-top-right-radius: 2.5px; */
5032 /* === BEGIN plugin-doorhanger.inc.css === */
5035 * Plugin Doorhanger Styles
5038 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5039 padding: 6px 1px 2px;
5042 .click-to-play-plugins-notification-center-box {
5045 .plugin-popupnotification-centeritem:nth-child(odd) {
5046 /* background-color: rgba(0,0,0,0.1);*/
5049 .center-item-label {
5051 text-overflow: ellipsis;
5054 .center-item-warning-icon {
5055 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5056 background-repeat: no-repeat;
5059 -moz-margin-start: 6px;
5062 .click-to-play-plugins-notification-button-container {
5065 .click-to-play-popup-button {
5069 .click-to-play-plugins-notification-description-box {
5073 padding-bottom: 3px;
5076 .click-to-play-plugins-outer-description {
5080 .click-to-play-plugins-notification-link,
5085 .messageImage[value="plugin-hidden"] {
5086 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5089 /* Keep any changes to this style in sync with pluginProblem.css */
5090 notification.pluginVulnerable {
5093 notification.pluginVulnerable .messageImage {
5094 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5097 /* === END plugin-doorhanger.inc.css === */
5099 /* === BEGIN login-doorhanger.inc.css === */
5101 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5102 /* Since we display a sliding subview that extends to the border, we cannot
5103 * keep the default padding of arrow panels. We use the same padding in the
5104 * individual content views instead. Since we removed the padding, we also
5105 * have to ensure the contents are clipped to the border box. */
5110 #login-fill-mainview,
5111 #login-fill-details {
5112 padding: var(--panel-arrowcontent-padding);
5115 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5116 transform: translateX(-14px);
5119 #login-fill-mainview,
5120 #login-fill-details {
5121 transition: transform 150ms;
5124 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5125 transform: translateX(105%);
5128 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5129 transform: translateX(-105%);
5132 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5133 background-color: hsla(240,39%,100%,.1);
5136 #login-fill-testing {
5142 border: 1px solid #9C9CFF;
5146 .login-fill-item[disabled] {
5148 background-color: #000000;
5151 .login-fill-item[disabled][selected] {
5152 background-color: #008484;
5160 .login-fill-item.different-hostname > .login-hostname {
5170 #login-fill-details {
5172 background: var(--panel-arrowcontent-background);
5173 color: var(--panel-arrowcontent-color);
5174 background-clip: padding-box;
5175 border-left: 1px solid #9C9CFF;
5176 -moz-margin-start: 38px;
5179 /* === END login-doorhanger.inc.css === */
5181 /* === BEGIN customizeMode.inc.css === */
5183 /* Customization mode */
5185 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5189 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5190 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5191 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5196 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5197 pointer-events: none;
5200 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5201 #PanelUI-contents > .panel-customization-placeholder {
5202 -moz-outline-radius: 2.5px;
5203 outline: 1px dashed transparent;
5206 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5207 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5208 -moz-box-ordinal-group: 0;
5213 outline-offset: -2px;
5214 pointer-events: none;
5220 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5221 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5222 offset from the bottom effectively the same as other targets (-2px). */
5223 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5227 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5228 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5229 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5230 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5234 /* Most target outlines are shown on hover and drag over but the panel menu uses
5235 placeholders instead. */
5236 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5237 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5238 /* nav-bar and panel outlines are always shown */
5239 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5240 outline-color: #A09090;
5243 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5244 transition: outline-color 250ms linear;
5247 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5248 transition: outline-color 250ms linear;
5249 outline-color: #9C9CFF;
5252 #PanelUI-contents > .panel-customization-placeholder {
5254 outline-offset: -5px;
5257 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5259 /* padding-left: 10px;
5260 padding-right: 10px;*/
5263 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5267 #customization-container {
5268 background-color: #000000;
5272 #customization-palette,
5273 #customization-empty {
5274 padding: 0 15px 15px;
5277 #customization-header {
5279 line-height: 1.75em;
5282 margin: 25px 25px 12px;
5283 padding-bottom: 12px;
5284 border-bottom: 1px solid #A09090;
5287 #customization-panel-container {
5288 padding: 10px 10px 0px;
5291 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5292 #customization-footer {
5293 /*background-color: rgb(236,236,236);*/
5296 #customization-footer {
5297 border-top: 1px solid #9C9CFF;
5301 .customizationmode-button {
5305 .customizationmode-button:hover {
5308 #customization-titlebar-visibility-button[checked],
5309 #customization-devedition-theme-button[checked] {
5310 background-color: #008484;
5313 #customization-titlebar-visibility-button[checked]:hover,
5314 #customization-devedition-theme-button[checked]:hover {
5315 background-color: #FFCF00;
5318 #customization-titlebar-visibility-button[checked]:hover:active,
5319 #customization-devedition-theme-button[checked]:hover:active {
5320 background-color: #FF9F00;
5323 .customizationmode-button[disabled="true"] {
5326 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5327 .customizationmode-button > .button-box > .button-icon {
5331 #customization-titlebar-visibility-button {
5332 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5333 -moz-image-region: rect(0, 16px, 16px, 0);
5336 #customization-titlebar-visibility-button:hover {
5337 -moz-image-region: rect(16px, 16px, 32px, 0);
5340 #customization-lwtheme-button,
5341 #customization-titlebar-visibility-button {
5345 #customization-titlebar-visibility-button > .button-box {
5347 padding-bottom: 1px;
5350 #customization-titlebar-visibility-button:hover:active > .button-box {
5355 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5356 #customization-titlebar-visibility-button > .button-box > .button-text {
5357 /* Sadly, button.css thinks its margins are perfect for everyone. */
5358 -moz-margin-start: 5px !important;
5361 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5365 background-size: contain;
5368 #customization-titlebar-visibility-button > .button-box > .button-icon {
5369 vertical-align: middle;
5372 #customization-titlebar-visibility-button[checked] {
5373 -moz-image-region: rect(0, 32px, 16px, 16px);
5374 background-color: #008484;
5377 #customization-titlebar-visibility-button[checked]:hover {
5378 -moz-image-region: rect(16px, 32px, 32px, 16px);
5379 background-color: #FFCF00;
5382 #customization-titlebar-visibility-button[checked]:hover:active {
5383 background-color: #FF9F00;
5386 @media (min-resolution: 1.1dppx) {
5387 #customization-titlebar-visibility-button {
5388 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5389 -moz-image-region: rect(0, 48px, 48px, 0);
5392 #customization-titlebar-visibility-button:hover {
5393 -moz-image-region: rect(48px, 48px, 96px, 0);
5396 #customization-titlebar-visibility-button[checked] {
5397 -moz-image-region: rect(0, 96px, 48px, 48px);
5400 #customization-titlebar-visibility-button[checked]:hover {
5401 -moz-image-region: rect(48px, 96px, 96px, 48px);
5405 #main-window[customize-entered] #customization-panel-container {
5406 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5407 background-position: left top;
5408 background-repeat: repeat;
5409 background-size: auto;
5410 background-attachment: fixed;
5413 toolbarpaletteitem[place="toolbar"] {
5414 transition: border-width 250ms ease-in-out;
5417 toolbarpaletteitem[mousedown] {
5418 outline: 1px solid #008484;
5419 cursor: -moz-grabbing;
5423 .panel-customization-placeholder,
5424 toolbarpaletteitem[place="palette"],
5425 toolbarpaletteitem[place="panel"] {
5426 transition: transform .3s ease-in-out;
5429 #customization-palette {
5430 transition: opacity .3s ease-in-out;
5434 #customization-palette[showing="true"] {
5438 toolbarpaletteitem[notransition].panel-customization-placeholder,
5439 toolbarpaletteitem[notransition][place="toolbar"],
5440 toolbarpaletteitem[notransition][place="palette"],
5441 toolbarpaletteitem[notransition][place="panel"] {
5445 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5446 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5447 toolbarpaletteitem > toolbaritem.panel-wide-item,
5448 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5449 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5452 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5453 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5454 transform: scale(1.3);
5457 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5458 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5459 transform: scale(1.1);
5462 /* Override the toolkit styling for items being dragged over. */
5463 toolbarpaletteitem[place="toolbar"] {
5464 border-left-width: 0;
5465 border-right-width: 0;
5470 #customization-palette:not([hidden]) {
5471 margin-bottom: 25px;
5474 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5475 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5476 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5477 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5481 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5482 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5492 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5493 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5497 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5498 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5501 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5502 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5506 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5507 -moz-box-pack: center;
5511 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5512 -moz-margin-end: 5px;
5515 #customization-palette > toolbarpaletteitem > label {
5521 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5522 -moz-box-orient: vertical;
5523 /* Make the panel padding uniform across all platforms due to the
5524 styling of the section headers and footer. */
5528 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5533 .customization-lwtheme-menu-theme {
5534 -moz-appearance: none;
5537 -moz-padding-end: 5px;
5539 -moz-padding-start: 0;
5542 .customization-lwtheme-menu-theme[defaulttheme] {
5543 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5546 .customization-lwtheme-menu-theme[active="true"] {
5547 background-color: #008484;
5550 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5554 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5558 #customization-lwtheme-menu-header,
5559 #customization-lwtheme-menu-recommended {
5564 #customization-lwtheme-menu-header,
5565 #customization-lwtheme-menu-recommended,
5566 #customization-lwtheme-menu-footer {
5567 background-color: #A09090;
5569 margin-right: -10px;
5573 #customization-lwtheme-menu-header {
5575 border-top-right-radius: 3px;
5576 border-top-left-radius: 3px;
5579 #customization-lwtheme-menu-recommended {
5582 #customization-lwtheme-menu-footer {
5583 margin-bottom: -10px;
5584 border-bottom-right-radius: 3px;
5585 border-bottom-left-radius: 3px;
5588 .customization-lwtheme-menu-footeritem {
5589 -moz-appearance: none;
5591 background-color: #C09070;
5593 border: 1px solid transparent;
5599 .customization-lwtheme-menu-footeritem:hover {
5600 background-color: #FFCF00;
5603 .customization-lwtheme-menu-footeritem:first-child {
5606 /* === END customizeMode.inc.css === */
5608 /* === BEGIN customizeTip.inc.css === */
5610 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5617 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5618 border: 1px solid #9C9CFF;
5622 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5623 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5626 .customization-tipPanel-infoBox {
5627 margin: 20px 25px 25px;
5629 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5630 background-repeat: no-repeat;
5633 .customization-tipPanel-content {
5639 .customization-tipPanel-em {
5644 .customization-tipPanel-contentImage {
5646 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5654 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5655 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5658 .customization-tipPanel-link {
5659 -moz-appearance: none;
5660 background: transparent;
5668 .customization-tipPanel-link > .button-box > .button-text {
5669 margin: 0 !important;
5672 .customization-tipPanel-closeBox > .close-icon {
5673 -moz-appearance: none;
5675 -moz-margin-end: -25px;
5678 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5679 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5680 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5683 /* === END customizeTip.inc.css === */
5686 * This next rule is a hack to disable subpixel anti-aliasing on all
5687 * labels during the customize mode transition. Subpixel anti-aliasing
5688 * on Windows with Direct2D layers acceleration is particularly slow to
5689 * paint, so this hack is how we sidestep that performance bottleneck.
5691 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5692 transform: perspective(0.01px);
5695 #main-window[customize-entered] > #tab-view-deck {
5696 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5697 background-attachment: fixed;
5700 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5701 background-repeat: no-repeat;
5702 background-position: right top;
5703 background-attachment: fixed;
5704 /* The image will get set from CustomizeMode.jsm */
5705 background-image: none;
5706 background-color: transparent;
5709 #main-window[customization-lwtheme]:-moz-lwtheme {
5710 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5711 background-repeat: repeat;
5712 background-attachment: fixed;
5713 background-position: left top;
5716 #main-window[customize-entered] #browser-bottombox,
5717 #main-window[customize-entered] #customization-container {
5718 border-left: 1px solid #9C9CFF;
5719 border-right: 1px solid #9C9CFF;
5720 background-clip: padding-box;
5723 #main-window[customize-entered] #browser-bottombox {
5724 border-bottom: 1px solid #9C9CFF;
5727 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5731 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5735 /* End customization mode */
5737 /* Private browsing indicators */
5740 * Currently, we have two places where we put private browsing indicators on
5741 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5742 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5743 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5744 * want the bottom border of the image to line up with the bottom of the window
5745 * caption buttons. That's why there's so much special-casing going on in here.
5747 .private-browsing-indicator {
5749 pointer-events: none;
5752 #private-browsing-indicator-titlebar {
5757 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5761 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5765 #TabsToolbar > .private-browsing-indicator {
5766 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5767 -moz-margin-start: 4px;
5771 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5772 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5773 * min/max/close window buttons.
5775 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5776 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5777 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5778 -moz-margin-end: 4px;
5784 /* This one is for Linux */
5785 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5786 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5790 /* End private browsing indicators */
5792 /* === BEGIN UITour.inc.css === */
5796 #UITourHighlightContainer {
5797 -moz-appearance: none;
5799 background-color: transparent;
5800 /* This is a buffer to compensate for the movement in the "wobble" effect */
5805 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5806 border-radius: 40px;
5807 border: 1px solid #9C9CFF;
5808 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5809 on Linux without an X compositor where opacity is either 0 or 1. */
5810 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5815 #UITourTooltipBody {
5816 -moz-margin-end: 14px;
5819 #UITourTooltipBody > vbox {
5823 #UITourTooltipIconContainer {
5824 -moz-margin-start: -16px;
5827 #UITourTooltipIcon {
5830 -moz-margin-start: 28px;
5831 -moz-margin-end: 28px;
5834 #UITourTooltipTitle,
5835 #UITourTooltipDescription {
5839 #UITourTooltipTitle {
5842 -moz-margin-start: 0;
5847 #UITourTooltipDescription {
5848 -moz-margin-start: 0;
5851 line-height: 1.8rem;
5852 margin-bottom: 0; /* Override global.css */
5855 #UITourTooltipClose {
5856 -moz-appearance: none;
5858 background-color: transparent;
5860 -moz-margin-start: 4px;
5864 #UITourTooltipClose > .toolbarbutton-text {
5868 #UITourTooltipButtons {
5870 background-color: rgba(0,0,0,.2);
5871 border-top: 1px solid rgba(0,0,0,.4);
5872 margin: 24px -16px -16px;
5876 #UITourTooltipButtons > label,
5877 #UITourTooltipButtons > button {
5881 #UITourTooltipButtons > label:first-child,
5882 #UITourTooltipButtons > button:first-child {
5883 -moz-margin-start: 0;
5886 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5889 -moz-margin-end: 5px;
5892 #UITourTooltipButtons > label,
5893 #UITourTooltipButtons > button .button-text {
5897 #UITourTooltipButtons > button:not(.button-link) {
5898 -moz-appearance: none;
5899 background-color: #C09070;
5900 border-radius: 3000px;
5904 transition-property: background-color, color;
5905 transition-duration: 150ms;
5908 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5909 background-color: #FFCF00;
5913 #UITourTooltipButtons > label,
5914 #UITourTooltipButtons > button.button-link {
5915 -moz-appearance: none;
5916 background: transparent;
5919 color: rgba(0,0,0,0.35);
5921 padding-right: 10px;
5924 #UITourTooltipButtons > button.button-link:hover {
5928 /* The primary button gets the same color as the customize button. */
5929 #UITourTooltipButtons > button.button-primary {
5930 background-color: #A06060; /* LCARS default button background color */
5933 padding-right: 30px;
5936 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5937 background-color: #FFCF00;
5941 /* Notification overrides for Heartbeat UI */
5943 notification.heartbeat {
5944 background-color: #A09090;
5948 @keyframes pulse-onshow {
5951 transform: scale(1.0);
5955 transform: scale(1.1);
5958 transform: scale(1.0);
5961 transform: scale(1.1);
5964 transform: scale(1.0);
5968 @keyframes pulse-twice {
5970 transform: scale(1.1);
5973 transform: scale(0.8);
5976 transform: scale(1);
5980 .messageText.heartbeat {
5982 /* text-shadow: none; */
5983 -moz-margin-start: 0px;
5986 .messageImage.heartbeat {
5989 -moz-margin-start: 8px;
5990 -moz-margin-end: 8px;
5993 .messageImage.heartbeat.pulse-onshow {
5994 animation-name: pulse-onshow;
5995 animation-duration: 1.5s;
5996 animation-iteration-count: 1;
5997 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6000 .messageImage.heartbeat.pulse-twice {
6001 animation-name: pulse-twice;
6002 animation-duration: 1s;
6003 animation-iteration-count: 2;
6004 animation-timing-function: linear;
6007 /* Learn More link styles */
6008 .heartbeat > .text-link {
6010 -moz-margin-start: 0px;
6013 .heartbeat > .text-link:hover {
6015 text-decoration: none;
6018 .heartbeat > .text-link:hover:active {
6022 /* Heartbeat UI Rating Star Classes */
6023 .heartbeat > #star-rating-container {
6025 /* margin-bottom: 4px;*/
6028 .heartbeat > #star-rating-container > #star5 {
6029 -moz-box-ordinal-group: 5;
6032 .heartbeat > #star-rating-container > #star4 {
6033 -moz-box-ordinal-group: 4;
6036 .heartbeat > #star-rating-container > #star3 {
6037 -moz-box-ordinal-group: 3;
6040 .heartbeat > #star-rating-container > #star2 {
6041 -moz-box-ordinal-group: 2;
6044 .heartbeat > #star-rating-container > .star-x {
6045 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6047 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6048 -moz-margin-end: 4px !important;
6053 .heartbeat > #star-rating-container > .star-x:hover,
6054 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6055 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6058 /* === END UITour.inc.css === */
6060 #UITourTooltipButtons {
6062 * Override the --panel-arrowcontent-padding so the background extends
6063 * to the sides and bottom of the panel.
6066 margin-right: -10px;
6067 margin-bottom: -10px;
6070 /* === BEGIN contextmenu.inc.css === */
6072 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6075 #context-navigation > .menuitem-iconic {
6077 -moz-box-pack: center;
6078 -moz-box-align: center;
6081 #context-navigation > .menuitem-iconic[disabled="true"] {
6082 background-color: transparent;
6085 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6086 -moz-appearance: none;
6089 #context-back > .menu-iconic-left {
6090 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6091 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6092 -moz-image-region: rect(0, 54px, 18px, 36px);
6095 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6096 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6097 -moz-image-region: rect(18px, 54px, 36px, 36px);
6100 #context-back[disabled="true"] > .menu-iconic-left {
6101 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6102 -moz-image-region: rect(36px, 54px, 54px, 36px);
6105 #context-forward > .menu-iconic-left {
6106 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6107 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6108 -moz-image-region: rect(0, 72px, 18px, 54px);
6111 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6112 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6113 -moz-image-region: rect(18px, 72px, 36px, 54px);
6116 #context-forward[disabled="true"] > .menu-iconic-left {
6117 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6118 -moz-image-region: rect(36px, 72px, 54px, 54px);
6121 #context-reload > .menu-iconic-left {
6122 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6123 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6124 -moz-image-region: rect(0, 14px, 14px, 0);
6127 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6128 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6129 -moz-image-region: rect(14px, 14px, 28px, 0);
6132 #context-reload[disabled="true"] > .menu-iconic-left {
6133 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6134 -moz-image-region: rect(28px, 14px, 42px, 0);
6137 #context-stop > .menu-iconic-left {
6138 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6139 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6140 -moz-image-region: rect(0, 28px, 14px, 14px);
6143 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6144 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6145 -moz-image-region: rect(14px, 28px, 28px, 14px);
6148 #context-stop[disabled="true"] > .menu-iconic-left {
6149 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6150 -moz-image-region: rect(28px, 28px, 42px, 14px);
6153 #context-bookmarkpage > .menu-iconic-left {
6154 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6155 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6156 -moz-image-region: rect(0, 144px, 18px, 126px);
6159 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6160 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6161 -moz-image-region: rect(18px, 144px, 36px, 126px);
6164 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6165 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6166 -moz-image-region: rect(36px, 144px, 54px, 126px);
6169 #context-bookmarkpage[starred=true] {
6170 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6171 -moz-image-region: rect(0px, 162px, 18px, 144px);
6174 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6175 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6176 -moz-image-region: rect(18px, 162px, 36px, 144px);
6179 #context-bookmarkpage[starred=true][disabled=true] {
6180 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6181 -moz-image-region: rect(36px, 162px, 54px, 144px);
6184 #context-back:-moz-locale-dir(rtl),
6185 #context-forward:-moz-locale-dir(rtl),
6186 #context-reload:-moz-locale-dir(rtl) {
6187 transform: scaleX(-1);
6190 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6191 width: 18px; /*16px;*/
6192 height: 18px; /*16px;*/
6196 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6197 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6203 #context-media-eme-learnmore {
6204 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6207 #context-media-eme-learnmore {
6208 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6211 /* === END contextmenu.inc.css === */
6213 #context-navigation {
6216 #context-sep-navigation {
6217 /* margin-top: -4px; */
6220 .browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {