1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 --identity-box-verified-background-color: #000000;
44 --panel-separator-color: #A09090;
46 --urlbar-separator-color: #9C9CFF;
50 -moz-box-orient: vertical; /* for flex hack */
54 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
57 /* ::::: primary toolbar ::::: */
59 .toolbar-primary > .toolbar-box > .toolbar-holder {
60 background-color: #A09090;
63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
65 background-color: #9C9CFF;
68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
69 are not autohiding the menubar. */
70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
84 /* margin-top: var(--space-above-tabbar);*/
87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
89 #toolbar-menubar:not([autohide="true"]) {
90 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110 outline-color: #A09090;
116 #navigator-toolbox::after {
119 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 #navigator-toolbox > toolbar {
126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130 overflow: -moz-hidden-unscrollable;
132 transition: min-height 170ms ease-out, max-height 170ms ease-out;
135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
138 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143 /* Indent also due to non-applicable aero rule in original Windows theme. */
144 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
147 background-color: #6000CF;
151 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153 background-color: #8050B0;
157 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
161 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
165 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
173 #titlebar-buttonbox > .titlebar-button {
179 /* Position the toolbar above the bottom of background tabs */
184 #personal-bookmarks {
185 /* min-height: 24px; */
188 #PersonalToolbar > #home-button {
189 -moz-box-orient: horizontal;
192 #PersonalToolbar > #home-button > .toolbarbutton-text {
196 #print-preview-toolbar:not(:-moz-lwtheme) {
197 /* -moz-appearance: toolbox; */
200 #browser-bottombox:not(:-moz-lwtheme) {
203 /* ::::: titlebar ::::: */
207 background-color: #6000CF;
210 #titlebar:-moz-window-inactive {
211 background-color: #8050B0;
215 #main-window[sizemode="normal"] > #titlebar {
220 #main-window[sizemode="maximized"] > #titlebar {
224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
226 #main-window[sizemode="normal"] > #titlebar,
227 #main-window[sizemode="maximized"] > #titlebar {
229 /* There is a margin-bottom set to -23 by code. */
233 /* The button box must appear on top of the navigator-toolbox in order for
234 * click and hover mouse events to work properly for the button in the restored
235 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236 * can swallow those events. It will also place the buttons above the fog on
237 * themes with Aero Glass.
240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
241 -moz-appearance: none;
244 -moz-margin-end: 3px;
248 .titlebar-placeholder[type="appmenu-button"] {
252 .titlebar-placeholder[type="caption-buttons"] {
256 /* titlebar command buttons */
258 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
261 #titlebar-min:hover {
262 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
266 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
269 #titlebar-max:hover {
270 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
273 #main-window[sizemode="maximized"] #titlebar-max {
274 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
277 #main-window[sizemode="maximized"] #titlebar-max:hover {
278 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
282 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
285 #titlebar-close:hover {
286 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
291 #titlebar-fullscreen-button {
292 -moz-appearance: none;
293 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294 -moz-image-region: rect(0px, 16px, 16px, 0px);
297 #titlebar-fullscreen-button:hover {
298 -moz-image-region: rect(0px, 32px, 16px, 16px);
301 @media (min-resolution: 2dppx) {
302 #titlebar-fullscreen-button {
303 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304 -moz-image-region: rect(0px, 32px, 32px, 0px);
307 #titlebar-fullscreen-button:hover {
308 -moz-image-region: rect(0px, 64px, 32px, 32px);
314 /* ::::: bookmark buttons ::::: */
316 toolbarbutton.bookmark-item:not(.subviewbutton),
317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323 toolbarbutton.bookmark-item[open="true"] {
326 -moz-padding-start: 4px;
327 -moz-padding-end: 2px;*/
330 .bookmark-item > .toolbarbutton-icon,
331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
334 -moz-margin-start: 1px;
335 -moz-margin-end: 2px;
340 /* Force the display of the label for bookmarks */
341 .bookmark-item > .toolbarbutton-text,
342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
343 display: -moz-box !important;
346 .bookmark-item > .toolbarbutton-menu-dropmarker {
350 #bookmarks-toolbar-placeholder {
351 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
352 -moz-box-orient: horizontal;
355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
360 /* ----- BOOKMARK STAR ANIMATION ----- */
362 @keyframes animation-bookmarkAdded {
363 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
366 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
369 @keyframes animation-bookmarkPulse {
370 from { transform: scale(1); }
371 50% { transform: scale(1.3); }
372 to { transform: scale(1); }
375 #bookmarked-notification-container {
384 #bookmarked-notification {
385 background-size: 16px;
386 background-position: center;
387 background-repeat: no-repeat;
393 #bookmarked-notification-dropmarker-anchor {
398 #bookmarked-notification-dropmarker-icon {
404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406 animation: animation-bookmarkAdded 800ms;
407 animation-timing-function: ease, ease, ease;
410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
411 list-style-image: none !important;
414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
416 animation: animation-bookmarkPulse 300ms;
417 animation-delay: 600ms;
418 animation-timing-function: ease-out;
421 /* ::::: bookmark menus ::::: */
424 menuitem.bookmark-item {
429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435 -moz-padding-start: 0px;
438 /* ::::: bookmark items ::::: */
441 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
442 -moz-image-region: auto;
445 .bookmark-item[container] {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
447 -moz-image-region: auto;
450 .bookmark-item[container][open] {
451 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
452 -moz-image-region: auto;
455 .bookmark-item[container][livemark] {
456 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
457 -moz-image-region: auto;
460 .bookmark-item[container][livemark] .bookmark-item {
461 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
462 -moz-image-region: rect(0px, 16px, 16px, 0px);
465 .bookmark-item[container][livemark] .bookmark-item[visited] {
466 -moz-image-region: rect(0px, 32px, 16px, 16px);
469 .bookmark-item[container][query] {
470 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
471 -moz-image-region: auto;
474 .bookmark-item[query][tagContainer] {
475 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476 -moz-image-region: auto;
479 .bookmark-item[query][dayContainer] {
480 list-style-image: url("chrome://communicator/skin/history/calendar.png");
481 -moz-image-region: auto;
484 .bookmark-item[query][hostContainer] {
485 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
486 -moz-image-region: auto;
489 .bookmark-item[query][hostContainer][open] {
490 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
491 -moz-image-region: auto;
494 .bookmark-item[cutting] > .toolbarbutton-icon,
495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
499 .bookmark-item[cutting] > .toolbarbutton-text,
500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
504 /* ::::: primary toolbar buttons ::::: */
506 /* === BEGIN toolbarbuttons.inc.css === */
508 /* Whole section of this included file: */
509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
511 #social-share-button, #open-file-button, #find-button, #developer-button,
512 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
513 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
515 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
518 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
520 toolbar[brighttext] #pocket-button,
522 list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
526 -moz-image-region: rect(0, 36px, 18px, 18px);
529 #back-button:hover:not([disabled="true"]) {
530 -moz-image-region: rect(18px, 36px, 36px, 18px);
533 #back-button[disabled="true"] {
534 -moz-image-region: rect(36px, 36px, 54px, 18px);
538 -moz-image-region: rect(0, 72px, 18px, 54px);
541 #forward-button:hover:not([disabled="true"]) {
542 -moz-image-region: rect(18px, 72px, 36px, 54px);
545 #forward-button[disabled="true"] {
546 -moz-image-region: rect(36px, 72px, 54px, 54px);
549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
550 #forward-button:-moz-locale-dir(rtl) {
551 transform: scaleX(-1);
554 #home-button[cui-areatype="toolbar"] {
555 -moz-image-region: rect(0, 126px, 18px, 108px);
558 #home-button[cui-areatype="toolbar"]:hover {
559 -moz-image-region: rect(18px, 126px, 36px, 108px);
562 #bookmarks-menu-button[cui-areatype="toolbar"] {
563 -moz-image-region: rect(0, 144px, 18px, 126px);
566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
568 -moz-image-region: rect(18px, 144px, 36px, 126px);
571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
573 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
574 background-color: transparent !important;
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
578 -moz-image-region: rect(0, 162px, 18px, 144px);
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
584 /* When starred and clicked (for edit/delete dialog),
585 * then only the menubutton-button itself is open, but not the whole menubutton. */
586 -moz-image-region: rect(18px, 162px, 36px, 144px);
589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
590 -moz-image-region: rect(0, 630px, 18px, 612px);
593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
595 -moz-box-align: center;
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
600 -moz-image-region: rect(18px, 630px, 36px, 612px);
603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
607 -moz-padding-start: 2px;
608 -moz-padding-end: 0px;
611 #history-panelmenu[cui-areatype="toolbar"] {
612 -moz-image-region: rect(0, 180px, 18px, 162px);
615 #history-panelmenu[cui-areatype="toolbar"]:hover,
616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
617 -moz-image-region: rect(18px, 180px, 36px, 162px);
620 #downloads-button[cui-areatype="toolbar"] {
621 -moz-image-region: rect(0, 198px, 18px, 180px);
624 #downloads-button[cui-areatype="toolbar"]:hover,
625 #downloads-button[cui-areatype="toolbar"][open="true"] {
626 -moz-image-region: rect(18px, 198px, 36px, 180px);
629 #add-ons-button[cui-areatype="toolbar"] {
630 -moz-image-region: rect(0, 216px, 18px, 198px);
633 #add-ons-button[cui-areatype="toolbar"]:hover {
634 -moz-image-region: rect(18px, 216px, 36px, 198px);
637 #open-file-button[cui-areatype="toolbar"] {
638 -moz-image-region: rect(0, 234px, 18px, 216px);
641 #open-file-button[cui-areatype="toolbar"]:hover {
642 -moz-image-region: rect(18px, 234px, 36px, 216px);
645 #save-page-button[cui-areatype="toolbar"] {
646 -moz-image-region: rect(0, 252px, 18px, 234px);
649 #save-page-button[cui-areatype="toolbar"]:hover {
650 -moz-image-region: rect(18px, 252px, 36px, 234px);
653 #sync-button[cui-areatype="toolbar"] {
654 -moz-image-region: rect(0, 270px, 18px, 252px);
657 #sync-button[cui-areatype="toolbar"]:hover {
658 -moz-image-region: rect(18px, 270px, 36px, 252px);
661 #sync-button[cui-areatype="toolbar"][status="active"],
662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
663 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
664 -moz-image-region: rect(0, 18px, 18px, 0px);
668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
670 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
674 #feed-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 288px, 18px, 270px);
678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
680 -moz-image-region: rect(18px, 288px, 36px, 270px);
683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
684 -moz-image-region: rect(36px, 288px, 54px, 270px);
687 #social-share-button[cui-areatype="toolbar"] {
688 -moz-image-region: rect(0px, 306px, 18px, 288px);
691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
692 #social-share-button[cui-areatype="toolbar"][open="true"] {
693 -moz-image-region: rect(18px, 306px, 36px, 288px);
696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
697 -moz-image-region: rect(36px, 306px, 54px, 288px);
700 #characterencoding-button[cui-areatype="toolbar"] {
701 -moz-image-region: rect(0, 324px, 18px, 306px);
704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
706 -moz-image-region: rect(18px, 324px, 36px, 306px);
709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
710 -moz-image-region: rect(36px, 324px, 54px, 306px);
713 #new-window-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 342px, 18px, 324px);
717 #new-window-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 342px, 36px, 324px);
721 #e10s-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 342px, 18px, 324px);
725 #e10s-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 342px, 36px, 324px);
729 #e10s-button > .toolbarbutton-icon {
730 transform: scaleY(-1);
733 #new-tab-button[cui-areatype="toolbar"] {
734 -moz-image-region: rect(0, 360px, 18px, 342px);
737 #new-tab-button[cui-areatype="toolbar"]:hover {
738 -moz-image-region: rect(18px, 360px, 36px, 342px);
741 #privatebrowsing-button[cui-areatype="toolbar"] {
742 -moz-image-region: rect(0, 378px, 18px, 360px);
745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
746 -moz-image-region: rect(18px, 378px, 36px, 360px);
749 #find-button[cui-areatype="toolbar"] {
750 -moz-image-region: rect(0, 396px, 18px, 378px);
753 #find-button[cui-areatype="toolbar"]:hover {
754 -moz-image-region: rect(18px, 396px, 36px, 378px);
757 #print-button[cui-areatype="toolbar"] {
758 -moz-image-region: rect(0, 414px, 18px, 396px);
761 #print-button[cui-areatype="toolbar"]:hover {
762 -moz-image-region: rect(18px, 414px, 36px, 396px);
765 #fullscreen-button[cui-areatype="toolbar"] {
766 -moz-image-region: rect(0, 432px, 18px, 414px);
769 #fullscreen-button[cui-areatype="toolbar"]:hover {
770 -moz-image-region: rect(18px, 432px, 36px, 414px);
773 #developer-button[cui-areatype="toolbar"] {
774 -moz-image-region: rect(0, 450px, 18px, 432px);
777 #developer-button[cui-areatype="toolbar"]:hover,
778 #developer-button[cui-areatype="toolbar"][open="true"] {
779 -moz-image-region: rect(18px, 450px, 36px, 432px);
782 #preferences-button[cui-areatype="toolbar"] {
783 -moz-image-region: rect(0, 468px, 18px, 450px);
786 #preferences-button[cui-areatype="toolbar"]:hover {
787 -moz-image-region: rect(18px, 468px, 36px, 450px);
790 #PanelUI-menu-button {
791 -moz-image-region: rect(0, 486px, 18px, 468px);
794 #PanelUI-menu-button:hover,
795 #PanelUI-menu-button[open="true"] {
796 -moz-image-region: rect(18px, 486px, 36px, 468px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
800 -moz-image-region: rect(0, 504px, 18px, 486px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
804 -moz-image-region: rect(18px, 504px, 36px, 486px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
808 -moz-image-region: rect(36px, 504px, 54px, 486px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
812 -moz-image-region: rect(0, 522px, 18px, 504px);
815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
816 -moz-image-region: rect(18px, 522px, 36px, 504px);
819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
820 -moz-image-region: rect(36px, 522px, 54px, 504px);
823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
824 -moz-image-region: rect(0, 540px, 18px, 522px);
827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
828 -moz-image-region: rect(18px, 540px, 36px, 522px);
831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
832 -moz-image-region: rect(36px, 540px, 54px, 522px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
836 -moz-image-region: rect(0, 558px, 18px, 540px);
839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
840 -moz-image-region: rect(18px, 558px, 36px, 540px);
843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
844 -moz-image-region: rect(36px, 558px, 54px, 540px);
847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
848 -moz-image-region: rect(0, 576px, 18px, 558px);
851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
852 -moz-image-region: rect(18px, 576px, 36px, 558px);
855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
856 -moz-image-region: rect(36px, 576px, 54px, 558px);
859 #nav-bar-overflow-button {
860 -moz-image-region: rect(0, 612px, 18px, 594px);
863 #nav-bar-overflow-button:hover,
864 #nav-bar-overflow-button[open="true"] {
865 -moz-image-region: rect(18px, 612px, 36px, 594px);
868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
869 transform: scaleX(-1);
873 -moz-image-region: rect(0, 648px, 18px, 630px);
876 #tabview-button:hover {
877 -moz-image-region: rect(18px, 648px, 36px, 630px);
880 #email-link-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 666px, 18px, 648px);
884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
885 -moz-image-region: rect(18px, 666px, 36px, 648px);
888 #email-button[cui-areatype="toolbar"][disabled="true"] {
889 -moz-image-region: rect(36px, 666px, 54px, 648px);
892 #sidebar-button[cui-areatype="toolbar"] {
893 -moz-image-region: rect(0, 684px, 18px, 666px);
896 #sidebar-button[cui-areatype="toolbar"]:hover {
897 -moz-image-region: rect(18px, 684px, 36px, 666px);
900 #panic-button[cui-areatype="toolbar"] {
901 -moz-image-region: rect(0, 702px, 18px, 684px);
904 #panic-button[cui-areatype="toolbar"]:hover,
905 #panic-button[cui-areatype="toolbar"][open] {
906 -moz-image-region: rect(18px, 702px, 36px, 684px);
909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
910 transform: scaleX(-1);
914 #loop-button > .toolbarbutton-badge-stack {
915 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
916 -moz-image-region: rect(0, 18px, 18px, 0);
919 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
920 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
921 -moz-image-region: rect(0, 90px, 18px, 72px);
924 #loop-button[state="disabled"],
925 #loop-button[disabled="true"],
926 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
927 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
928 -moz-image-region: rect(0, 36px, 18px, 18px);
931 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
932 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
933 -moz-image-region: rect(0, 126px, 18px, 108px);
936 #loop-button:not([disabled="true"])[state="error"],
937 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
938 -moz-image-region: rect(0, 54px, 18px, 36px);
941 #loop-button:not([disabled="true"])[state="action"],
942 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
943 -moz-image-region: rect(0, 72px, 18px, 54px);
946 #loop-button:not([disabled="true"])[state="active"],
947 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
948 -moz-image-region: rect(0, 108px, 18px, 90px);
951 #webide-button[cui-areatype="toolbar"] {
952 -moz-image-region: rect(0, 738px, 18px, 720px);
955 #webide-button[cui-areatype="toolbar"]:hover {
956 -moz-image-region: rect(18px, 738px, 36px, 720px);
959 #pocket-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 774px, 18px, 756px);
963 #pocket-button[cui-areatype="toolbar"]:hover,
964 #pocket-button[cui-areatype="toolbar"][open] {
965 -moz-image-region: rect(18px, 774px, 36px, 756px);
968 /* === END toolbarbuttons.inc.css === */
970 /* === BEGIN menupanel.inc.css === */
972 /* Menu panel and palette styles */
975 /* avoid aero overrides with changed filenames */
976 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
977 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
980 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
981 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
982 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
983 #social-share-button, #open-file-button, #find-button, #developer-button,
984 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
985 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
986 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
987 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
988 #pocket-button)[cui-areatype="menu-panel"],
989 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
990 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
991 #social-share-button, #open-file-button, #find-button, #developer-button,
992 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
993 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
994 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
995 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
997 list-style-image: var(--menupanel-list-style-image);
1000 #home-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #home-button {
1002 -moz-image-region: rect(0px, 128px, 32px, 96px);
1005 #home-button[cui-areatype="menu-panel"]:hover,
1006 toolbarpaletteitem[place="palette"] > #home-button:hover {
1007 -moz-image-region: rect(32px, 128px, 64px, 96px);
1010 #bookmarks-menu-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1012 -moz-image-region: rect(0px, 192px, 32px, 160px);
1015 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1016 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1017 -moz-image-region: rect(32px, 192px, 64px, 160px);
1020 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1021 -moz-image-region: rect(32px, 192px, 64px, 160px);
1024 #history-panelmenu[cui-areatype="menu-panel"],
1025 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1026 -moz-image-region: rect(0px, 224px, 32px, 192px);
1029 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1030 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1031 -moz-image-region: rect(32px, 224px, 64px, 192px);
1034 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1035 -moz-image-region: rect(32px, 224px, 64px, 192px);
1038 #downloads-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #downloads-button {
1040 -moz-image-region: rect(0px, 256px, 32px, 224px);
1043 #downloads-button[cui-areatype="menu-panel"]:hover,
1044 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1045 -moz-image-region: rect(32px, 256px, 64px, 224px);
1048 #add-ons-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #add-ons-button {
1050 -moz-image-region: rect(0px, 288px, 32px, 256px);
1053 #add-ons-button[cui-areatype="menu-panel"]:hover,
1054 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1055 -moz-image-region: rect(32px, 288px, 64px, 256px);
1058 #open-file-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #open-file-button {
1060 -moz-image-region: rect(0px, 320px, 32px, 288px);
1063 #open-file-button[cui-areatype="menu-panel"]:hover,
1064 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1065 -moz-image-region: rect(32px, 320px, 64px, 288px);
1068 #save-page-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #save-page-button {
1070 -moz-image-region: rect(0px, 352px, 32px, 320px);
1073 #save-page-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1075 -moz-image-region: rect(32px, 352px, 64px, 320px);
1078 #sync-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #sync-button {
1080 -moz-image-region: rect(0px, 384px, 32px, 352px);
1083 #sync-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1085 -moz-image-region: rect(32px, 384px, 64px, 352px);
1088 #sync-button[cui-areatype="menu-panel"][status="active"] {
1089 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1090 -moz-image-region: rect(0px, 32px, 32px, 0px);
1093 #feed-button[cui-areatype="menu-panel"],
1094 toolbarpaletteitem[place="palette"] > #feed-button {
1095 -moz-image-region: rect(0px, 416px, 32px, 384px);
1098 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1099 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1100 -moz-image-region: rect(32px, 416px, 64px, 384px);
1103 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1104 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1105 -moz-image-region: rect(64px, 416px, 96px, 384px);
1108 #social-share-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #social-share-button {
1110 -moz-image-region: rect(0px, 448px, 32px, 416px);
1113 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1115 -moz-image-region: rect(32px, 448px, 64px, 416px);
1118 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1120 -moz-image-region: rect(64px, 448px, 96px, 416px);
1123 #characterencoding-button[cui-areatype="menu-panel"],
1124 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1125 -moz-image-region: rect(0px, 480px, 32px, 448px);
1128 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1130 -moz-image-region: rect(32px, 480px, 64px, 448px);
1133 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1135 -moz-image-region: rect(64px, 480px, 96px, 448px);
1138 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1139 -moz-image-region: rect(32px, 480px, 64px, 448px);
1142 #new-window-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #new-window-button {
1144 -moz-image-region: rect(0px, 512px, 32px, 480px);
1147 #new-window-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1149 -moz-image-region: rect(32px, 512px, 64px, 480px);
1152 #e10s-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #e10s-button {
1154 -moz-image-region: rect(0px, 512px, 32px, 480px);
1157 #e10s-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1159 -moz-image-region: rect(32px, 512px, 64px, 480px);
1162 #new-tab-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #new-tab-button {
1164 -moz-image-region: rect(0px, 544px, 32px, 512px);
1167 #new-tab-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1169 -moz-image-region: rect(32px, 544px, 64px, 512px);
1172 #privatebrowsing-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1174 -moz-image-region: rect(0px, 576px, 32px, 544px);
1177 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1179 -moz-image-region: rect(32px, 576px, 64px, 544px);
1182 #tabview-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #tabview-button {
1184 -moz-image-region: rect(0px, 608px, 32px, 576px);
1187 #tabview-button[cui-areatype="menu-panel"]:hover,
1188 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1189 -moz-image-region: rect(32px, 608px, 64px, 576px);
1192 #find-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #find-button {
1194 -moz-image-region: rect(0px, 640px, 32px, 608px);
1197 #find-button[cui-areatype="menu-panel"]:hover,
1198 toolbarpaletteitem[place="palette"] > #find-button:hover {
1199 -moz-image-region: rect(32px, 640px, 64px, 608px);
1202 #print-button[cui-areatype="menu-panel"],
1203 toolbarpaletteitem[place="palette"] > #print-button {
1204 -moz-image-region: rect(0px, 672px, 32px, 640px);
1207 #print-button[cui-areatype="menu-panel"]:hover,
1208 toolbarpaletteitem[place="palette"] > #print-button:hover {
1209 -moz-image-region: rect(32px, 672px, 64px, 640px);
1212 #fullscreen-button[cui-areatype="menu-panel"],
1213 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1214 -moz-image-region: rect(0px, 704px, 32px, 672px);
1217 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1218 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1219 -moz-image-region: rect(32px, 704px, 64px, 672px);
1222 #developer-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #developer-button {
1224 -moz-image-region: rect(0px, 736px, 32px, 704px);
1227 #developer-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1229 -moz-image-region: rect(32px, 736px, 64px, 704px);
1232 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1233 -moz-image-region: rect(32px, 736px, 64px, 704px);
1236 #preferences-button[cui-areatype="menu-panel"],
1237 toolbarpaletteitem[place="palette"] > #preferences-button {
1238 -moz-image-region: rect(0px, 768px, 32px, 736px);
1241 #preferences-button[cui-areatype="menu-panel"]:hover,
1242 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1243 -moz-image-region: rect(32px, 768px, 64px, 736px);
1246 #email-link-button[cui-areatype="menu-panel"],
1247 toolbarpaletteitem[place="palette"] > #email-link-button {
1248 -moz-image-region: rect(0, 800px, 32px, 768px);
1251 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1252 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1253 -moz-image-region: rect(32px, 800px, 64px, 768px);
1256 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1257 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1258 -moz-image-region: rect(64px, 800px, 96px, 768px);
1261 #sidebar-button[cui-areatype="menu-panel"],
1262 toolbarpaletteitem[place="palette"] > #sidebar-button {
1263 -moz-image-region: rect(0, 864px, 32px, 832px);
1266 #sidebar-button[cui-areatype="menu-panel"]:hover,
1267 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1268 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1269 -moz-image-region: rect(32px, 864px, 64px, 832px);
1272 #panic-button[cui-areatype="menu-panel"],
1273 toolbarpaletteitem[place="palette"] > #panic-button {
1274 -moz-image-region: rect(0, 896px, 32px, 864px);
1277 #panic-button[cui-areatype="menu-panel"]:hover,
1278 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1279 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1280 -moz-image-region: rect(32px, 896px, 64px, 864px);
1283 #webide-button[cui-areatype="menu-panel"],
1284 toolbarpaletteitem[place="palette"] > #webide-button {
1285 -moz-image-region: rect(0px, 960px, 32px, 928px);
1288 #webide-button[cui-areatype="menu-panel"]:hover,
1289 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1290 -moz-image-region: rect(32px, 960px, 64px, 928px);
1293 #pocket-button[cui-areatype="menu-panel"],
1294 toolbarpaletteitem[place="palette"] > #pocket-button {
1295 -moz-image-region: rect(0px, 992px, 32px, 960px);
1298 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1299 -moz-image-region: rect(32px, 992px, 64px, 960px);
1302 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1303 -moz-image-region: rect(0, 832px, 32px, 800px);
1306 #loop-button[cui-areatype="menu-panel"],
1307 toolbarpaletteitem[place="palette"] > #loop-button {
1308 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1309 -moz-image-region: rect(0, 32px, 32px, 0);
1312 /* Make sure that the state icons are not shown in the customization palette. */
1313 toolbarpaletteitem[place="palette"] > #loop-button {
1314 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1317 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1318 -moz-image-region: rect(0, 160px, 32px, 128px);
1321 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1322 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1323 -moz-image-region: rect(0, 64px, 32px, 32px);
1326 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1327 -moz-image-region: rect(0, 224px, 32px, 192px);
1330 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1331 -moz-image-region: rect(0, 96px, 32px, 64px);
1334 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1335 -moz-image-region: rect(0, 128px, 32px, 96px);
1338 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1339 -moz-image-region: rect(0, 192px, 32px, 160px);
1342 /* Wide panel control icons */
1344 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1345 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1346 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1347 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1348 list-style-image: var(--menupanel-small-list-style-image);
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1353 -moz-image-region: rect(0px, 32px, 16px, 16px);
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1358 -moz-image-region: rect(16px, 32px, 32px, 16px);
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1363 -moz-image-region: rect(32px, 32px, 48px, 16px);
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1368 -moz-image-region: rect(0px, 48px, 16px, 32px);
1371 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1372 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1373 -moz-image-region: rect(16px, 48px, 32px, 32px);
1376 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1377 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1378 -moz-image-region: rect(32px, 48px, 48px, 32px);
1381 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1382 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1383 -moz-image-region: rect(0px, 64px, 16px, 48px);
1386 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1387 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1388 -moz-image-region: rect(16px, 64px, 32px, 48px);
1391 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1392 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1393 -moz-image-region: rect(32px, 64px, 48px, 48px);
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1398 -moz-image-region: rect(0px, 80px, 16px, 64px);
1401 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1402 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1403 -moz-image-region: rect(16px, 80px, 32px, 64px);
1406 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1407 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1408 -moz-image-region: rect(32px, 80px, 48px, 64px);
1411 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1412 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1413 -moz-image-region: rect(0px, 96px, 16px, 80px);
1416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1417 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1418 -moz-image-region: rect(16px, 96px, 32px, 80px);
1421 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1422 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1423 -moz-image-region: rect(32px, 96px, 48px, 80px);
1426 #add-share-provider {
1427 list-style-image: var(--menupanel-small-list-style-image);
1428 -moz-image-region: rect(0px, 96px, 16px, 80px);
1431 /* === END menupanel.inc.css === */
1433 .toolbarbutton-1:not([type="menu-button"]) {
1434 -moz-box-orient: vertical;
1438 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1444 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1445 .toolbarbutton-1[disabled="true"]:hover:active,
1446 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1450 .toolbarbutton-1:hover:active,
1451 .toolbarbutton-1[open="true"],
1452 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1454 padding-bottom: 0px;
1455 -moz-padding-start: 3px;
1456 -moz-padding-end: 1px;
1459 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1460 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1461 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1462 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1463 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1466 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1467 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1470 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1471 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1474 .toolbarbutton-1 > .toolbarbutton-icon,
1475 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1479 #nav-bar .toolbarbutton-1,
1480 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1483 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1484 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1485 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1488 #nav-bar #PanelUI-menu-button {
1489 /* -moz-padding-start: 7px;
1490 -moz-padding-end: 5px;*/
1493 #nav-bar .toolbarbutton-1[type=panel],
1494 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1495 /* padding-left: 5px;
1496 padding-right: 5px;*/
1499 #nav-bar .toolbarbutton-1 > menupopup {
1500 /* margin-top: -3px;*/
1503 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1507 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1508 /* -moz-padding-end: 0;*/
1511 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1512 /* -moz-padding-start: 0;
1513 -moz-box-align: center;*/
1516 .findbar-button > .toolbarbutton-text,
1517 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1518 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1519 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1520 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1521 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1522 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1523 /* padding: 2px 6px;
1525 border-color: transparent;
1526 transition-property: background-color, border-color;
1527 transition-duration: 150ms;*/
1530 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1531 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1532 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1537 /* Help SDK icons fit: */
1538 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1539 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1543 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1544 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1548 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1551 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1552 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1553 /* -moz-padding-end: 17px;*/
1556 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1557 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1558 /* horizontal padding + border + icon width */
1559 /* max-width: 43px;*/
1562 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1565 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1568 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1571 #nav-bar .toolbaritem-combined-buttons {
1572 /* margin-left: 2px;
1573 margin-right: 2px;*/
1576 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1581 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1582 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1588 -moz-margin-end: -1px;
1592 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1595 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1596 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1597 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1598 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1599 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1600 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1601 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1602 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1603 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1606 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1607 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1608 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1614 #TabsToolbar .toolbarbutton-1,
1615 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1616 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1617 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1620 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1621 #TabsToolbar .toolbarbutton-1[open],
1622 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1623 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1624 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1627 /* unified back/forward button */
1630 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1633 #forward-button > menupopup {
1634 margin-top: 1px !important;
1637 #forward-button > .toolbarbutton-icon {
1638 background-clip: padding-box !important;
1639 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1640 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1644 -moz-margin-start: -4px !important;
1649 border-radius: 0 10000px 10000px 0;
1652 #forward-button:-moz-locale-dir(rtl) {
1653 border-radius: 10000px 0 0 10000px;
1656 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1657 transition: margin-left 150ms ease-out;
1660 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1661 margin-left: -27px !important;
1664 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1665 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1666 transition-delay: 100s;
1669 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1670 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1671 margin-left: -27.01px !important;
1675 /* padding-top: 3px !important;
1676 padding-bottom: 3px !important;
1677 -moz-padding-start: 5px !important;
1678 -moz-padding-end: 0 !important;*/
1681 border-radius: 10000px;
1685 margin-bottom: -2px;
1688 #back-button:-moz-locale-dir(rtl) {
1691 #back-button > menupopup {
1692 margin-top: -1px !important;
1695 #back-button > .toolbarbutton-icon {
1696 border-radius: 10000px !important;
1697 background-clip: padding-box !important;
1698 /* background-color: hsla(210,25%,98%,.08) !important;
1699 padding: 6px !important;
1700 border-style: none !important;
1701 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1702 0 0 0 1px hsla(210,4%,10%,.25);*/
1703 transition-property: background-color, box-shadow !important;
1704 transition-duration: 250ms !important;
1707 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1708 /* background-color: hsla(210,4%,10%,.08) !important;*/
1711 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1712 #back-button[open="true"] > .toolbarbutton-icon {
1713 /* background-color: hsla(210,4%,10%,.12) !important;
1714 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1715 0 0 0 1px hsla(210,4%,10%,.25),
1716 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1719 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1720 transform: scaleX(-1);
1723 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1724 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1725 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1728 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1729 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1730 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1733 #home-button.bookmark-item {
1734 list-style-image: url("chrome://browser/skin/Toolbar.png");
1737 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1738 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1739 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1740 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1741 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1742 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1743 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1746 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1751 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1755 #downloads-button > .toolbarbutton-icon {
1759 /* tabview menu item */
1762 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1763 -moz-image-region: rect(1px, 89px, 17px, 73px);
1766 #menu_tabview[groups="0"] {
1767 -moz-image-region: rect(1px, 17px, 17px, 1px);
1770 #menu_tabview[groups="1"] {
1771 -moz-image-region: rect(1px, 35px, 17px, 19px);
1774 #menu_tabview[groups="2"] {
1775 -moz-image-region: rect(1px, 53px, 17px, 37px);
1778 #menu_tabview[groups="3"] {
1779 -moz-image-region: rect(1px, 71px, 17px, 55px);
1782 /* undo close tab menu item */
1783 #alltabs_undoCloseTab {
1784 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1787 @media (min-resolution: 1.1dppx) {
1788 #alltabs_undoCloseTab {
1789 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1791 #alltabs_undoCloseTab > .toolbarbutton-icon {
1796 /* zoom control text (reset) button special case: */
1798 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1799 /* To make this line up with the icons, it needs the same height (18px) +
1800 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1801 * increase in text sizes would break things...
1806 /* ::::: fullscreen window controls ::::: */
1809 -moz-margin-start: 4px;
1815 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1820 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1823 #minimize-button:hover {
1824 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1828 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1831 #restore-button:hover {
1832 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1836 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1839 #close-button:hover {
1840 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1843 /* ::::: Location Bar ::::: */
1846 .searchbar-textbox {
1849 -moz-margin-start: 3px;
1853 /* make color as light as possible to deal with dark non-domain parts */
1857 /* overlap the urlbar's border */
1858 #PopupAutoCompleteRichResult {
1862 #urlbar:-moz-lwtheme,
1863 .searchbar-textbox:-moz-lwtheme {
1864 /* background-color: rgba(255,255,255,.8);
1865 @navbarTextboxCustomBorder@
1869 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1870 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1871 /* background-color: rgba(255,255,255,.9);*/
1874 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1875 .searchbar-textbox:-moz-lwtheme[focused] {
1876 /* background-color: white;*/
1879 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1880 /* -moz-border-start: none;
1884 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1885 /* border-top-left-radius: 0;
1886 border-bottom-left-radius: 0; */
1889 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1890 /* border-top-right-radius: 0;
1891 border-bottom-right-radius: 0; */
1894 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1895 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1896 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1899 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1900 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1901 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1902 transform: scaleX(-1);
1905 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1906 -moz-box-direction: reverse;
1909 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1910 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1915 -moz-box-orient: horizontal;
1916 -moz-box-align: stretch;
1919 .urlbar-textbox-container {
1920 -moz-box-align: stretch;
1924 -moz-margin-start: 0;
1928 -moz-box-align: center;
1933 /* 16x16 icon with border-box sizing */
1938 .search-go-container {
1942 .search-go-container > .search-go-button {
1946 #urlbar-search-footer {
1947 border-top: 1px solid #A09090;
1950 #urlbar-search-settings {
1953 #urlbar-search-settings:hover {
1956 #urlbar-search-settings:hover:active {
1959 #urlbar-search-splitter {
1961 -moz-margin-start: -3px;
1963 background: transparent;
1966 #urlbar-search-splitter + #urlbar-container > #urlbar,
1967 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1968 -moz-margin-start: 0;
1971 #urlbar-display-box {
1975 -moz-border-end: 1px solid #9C9CFF;
1976 -moz-margin-end: 3px;
1979 -moz-margin-start: 0;
1983 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1985 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1986 border-bottom: 1px solid #A09090;
1987 background-color: #000000;
1989 -moz-padding-start: 44px;
1990 -moz-padding-end: 6px;
1991 background-image: url("chrome://browser/skin/info.svg");
1992 background-clip: padding-box;
1993 background-position: 20px center;
1994 background-repeat: no-repeat;
1995 background-size: 16px 16px;
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1999 background-position: right 20px center;
2002 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2008 -moz-margin-start: 0;
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2012 -moz-appearance: none;
2017 -moz-margin-start: 10px;
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2023 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2026 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2032 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2035 min-width: calc(54px + 11ch);
2040 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2041 var(--identity-box-verified-background-color);
2044 #identity-box:-moz-focusring {
2045 outline: 1px dotted #008484;
2046 outline-offset: -1px;
2049 #identity-box.verifiedDomain:-moz-focusring,
2050 #identity-box.verifiedIdentity:-moz-focusring {
2051 outline-color: #000000;
2054 /* Location bar dropmarker */
2056 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2057 background-color: transparent;
2060 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2061 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2062 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2065 transition: opacity 0.15s ease;
2068 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2072 .urlbar-history-dropmarker:hover {
2075 .urlbar-history-dropmarker:hover:active,
2076 .urlbar-history-dropmarker[open="true"] {
2079 /* page proxy icon */
2081 /* === BEGIN identity-block.inc.css === */
2084 --identity-box-verified-color: #008484;
2085 /* Default theme does different color per channel, we can't as they do it build-time. */
2086 --identity-box-chrome-color: #9C9CFF;
2088 border-inline-end: 1px solid --urlbar-separator-color);
2092 margin-inline-end: 4px;
2094 /* The latter two properties have a transition to handle the delayed hiding of
2095 the forward button when hovered. */
2096 transition: background-color 150ms ease, padding-left, padding-right;
2099 #identity-box:-moz-locale-dir(ltr) {
2100 border-top-right-radius: 0;
2101 border-bottom-right-radius: 0;
2104 #identity-box:-moz-locale-dir(rtl) {
2105 border-top-left-radius: 0;
2106 border-bottom-left-radius: 0;
2109 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2110 color: var(--identity-box-chrome-color);
2111 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2114 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2115 color: var(--identity-box-verified-color);
2116 -moz-border-end: 1px solid var(--identity-box-verified-color);
2119 #notification-popup-box:not([hidden]) + #identity-box {
2120 padding-inline-start: 10px !important;
2124 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2125 /* border-radius: 0; */
2126 -moz-padding-start: 2px;
2127 -moz-padding-end: 2px;
2128 -moz-margin-end: 1px;
2131 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2132 #notification-popup-box[hidden] + #identity-box {
2133 padding-inline-start: 2px;
2136 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2137 #notification-popup-box[hidden] + #identity-box {
2138 /* Forward button hiding is delayed when hovered, so we should use the same
2139 delay for the identity box. We handle both horizontal paddings (for LTR and
2140 RTL), the latter two delays here are for padding-left and padding-right. */
2141 transition-delay: 0s, 100s, 100s;
2144 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2145 #notification-popup-box[hidden] + #identity-box {
2146 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2147 padding-inline-start: 2.01px;
2150 /* TRACKING PROTECTION ICON */
2152 #tracking-protection-icon {
2155 margin-inline-start: 0;
2156 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2160 #tracking-protection-icon[state="loaded-tracking-content"] {
2161 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2164 #tracking-protection-icon[animate] {
2165 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2168 #tracking-protection-icon:not([state]) {
2169 margin-inline-start: -18px;
2170 pointer-events: none;
2172 /* Only animate the shield in, when it disappears hide it immediately. */
2176 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2177 visibility: collapse;
2180 /* MAIN IDENTITY ICON */
2182 #page-proxy-favicon {
2185 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2189 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2190 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2193 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2194 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2195 list-style-image: url("chrome://browser/skin/identity-secure.svg");
2198 .insecureLoginForms > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2199 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2200 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2203 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2204 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2205 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2206 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2209 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2210 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2213 #page-proxy-favicon[pageproxystate="invalid"] {
2217 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2218 list-style-image: url("chrome://branding/content/icon64.png");
2221 #identity-popup-brandName {
2225 margin-bottom: .5em;
2228 #identity-popup-content-box {
2232 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2233 -moz-image-region: inherit;
2234 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2240 /* MAIN IDENTITY ICON */
2245 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2248 #identity-box:hover > #identity-icon,
2249 #identity-box[open=true] > #identity-icon {
2250 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2253 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2254 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2257 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2261 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2262 -moz-image-region: inherit;
2263 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2269 /* TRACKING PROTECTION ICON */
2271 #tracking-protection-icon {
2274 margin-inline-start: 2px;
2275 margin-inline-end: 0;
2276 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2280 #tracking-protection-icon[state="loaded-tracking-content"] {
2281 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2284 #tracking-protection-icon[animate] {
2285 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2288 #tracking-protection-icon:not([state]) {
2289 margin-inline-end: -18px;
2290 pointer-events: none;
2292 /* Only animate the shield in, when it disappears hide it immediately. */
2296 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2297 visibility: collapse;
2300 /* CONNECTION ICON */
2305 margin-inline-start: 2px;
2306 visibility: collapse;
2309 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2310 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2311 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2312 visibility: visible;
2315 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2316 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2317 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2318 visibility: visible;
2321 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2322 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2323 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2324 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2325 visibility: visible;
2328 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2329 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2330 visibility: visible;
2333 /* === END identity-block.inc.css === */
2335 #page-proxy-favicon {
2336 -moz-image-region: rect(0, 16px, 16px, 0);
2339 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2340 /* -moz-margin-end: 1px;*/
2343 #identity-box:hover > #page-proxy-favicon {
2344 -moz-image-region: rect(0, 32px, 16px, 16px);
2347 #identity-box:hover:active > #page-proxy-favicon,
2348 #identity-box[open=true] > #page-proxy-favicon {
2349 -moz-image-region: rect(0, 48px, 16px, 32px);
2352 #identity-box:hover {
2353 background-color: #FFCF00;
2357 #identity-box:hover:active,
2358 #identity-box[open=true] {
2359 background-color: #FF9F00;
2363 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2364 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2365 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2366 background-color: #9C9CFF;
2370 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2371 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2372 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2373 background-color: #008484;
2379 #treecolAutoCompleteImage {
2383 .ac-result-type-bookmark,
2384 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2385 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2386 -moz-image-region: rect(0px 16px 16px 0px);
2391 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2392 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2393 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2396 .ac-result-type-keyword,
2397 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2398 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2399 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2404 .ac-result-type-keyword[selected="true"],
2405 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2406 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2407 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2410 .ac-result-type-tag,
2411 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2412 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2418 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2419 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2423 .ac-extra > .ac-comment,
2434 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2435 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2436 -moz-image-region: rect(0, 16px, 16px, 0);
2442 @media (min-resolution: 1.1dppx) {
2443 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2444 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2445 -moz-image-region: rect(0, 32px, 32px, 0);
2449 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2450 -moz-image-region: rect(16px, 16px, 32px, 0);
2453 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2457 .ac-comment[selected="true"],
2458 .ac-url-text[selected="true"],
2459 .ac-action-text[selected="true"] {
2460 color: inherit !important;
2463 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2464 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2470 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2471 border-top: 1px solid #9C9CFF;
2474 /* combined go/reload/stop button in location bar */
2477 #urlbar-reload-button,
2478 #urlbar-stop-button {
2480 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2481 /* padding: 0 9px;*/
2482 margin-inline-start: 0px;
2483 border-inline-start: 1px solid var(--urlbar-separator-color);
2484 border-image: linear-gradient(transparent 15%,
2485 var(--urlbar-separator-color) 15%,
2486 var(--urlbar-separator-color) 85%,
2488 border-image-slice: 1;
2491 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2492 border-top-left-radius: 0px;
2493 border-bottom-left-radius: 0px;
2496 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2497 border-top-right-radius: 0px;
2498 border-bottom-right-radius: 0px;
2501 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2502 #urlbar-reload-button:not(:hover) {
2503 -moz-border-start-style: none;
2504 -moz-padding-start: 3px;
2507 #urlbar-reload-button {
2508 -moz-image-region: rect(0px, 14px, 14px, 0px);
2511 #urlbar-reload-button[disabled=true] {
2512 -moz-image-region: rect(28px, 14px, 42px, 0px);
2515 #urlbar-reload-button:not([disabled=true]):hover {
2516 -moz-image-region: rect(14px, 14px, 28px, 0px);
2519 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2520 transform: scaleX(-1);
2524 -moz-image-region: rect(0, 42px, 14px, 28px);
2527 #urlbar-go-button:hover {
2528 -moz-image-region: rect(14px, 42px, 28px, 28px);
2531 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2532 transform: scaleX(-1);
2535 #urlbar-stop-button {
2536 -moz-image-region: rect(0px, 28px, 14px, 14px);
2539 #urlbar-stop-button:hover {
2540 -moz-image-region: rect(14px, 28px, 28px, 14px);
2543 @media (min-resolution: 1.1dppx) {
2545 #urlbar-reload-button,
2546 #urlbar-stop-button {
2547 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2550 #urlbar-go-button > .toolbarbutton-icon,
2551 #urlbar-reload-button > .toolbarbutton-icon,
2552 #urlbar-stop-button > .toolbarbutton-icon {
2557 -moz-image-region: rect(0, 84px, 28px, 56px);
2560 #urlbar-go-button:hover {
2561 -moz-image-region: rect(28px, 84px, 56px, 56px);
2564 #urlbar-go-button:hover:active {
2565 -moz-image-region: rect(56px, 84px, 84px, 56px);
2568 #urlbar-reload-button {
2569 -moz-image-region: rect(0, 28px, 28px, 0);
2572 #urlbar-reload-button:not([disabled]):hover {
2573 -moz-image-region: rect(28px, 28px, 56px, 0);
2576 #urlbar-reload-button:not([disabled]):hover:active {
2577 -moz-image-region: rect(56px, 28px, 84px, 0);
2580 #urlbar-stop-button {
2581 -moz-image-region: rect(0, 56px, 28px, 28px);
2584 #urlbar-stop-button:not([disabled]):hover {
2585 -moz-image-region: rect(28px, 56px, 56px, 28px);
2588 #urlbar-stop-button:hover:active {
2589 -moz-image-region: rect(56px, 56px, 84px, 28px);
2593 /* popup blocker button */
2595 #page-report-button {
2596 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2597 -moz-image-region: rect(0, 16px, 16px, 0);
2600 #page-report-button:hover ,
2601 #page-report-button:hover:active,
2602 #page-report-button[open="true"] {
2603 -moz-image-region: rect(0, 32px, 16px, 16px);
2606 /* Reader mode button */
2608 #reader-mode-button {
2609 list-style-image: url("chrome://browser/skin/readerMode.svg");
2610 -moz-image-region: rect(0, 16px, 16px, 0);
2613 #reader-mode-button:hover,
2614 #reader-mode-button[readeractive]:hover {
2615 -moz-image-region: rect(0, 32px, 16px, 16px);
2618 #reader-mode-button:hover:active,
2619 #reader-mode-button[readeractive] {
2620 -moz-image-region: rect(0, 48px, 16px, 32px);
2623 /* social share panel */
2625 .social-share-frame {
2632 background-color: white;
2633 background-repeat: no-repeat;
2634 background-position: center center;
2636 #share-container[loading] {
2637 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2639 #share-container > browser {
2640 transition: opacity 150ms ease-in-out;
2643 #share-container[loading] > browser {
2647 .social-share-toolbar {
2648 border-bottom: 1px solid #9C9CFF;
2652 #social-share-provider-buttons {
2657 .share-provider-button {
2662 .share-provider-button > .toolbarbutton-text {
2665 .share-provider-button > .toolbarbutton-icon {
2671 /* fixup corners for share panel */
2672 .social-panel > .social-panel-frame {
2673 border-radius: inherit;
2676 #social-share-panel {
2682 .social-share-frame {
2683 border-top-left-radius: 0;
2684 border-bottom-left-radius: inherit;
2685 border-top-right-radius: 0;
2686 border-bottom-right-radius: inherit;
2689 #social-share-panel > .social-share-toolbar {
2690 border-top-left-radius: inherit;
2691 border-top-right-radius: inherit;
2694 #social-share-provider-buttons {
2695 border-top-left-radius: inherit;
2696 border-top-right-radius: inherit;
2699 /* social recommending panel */
2701 #social-mark-button {
2702 -moz-image-region: rect(0, 16px, 16px, 0);
2705 /* bookmarks menu-button */
2707 #bookmarks-menu-button.bookmark-item {
2708 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2709 -moz-image-region: rect(0px 16px 16px 0px);
2712 #bookmarks-menu-button.bookmark-item[starred] {
2713 -moz-image-region: rect(0px 32px 16px 16px);
2716 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2718 padding-bottom: 2px;
2721 #BMB_bookmarksPopup[side="top"],
2722 #BMB_bookmarksPopup[side="bottom"] {
2724 margin-right: -20px;
2727 #BMB_bookmarksPopup[side="left"],
2728 #BMB_bookmarksPopup[side="right"] {
2730 margin-bottom: -20px;
2733 /* bookmarking panel */
2735 #editBookmarkPanelStarIcon {
2736 list-style-image: url("chrome://browser/skin/places/starred48.png");
2741 #editBookmarkPanelStarIcon[unstarred] {
2742 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2745 #editBookmarkPanelTitle {
2749 #editBookmarkPanelHeader,
2750 #editBookmarkPanelContent {
2751 margin-bottom: .5em;
2754 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2755 #editBMPanel_folderTree {
2762 border-top: 1px solid #9C9CFF;
2763 border-bottom-left-radius: 5px;
2764 border-bottom-right-radius: 5px;
2768 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2769 -moz-margin-end: 10px;
2770 vertical-align: middle;
2773 .panel-promo-closebutton {
2774 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2775 -moz-margin-end: -3px;
2779 .panel-promo-closebutton:hover {
2780 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2783 .panel-promo-closebutton:hover:active {
2784 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2787 .panel-promo-closebutton > .toolbarbutton-text {
2791 /* ::::: content area ::::: */
2794 background-color: #9C9CFF;
2799 background-color: #000000;
2803 -moz-margin-start: 0;
2812 -moz-padding-start: 0px;
2815 #sidebar-header > .close-icon {
2816 /* padding: 4px 2px;
2819 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2822 #sidebar-header > .close-icon:hover,
2823 #sidebar-header > .close-icon:hover:active {
2824 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2827 #sidebar-splitter:-moz-locale-dir(ltr),
2828 #sidebar:-moz-locale-dir(ltr) {
2829 border-radius: 0 5px 0 0;
2832 #sidebar-splitter:-moz-locale-dir(rtl),
2833 #sidebar:-moz-locale-dir(rtl) {
2834 border-radius: 5px 0 0 0;
2837 .browserContainer > findbar {
2839 background-color: -moz-dialog;
2840 color: -moz-DialogText;
2849 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2852 #TabsToolbar .toolbar-holder {
2853 background-color: #000000; /* correct effect of being an actual toolbar */
2856 #main-window[disablechrome] #TabsToolbar,
2857 #TabsToolbar[tabsontop="false"] {
2858 border-bottom: 1px solid #008484;
2861 /* === BEGIN tabs.inc.css === */
2864 /* --tab-toolbar-navbar-overlap: 1px; */
2865 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2866 /* --tab-min-height: 31px; */
2869 /* --tab-stroke-background-size: auto 100%; */
2873 .tabs-newtab-button,
2874 #TabsToolbar > #new-tab-button {
2879 padding: 1px 4px 2px;
2882 .tabbrowser-tab:first-of-type {
2883 -moz-margin-start: 2px;
2886 .tabs-newtab-button,
2887 #TabsToolbar > #new-tab-button {
2888 border-radius: 8px 8px 0px 0px;
2889 -moz-margin-start: 0;
2892 .tabs-newtab-button:not(:hover),
2893 #TabsToolbar > #new-tab-button:not(:hover) {
2894 background-color: #C09070;
2897 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2898 .tabbrowser-tab[visuallyselected=true] {
2899 /* position: relative;
2903 .tab-background-middle {
2909 .tab-content[pinned] {
2922 -moz-margin-end: 3px;
2926 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2933 -moz-margin-start: -15px;
2937 .tab-icon-overlay[crashed] {
2938 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2941 .tab-icon-overlay[soundplaying],
2942 .tab-icon-overlay[muted]:not([crashed]) {
2943 border-radius: 10px;
2946 .tab-icon-overlay[soundplaying]:hover,
2947 .tab-icon-overlay[muted]:hover {
2948 background-color: #FFCF00;
2951 .tab-icon-overlay[soundplaying] {
2953 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2956 .tab-icon-overlay[muted]:not([crashed]) {
2957 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2960 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2961 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2965 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2966 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2969 .tab-throbber[busy] {
2970 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2973 .tab-throbber[progress] {
2974 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2977 .tab-throbber[pinned],
2978 .tab-icon-image[pinned] {
2979 -moz-margin-start: 2px;
2980 -moz-margin-end: 2px;
2984 /* this needs to add up to the 16px of the icon image */
2986 margin-top: 2px !important;
2987 margin-bottom: 2px !important;
2991 -moz-margin-start: 4px;
2997 .tab-icon-sound[muted] {
2998 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3001 .tab-icon-sound[muted]:hover {
3002 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3005 .tab-icon-sound[muted]:hover:active {
3006 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3009 .tab-icon-sound[soundplaying] {
3010 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3013 .tab-icon-sound[soundplaying]:hover {
3014 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3017 .tab-icon-sound[soundplaying]:hover:active {
3018 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3021 .tab-icon-sound[muted] {
3022 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3025 .tab-icon-sound[muted]:hover {
3026 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3029 .tab-icon-sound[muted]:hover:active {
3030 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3033 .tab-icon-sound[visuallyselected=true][soundplaying] {
3034 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3037 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3038 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3041 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3042 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3045 .tab-icon-sound[visuallyselected=true][muted] {
3046 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3049 .tab-icon-sound[visuallyselected=true][muted]:hover {
3050 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3053 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3054 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3057 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3058 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3061 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3062 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3065 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3066 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3069 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3070 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3073 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3074 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3077 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3078 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3087 .tabs-newtab-button {
3088 /* overlap the tab curves */
3091 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3095 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3096 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3100 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3106 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3110 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3113 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3114 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3117 .tab-background-start[visuallyselected=true]::after,
3118 .tab-background-start[visuallyselected=true]::before,
3119 .tab-background-start,
3120 .tab-background-end,
3121 .tab-background-end[visuallyselected=true]::after,
3122 .tab-background-end[visuallyselected=true]::before {
3125 .tabbrowser-tab:not([visuallyselected=true]),
3126 .tabbrowser-tab:-moz-lwtheme {
3129 /* tabbrowser-tab focus ring */
3130 .tabbrowser-tab:focus {
3131 outline: 1px dotted;
3136 .tabbrowser-tab[visuallyselected="true"] {
3139 /* End selected tab */
3141 /* User Context UI - change tab decoration depending on userContextId.
3142 Defaults to gray for unknown usercontextids. */
3143 .tabbrowser-tab[usercontextid] {
3144 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3145 background-size: auto 2px;
3146 background-repeat: no-repeat;
3149 /* Personal User Context */
3150 .tabbrowser-tab[usercontextid="1"] {
3151 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3153 /* Work User Context */
3154 .tabbrowser-tab[usercontextid="2"] {
3155 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3157 /* Banking User Context */
3158 .tabbrowser-tab[usercontextid="3"] {
3159 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3161 /* Shopping User Context */
3162 .tabbrowser-tab[usercontextid="4"] {
3163 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3166 /* Tab pointer-events */
3169 pointer-events: none;
3172 .tab-background-middle,
3173 .tabs-newtab-button,
3174 .tab-icon-overlay[soundplaying],
3175 .tab-icon-overlay[muted]:not([crashed]),
3178 pointer-events: auto;
3184 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3185 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3187 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3188 background-color: #E7ADE7;
3191 .tab-label[attention]:not([visuallyselected="true"]) {
3195 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3196 background-color: #3333FF;
3200 /* Tab separators */
3202 .tabbrowser-tab::after,
3203 .tabbrowser-tab::before {
3205 -moz-margin-start: -1px;
3206 background-image: linear-gradient(transparent 5px,
3208 currentColor calc(100% - 4px),
3209 transparent calc(100% - 4px));
3213 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3214 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3218 /* Also show separators beside the selected tab when dragging it. */
3220 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3221 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3222 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3227 /* New tab button */
3229 .tabs-newtab-button {
3231 /* width: calc(36px + var(--tab-curve-width)); */
3234 /* === END tabs.inc.css === */
3238 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3239 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3240 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3242 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3243 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3246 /* Tab DnD indicator */
3247 .tab-drop-indicator {
3248 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3249 margin-bottom: -11px;
3252 /* Tab close button */
3254 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3257 .tab-close-button:hover,
3258 .tab-close-button:hover[selected="true"] {
3259 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3262 .tab-close-button:hover:active,
3263 .tab-close-button:hover:active[selected="true"] {
3264 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3267 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3269 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3270 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3274 background-origin: border-box;
3277 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3278 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3279 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3280 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3283 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3284 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3287 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3288 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3289 /* transform: scaleX(-1);*/
3292 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3293 transition: 1s background-color ease-out;
3296 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3297 background-color: #008484;
3300 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3301 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3302 /* border-width: 0 2px 0 0;
3303 border-style: solid;
3304 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3307 .tabs-newtab-button > .toolbarbutton-icon {
3309 margin-bottom: -1px;
3312 .tabs-newtab-button,
3313 #TabsToolbar > #new-tab-button,
3314 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3315 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3316 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3317 -moz-image-region: rect(0, 16px, 18px, 0);
3320 .tabs-newtab-button,
3321 .tabs-newtab-button:hover,
3322 #TabsToolbar > #new-tab-button,
3323 #TabsToolbar > #new-tab-button:hover {
3324 -moz-image-region: rect(0, 32px, 18px, 16px);
3327 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3328 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3329 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3330 .tabs-newtab-button:-moz-lwtheme-brighttext,
3331 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3332 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3335 #TabsToolbar > #new-tab-button {
3340 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3343 #alltabs-button:hover,
3344 #alltabs-button:hover:active,
3345 #alltabs-button[open="true"] {
3346 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3349 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3350 #alltabs-button:-moz-lwtheme-brighttext {
3353 #alltabs-button > .toolbarbutton-icon {
3357 #alltabs-button > .toolbarbutton-menu-dropmarker {
3361 /* All tabs menupopup */
3362 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3363 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3364 -moz-image-region: auto;
3367 .alltabs-item[selected="true"] {
3371 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3372 list-style-image: url("chrome://global/skin/icons/loading.gif");
3375 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3376 background-color: #402800;
3379 .alltabs-endimage[muted] {
3380 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3383 .alltabs-endimage[soundplaying] {
3384 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3387 toolbarbutton.chevron {
3388 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3391 toolbarbutton.chevron:hover {
3392 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3395 toolbar[brighttext] toolbarbutton.chevron {
3396 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3399 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3400 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3401 transform: scaleX(-1);
3404 toolbarbutton.chevron > .toolbarbutton-text,
3405 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3409 toolbarbutton.chevron > .toolbarbutton-icon {
3413 #sidebar-throbber[loading="true"] {
3414 list-style-image: url("chrome://global/skin/icons/loading.gif");
3415 -moz-margin-end: 4px;
3418 /* Bookmarks toolbar */
3419 #PlacesToolbarDropIndicator {
3420 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3423 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3424 background-color: #008484 !important;
3425 color: #FFCF00 !important;
3428 /* rules for menupopup drop indicators */
3429 .menupopup-drop-indicator-bar {
3431 /* these two margins must together compensate the indicator's height */
3433 margin-bottom: -1px;
3436 .menupopup-drop-indicator {
3437 list-style-image: none;
3439 -moz-margin-end: -4em;
3440 background-color: #008484;
3443 /* === BEGIN notification-icons.inc.css === */
3445 .popup-notification-icon {
3448 -moz-margin-end: 10px;
3451 .popup-notification-icon[popupid="geolocation"] {
3452 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3455 .popup-notification-icon[popupid="xpinstall-disabled"],
3456 .popup-notification-icon[popupid="addon-install-blocked"],
3457 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3458 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3461 .popup-notification-icon[popupid="addon-progress"] {
3462 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3465 .popup-notification-icon[popupid="addon-install-failed"] {
3466 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3469 .popup-notification-icon[popupid="addon-install-confirmation"] {
3470 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3473 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3474 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3477 .popup-notification-icon[popupid="addon-install-complete"] {
3478 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3481 .popup-notification-icon[popupid="addon-install-restart"] {
3482 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3485 .popup-notification-icon[popupid="click-to-play-plugins"] {
3486 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3489 .popup-notification-icon[popupid="web-notifications"] {
3490 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3493 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3494 .popup-notification-icon[popupid*="offline-app-requested"],
3495 .popup-notification-icon[popupid="offline-app-usage"] {
3496 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3499 .popup-notification-icon[popupid="password"] {
3500 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3503 .popup-notification-icon[popupid="webapps-install-progress"],
3504 .popup-notification-icon[popupid="webapps-install"] {
3505 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3508 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3509 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3510 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3513 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3514 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3515 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3518 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3519 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3520 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3523 .popup-notification-icon[popupid="pointerLock"] {
3524 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3527 /* Notification icon box */
3528 #notification-popup .panel-promo-box {
3529 /* margin: 10px -10px -10px; */
3532 #notification-popup-box {
3534 background-color: #000000;
3535 background-clip: padding-box;
3538 border-radius: 3px 0 0 3px;
3539 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3540 -moz-margin-end: -8px;
3541 border-right-width: 8px;
3544 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3545 /* padding-left: 7px; */
3548 /* This changes the direction of the main notification box on the url bar. */
3549 #notification-popup-box:-moz-locale-dir(rtl),
3550 /* This adds a second flip for the notification anchors, as they don't switch direction
3552 .notification-anchor-icon:-moz-locale-dir(rtl) {
3553 transform: scaleX(-1);
3556 /* For the anchor icons in the chat window, we don't have the notification popup box,
3557 so we need to cancel the RTL transform. */
3558 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3562 .notification-anchor-icon {
3563 list-style-image: url("chrome://global/skin/icons/information-16.png");
3570 .notification-anchor-icon:-moz-focusring {
3571 outline: 1px dotted #008484;
3574 .identity-notification-icon,
3575 #identity-notification-icon {
3576 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3579 .geo-notification-icon,
3580 #geo-notification-icon {
3581 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3584 #addons-notification-icon {
3585 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3588 #addons-notification-icon:hover {
3589 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3592 #addons-notification-icon:hover:active {
3593 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3596 .indexedDB-notification-icon,
3597 #indexedDB-notification-icon {
3598 list-style-image: url("chrome://global/skin/icons/question-16.png");
3601 #password-notification-icon {
3602 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3605 #login-fill-notification-icon {
3606 /* Temporary icon until the capture and fill doorhangers are unified. */
3607 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3608 transform: scaleX(-1);
3611 #webapps-notification-icon {
3612 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3615 #plugins-notification-icon {
3616 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3619 #plugins-notification-icon.plugin-hidden {
3620 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3623 #plugins-notification-icon.plugin-blocked {
3624 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3627 #plugins-notification-icon {
3628 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3631 #plugins-notification-icon:hover {
3632 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3635 #notification-popup-box[hidden] {
3636 /* Override display:none to make the pluginBlockedNotification animation work
3637 when showing the notification repeatedly. */
3639 visibility: collapse;
3642 #plugins-notification-icon.plugin-blocked[showing] {
3643 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3646 @keyframes pluginBlockedNotification {
3655 .webRTC-shareDevices-notification-icon,
3656 #webRTC-shareDevices-notification-icon {
3657 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3660 .webRTC-sharingDevices-notification-icon,
3661 #webRTC-sharingDevices-notification-icon {
3662 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3665 .webRTC-shareMicrophone-notification-icon,
3666 #webRTC-shareMicrophone-notification-icon {
3667 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3670 .webRTC-sharingMicrophone-notification-icon,
3671 #webRTC-sharingMicrophone-notification-icon {
3672 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3675 .webRTC-shareScreen-notification-icon,
3676 #webRTC-shareScreen-notification-icon {
3677 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3680 .webRTC-sharingScreen-notification-icon,
3681 #webRTC-sharingScreen-notification-icon {
3682 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3685 .web-notifications-notification-icon,
3686 #web-notifications-notification-icon {
3687 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3688 -moz-image-region: rect(0, 16px, 16px, 0);
3691 .web-notifications-notification-icon:hover,
3692 #web-notifications-notification-icon:hover {
3693 -moz-image-region: rect(0, 32px, 16px, 16px);
3696 .web-notifications-notification-icon:hover:active,
3697 #web-notifications-notification-icon:hover:active {
3698 -moz-image-region: rect(0, 48px, 16px, 32px);
3701 #pointerLock-notification-icon {
3702 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3705 .translate-notification-icon,
3706 #translate-notification-icon {
3707 list-style-image: url("chrome://browser/skin/translation-16.png");
3708 -moz-image-region: rect(0px, 16px, 16px, 0px);
3711 .translated-notification-icon,
3712 #translated-notification-icon {
3713 list-style-image: url("chrome://browser/skin/translation-16.png");
3714 -moz-image-region: rect(0px, 32px, 16px, 16px);
3717 .popup-notification-icon[popupid="servicesInstall"] {
3718 list-style-image: url("chrome://browser/skin/social/services-64.png");
3720 #servicesInstall-notification-icon {
3721 list-style-image: url("chrome://browser/skin/social/services-16.png");
3724 /* EME notifications */
3726 .popup-notification-icon[popupid="drmContentPlaying"],
3727 #eme-notification-icon {
3728 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3731 #eme-notification-icon:hover:active {
3732 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3735 #eme-notification-icon[firstplay=true] {
3736 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3739 @keyframes emeTeachingMoment {
3740 0% {transform: translateX(0); }
3741 25% {transform: translateX(3px) }
3742 75% {transform: translateX(-3px) }
3743 100% { transform: translateX(0); }
3746 /* HiDPI notification icons */
3747 @media (min-resolution: 1.1dppx) {
3748 /* #notification-popup-box {
3749 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3752 .notification-anchor-icon {
3753 list-style-image: url(chrome://global/skin/icons/information-32.png);
3756 .webRTC-shareDevices-notification-icon,
3757 #webRTC-shareDevices-notification-icon {
3758 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3761 .webRTC-sharingDevices-notification-icon,
3762 #webRTC-sharingDevices-notification-icon {
3763 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3766 .webRTC-shareMicrophone-notification-icon,
3767 #webRTC-shareMicrophone-notification-icon {
3768 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3771 .webRTC-sharingMicrophone-notification-icon,
3772 #webRTC-sharingMicrophone-notification-icon {
3773 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3776 .webRTC-shareScreen-notification-icon,
3777 #webRTC-shareScreen-notification-icon {
3778 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3781 .webRTC-sharingScreen-notification-icon,
3782 #webRTC-sharingScreen-notification-icon {
3783 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3786 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3787 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3788 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3791 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3792 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3793 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3796 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3797 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3798 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3802 /* === END notification-icons.inc.css === */
3804 .popup-notification-body[popupid="addon-progress"],
3805 .popup-notification-body[popupid="addon-install-confirmation"] {
3810 /* Translation infobar */
3812 /* === BEGIN infobar.inc.css === */
3814 notification[value="translation"] .messageImage {
3815 list-style-image: url("chrome://browser/skin/translation-16.png");
3816 -moz-image-region: rect(0, 32px, 16px, 16px);
3819 @media (min-resolution: 1.25dppx) {
3820 notification[value="translation"] .messageImage {
3821 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3822 -moz-image-region: rect(0, 64px, 32px, 32px);
3826 notification[value="translation"][state="translating"] .messageImage {
3827 list-style-image: url("chrome://browser/skin/translating-16.png");
3828 -moz-image-region: auto;
3831 @media (min-resolution: 1.25dppx) {
3832 notification[value="translation"][state="translating"] .messageImage {
3833 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3837 notification[value="translation"] hbox[anonid="details"] {
3841 notification[value="translation"] button,
3842 notification[value="translation"] menulist {
3846 notification[value="translation"] menulist > .menulist-dropmarker {
3849 .translation-menupopup arrowscrollbox {
3853 .translation-attribution {
3855 -moz-box-align: end;
3859 .translation-attribution > label {
3863 .translation-attribution > image {
3867 .translation-welcome-panel {
3871 .translation-welcome-logo {
3874 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3875 -moz-image-region: rect(0, 64px, 32px, 32px);
3878 .translation-welcome-content {
3879 -moz-margin-start: 16px;
3882 .translation-welcome-headline {
3887 .translation-welcome-body {
3892 /* === END infobar.inc.css === */
3894 notification[value="translation"] {
3898 .translation-menupopup {
3899 -moz-appearance: none;
3902 /* Loop/ Hello browser styles */
3904 notification[value="loop-sharing-notification"] .button-menubutton-button {
3910 notification[value="loop-sharing-notification"] .messageImage {
3911 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3914 /* Bookmarks roots menu-items */
3915 #subscribeToPageMenuitem:not([disabled]),
3916 #subscribeToPageMenupopup,
3917 #BMB_subscribeToPageMenuitem:not([disabled]),
3918 #BMB_subscribeToPageMenupopup {
3919 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3922 #bookmarksToolbarFolderMenu,
3923 #BMB_bookmarksToolbar,
3924 #panelMenu_bookmarksToolbar {
3925 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3926 -moz-image-region: auto;
3929 #BMB_unsortedBookmarks,
3930 #panelMenu_unsortedBookmarks {
3931 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3932 -moz-image-region: auto;
3938 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3941 /* ::::: Keyboard UI Panel ::::: */
3946 border-radius: 20px;
3949 .KUI-panel[level="top"] {
3950 /*background-color: rgba(27%,27%,27%,.65);*/
3956 padding: 20px 10px 10px;
3960 .ctrlTab-favicon[src] {
3961 background-color: #000000;
3967 .ctrlTab-preview-inner > .tabPreview-canvas {
3970 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3974 .ctrlTab-preview-inner {
3975 padding-bottom: 10px;
3978 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3980 background-color: #000000;
3981 border-radius: .5em;
3984 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3986 background-color: #000000;
3989 border: 2px solid #9C9CFF;
3990 border-radius: .5em;
3993 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3994 margin: -10px -10px 0;
4006 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
4014 .sync-panel-button-box {
4018 #sync-start-panel-title {
4024 #sync-start-panel-subtitle {
4030 .statuspanel-label {
4033 background: #404000;
4034 border: 1px none #9C9CFF;
4035 border-top-style: solid;
4040 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4041 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4042 border-right-style: solid;
4043 border-top-right-radius: .3em;
4047 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4048 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4049 border-left-style: solid;
4050 border-top-left-radius: .3em;
4054 /* HACK to abolish devily color on main content */
4057 background-color: transparent !important;
4060 /* === BEGIN fullscreen/warning.inc.css === */
4062 html|*#fullscreen-warning {
4063 align-items: center;
4064 background: rgba(0, 0, 0, 0.9);
4065 border: 2px solid #A09090;
4066 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4069 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4072 html|*#fullscreen-warning::before {
4074 width: 24px; height: 24px;
4077 html|*#fullscreen-warning.verifiedIdentity::before,
4078 html|*#fullscreen-warning.verifiedDomain::before {
4079 content: url("chrome://browser/skin/fullscreen/secure.svg");
4082 html|*#fullscreen-warning.unknownIdentity::before {
4083 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4086 html|*#fullscreen-domain-text,
4087 html|*#fullscreen-generic-text {
4089 font-weight: lighter;
4094 html|*#fullscreen-domain {
4099 html|*#fullscreen-exit-button {
4101 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4103 font-weight: lighter;
4105 box-sizing: content-box;
4107 border-radius: 300px;
4109 background-color: #C09070;
4113 /* === END fullscreen/warning.inc.css === */
4115 /* === BEGIN commandline.inc.css === */
4117 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4118 We are copy/pasting variables from light-theme and dark-theme,
4119 since they aren't loaded in this context (within browser.css). */
4120 :root #developer-toolbar {
4121 --gcli-background-color: #000000; /* --theme-toolbar-background */
4122 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4123 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4124 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4125 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4126 --selection-background: #008484; /* --theme-selection-background */
4127 --selection-color: #000000; /* --theme-selection-color */
4130 /* Developer toolbar */
4132 #developer-toolbar {
4133 border-top: 3px solid var(--gcli-background-color);
4134 border-bottom: none;
4137 #developer-toolbar .toolbar-holder {
4138 background-color: #8050B0;
4142 #developer-toolbar .toolbar-holder {
4143 background-color: #8050B0;
4147 #developer-toolbar .toolbar-startcap,
4148 #developer-toolbar .toolbar-endcap{
4149 background-color: #6000CF;
4152 #developer-toolbar {
4154 min-height: 32px; */
4157 #developer-toolbar > toolbarbutton {
4163 .developer-toolbar-button > image {
4164 /* margin: auto 10px; */
4167 #developer-toolbar-toolbox-button > label {
4171 .developer-toolbar-button > .toolbarbutton-icon,
4172 #developer-toolbar-closebutton > .toolbarbutton-icon {
4177 #developer-toolbar-toolbox-button {
4178 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4179 -moz-image-region: rect(0px, 16px, 16px, 0px);
4182 #developer-toolbar-toolbox-button > label {
4186 #developer-toolbar-toolbox-button:hover,
4187 #developer-toolbar-toolbox-button:hover:active,
4188 #developer-toolbar-toolbox-button[checked=true] {
4189 -moz-image-region: rect(0px, 32px, 16px, 16px);
4192 @media (min-resolution: 2dppx) {
4193 #developer-toolbar-toolbox-button {
4194 list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4195 -moz-image-region: rect(0px, 32px, 32px, 0px);
4198 #developer-toolbar-toolbox-button:hover,
4199 #developer-toolbar-toolbox-button:hover:active,
4200 #developer-toolbar-toolbox-button[checked=true] {
4201 -moz-image-region: rect(0px, 64px, 32px, 32px);
4205 #developer-toolbar-closebutton {
4206 list-style-image: url("chrome://browser/skin/devtools/close.png");
4207 -moz-image-region: rect(0px, 16px, 16px, 0px);
4212 #developer-toolbar-closebutton > .toolbarbutton-icon {
4215 #developer-toolbar-closebutton > .toolbarbutton-text {
4219 #developer-toolbar-closebutton:hover,
4220 #developer-toolbar-closebutton:hover:active {
4221 -moz-image-region: rect(0px, 32px, 16px, 16px);
4224 @media (min-resolution: 2dppx) {
4225 #developer-toolbar-closebutton {
4226 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4227 -moz-image-region: rect(0px, 32px, 32px, 0px);
4230 #developer-toolbar-closebutton:hover,
4231 #developer-toolbar-closebutton:hover:active {
4232 -moz-image-region: rect(0px, 64px, 32px, 32px);
4238 html|*#gcli-tooltip-frame,
4239 html|*#gcli-output-frame {
4242 background-color: transparent;
4248 background-color: transparent;
4251 .gclitoolbar-input-node,
4252 .gclitoolbar-complete-node {
4254 -moz-box-align: center;
4258 background-color: transparent;
4261 .gclitoolbar-input-node {
4262 /* line-height: 32px;
4263 outline-style: none; */
4264 background-repeat: no-repeat;
4265 background-color: var(--gcli-input-background);
4268 .gclitoolbar-input-node[focused="true"] {
4269 background-color: var(--gcli-input-focused-background);
4272 .gclitoolbar-input-node::before {
4274 display: inline-block;
4275 -moz-box-ordinal-group: 0;
4279 background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4280 background-position: 0 center;
4281 background-size: 32px 16px;
4284 .gclitoolbar-input-node[focused="true"]::before {
4285 background-position: -16px center;
4288 @media (min-resolution: 2dppx) {
4289 .gclitoolbar-input-node::before {
4290 background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4294 .gclitoolbar-input-node:not([focused="true"]) {
4295 border-color: transparent;
4298 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4299 background-color: var(--selection-background);
4300 color: var(--selection-color);
4303 .gclitoolbar-complete-node {
4305 background-color: transparent;
4308 pointer-events: none;
4311 .gcli-in-incomplete,
4315 .gcli-in-closebrace,
4322 .gcli-in-incomplete {
4323 border-bottom: 2px dotted #8050B0;
4327 border-bottom: 2px dotted #FF0000;
4338 .gcli-in-closebrace {
4342 /* === END commandline.inc.css === */
4344 /* === BEGIN responsivedesign.inc.css === */
4346 /* Responsive Mode */
4348 .browserContainer[responsivemode] {
4349 background-color: #221500;
4350 padding: 0 20px 20px 20px;
4353 .browserStack[responsivemode] {
4354 box-shadow: 0 0 7px #9C9CFF;
4357 .devtools-responsiveui-toolbar {
4358 background: transparent;
4359 /* text color is textColor from dark theme, since no theme is applied to
4360 * the responsive toolbar.
4366 border-bottom-width: 0;
4369 .devtools-responsiveui-menulist,
4370 .devtools-responsiveui-toolbarbutton {
4371 -moz-box-align: center;
4373 /* min-height: 22px;*/
4374 /* margin: 0 3px; */
4377 .devtools-responsiveui-menulist .menulist-editable-box {
4378 background-color: transparent;
4381 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4386 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4387 /* background: hsla(212,7%,57%,.35);*/
4390 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4395 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4396 -moz-box-orient: horizontal;
4399 .devtools-responsiveui-menulist:-moz-focusring,
4400 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4401 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4402 outline-offset: -4px;*/
4405 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4409 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4410 /* border-color: hsla(210,8%,5%,.6);
4411 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4412 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); */
4415 .devtools-responsiveui-menulist[open=true],
4416 .devtools-responsiveui-toolbarbutton[open=true],
4417 .devtools-responsiveui-toolbarbutton[checked=true] {
4418 /* border-color: hsla(210,8%,5%,.6) !important;
4419 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4420 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); */
4423 .devtools-responsiveui-toolbarbutton[checked=true] {
4424 /* color: hsl(208,100%,60%); */
4427 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4428 /* background-color: transparent !important;*/
4431 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4432 /* background-color: hsla(210,8%,5%,.2) !important;*/
4435 .devtools-responsiveui-menulist > .menulist-label-box {
4439 .devtools-responsiveui-menulist > .menulist-dropmarker {
4440 /* display: -moz-box;
4441 background-color: transparent;
4442 list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4443 -moz-box-align: center;
4448 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4451 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4452 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4455 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4456 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4459 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4460 /* padding: 0 1px;*/
4461 -moz-box-align: stretch;
4464 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4465 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4466 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4467 -moz-box-align: center;
4471 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4472 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4476 .devtools-responsiveui-close {
4477 list-style-image: url("chrome://browser/skin/devtools/close.png");
4478 -moz-image-region: rect(0px,16px,16px,0px);
4481 .devtools-responsiveui-close:hover {
4482 -moz-image-region: rect(0px,32px,16px,16px);
4485 .devtools-responsiveui-rotate {
4486 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4487 -moz-image-region: rect(0px,16px,16px,0px);
4490 .devtools-responsiveui-rotate:hover {
4491 -moz-image-region: rect(0px,32px,16px,16px);
4494 @media (min-resolution: 2dppx) {
4495 .devtools-responsiveui-close {
4496 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4499 .devtools-responsiveui-close:hover {
4500 -moz-image-region: rect(0px,64px,32px,32px);
4503 .devtools-responsiveui-rotate {
4504 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4507 .devtools-responsiveui-rotate:hover {
4508 -moz-image-region: rect(0px,64px,32px,32px);
4512 .devtools-responsiveui-touch {
4513 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4514 -moz-image-region: rect(0px,16px,16px,0px);
4517 .devtools-responsiveui-touch:hover,
4518 .devtools-responsiveui-touch[checked],
4519 .devtools-responsiveui-touch[checked]:hover {
4520 -moz-image-region: rect(0px,32px,16px,16px);
4523 @media (min-resolution: 2dppx) {
4524 .devtools-responsiveui-touch {
4525 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4526 -moz-image-region: rect(0px,32px,32px,0px);
4529 .devtools-responsiveui-touch:hover,
4530 .devtools-responsiveui-touch[checked],
4531 .devtools-responsiveui-touch[checked]:hover {
4532 -moz-image-region: rect(0px,64px,32px,32px);
4536 .devtools-responsiveui-screenshot {
4537 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4538 -moz-image-region: rect(0px,16px,16px,0px);
4541 .devtools-responsiveui-screenshot:hover {
4542 -moz-image-region: rect(0px,32px,16px,16px);
4545 @media (min-resolution: 2dppx) {
4546 .devtools-responsiveui-screenshot {
4547 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4550 .devtools-responsiveui-screenshot:hover {
4551 -moz-image-region: rect(0px,64px,32px,32px);
4555 .devtools-responsiveui-resizebarV {
4559 transform: translate(12px, -12px);
4560 background-size: cover;
4561 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4564 .devtools-responsiveui-resizebarH {
4568 transform: translate(-12px, 12px);
4569 background-size: cover;
4570 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4573 .devtools-responsiveui-resizehandle {
4577 transform: translate(12px, 12px);
4578 background-size: cover;
4579 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4582 /* FxOS custom mode with additional buttons and phone look'n feel */
4584 /* Hide devtools manual resizer */
4585 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4586 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4587 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4591 /* Gives responsive mode a phone look'n feel */
4592 .browserStack[responsivemode].fxos-mode {
4593 padding: 60px 15px 0;
4595 border-radius: 25px / 20px;
4596 border-bottom-left-radius: 0;
4597 border-bottom-right-radius: 0;
4598 border: 1px solid #FFFFFF;
4599 border-bottom-width: 0;
4601 background-color: #353535;
4603 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4605 background-image: linear-gradient(to right, #111 11%, #333 56%);
4609 .devtools-responsiveui-hardware-buttons {
4610 -moz-appearance: none;
4613 border: 1px solid #FFFFFF;
4614 border-bottom-left-radius: 25px;
4615 border-bottom-right-radius: 25px;
4616 border-top-width: 0;
4618 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4620 background-image: linear-gradient(to right, #111 11%, #333 56%);
4623 .devtools-responsiveui-home-button {
4624 -moz-user-focus: ignore;
4627 list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4630 .devtools-responsiveui-sleep-button {
4631 -moz-user-focus: ignore;
4632 -moz-appearance: none;
4633 /* compensate browserStack top padding */
4641 border: 1px solid #444;
4642 border-top-right-radius: 12px;
4643 border-top-left-radius: 12px;
4644 border-bottom-color: transparent;
4646 background-image: linear-gradient(to top, #111 11%, #333 56%);
4649 .devtools-responsiveui-sleep-button:hover:active {
4650 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4653 .devtools-responsiveui-volume-buttons {
4657 .devtools-responsiveui-volume-up-button,
4658 .devtools-responsiveui-volume-down-button {
4659 -moz-user-focus: ignore;
4660 -moz-appearance: none;
4661 border: 1px solid red;
4665 border: 1px solid #444;
4666 border-right-color: transparent;
4668 background-image: linear-gradient(to right, #111 11%, #333 56%);
4671 .devtools-responsiveui-volume-up-button:hover:active,
4672 .devtools-responsiveui-volume-down-button:hover:active {
4673 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4676 .devtools-responsiveui-volume-up-button {
4677 border-top-left-radius: 12px;
4680 .devtools-responsiveui-volume-down-button {
4681 border-bottom-left-radius: 12px;
4684 @media (min-resolution: 2dppx) {
4685 .devtools-responsiveui-resizebarV {
4686 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4689 .devtools-responsiveui-resizebarH {
4690 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4693 .devtools-responsiveui-resizehandle {
4694 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4698 /* === END responsivedesign.inc.css === */
4700 /* === including indicator.css is done at the start of the file === */
4704 #developer-toolbar-toolbox-button[error-count]:before {
4708 background-color: #FF0000;
4710 -moz-margin-end: 5px;
4713 /* Social toolbar item */
4715 #social-notification-icon-mentions {
4716 background-color: #000000;
4718 -moz-margin-start: 2px;
4721 #social-notification-icon-mentions:hover {
4722 background-color: #FFCF00;
4725 #social-notification-icon-mentions[open="true"] {
4726 background-color: #FF9F00;
4729 #social-sidebar-splitter {
4733 #socialActivatedNotification .popup-notification-button-container {
4737 .social-activation-icon {
4744 #social-activation-message {
4748 #social-activation-message > label {
4752 /* social toolbar provider menu */
4753 .social-statusarea-popup {
4756 margin-right: -12px;
4759 .social-statusarea-user {
4760 border-bottom: 1px solid #9C9CFF;
4761 background-color: #000000;
4767 .social-statusarea-user-portrait {
4774 .social-statusarea-loggedInStatus {
4775 background: transparent;
4780 list-style-image: none;
4783 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4784 text-decoration: underline;
4787 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4791 .social-panel-frame {
4792 border-radius: inherit;
4795 /* === BEGIN chat.inc.css === */
4797 #social-sidebar-header {
4801 #manage-share-providers,
4802 #social-sidebar-button {
4803 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4804 -moz-image-region: rect(0, 468px, 18px, 450px);
4807 #social-sidebar-button {
4808 -moz-appearance: none;
4813 #manage-share-providers > .toolbarbutton-icon,
4814 #social-sidebar-button > .toolbarbutton-icon {
4818 #manage-share-providers:hover,
4819 #manage-share-providers:hover:active,
4820 #social-sidebar-button:hover,
4821 #social-sidebar-button:hover:active {
4822 -moz-image-region: rect(18px, 468px, 36px, 450px);
4824 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4828 #social-sidebar-button[loading="true"] {
4829 list-style-image: url("chrome://global/skin/icons/loading.gif");
4832 #social-sidebar-favico {
4845 .chat-toolbarbutton {
4846 -moz-appearance: none;
4853 .chat-toolbarbutton > .toolbarbutton-text {
4857 .chat-toolbarbutton > .toolbarbutton-icon {
4862 .chat-close-button {
4863 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4866 .chat-close-button:hover {
4867 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4870 .chat-close-button:hover:active {
4871 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4874 .chat-minimize-button {
4875 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4878 .chat-minimize-button:hover {
4879 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4882 .chat-minimize-button:hover:active {
4883 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4887 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4888 transform: rotate(180deg);
4891 .chat-swap-button:hover {
4892 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4895 .chat-swap-button:hover:active {
4896 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4899 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4903 chatbox[src^="about:loopconversation#"] .chat-minimize-button {
4904 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
4907 chatbox[src^="about:loopconversation#"] .chat-swap-button {
4908 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
4912 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4913 background-color: #FF0000;
4914 border: 1px solid #FFC000;
4915 border-top-right-radius: 4px;
4919 margin-bottom: -5px;
4920 -moz-margin-start: 6px;
4921 -moz-margin-end: -5px;
4924 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4925 background-color: #FFCF00;
4926 border-color: #FF0000;
4935 chatbox[src^="about:loopconversation#"] .chat-title {
4940 background-color: #9C9CFF;
4947 border: 1px solid #008484;
4949 border-top-left-radius: 4px;
4950 border-top-right-radius: 4px;
4952 background-color: #A09090;
4955 .chat-titlebar[selected] {
4956 background-color: #008484;
4959 chatbox[src^="about:loopconversation#"] > .chat-titlebar {
4960 background-color: #008484;
4961 border-color: #008484;
4964 .chat-titlebar > .notification-anchor-icon {
4969 .chat-titlebar[minimized="true"] {
4970 border-bottom: none;
4973 .chat-titlebar[selected] {
4974 background-color: #008484;
4977 .chat-titlebar[activity] {
4978 background-color: #E7ADE7;
4988 list-style-image: url("chrome://browser/skin/social/services-16.png");
4989 background-color: #000000;
4995 border-top: 1px solid #008484;
4996 -moz-border-end: 1px solid #008484;
4999 @media (min-resolution: 2dppx) {
5001 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
5005 .chatbar-button:hover {
5006 background-color: #FFCF00;
5008 .chatbar-button[open="true"] {
5009 background-color: #FF9F00;
5012 .chatbar-button[activity]:not([open]) {
5013 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
5016 .chatbar-button > .toolbarbutton-icon {
5020 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5027 .chatbar-button > .toolbarbutton-icon {
5031 .chatbar-button:hover > .toolbarbutton-icon,
5032 .chatbar-button[open="true"] > .toolbarbutton-icon {
5036 .chatbar-button:hover,
5037 .chatbar-button[open="true"] {
5040 .chatbar-button > .toolbarbutton-text,
5041 .chatbar-button > .toolbarbutton-menu-dropmarker {
5045 .chatbar-button[activity]:not([open="true"]) {
5046 background-color: #E7ADE7;
5049 .chatbar-button > menupopup > menuitem[activity] {
5054 background: transparent;
5059 -moz-margin-end: 20px;
5063 -moz-margin-start: 4px;
5064 background-color: transparent;
5068 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
5070 /* border-top-left-radius: 4px;
5071 border-top-right-radius: 4px;*/
5072 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
5074 /* -moz-margin-end: 5px;*/
5077 chatbox[minimized="true"] {
5083 -moz-margin-start: 0px;
5089 /* === END chat.inc.css === */
5091 /* === BEGIN plugin-doorhanger.inc.css === */
5094 * Plugin Doorhanger Styles
5097 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5098 padding: 6px 1px 2px;
5101 .click-to-play-plugins-notification-center-box {
5104 .plugin-popupnotification-centeritem:nth-child(odd) {
5105 /* background-color: rgba(0,0,0,0.1);*/
5108 .center-item-label {
5110 text-overflow: ellipsis;
5113 .center-item-warning-icon {
5114 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5115 background-repeat: no-repeat;
5118 -moz-margin-start: 6px;
5121 .click-to-play-plugins-notification-button-container {
5124 .click-to-play-popup-button {
5128 .click-to-play-plugins-notification-description-box {
5132 padding-bottom: 3px;
5135 .click-to-play-plugins-outer-description {
5139 .click-to-play-plugins-notification-link,
5144 .messageImage[value="plugin-hidden"] {
5145 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5148 /* Keep any changes to this style in sync with pluginProblem.css */
5149 notification.pluginVulnerable {
5152 notification.pluginVulnerable .messageImage {
5153 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5156 /* === END plugin-doorhanger.inc.css === */
5158 /* === BEGIN login-doorhanger.inc.css === */
5160 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5161 /* Since we display a sliding subview that extends to the border, we cannot
5162 * keep the default padding of arrow panels. We use the same padding in the
5163 * individual content views instead. Since we removed the padding, we also
5164 * have to ensure the contents are clipped to the border box. */
5169 #login-fill-mainview,
5170 #login-fill-details {
5171 padding: var(--panel-arrowcontent-padding);
5174 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5175 transform: translateX(-14px);
5178 #login-fill-mainview,
5179 #login-fill-details {
5180 transition: transform 150ms;
5183 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5184 transform: translateX(105%);
5187 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5188 transform: translateX(-105%);
5191 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5192 background-color: hsla(240,39%,100%,.1);
5195 #login-fill-testing {
5201 border: 1px solid #9C9CFF;
5205 .login-fill-item[disabled] {
5207 background-color: #000000;
5210 .login-fill-item[disabled][selected] {
5211 background-color: #008484;
5219 .login-fill-item.different-hostname > .login-hostname {
5229 #login-fill-details {
5231 background: var(--panel-arrowcontent-background);
5232 color: var(--panel-arrowcontent-color);
5233 background-clip: padding-box;
5234 border-left: 1px solid #9C9CFF;
5235 -moz-margin-start: 38px;
5238 /* === END login-doorhanger.inc.css === */
5240 /* === BEGIN customizeMode.inc.css === */
5242 /* Customization mode */
5244 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5248 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5249 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5250 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5255 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5256 pointer-events: none;
5259 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5260 #PanelUI-contents > .panel-customization-placeholder {
5261 -moz-outline-radius: 2.5px;
5262 outline: 1px dashed transparent;
5265 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5266 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5267 -moz-box-ordinal-group: 0;
5272 outline-offset: -2px;
5273 pointer-events: none;
5279 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5280 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5281 offset from the bottom effectively the same as other targets (-2px). */
5282 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5286 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5287 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5288 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5289 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5293 /* Most target outlines are shown on hover and drag over but the panel menu uses
5294 placeholders instead. */
5295 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5296 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5297 /* nav-bar and panel outlines are always shown */
5298 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5299 outline-color: #A09090;
5302 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5303 transition: outline-color 250ms linear;
5306 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5307 transition: outline-color 250ms linear;
5308 outline-color: #9C9CFF;
5311 #PanelUI-contents > .panel-customization-placeholder {
5313 outline-offset: -5px;
5316 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5318 /* padding-left: 10px;
5319 padding-right: 10px;*/
5322 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5326 #customization-container {
5327 background-color: #000000;
5331 #customization-palette,
5332 #customization-empty {
5333 padding: 0 15px 15px;
5336 #customization-header {
5338 line-height: 1.75em;
5341 margin: 25px 25px 12px;
5342 padding-bottom: 12px;
5343 border-bottom: 1px solid #A09090;
5346 #customization-panel-container {
5347 padding: 10px 10px 0px;
5350 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5351 #customization-footer {
5352 /*background-color: rgb(236,236,236);*/
5355 #customization-footer {
5356 border-top: 1px solid #9C9CFF;
5360 .customizationmode-button {
5364 .customizationmode-button:hover {
5367 #customization-titlebar-visibility-button[checked],
5368 #customization-devedition-theme-button[checked] {
5369 background-color: #008484;
5372 #customization-titlebar-visibility-button[checked]:hover,
5373 #customization-devedition-theme-button[checked]:hover {
5374 background-color: #FFCF00;
5377 #customization-titlebar-visibility-button[checked]:hover:active,
5378 #customization-devedition-theme-button[checked]:hover:active {
5379 background-color: #FF9F00;
5382 .customizationmode-button[disabled="true"] {
5385 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5386 .customizationmode-button > .button-box > .button-icon {
5390 #customization-titlebar-visibility-button {
5391 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5392 -moz-image-region: rect(0, 16px, 16px, 0);
5395 #customization-titlebar-visibility-button:hover {
5396 -moz-image-region: rect(16px, 16px, 32px, 0);
5399 #customization-lwtheme-button,
5400 #customization-titlebar-visibility-button {
5404 #customization-titlebar-visibility-button > .button-box {
5406 padding-bottom: 1px;
5409 #customization-titlebar-visibility-button:hover:active > .button-box {
5414 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5415 #customization-titlebar-visibility-button > .button-box > .button-text {
5416 /* Sadly, button.css thinks its margins are perfect for everyone. */
5417 -moz-margin-start: 5px !important;
5420 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5424 background-size: contain;
5427 #customization-titlebar-visibility-button > .button-box > .button-icon {
5428 vertical-align: middle;
5431 #customization-titlebar-visibility-button[checked] {
5432 -moz-image-region: rect(0, 32px, 16px, 16px);
5433 background-color: #008484;
5436 #customization-titlebar-visibility-button[checked]:hover {
5437 -moz-image-region: rect(16px, 32px, 32px, 16px);
5438 background-color: #FFCF00;
5441 #customization-titlebar-visibility-button[checked]:hover:active {
5442 background-color: #FF9F00;
5445 @media (min-resolution: 1.1dppx) {
5446 #customization-titlebar-visibility-button {
5447 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5448 -moz-image-region: rect(0, 48px, 48px, 0);
5451 #customization-titlebar-visibility-button:hover {
5452 -moz-image-region: rect(48px, 48px, 96px, 0);
5455 #customization-titlebar-visibility-button[checked] {
5456 -moz-image-region: rect(0, 96px, 48px, 48px);
5459 #customization-titlebar-visibility-button[checked]:hover {
5460 -moz-image-region: rect(48px, 96px, 96px, 48px);
5464 #main-window[customize-entered] #customization-panel-container {
5465 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5466 background-position: left top;
5467 background-repeat: repeat;
5468 background-size: auto;
5469 background-attachment: fixed;
5472 toolbarpaletteitem[place="toolbar"] {
5473 transition: border-width 250ms ease-in-out;
5476 toolbarpaletteitem[mousedown] {
5477 outline: 1px solid #008484;
5478 cursor: -moz-grabbing;
5482 .panel-customization-placeholder,
5483 toolbarpaletteitem[place="palette"],
5484 toolbarpaletteitem[place="panel"] {
5485 transition: transform .3s ease-in-out;
5488 #customization-palette {
5489 transition: opacity .3s ease-in-out;
5493 #customization-palette[showing="true"] {
5497 toolbarpaletteitem[notransition].panel-customization-placeholder,
5498 toolbarpaletteitem[notransition][place="toolbar"],
5499 toolbarpaletteitem[notransition][place="palette"],
5500 toolbarpaletteitem[notransition][place="panel"] {
5504 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5505 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5506 toolbarpaletteitem > toolbaritem.panel-wide-item,
5507 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5508 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5511 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5512 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5513 transform: scale(1.3);
5516 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5517 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5518 transform: scale(1.1);
5521 /* Override the toolkit styling for items being dragged over. */
5522 toolbarpaletteitem[place="toolbar"] {
5523 border-left-width: 0;
5524 border-right-width: 0;
5529 #customization-palette:not([hidden]) {
5530 margin-bottom: 25px;
5533 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5534 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5535 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5536 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5540 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5541 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5551 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5552 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5556 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5557 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5560 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5561 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5565 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5566 -moz-box-pack: center;
5570 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5571 -moz-margin-end: 5px;
5574 #customization-palette > toolbarpaletteitem > label {
5580 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5581 -moz-box-orient: vertical;
5582 /* Make the panel padding uniform across all platforms due to the
5583 styling of the section headers and footer. */
5587 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5592 .customization-lwtheme-menu-theme {
5593 -moz-appearance: none;
5596 -moz-padding-end: 5px;
5598 -moz-padding-start: 0;
5601 .customization-lwtheme-menu-theme[defaulttheme] {
5602 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5605 .customization-lwtheme-menu-theme[active="true"] {
5606 background-color: #008484;
5609 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5613 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5617 #customization-lwtheme-menu-header,
5618 #customization-lwtheme-menu-recommended {
5623 #customization-lwtheme-menu-header,
5624 #customization-lwtheme-menu-recommended,
5625 #customization-lwtheme-menu-footer {
5626 background-color: #A09090;
5628 margin-right: -10px;
5632 #customization-lwtheme-menu-header {
5634 border-top-right-radius: 3px;
5635 border-top-left-radius: 3px;
5638 #customization-lwtheme-menu-recommended {
5641 #customization-lwtheme-menu-footer {
5642 margin-bottom: -10px;
5643 border-bottom-right-radius: 3px;
5644 border-bottom-left-radius: 3px;
5647 .customization-lwtheme-menu-footeritem {
5648 -moz-appearance: none;
5650 background-color: #C09070;
5652 border: 1px solid transparent;
5658 .customization-lwtheme-menu-footeritem:hover {
5659 background-color: #FFCF00;
5662 .customization-lwtheme-menu-footeritem:first-child {
5665 /* === END customizeMode.inc.css === */
5667 /* === BEGIN customizeTip.inc.css === */
5669 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5676 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5677 border: 1px solid #9C9CFF;
5681 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5682 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5685 .customization-tipPanel-infoBox {
5686 margin: 20px 25px 25px;
5688 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5689 background-repeat: no-repeat;
5692 .customization-tipPanel-content {
5698 .customization-tipPanel-em {
5703 .customization-tipPanel-contentImage {
5705 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5713 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5714 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5717 .customization-tipPanel-link {
5718 -moz-appearance: none;
5719 background: transparent;
5727 .customization-tipPanel-link > .button-box > .button-text {
5728 margin: 0 !important;
5731 .customization-tipPanel-closeBox > .close-icon {
5732 -moz-appearance: none;
5734 -moz-margin-end: -25px;
5737 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5738 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5739 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5742 /* === END customizeTip.inc.css === */
5745 * This next rule is a hack to disable subpixel anti-aliasing on all
5746 * labels during the customize mode transition. Subpixel anti-aliasing
5747 * on Windows with Direct2D layers acceleration is particularly slow to
5748 * paint, so this hack is how we sidestep that performance bottleneck.
5750 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5751 transform: perspective(0.01px);
5754 #main-window[customize-entered] > #tab-view-deck {
5755 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5756 background-attachment: fixed;
5759 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5760 background-repeat: no-repeat;
5761 background-position: right top;
5762 background-attachment: fixed;
5763 /* The image will get set from CustomizeMode.jsm */
5764 background-image: none;
5765 background-color: transparent;
5768 #main-window[customization-lwtheme]:-moz-lwtheme {
5769 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5770 background-repeat: repeat;
5771 background-attachment: fixed;
5772 background-position: left top;
5775 #main-window[customize-entered] #browser-bottombox,
5776 #main-window[customize-entered] #customization-container {
5777 border-left: 1px solid #9C9CFF;
5778 border-right: 1px solid #9C9CFF;
5779 background-clip: padding-box;
5782 #main-window[customize-entered] #browser-bottombox {
5783 border-bottom: 1px solid #9C9CFF;
5786 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5790 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5794 /* End customization mode */
5796 /* Private browsing indicators */
5799 * Currently, we have two places where we put private browsing indicators on
5800 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5801 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5802 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5803 * want the bottom border of the image to line up with the bottom of the window
5804 * caption buttons. That's why there's so much special-casing going on in here.
5806 .private-browsing-indicator {
5808 pointer-events: none;
5811 #private-browsing-indicator-titlebar {
5816 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5820 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5824 #TabsToolbar > .private-browsing-indicator {
5825 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5826 -moz-margin-start: 4px;
5830 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5831 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5832 * min/max/close window buttons.
5834 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5835 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5836 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5837 -moz-margin-end: 4px;
5843 /* This one is for Linux */
5844 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5845 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5849 /* End private browsing indicators */
5851 /* === BEGIN UITour.inc.css === */
5855 #UITourHighlightContainer {
5856 -moz-appearance: none;
5858 background-color: transparent;
5859 /* This is a buffer to compensate for the movement in the "wobble" effect */
5864 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5865 border-radius: 40px;
5866 border: 1px solid #9C9CFF;
5867 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5868 on Linux without an X compositor where opacity is either 0 or 1. */
5869 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5874 #UITourTooltipBody {
5875 -moz-margin-end: 14px;
5878 #UITourTooltipBody > vbox {
5882 #UITourTooltipIconContainer {
5883 -moz-margin-start: -16px;
5886 #UITourTooltipIcon {
5889 -moz-margin-start: 28px;
5890 -moz-margin-end: 28px;
5893 #UITourTooltipTitle,
5894 #UITourTooltipDescription {
5898 #UITourTooltipTitle {
5901 -moz-margin-start: 0;
5906 #UITourTooltipDescription {
5907 -moz-margin-start: 0;
5910 line-height: 1.8rem;
5911 margin-bottom: 0; /* Override global.css */
5914 #UITourTooltipClose {
5915 -moz-appearance: none;
5917 background-color: transparent;
5919 -moz-margin-start: 4px;
5923 #UITourTooltipClose > .toolbarbutton-text {
5927 #UITourTooltipButtons {
5929 background-color: rgba(0,0,0,.2);
5930 border-top: 1px solid rgba(0,0,0,.4);
5931 margin: 24px -16px -16px;
5935 #UITourTooltipButtons > label,
5936 #UITourTooltipButtons > button {
5940 #UITourTooltipButtons > label:first-child,
5941 #UITourTooltipButtons > button:first-child {
5942 -moz-margin-start: 0;
5945 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5948 -moz-margin-end: 5px;
5951 #UITourTooltipButtons > label,
5952 #UITourTooltipButtons > button .button-text {
5956 #UITourTooltipButtons > button:not(.button-link) {
5957 -moz-appearance: none;
5958 background-color: #C09070;
5959 border-radius: 3000px;
5963 transition-property: background-color, color;
5964 transition-duration: 150ms;
5967 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5968 background-color: #FFCF00;
5972 #UITourTooltipButtons > label,
5973 #UITourTooltipButtons > button.button-link {
5974 -moz-appearance: none;
5975 background: transparent;
5978 color: rgba(0,0,0,0.35);
5980 padding-right: 10px;
5983 #UITourTooltipButtons > button.button-link:hover {
5987 /* The primary button gets the same color as the customize button. */
5988 #UITourTooltipButtons > button.button-primary {
5989 background-color: #A06060; /* LCARS default button background color */
5992 padding-right: 30px;
5995 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5996 background-color: #FFCF00;
6000 /* Notification overrides for Heartbeat UI */
6002 notification.heartbeat {
6003 background-color: #A09090;
6007 @keyframes pulse-onshow {
6010 transform: scale(1.0);
6014 transform: scale(1.1);
6017 transform: scale(1.0);
6020 transform: scale(1.1);
6023 transform: scale(1.0);
6027 @keyframes pulse-twice {
6029 transform: scale(1.1);
6032 transform: scale(0.8);
6035 transform: scale(1);
6039 .messageText.heartbeat {
6041 /* text-shadow: none; */
6042 -moz-margin-start: 0px;
6045 .messageImage.heartbeat {
6048 -moz-margin-start: 8px;
6049 -moz-margin-end: 8px;
6052 .messageImage.heartbeat.pulse-onshow {
6053 animation-name: pulse-onshow;
6054 animation-duration: 1.5s;
6055 animation-iteration-count: 1;
6056 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6059 .messageImage.heartbeat.pulse-twice {
6060 animation-name: pulse-twice;
6061 animation-duration: 1s;
6062 animation-iteration-count: 2;
6063 animation-timing-function: linear;
6066 /* Learn More link styles */
6067 .heartbeat > .text-link {
6069 -moz-margin-start: 0px;
6072 .heartbeat > .text-link:hover {
6074 text-decoration: none;
6077 .heartbeat > .text-link:hover:active {
6081 /* Heartbeat UI Rating Star Classes */
6082 .heartbeat > #star-rating-container {
6084 /* margin-bottom: 4px;*/
6087 .heartbeat > #star-rating-container > #star5 {
6088 -moz-box-ordinal-group: 5;
6091 .heartbeat > #star-rating-container > #star4 {
6092 -moz-box-ordinal-group: 4;
6095 .heartbeat > #star-rating-container > #star3 {
6096 -moz-box-ordinal-group: 3;
6099 .heartbeat > #star-rating-container > #star2 {
6100 -moz-box-ordinal-group: 2;
6103 .heartbeat > #star-rating-container > .star-x {
6104 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6106 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6107 -moz-margin-end: 4px !important;
6112 .heartbeat > #star-rating-container > .star-x:hover,
6113 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6114 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6117 /* === END UITour.inc.css === */
6119 #UITourTooltipButtons {
6121 * Override the --panel-arrowcontent-padding so the background extends
6122 * to the sides and bottom of the panel.
6125 margin-right: -10px;
6126 margin-bottom: -10px;
6129 /* === BEGIN contextmenu.inc.css === */
6131 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6134 #context-navigation > .menuitem-iconic {
6136 -moz-box-pack: center;
6137 -moz-box-align: center;
6140 #context-navigation > .menuitem-iconic[disabled="true"] {
6141 background-color: transparent;
6144 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6145 -moz-appearance: none;
6148 #context-back > .menu-iconic-left {
6149 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6150 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6151 -moz-image-region: rect(0, 54px, 18px, 36px);
6154 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6155 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6156 -moz-image-region: rect(18px, 54px, 36px, 36px);
6159 #context-back[disabled="true"] > .menu-iconic-left {
6160 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6161 -moz-image-region: rect(36px, 54px, 54px, 36px);
6164 #context-forward > .menu-iconic-left {
6165 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6166 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6167 -moz-image-region: rect(0, 72px, 18px, 54px);
6170 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6171 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6172 -moz-image-region: rect(18px, 72px, 36px, 54px);
6175 #context-forward[disabled="true"] > .menu-iconic-left {
6176 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6177 -moz-image-region: rect(36px, 72px, 54px, 54px);
6180 #context-reload > .menu-iconic-left {
6181 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6182 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6183 -moz-image-region: rect(0, 14px, 14px, 0);
6186 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6187 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6188 -moz-image-region: rect(14px, 14px, 28px, 0);
6191 #context-reload[disabled="true"] > .menu-iconic-left {
6192 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6193 -moz-image-region: rect(28px, 14px, 42px, 0);
6196 #context-stop > .menu-iconic-left {
6197 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6198 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6199 -moz-image-region: rect(0, 28px, 14px, 14px);
6202 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6203 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6204 -moz-image-region: rect(14px, 28px, 28px, 14px);
6207 #context-stop[disabled="true"] > .menu-iconic-left {
6208 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6209 -moz-image-region: rect(28px, 28px, 42px, 14px);
6212 #context-bookmarkpage > .menu-iconic-left {
6213 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6214 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6215 -moz-image-region: rect(0, 144px, 18px, 126px);
6218 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6219 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6220 -moz-image-region: rect(18px, 144px, 36px, 126px);
6223 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6224 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6225 -moz-image-region: rect(36px, 144px, 54px, 126px);
6228 #context-bookmarkpage[starred=true] {
6229 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6230 -moz-image-region: rect(0px, 162px, 18px, 144px);
6233 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6234 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6235 -moz-image-region: rect(18px, 162px, 36px, 144px);
6238 #context-bookmarkpage[starred=true][disabled=true] {
6239 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6240 -moz-image-region: rect(36px, 162px, 54px, 144px);
6243 #context-back:-moz-locale-dir(rtl),
6244 #context-forward:-moz-locale-dir(rtl),
6245 #context-reload:-moz-locale-dir(rtl) {
6246 transform: scaleX(-1);
6249 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6250 width: 18px; /*16px;*/
6251 height: 18px; /*16px;*/
6255 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6256 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6262 #context-media-eme-learnmore {
6263 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6266 #context-media-eme-learnmore {
6267 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6270 /* === END contextmenu.inc.css === */
6272 #context-navigation {
6275 #context-sep-navigation {
6276 /* margin-top: -4px; */
6279 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6284 /* === BEGIN usercontext.inc.css === */
6286 /* User Context UI browser styles */
6288 #menu_newUserContextTabPersonal {
6289 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6292 #menu_newUserContextTabWork {
6293 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6296 #menu_newUserContextTabBanking {
6297 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6300 #menu_newUserContextTabShopping {
6301 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6304 /* URL Bar Decoration */
6306 #userContext-indicator {
6311 #userContext-label {
6312 margin-inline-end: 3px;
6316 #userContext-icons:not([usercontextid]) {
6320 #userContext-icons {
6321 -moz-box-align: center;
6324 /* Personal User Context */
6325 #userContext-icons[usercontextid="1"] > #userContext-label {
6328 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6329 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6332 /* Work User Context */
6333 #userContext-icons[usercontextid="2"] > #userContext-label {
6336 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6337 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6340 /* Banking User Context */
6341 #userContext-icons[usercontextid="3"] > #userContext-label {
6344 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6345 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6348 /* Shopping User Context */
6349 #userContext-icons[usercontextid="4"] > #userContext-label {
6352 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6353 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6356 /* === END usercontext.inc.css === */