1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 --identity-box-verified-background-color: #000000;
44 --panel-separator-color: #A09090;
46 --urlbar-separator-color: #9C9CFF;
50 -moz-box-orient: vertical; /* for flex hack */
54 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
57 /* ::::: primary toolbar ::::: */
59 .toolbar-primary > .toolbar-box > .toolbar-holder {
60 background-color: #A09090;
63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
65 background-color: #9C9CFF;
68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
69 are not autohiding the menubar. */
70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
84 /* margin-top: var(--space-above-tabbar);*/
87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
89 #toolbar-menubar:not([autohide="true"]) {
90 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110 outline-color: #A09090;
116 #navigator-toolbox::after {
119 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 #navigator-toolbox > toolbar {
126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130 overflow: -moz-hidden-unscrollable;
132 transition: min-height 170ms ease-out, max-height 170ms ease-out;
135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
138 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143 /* Indent also due to non-applicable aero rule in original Windows theme. */
144 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
147 background-color: #6000CF;
151 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153 background-color: #8050B0;
157 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
161 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
165 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
173 #titlebar-buttonbox > .titlebar-button {
179 /* Position the toolbar above the bottom of background tabs */
184 #personal-bookmarks {
185 /* min-height: 24px; */
188 #PersonalToolbar > #home-button {
189 -moz-box-orient: horizontal;
192 #PersonalToolbar > #home-button > .toolbarbutton-text {
196 #print-preview-toolbar:not(:-moz-lwtheme) {
197 /* -moz-appearance: toolbox; */
200 #browser-bottombox:not(:-moz-lwtheme) {
203 /* ::::: titlebar ::::: */
207 background-color: #6000CF;
210 #titlebar:-moz-window-inactive {
211 background-color: #8050B0;
215 #main-window[sizemode="normal"] > #titlebar {
220 #main-window[sizemode="maximized"] > #titlebar {
224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
226 #main-window[sizemode="normal"] > #titlebar,
227 #main-window[sizemode="maximized"] > #titlebar {
229 /* There is a margin-bottom set to -23 by code. */
233 /* The button box must appear on top of the navigator-toolbox in order for
234 * click and hover mouse events to work properly for the button in the restored
235 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236 * can swallow those events. It will also place the buttons above the fog on
237 * themes with Aero Glass.
240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
241 -moz-appearance: none;
244 -moz-margin-end: 3px;
248 .titlebar-placeholder[type="appmenu-button"] {
252 .titlebar-placeholder[type="caption-buttons"] {
256 /* titlebar command buttons */
258 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
261 #titlebar-min:hover {
262 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
266 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
269 #titlebar-max:hover {
270 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
273 #main-window[sizemode="maximized"] #titlebar-max {
274 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
277 #main-window[sizemode="maximized"] #titlebar-max:hover {
278 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
282 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
285 #titlebar-close:hover {
286 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
291 #titlebar-fullscreen-button {
292 -moz-appearance: none;
293 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294 -moz-image-region: rect(0px, 16px, 16px, 0px);
297 #titlebar-fullscreen-button:hover {
298 -moz-image-region: rect(0px, 32px, 16px, 16px);
301 @media (min-resolution: 2dppx) {
302 #titlebar-fullscreen-button {
303 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304 -moz-image-region: rect(0px, 32px, 32px, 0px);
307 #titlebar-fullscreen-button:hover {
308 -moz-image-region: rect(0px, 64px, 32px, 32px);
314 /* ::::: bookmark buttons ::::: */
316 toolbarbutton.bookmark-item:not(.subviewbutton),
317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323 toolbarbutton.bookmark-item[open="true"] {
326 -moz-padding-start: 4px;
327 -moz-padding-end: 2px;*/
330 .bookmark-item > .toolbarbutton-icon,
331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
334 -moz-margin-start: 1px;
335 -moz-margin-end: 2px;
340 /* Force the display of the label for bookmarks */
341 .bookmark-item > .toolbarbutton-text,
342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
343 display: -moz-box !important;
346 .bookmark-item > .toolbarbutton-menu-dropmarker {
350 #bookmarks-toolbar-placeholder {
351 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
352 -moz-box-orient: horizontal;
355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
360 /* ----- BOOKMARK STAR ANIMATION ----- */
362 @keyframes animation-bookmarkAdded {
363 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
366 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
369 @keyframes animation-bookmarkPulse {
370 from { transform: scale(1); }
371 50% { transform: scale(1.3); }
372 to { transform: scale(1); }
375 #bookmarked-notification-container {
384 #bookmarked-notification {
385 background-size: 16px;
386 background-position: center;
387 background-repeat: no-repeat;
393 #bookmarked-notification-dropmarker-anchor {
398 #bookmarked-notification-dropmarker-icon {
404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406 animation: animation-bookmarkAdded 800ms;
407 animation-timing-function: ease, ease, ease;
410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
411 list-style-image: none !important;
414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
416 animation: animation-bookmarkPulse 300ms;
417 animation-delay: 600ms;
418 animation-timing-function: ease-out;
421 /* ::::: bookmark menus ::::: */
424 menuitem.bookmark-item {
429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435 -moz-padding-start: 0px;
438 /* ::::: bookmark items ::::: */
441 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
442 -moz-image-region: auto;
445 .bookmark-item[container] {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
447 -moz-image-region: auto;
450 .bookmark-item[container][open] {
451 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
452 -moz-image-region: auto;
455 .bookmark-item[container][livemark] {
456 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
457 -moz-image-region: auto;
460 .bookmark-item[container][livemark] .bookmark-item {
461 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
462 -moz-image-region: rect(0px, 16px, 16px, 0px);
465 .bookmark-item[container][livemark] .bookmark-item[visited] {
466 -moz-image-region: rect(0px, 32px, 16px, 16px);
469 .bookmark-item[container][query] {
470 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
471 -moz-image-region: auto;
474 .bookmark-item[query][tagContainer] {
475 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476 -moz-image-region: auto;
479 .bookmark-item[query][dayContainer] {
480 list-style-image: url("chrome://communicator/skin/history/calendar.png");
481 -moz-image-region: auto;
484 .bookmark-item[query][hostContainer] {
485 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
486 -moz-image-region: auto;
489 .bookmark-item[query][hostContainer][open] {
490 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
491 -moz-image-region: auto;
494 .bookmark-item[cutting] > .toolbarbutton-icon,
495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
499 .bookmark-item[cutting] > .toolbarbutton-text,
500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
504 /* ::::: primary toolbar buttons ::::: */
506 /* === BEGIN toolbarbuttons.inc.css === */
508 /* Whole section of this included file: */
509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
511 #social-share-button, #open-file-button, #find-button, #developer-button,
512 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
513 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
515 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
518 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
520 toolbar[brighttext] #pocket-button,
522 list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
526 -moz-image-region: rect(0, 36px, 18px, 18px);
529 #back-button:hover:not([disabled="true"]) {
530 -moz-image-region: rect(18px, 36px, 36px, 18px);
533 #back-button[disabled="true"] {
534 -moz-image-region: rect(36px, 36px, 54px, 18px);
538 -moz-image-region: rect(0, 72px, 18px, 54px);
541 #forward-button:hover:not([disabled="true"]) {
542 -moz-image-region: rect(18px, 72px, 36px, 54px);
545 #forward-button[disabled="true"] {
546 -moz-image-region: rect(36px, 72px, 54px, 54px);
549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
550 #forward-button:-moz-locale-dir(rtl) {
551 transform: scaleX(-1);
554 #home-button[cui-areatype="toolbar"] {
555 -moz-image-region: rect(0, 126px, 18px, 108px);
558 #home-button[cui-areatype="toolbar"]:hover {
559 -moz-image-region: rect(18px, 126px, 36px, 108px);
562 #bookmarks-menu-button[cui-areatype="toolbar"] {
563 -moz-image-region: rect(0, 144px, 18px, 126px);
566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
568 -moz-image-region: rect(18px, 144px, 36px, 126px);
571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
573 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
574 background-color: transparent !important;
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
578 -moz-image-region: rect(0, 162px, 18px, 144px);
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
584 /* When starred and clicked (for edit/delete dialog),
585 * then only the menubutton-button itself is open, but not the whole menubutton. */
586 -moz-image-region: rect(18px, 162px, 36px, 144px);
589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
590 -moz-image-region: rect(0, 630px, 18px, 612px);
593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
595 -moz-box-align: center;
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
600 -moz-image-region: rect(18px, 630px, 36px, 612px);
603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
607 -moz-padding-start: 2px;
608 -moz-padding-end: 0px;
611 #history-panelmenu[cui-areatype="toolbar"] {
612 -moz-image-region: rect(0, 180px, 18px, 162px);
615 #history-panelmenu[cui-areatype="toolbar"]:hover,
616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
617 -moz-image-region: rect(18px, 180px, 36px, 162px);
620 #downloads-button[cui-areatype="toolbar"] {
621 -moz-image-region: rect(0, 198px, 18px, 180px);
624 #downloads-button[cui-areatype="toolbar"]:hover,
625 #downloads-button[cui-areatype="toolbar"][open="true"] {
626 -moz-image-region: rect(18px, 198px, 36px, 180px);
629 #add-ons-button[cui-areatype="toolbar"] {
630 -moz-image-region: rect(0, 216px, 18px, 198px);
633 #add-ons-button[cui-areatype="toolbar"]:hover {
634 -moz-image-region: rect(18px, 216px, 36px, 198px);
637 #open-file-button[cui-areatype="toolbar"] {
638 -moz-image-region: rect(0, 234px, 18px, 216px);
641 #open-file-button[cui-areatype="toolbar"]:hover {
642 -moz-image-region: rect(18px, 234px, 36px, 216px);
645 #save-page-button[cui-areatype="toolbar"] {
646 -moz-image-region: rect(0, 252px, 18px, 234px);
649 #save-page-button[cui-areatype="toolbar"]:hover {
650 -moz-image-region: rect(18px, 252px, 36px, 234px);
653 #sync-button[cui-areatype="toolbar"] {
654 -moz-image-region: rect(0, 270px, 18px, 252px);
657 #sync-button[cui-areatype="toolbar"]:hover {
658 -moz-image-region: rect(18px, 270px, 36px, 252px);
661 #sync-button[cui-areatype="toolbar"][status="active"],
662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
663 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
664 -moz-image-region: rect(0, 18px, 18px, 0px);
668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
670 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
674 #feed-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 288px, 18px, 270px);
678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
680 -moz-image-region: rect(18px, 288px, 36px, 270px);
683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
684 -moz-image-region: rect(36px, 288px, 54px, 270px);
687 #social-share-button[cui-areatype="toolbar"] {
688 -moz-image-region: rect(0px, 306px, 18px, 288px);
691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
692 #social-share-button[cui-areatype="toolbar"][open="true"] {
693 -moz-image-region: rect(18px, 306px, 36px, 288px);
696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
697 -moz-image-region: rect(36px, 306px, 54px, 288px);
700 #characterencoding-button[cui-areatype="toolbar"] {
701 -moz-image-region: rect(0, 324px, 18px, 306px);
704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
706 -moz-image-region: rect(18px, 324px, 36px, 306px);
709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
710 -moz-image-region: rect(36px, 324px, 54px, 306px);
713 #new-window-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 342px, 18px, 324px);
717 #new-window-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 342px, 36px, 324px);
721 #e10s-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 342px, 18px, 324px);
725 #e10s-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 342px, 36px, 324px);
729 #e10s-button > .toolbarbutton-icon {
730 transform: scaleY(-1);
733 #new-tab-button[cui-areatype="toolbar"] {
734 -moz-image-region: rect(0, 360px, 18px, 342px);
737 #new-tab-button[cui-areatype="toolbar"]:hover {
738 -moz-image-region: rect(18px, 360px, 36px, 342px);
741 #privatebrowsing-button[cui-areatype="toolbar"] {
742 -moz-image-region: rect(0, 378px, 18px, 360px);
745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
746 -moz-image-region: rect(18px, 378px, 36px, 360px);
749 #find-button[cui-areatype="toolbar"] {
750 -moz-image-region: rect(0, 396px, 18px, 378px);
753 #find-button[cui-areatype="toolbar"]:hover {
754 -moz-image-region: rect(18px, 396px, 36px, 378px);
757 #print-button[cui-areatype="toolbar"] {
758 -moz-image-region: rect(0, 414px, 18px, 396px);
761 #print-button[cui-areatype="toolbar"]:hover {
762 -moz-image-region: rect(18px, 414px, 36px, 396px);
765 #fullscreen-button[cui-areatype="toolbar"] {
766 -moz-image-region: rect(0, 432px, 18px, 414px);
769 #fullscreen-button[cui-areatype="toolbar"]:hover {
770 -moz-image-region: rect(18px, 432px, 36px, 414px);
773 #developer-button[cui-areatype="toolbar"] {
774 -moz-image-region: rect(0, 450px, 18px, 432px);
777 #developer-button[cui-areatype="toolbar"]:hover,
778 #developer-button[cui-areatype="toolbar"][open="true"] {
779 -moz-image-region: rect(18px, 450px, 36px, 432px);
782 #preferences-button[cui-areatype="toolbar"] {
783 -moz-image-region: rect(0, 468px, 18px, 450px);
786 #preferences-button[cui-areatype="toolbar"]:hover {
787 -moz-image-region: rect(18px, 468px, 36px, 450px);
790 #PanelUI-menu-button {
791 -moz-image-region: rect(0, 486px, 18px, 468px);
794 #PanelUI-menu-button:hover,
795 #PanelUI-menu-button[open="true"] {
796 -moz-image-region: rect(18px, 486px, 36px, 468px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
800 -moz-image-region: rect(0, 504px, 18px, 486px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
804 -moz-image-region: rect(18px, 504px, 36px, 486px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
808 -moz-image-region: rect(36px, 504px, 54px, 486px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
812 -moz-image-region: rect(0, 522px, 18px, 504px);
815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
816 -moz-image-region: rect(18px, 522px, 36px, 504px);
819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
820 -moz-image-region: rect(36px, 522px, 54px, 504px);
823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
824 -moz-image-region: rect(0, 540px, 18px, 522px);
827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
828 -moz-image-region: rect(18px, 540px, 36px, 522px);
831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
832 -moz-image-region: rect(36px, 540px, 54px, 522px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
836 -moz-image-region: rect(0, 558px, 18px, 540px);
839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
840 -moz-image-region: rect(18px, 558px, 36px, 540px);
843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
844 -moz-image-region: rect(36px, 558px, 54px, 540px);
847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
848 -moz-image-region: rect(0, 576px, 18px, 558px);
851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
852 -moz-image-region: rect(18px, 576px, 36px, 558px);
855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
856 -moz-image-region: rect(36px, 576px, 54px, 558px);
859 #nav-bar-overflow-button {
860 -moz-image-region: rect(0, 612px, 18px, 594px);
863 #nav-bar-overflow-button:hover,
864 #nav-bar-overflow-button[open="true"] {
865 -moz-image-region: rect(18px, 612px, 36px, 594px);
868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
869 transform: scaleX(-1);
873 -moz-image-region: rect(0, 648px, 18px, 630px);
876 #tabview-button:hover {
877 -moz-image-region: rect(18px, 648px, 36px, 630px);
880 #email-link-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 666px, 18px, 648px);
884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
885 -moz-image-region: rect(18px, 666px, 36px, 648px);
888 #email-button[cui-areatype="toolbar"][disabled="true"] {
889 -moz-image-region: rect(36px, 666px, 54px, 648px);
892 #sidebar-button[cui-areatype="toolbar"] {
893 -moz-image-region: rect(0, 684px, 18px, 666px);
896 #sidebar-button[cui-areatype="toolbar"]:hover {
897 -moz-image-region: rect(18px, 684px, 36px, 666px);
900 #panic-button[cui-areatype="toolbar"] {
901 -moz-image-region: rect(0, 702px, 18px, 684px);
904 #panic-button[cui-areatype="toolbar"]:hover,
905 #panic-button[cui-areatype="toolbar"][open] {
906 -moz-image-region: rect(18px, 702px, 36px, 684px);
909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
910 transform: scaleX(-1);
913 #web-apps-button[cui-areatype="toolbar"] {
914 -moz-image-region: rect(0, 720px, 18px, 702px);
917 #web-apps-button[cui-areatype="toolbar"]:hover {
918 -moz-image-region: rect(18px, 720px, 36px, 702px);
922 #loop-button > .toolbarbutton-badge-stack {
923 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
924 -moz-image-region: rect(0, 18px, 18px, 0);
927 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
928 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
929 -moz-image-region: rect(0, 90px, 18px, 72px);
932 #loop-button[state="disabled"],
933 #loop-button[disabled="true"],
934 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
935 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
936 -moz-image-region: rect(0, 36px, 18px, 18px);
939 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
940 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
941 -moz-image-region: rect(0, 126px, 18px, 108px);
944 #loop-button:not([disabled="true"])[state="error"],
945 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
946 -moz-image-region: rect(0, 54px, 18px, 36px);
949 #loop-button:not([disabled="true"])[state="action"],
950 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
951 -moz-image-region: rect(0, 72px, 18px, 54px);
954 #loop-button:not([disabled="true"])[state="active"],
955 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
956 -moz-image-region: rect(0, 108px, 18px, 90px);
959 #webide-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 738px, 18px, 720px);
963 #webide-button[cui-areatype="toolbar"]:hover {
964 -moz-image-region: rect(18px, 738px, 36px, 720px);
967 #pocket-button[cui-areatype="toolbar"] {
968 -moz-image-region: rect(0, 774px, 18px, 756px);
971 #pocket-button[cui-areatype="toolbar"]:hover,
972 #pocket-button[cui-areatype="toolbar"][open] {
973 -moz-image-region: rect(18px, 774px, 36px, 756px);
976 /* === END toolbarbuttons.inc.css === */
978 /* === BEGIN menupanel.inc.css === */
980 /* Menu panel and palette styles */
983 /* avoid aero overrides with changed filenames */
984 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
985 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
988 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
989 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
990 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
991 #social-share-button, #open-file-button, #find-button, #developer-button,
992 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
993 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
994 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
995 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
996 #pocket-button)[cui-areatype="menu-panel"],
997 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
998 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
999 #social-share-button, #open-file-button, #find-button, #developer-button,
1000 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1001 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1002 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1003 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
1005 list-style-image: var(--menupanel-list-style-image);
1008 #home-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #home-button {
1010 -moz-image-region: rect(0px, 128px, 32px, 96px);
1013 #home-button[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #home-button:hover {
1015 -moz-image-region: rect(32px, 128px, 64px, 96px);
1018 #bookmarks-menu-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1020 -moz-image-region: rect(0px, 192px, 32px, 160px);
1023 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1024 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1025 -moz-image-region: rect(32px, 192px, 64px, 160px);
1028 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1029 -moz-image-region: rect(32px, 192px, 64px, 160px);
1032 #history-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1034 -moz-image-region: rect(0px, 224px, 32px, 192px);
1037 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1039 -moz-image-region: rect(32px, 224px, 64px, 192px);
1042 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1043 -moz-image-region: rect(32px, 224px, 64px, 192px);
1046 #downloads-button[cui-areatype="menu-panel"],
1047 toolbarpaletteitem[place="palette"] > #downloads-button {
1048 -moz-image-region: rect(0px, 256px, 32px, 224px);
1051 #downloads-button[cui-areatype="menu-panel"]:hover,
1052 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1053 -moz-image-region: rect(32px, 256px, 64px, 224px);
1056 #add-ons-button[cui-areatype="menu-panel"],
1057 toolbarpaletteitem[place="palette"] > #add-ons-button {
1058 -moz-image-region: rect(0px, 288px, 32px, 256px);
1061 #add-ons-button[cui-areatype="menu-panel"]:hover,
1062 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1063 -moz-image-region: rect(32px, 288px, 64px, 256px);
1066 #open-file-button[cui-areatype="menu-panel"],
1067 toolbarpaletteitem[place="palette"] > #open-file-button {
1068 -moz-image-region: rect(0px, 320px, 32px, 288px);
1071 #open-file-button[cui-areatype="menu-panel"]:hover,
1072 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1073 -moz-image-region: rect(32px, 320px, 64px, 288px);
1076 #save-page-button[cui-areatype="menu-panel"],
1077 toolbarpaletteitem[place="palette"] > #save-page-button {
1078 -moz-image-region: rect(0px, 352px, 32px, 320px);
1081 #save-page-button[cui-areatype="menu-panel"]:hover,
1082 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1083 -moz-image-region: rect(32px, 352px, 64px, 320px);
1086 #sync-button[cui-areatype="menu-panel"],
1087 toolbarpaletteitem[place="palette"] > #sync-button {
1088 -moz-image-region: rect(0px, 384px, 32px, 352px);
1091 #sync-button[cui-areatype="menu-panel"]:hover,
1092 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1093 -moz-image-region: rect(32px, 384px, 64px, 352px);
1096 #sync-button[cui-areatype="menu-panel"][status="active"] {
1097 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1098 -moz-image-region: rect(0px, 32px, 32px, 0px);
1101 #feed-button[cui-areatype="menu-panel"],
1102 toolbarpaletteitem[place="palette"] > #feed-button {
1103 -moz-image-region: rect(0px, 416px, 32px, 384px);
1106 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1107 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1108 -moz-image-region: rect(32px, 416px, 64px, 384px);
1111 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1112 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1113 -moz-image-region: rect(64px, 416px, 96px, 384px);
1116 #social-share-button[cui-areatype="menu-panel"],
1117 toolbarpaletteitem[place="palette"] > #social-share-button {
1118 -moz-image-region: rect(0px, 448px, 32px, 416px);
1121 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1122 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1123 -moz-image-region: rect(32px, 448px, 64px, 416px);
1126 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1127 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1128 -moz-image-region: rect(64px, 448px, 96px, 416px);
1131 #characterencoding-button[cui-areatype="menu-panel"],
1132 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1133 -moz-image-region: rect(0px, 480px, 32px, 448px);
1136 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1137 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1138 -moz-image-region: rect(32px, 480px, 64px, 448px);
1141 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1142 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1143 -moz-image-region: rect(64px, 480px, 96px, 448px);
1146 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1147 -moz-image-region: rect(32px, 480px, 64px, 448px);
1150 #new-window-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #new-window-button {
1152 -moz-image-region: rect(0px, 512px, 32px, 480px);
1155 #new-window-button[cui-areatype="menu-panel"]:hover,
1156 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1157 -moz-image-region: rect(32px, 512px, 64px, 480px);
1160 #e10s-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #e10s-button {
1162 -moz-image-region: rect(0px, 512px, 32px, 480px);
1165 #e10s-button[cui-areatype="menu-panel"]:hover,
1166 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1167 -moz-image-region: rect(32px, 512px, 64px, 480px);
1170 #new-tab-button[cui-areatype="menu-panel"],
1171 toolbarpaletteitem[place="palette"] > #new-tab-button {
1172 -moz-image-region: rect(0px, 544px, 32px, 512px);
1175 #new-tab-button[cui-areatype="menu-panel"]:hover,
1176 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1177 -moz-image-region: rect(32px, 544px, 64px, 512px);
1180 #privatebrowsing-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1182 -moz-image-region: rect(0px, 576px, 32px, 544px);
1185 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1186 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1187 -moz-image-region: rect(32px, 576px, 64px, 544px);
1190 #tabview-button[cui-areatype="menu-panel"],
1191 toolbarpaletteitem[place="palette"] > #tabview-button {
1192 -moz-image-region: rect(0px, 608px, 32px, 576px);
1195 #tabview-button[cui-areatype="menu-panel"]:hover,
1196 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1197 -moz-image-region: rect(32px, 608px, 64px, 576px);
1200 #find-button[cui-areatype="menu-panel"],
1201 toolbarpaletteitem[place="palette"] > #find-button {
1202 -moz-image-region: rect(0px, 640px, 32px, 608px);
1205 #find-button[cui-areatype="menu-panel"]:hover,
1206 toolbarpaletteitem[place="palette"] > #find-button:hover {
1207 -moz-image-region: rect(32px, 640px, 64px, 608px);
1210 #print-button[cui-areatype="menu-panel"],
1211 toolbarpaletteitem[place="palette"] > #print-button {
1212 -moz-image-region: rect(0px, 672px, 32px, 640px);
1215 #print-button[cui-areatype="menu-panel"]:hover,
1216 toolbarpaletteitem[place="palette"] > #print-button:hover {
1217 -moz-image-region: rect(32px, 672px, 64px, 640px);
1220 #fullscreen-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1222 -moz-image-region: rect(0px, 704px, 32px, 672px);
1225 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1227 -moz-image-region: rect(32px, 704px, 64px, 672px);
1230 #developer-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #developer-button {
1232 -moz-image-region: rect(0px, 736px, 32px, 704px);
1235 #developer-button[cui-areatype="menu-panel"]:hover,
1236 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1237 -moz-image-region: rect(32px, 736px, 64px, 704px);
1240 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1241 -moz-image-region: rect(32px, 736px, 64px, 704px);
1244 #preferences-button[cui-areatype="menu-panel"],
1245 toolbarpaletteitem[place="palette"] > #preferences-button {
1246 -moz-image-region: rect(0px, 768px, 32px, 736px);
1249 #preferences-button[cui-areatype="menu-panel"]:hover,
1250 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1251 -moz-image-region: rect(32px, 768px, 64px, 736px);
1254 #email-link-button[cui-areatype="menu-panel"],
1255 toolbarpaletteitem[place="palette"] > #email-link-button {
1256 -moz-image-region: rect(0, 800px, 32px, 768px);
1259 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1260 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1261 -moz-image-region: rect(32px, 800px, 64px, 768px);
1264 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1265 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1266 -moz-image-region: rect(64px, 800px, 96px, 768px);
1269 #sidebar-button[cui-areatype="menu-panel"],
1270 toolbarpaletteitem[place="palette"] > #sidebar-button {
1271 -moz-image-region: rect(0, 864px, 32px, 832px);
1274 #sidebar-button[cui-areatype="menu-panel"]:hover,
1275 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1276 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1277 -moz-image-region: rect(32px, 864px, 64px, 832px);
1280 #panic-button[cui-areatype="menu-panel"],
1281 toolbarpaletteitem[place="palette"] > #panic-button {
1282 -moz-image-region: rect(0, 896px, 32px, 864px);
1285 #panic-button[cui-areatype="menu-panel"]:hover,
1286 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1287 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1288 -moz-image-region: rect(32px, 896px, 64px, 864px);
1291 #web-apps-button[cui-areatype="menu-panel"],
1292 toolbarpaletteitem[place="palette"] > #web-apps-button {
1293 -moz-image-region: rect(0, 928px, 32px, 896px);
1296 #web-apps-button[cui-areatype="menu-panel"]:hover,
1297 toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
1298 -moz-image-region: rect(32px, 928px, 64px, 896px);
1301 #webide-button[cui-areatype="menu-panel"],
1302 toolbarpaletteitem[place="palette"] > #webide-button {
1303 -moz-image-region: rect(0px, 960px, 32px, 928px);
1306 #webide-button[cui-areatype="menu-panel"]:hover,
1307 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1308 -moz-image-region: rect(32px, 960px, 64px, 928px);
1311 #pocket-button[cui-areatype="menu-panel"],
1312 toolbarpaletteitem[place="palette"] > #pocket-button {
1313 -moz-image-region: rect(0px, 992px, 32px, 960px);
1316 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1317 -moz-image-region: rect(32px, 992px, 64px, 960px);
1320 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1321 -moz-image-region: rect(0, 832px, 32px, 800px);
1324 #loop-button[cui-areatype="menu-panel"],
1325 toolbarpaletteitem[place="palette"] > #loop-button {
1326 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1327 -moz-image-region: rect(0, 32px, 32px, 0);
1330 /* Make sure that the state icons are not shown in the customization palette. */
1331 toolbarpaletteitem[place="palette"] > #loop-button {
1332 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1335 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1336 -moz-image-region: rect(0, 160px, 32px, 128px);
1339 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1340 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1341 -moz-image-region: rect(0, 64px, 32px, 32px);
1344 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1345 -moz-image-region: rect(0, 224px, 32px, 192px);
1348 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1349 -moz-image-region: rect(0, 96px, 32px, 64px);
1352 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1353 -moz-image-region: rect(0, 128px, 32px, 96px);
1356 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1357 -moz-image-region: rect(0, 192px, 32px, 160px);
1360 /* Wide panel control icons */
1362 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1363 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1364 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1365 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1366 list-style-image: var(--menupanel-small-list-style-image);
1369 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1370 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1371 -moz-image-region: rect(0px, 32px, 16px, 16px);
1374 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1375 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1376 -moz-image-region: rect(16px, 32px, 32px, 16px);
1379 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1380 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1381 -moz-image-region: rect(32px, 32px, 48px, 16px);
1384 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1385 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1386 -moz-image-region: rect(0px, 48px, 16px, 32px);
1389 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1390 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1391 -moz-image-region: rect(16px, 48px, 32px, 32px);
1394 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1395 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1396 -moz-image-region: rect(32px, 48px, 48px, 32px);
1399 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1400 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1401 -moz-image-region: rect(0px, 64px, 16px, 48px);
1404 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1405 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1406 -moz-image-region: rect(16px, 64px, 32px, 48px);
1409 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1410 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1411 -moz-image-region: rect(32px, 64px, 48px, 48px);
1414 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1415 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1416 -moz-image-region: rect(0px, 80px, 16px, 64px);
1419 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1420 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1421 -moz-image-region: rect(16px, 80px, 32px, 64px);
1424 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1425 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1426 -moz-image-region: rect(32px, 80px, 48px, 64px);
1429 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1430 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1431 -moz-image-region: rect(0px, 96px, 16px, 80px);
1434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1435 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1436 -moz-image-region: rect(16px, 96px, 32px, 80px);
1439 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1440 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1441 -moz-image-region: rect(32px, 96px, 48px, 80px);
1444 #add-share-provider {
1445 list-style-image: var(--menupanel-small-list-style-image);
1446 -moz-image-region: rect(0px, 96px, 16px, 80px);
1449 /* === END menupanel.inc.css === */
1451 .toolbarbutton-1:not([type="menu-button"]) {
1452 -moz-box-orient: vertical;
1456 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1462 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463 .toolbarbutton-1[disabled="true"]:hover:active,
1464 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1468 .toolbarbutton-1:hover:active,
1469 .toolbarbutton-1[open="true"],
1470 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1472 padding-bottom: 0px;
1473 -moz-padding-start: 3px;
1474 -moz-padding-end: 1px;
1477 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1478 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1479 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1480 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1481 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1484 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1485 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1488 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1489 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1492 .toolbarbutton-1 > .toolbarbutton-icon,
1493 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1497 #nav-bar .toolbarbutton-1,
1498 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1501 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1502 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1503 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1506 #nav-bar #PanelUI-menu-button {
1507 /* -moz-padding-start: 7px;
1508 -moz-padding-end: 5px;*/
1511 #nav-bar .toolbarbutton-1[type=panel],
1512 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1513 /* padding-left: 5px;
1514 padding-right: 5px;*/
1517 #nav-bar .toolbarbutton-1 > menupopup {
1518 /* margin-top: -3px;*/
1521 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1525 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1526 /* -moz-padding-end: 0;*/
1529 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1530 /* -moz-padding-start: 0;
1531 -moz-box-align: center;*/
1534 .findbar-button > .toolbarbutton-text,
1535 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1536 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1538 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1539 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1540 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1541 /* padding: 2px 6px;
1543 border-color: transparent;
1544 transition-property: background-color, border-color;
1545 transition-duration: 150ms;*/
1548 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1555 /* Help SDK icons fit: */
1556 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1557 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1561 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1562 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1566 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1567 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1568 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1569 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1570 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1571 /* -moz-padding-end: 17px;*/
1574 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1577 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1580 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1583 #nav-bar .toolbaritem-combined-buttons {
1584 /* margin-left: 2px;
1585 margin-right: 2px;*/
1588 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1593 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1594 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1600 -moz-margin-end: -1px;
1604 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1607 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1608 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1612 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1613 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1614 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1615 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1618 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1619 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1620 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1621 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1622 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1623 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1626 #TabsToolbar .toolbarbutton-1,
1627 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1628 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1629 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1632 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1633 #TabsToolbar .toolbarbutton-1[open],
1634 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1635 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1636 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1639 /* unified back/forward button */
1642 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1645 #forward-button > menupopup {
1646 margin-top: 1px !important;
1649 #forward-button > .toolbarbutton-icon {
1650 background-clip: padding-box !important;
1651 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1652 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1656 -moz-margin-start: -4px !important;
1661 border-radius: 0 10000px 10000px 0;
1664 #forward-button:-moz-locale-dir(rtl) {
1665 border-radius: 10000px 0 0 10000px;
1668 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1669 transition: margin-left 150ms ease-out;
1672 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1673 margin-left: -27px !important;
1676 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1677 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1678 transition-delay: 100s;
1681 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1682 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1683 margin-left: -27.01px !important;
1687 /* padding-top: 3px !important;
1688 padding-bottom: 3px !important;
1689 -moz-padding-start: 5px !important;
1690 -moz-padding-end: 0 !important;*/
1693 border-radius: 10000px;
1697 margin-bottom: -2px;
1700 #back-button:-moz-locale-dir(rtl) {
1703 #back-button > menupopup {
1704 margin-top: -1px !important;
1707 #back-button > .toolbarbutton-icon {
1708 border-radius: 10000px !important;
1709 background-clip: padding-box !important;
1710 /* background-color: hsla(210,25%,98%,.08) !important;
1711 padding: 6px !important;
1712 border-style: none !important;
1713 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1714 0 0 0 1px hsla(210,4%,10%,.25);*/
1715 transition-property: background-color, box-shadow !important;
1716 transition-duration: 250ms !important;
1719 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1720 /* background-color: hsla(210,4%,10%,.08) !important;*/
1723 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1724 #back-button[open="true"] > .toolbarbutton-icon {
1725 /* background-color: hsla(210,4%,10%,.12) !important;
1726 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1727 0 0 0 1px hsla(210,4%,10%,.25),
1728 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1731 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1732 transform: scaleX(-1);
1735 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1736 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1737 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1740 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1741 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1742 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1745 #home-button.bookmark-item {
1746 list-style-image: url("chrome://browser/skin/Toolbar.png");
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1751 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1752 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1753 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1754 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1755 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1758 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1761 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1762 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1763 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1767 #downloads-button > .toolbarbutton-icon {
1771 /* tabview menu item */
1774 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1775 -moz-image-region: rect(1px, 89px, 17px, 73px);
1778 #menu_tabview[groups="0"] {
1779 -moz-image-region: rect(1px, 17px, 17px, 1px);
1782 #menu_tabview[groups="1"] {
1783 -moz-image-region: rect(1px, 35px, 17px, 19px);
1786 #menu_tabview[groups="2"] {
1787 -moz-image-region: rect(1px, 53px, 17px, 37px);
1790 #menu_tabview[groups="3"] {
1791 -moz-image-region: rect(1px, 71px, 17px, 55px);
1794 /* undo close tab menu item */
1795 #alltabs_undoCloseTab {
1796 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1799 @media (min-resolution: 1.1dppx) {
1800 #alltabs_undoCloseTab {
1801 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1803 #alltabs_undoCloseTab > .toolbarbutton-icon {
1808 /* zoom control text (reset) button special case: */
1810 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1811 /* To make this line up with the icons, it needs the same height (18px) +
1812 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1813 * increase in text sizes would break things...
1818 /* ::::: fullscreen window controls ::::: */
1821 -moz-margin-start: 4px;
1827 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1832 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1835 #minimize-button:hover {
1836 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1840 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1843 #restore-button:hover {
1844 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1848 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1851 #close-button:hover {
1852 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1855 /* ::::: Location Bar ::::: */
1858 .searchbar-textbox {
1861 -moz-margin-start: 3px;
1865 /* make color as light as possible to deal with dark non-domain parts */
1869 /* overlap the urlbar's border */
1870 #PopupAutoCompleteRichResult {
1874 #urlbar:-moz-lwtheme,
1875 .searchbar-textbox:-moz-lwtheme {
1876 /* background-color: rgba(255,255,255,.8);
1877 @navbarTextboxCustomBorder@
1881 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1882 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1883 /* background-color: rgba(255,255,255,.9);*/
1886 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1887 .searchbar-textbox:-moz-lwtheme[focused] {
1888 /* background-color: white;*/
1891 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1892 /* -moz-border-start: none;
1896 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1897 /* border-top-left-radius: 0;
1898 border-bottom-left-radius: 0; */
1901 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1902 /* border-top-right-radius: 0;
1903 border-bottom-right-radius: 0; */
1906 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1907 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1908 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1911 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1912 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1913 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1914 transform: scaleX(-1);
1917 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1918 -moz-box-direction: reverse;
1921 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1922 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1927 -moz-box-orient: horizontal;
1928 -moz-box-align: stretch;
1931 .urlbar-textbox-container {
1932 -moz-box-align: stretch;
1936 -moz-margin-start: 0;
1940 -moz-box-align: center;
1947 .search-go-container {
1951 .search-go-container > .search-go-button {
1955 #urlbar-search-footer {
1956 border-top: 1px solid #A09090;
1959 #urlbar-search-settings {
1962 #urlbar-search-settings:hover {
1965 #urlbar-search-settings:hover:active {
1968 #urlbar-search-splitter {
1970 -moz-margin-start: -3px;
1972 background: transparent;
1975 #urlbar-search-splitter + #urlbar-container > #urlbar,
1976 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1977 -moz-margin-start: 0;
1980 #urlbar-display-box {
1984 -moz-border-end: 1px solid #9C9CFF;
1985 -moz-margin-end: 3px;
1988 -moz-margin-start: 0;
1992 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1994 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1995 border-bottom: 1px solid #A09090;
1996 background-color: #000000;
1998 -moz-padding-start: 44px;
1999 -moz-padding-end: 6px;
2000 background-image: url("chrome://browser/skin/info.svg");
2001 background-clip: padding-box;
2002 background-position: 20px center;
2003 background-repeat: no-repeat;
2004 background-size: 16px 16px;
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2008 background-position: right 20px center;
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2016 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2017 -moz-margin-start: 0;
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2021 -moz-appearance: none;
2026 -moz-margin-start: 10px;
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2032 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2035 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2038 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2041 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2044 min-width: calc(54px + 11ch);
2049 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2050 var(--identity-box-verified-background-color);
2053 #identity-box:-moz-focusring {
2054 outline: 1px dotted #008484;
2055 outline-offset: -1px;
2058 #identity-box.verifiedDomain:-moz-focusring,
2059 #identity-box.verifiedIdentity:-moz-focusring {
2060 outline-color: #000000;
2063 /* Location bar dropmarker */
2065 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2066 background-color: transparent;
2069 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2070 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2071 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2074 transition: opacity 0.15s ease;
2077 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2081 .urlbar-history-dropmarker:hover {
2084 .urlbar-history-dropmarker:hover:active,
2085 .urlbar-history-dropmarker[open="true"] {
2088 /* page proxy icon */
2090 /* === BEGIN identity-block.inc.css === */
2093 --identity-box-verified-color: #008484;
2094 /* Default theme does different color per channel, we can't as they do it build-time. */
2095 --identity-box-chrome-color: #9C9CFF;
2097 border-inline-end: 1px solid --urlbar-separator-color);
2101 margin-inline-end: 4px;
2103 /* The latter two properties have a transition to handle the delayed hiding of
2104 the forward button when hovered. */
2105 transition: background-color 150ms ease, padding-left, padding-right;
2108 #identity-box:-moz-locale-dir(ltr) {
2109 border-top-right-radius: 0;
2110 border-bottom-right-radius: 0;
2113 #identity-box:-moz-locale-dir(rtl) {
2114 border-top-left-radius: 0;
2115 border-bottom-left-radius: 0;
2118 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2119 color: var(--identity-box-chrome-color);
2120 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2123 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2124 color: var(--identity-box-verified-color);
2125 -moz-border-end: 1px solid var(--identity-box-verified-color);
2128 #notification-popup-box:not([hidden]) + #identity-box {
2129 padding-inline-start: 10px !important;
2133 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2134 /* border-radius: 0; */
2135 -moz-padding-start: 2px;
2136 -moz-padding-end: 2px;
2137 -moz-margin-end: 1px;
2140 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2141 #notification-popup-box[hidden] + #identity-box {
2142 padding-inline-start: 2px;
2145 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2146 #notification-popup-box[hidden] + #identity-box {
2147 /* Forward button hiding is delayed when hovered, so we should use the same
2148 delay for the identity box. We handle both horizontal paddings (for LTR and
2149 RTL), the latter two delays here are for padding-left and padding-right. */
2150 transition-delay: 0s, 100s, 100s;
2153 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2154 #notification-popup-box[hidden] + #identity-box {
2155 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2156 padding-inline-start: 2.01px;
2159 /* TRACKING PROTECTION ICON */
2161 #tracking-protection-icon {
2164 margin-inline-start: 0;
2165 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2169 #tracking-protection-icon[state="loaded-tracking-content"] {
2170 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2173 #tracking-protection-icon[animate] {
2174 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2177 #tracking-protection-icon:not([state]) {
2178 margin-inline-start: -18px;
2179 pointer-events: none;
2181 /* Only animate the shield in, when it disappears hide it immediately. */
2185 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2186 visibility: collapse;
2189 /* MAIN IDENTITY ICON */
2191 #page-proxy-favicon {
2194 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2198 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2199 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2202 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2203 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2204 list-style-image: url("chrome://browser/skin/identity-secure.svg");
2207 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2208 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2211 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2212 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2213 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2214 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2217 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2218 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2221 #page-proxy-favicon[pageproxystate="invalid"] {
2225 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2226 list-style-image: url("chrome://branding/content/icon64.png");
2229 #identity-popup-brandName {
2233 margin-bottom: .5em;
2236 #identity-popup-content-box {
2240 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2241 -moz-image-region: inherit;
2242 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2248 /* MAIN IDENTITY ICON */
2253 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2256 #identity-box:hover > #identity-icon,
2257 #identity-box[open=true] > #identity-icon {
2258 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2261 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2262 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2265 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2269 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2270 -moz-image-region: inherit;
2271 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2277 /* TRACKING PROTECTION ICON */
2279 #tracking-protection-icon {
2282 margin-inline-start: 2px;
2283 margin-inline-end: 0;
2284 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2288 #tracking-protection-icon[state="loaded-tracking-content"] {
2289 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2292 #tracking-protection-icon[animate] {
2293 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2296 #tracking-protection-icon:not([state]) {
2297 margin-inline-end: -18px;
2298 pointer-events: none;
2300 /* Only animate the shield in, when it disappears hide it immediately. */
2304 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2305 visibility: collapse;
2308 /* CONNECTION ICON */
2313 margin-inline-start: 2px;
2314 visibility: collapse;
2317 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2318 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2319 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2320 visibility: visible;
2323 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2324 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2325 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2326 visibility: visible;
2329 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2330 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2331 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2332 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2333 visibility: visible;
2336 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2337 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2338 visibility: visible;
2341 /* === END identity-block.inc.css === */
2343 #page-proxy-favicon {
2344 -moz-image-region: rect(0, 16px, 16px, 0);
2347 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2348 /* -moz-margin-end: 1px;*/
2351 #identity-box:hover > #page-proxy-favicon {
2352 -moz-image-region: rect(0, 32px, 16px, 16px);
2355 #identity-box:hover:active > #page-proxy-favicon,
2356 #identity-box[open=true] > #page-proxy-favicon {
2357 -moz-image-region: rect(0, 48px, 16px, 32px);
2360 #identity-box:hover {
2361 background-color: #FFCF00;
2365 #identity-box:hover:active,
2366 #identity-box[open=true] {
2367 background-color: #FF9F00;
2371 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2372 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2373 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2374 background-color: #9C9CFF;
2378 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2379 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2380 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2381 background-color: #008484;
2387 #treecolAutoCompleteImage {
2391 .ac-result-type-bookmark,
2392 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2393 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2394 -moz-image-region: rect(0px 16px 16px 0px);
2399 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2400 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2401 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2404 .ac-result-type-keyword,
2405 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2406 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2407 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2412 .ac-result-type-keyword[selected="true"],
2413 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2414 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2415 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2418 .ac-result-type-tag,
2419 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2420 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2426 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2427 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2431 .ac-extra > .ac-comment,
2442 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2443 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2444 -moz-image-region: rect(0, 16px, 16px, 0);
2450 @media (min-resolution: 1.1dppx) {
2451 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2452 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2453 -moz-image-region: rect(0, 32px, 32px, 0);
2457 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2458 -moz-image-region: rect(16px, 16px, 32px, 0);
2461 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2465 .ac-comment[selected="true"],
2466 .ac-url-text[selected="true"],
2467 .ac-action-text[selected="true"] {
2468 color: inherit !important;
2471 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2472 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2478 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2479 border-top: 1px solid #9C9CFF;
2482 /* combined go/reload/stop button in location bar */
2485 #urlbar-reload-button,
2486 #urlbar-stop-button {
2488 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2489 /* padding: 0 9px;*/
2490 margin-inline-start: 0px;
2491 border-inline-start: 1px solid var(--urlbar-separator-color);
2492 border-image: linear-gradient(transparent 15%,
2493 var(--urlbar-separator-color) 15%,
2494 var(--urlbar-separator-color) 85%,
2496 border-image-slice: 1;
2499 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2500 border-top-left-radius: 0px;
2501 border-bottom-left-radius: 0px;
2504 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2505 border-top-right-radius: 0px;
2506 border-bottom-right-radius: 0px;
2509 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2510 #urlbar-reload-button:not(:hover) {
2511 -moz-border-start-style: none;
2512 -moz-padding-start: 3px;
2515 #urlbar-reload-button {
2516 -moz-image-region: rect(0px, 14px, 14px, 0px);
2519 #urlbar-reload-button[disabled=true] {
2520 -moz-image-region: rect(28px, 14px, 42px, 0px);
2523 #urlbar-reload-button:not([disabled=true]):hover {
2524 -moz-image-region: rect(14px, 14px, 28px, 0px);
2527 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2528 transform: scaleX(-1);
2532 -moz-image-region: rect(0, 42px, 14px, 28px);
2535 #urlbar-go-button:hover {
2536 -moz-image-region: rect(14px, 42px, 28px, 28px);
2539 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2540 transform: scaleX(-1);
2543 #urlbar-stop-button {
2544 -moz-image-region: rect(0px, 28px, 14px, 14px);
2547 #urlbar-stop-button:hover {
2548 -moz-image-region: rect(14px, 28px, 28px, 14px);
2551 @media (min-resolution: 1.1dppx) {
2553 #urlbar-reload-button,
2554 #urlbar-stop-button {
2555 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2558 #urlbar-go-button > .toolbarbutton-icon,
2559 #urlbar-reload-button > .toolbarbutton-icon,
2560 #urlbar-stop-button > .toolbarbutton-icon {
2565 -moz-image-region: rect(0, 84px, 28px, 56px);
2568 #urlbar-go-button:hover {
2569 -moz-image-region: rect(28px, 84px, 56px, 56px);
2572 #urlbar-go-button:hover:active {
2573 -moz-image-region: rect(56px, 84px, 84px, 56px);
2576 #urlbar-reload-button {
2577 -moz-image-region: rect(0, 28px, 28px, 0);
2580 #urlbar-reload-button:not([disabled]):hover {
2581 -moz-image-region: rect(28px, 28px, 56px, 0);
2584 #urlbar-reload-button:not([disabled]):hover:active {
2585 -moz-image-region: rect(56px, 28px, 84px, 0);
2588 #urlbar-stop-button {
2589 -moz-image-region: rect(0, 56px, 28px, 28px);
2592 #urlbar-stop-button:not([disabled]):hover {
2593 -moz-image-region: rect(28px, 56px, 56px, 28px);
2596 #urlbar-stop-button:hover:active {
2597 -moz-image-region: rect(56px, 56px, 84px, 28px);
2601 /* popup blocker button */
2603 #page-report-button {
2604 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2605 -moz-image-region: rect(0, 16px, 16px, 0);
2608 #page-report-button:hover ,
2609 #page-report-button:hover:active,
2610 #page-report-button[open="true"] {
2611 -moz-image-region: rect(0, 32px, 16px, 16px);
2614 /* Reader mode button */
2616 #reader-mode-button {
2617 list-style-image: url("chrome://browser/skin/readerMode.svg");
2618 -moz-image-region: rect(0, 16px, 16px, 0);
2621 #reader-mode-button:hover,
2622 #reader-mode-button[readeractive]:hover {
2623 -moz-image-region: rect(0, 32px, 16px, 16px);
2626 #reader-mode-button:hover:active,
2627 #reader-mode-button[readeractive] {
2628 -moz-image-region: rect(0, 48px, 16px, 32px);
2631 /* social share panel */
2633 .social-share-frame {
2640 background-color: white;
2641 background-repeat: no-repeat;
2642 background-position: center center;
2644 #share-container[loading] {
2645 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2647 #share-container > browser {
2648 transition: opacity 150ms ease-in-out;
2651 #share-container[loading] > browser {
2655 .social-share-toolbar {
2656 border-bottom: 1px solid #9C9CFF;
2660 #social-share-provider-buttons {
2665 .share-provider-button {
2670 .share-provider-button > .toolbarbutton-text {
2673 .share-provider-button > .toolbarbutton-icon {
2679 /* fixup corners for share panel */
2680 .social-panel > .social-panel-frame {
2681 border-radius: inherit;
2684 #social-share-panel {
2690 .social-share-frame {
2691 border-top-left-radius: 0;
2692 border-bottom-left-radius: inherit;
2693 border-top-right-radius: 0;
2694 border-bottom-right-radius: inherit;
2697 #social-share-panel > .social-share-toolbar {
2698 border-top-left-radius: inherit;
2699 border-top-right-radius: inherit;
2702 #social-share-provider-buttons {
2703 border-top-left-radius: inherit;
2704 border-top-right-radius: inherit;
2707 /* social recommending panel */
2709 #social-mark-button {
2710 -moz-image-region: rect(0, 16px, 16px, 0);
2713 /* bookmarks menu-button */
2715 #bookmarks-menu-button.bookmark-item {
2716 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2717 -moz-image-region: rect(0px 16px 16px 0px);
2720 #bookmarks-menu-button.bookmark-item[starred] {
2721 -moz-image-region: rect(0px 32px 16px 16px);
2724 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2726 padding-bottom: 2px;
2729 #BMB_bookmarksPopup[side="top"],
2730 #BMB_bookmarksPopup[side="bottom"] {
2732 margin-right: -20px;
2735 #BMB_bookmarksPopup[side="left"],
2736 #BMB_bookmarksPopup[side="right"] {
2738 margin-bottom: -20px;
2741 /* bookmarking panel */
2743 #editBookmarkPanelStarIcon {
2744 list-style-image: url("chrome://browser/skin/places/starred48.png");
2749 #editBookmarkPanelStarIcon[unstarred] {
2750 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2753 #editBookmarkPanelTitle {
2757 #editBookmarkPanelHeader,
2758 #editBookmarkPanelContent {
2759 margin-bottom: .5em;
2762 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2763 #editBMPanel_folderTree {
2770 border-top: 1px solid #9C9CFF;
2771 border-bottom-left-radius: 5px;
2772 border-bottom-right-radius: 5px;
2776 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2777 -moz-margin-end: 10px;
2778 vertical-align: middle;
2781 .panel-promo-closebutton {
2782 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2783 -moz-margin-end: -3px;
2787 .panel-promo-closebutton:hover {
2788 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2791 .panel-promo-closebutton:hover:active {
2792 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2795 .panel-promo-closebutton > .toolbarbutton-text {
2799 /* ::::: content area ::::: */
2802 background-color: #9C9CFF;
2807 background-color: #000000;
2811 -moz-margin-start: 0;
2820 -moz-padding-start: 0px;
2823 #sidebar-header > .close-icon {
2824 /* padding: 4px 2px;
2827 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2830 #sidebar-header > .close-icon:hover,
2831 #sidebar-header > .close-icon:hover:active {
2832 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2835 #sidebar-splitter:-moz-locale-dir(ltr),
2836 #sidebar:-moz-locale-dir(ltr) {
2837 border-radius: 0 5px 0 0;
2840 #sidebar-splitter:-moz-locale-dir(rtl),
2841 #sidebar:-moz-locale-dir(rtl) {
2842 border-radius: 5px 0 0 0;
2845 .browserContainer > findbar {
2847 background-color: -moz-dialog;
2848 color: -moz-DialogText;
2857 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2860 #TabsToolbar .toolbar-holder {
2861 background-color: #000000; /* correct effect of being an actual toolbar */
2864 #main-window[disablechrome] #TabsToolbar,
2865 #TabsToolbar[tabsontop="false"] {
2866 border-bottom: 1px solid #008484;
2869 /* === BEGIN tabs.inc.css === */
2872 /* --tab-toolbar-navbar-overlap: 1px; */
2873 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2874 /* --tab-min-height: 31px; */
2877 /* --tab-stroke-background-size: auto 100%; */
2881 .tabs-newtab-button,
2882 #TabsToolbar > #new-tab-button {
2887 padding: 1px 4px 2px;
2890 .tabbrowser-tab:first-of-type {
2891 -moz-margin-start: 2px;
2894 .tabs-newtab-button,
2895 #TabsToolbar > #new-tab-button {
2896 border-radius: 8px 8px 0px 0px;
2897 -moz-margin-start: 0;
2900 .tabs-newtab-button:not(:hover),
2901 #TabsToolbar > #new-tab-button:not(:hover) {
2902 background-color: #C09070;
2905 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2906 .tabbrowser-tab[visuallyselected=true] {
2907 /* position: relative;
2911 .tab-background-middle {
2917 .tab-content[pinned] {
2930 -moz-margin-end: 3px;
2934 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2941 -moz-margin-start: -15px;
2945 .tab-icon-overlay[crashed] {
2946 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2949 .tab-icon-overlay[soundplaying],
2950 .tab-icon-overlay[muted]:not([crashed]) {
2951 border-radius: 10px;
2954 .tab-icon-overlay[soundplaying]:hover,
2955 .tab-icon-overlay[muted]:hover {
2956 background-color: #FFCF00;
2959 .tab-icon-overlay[soundplaying] {
2961 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2964 .tab-icon-overlay[muted]:not([crashed]) {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2968 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2973 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2974 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2977 .tab-throbber[busy] {
2978 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2981 .tab-throbber[progress] {
2982 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2985 .tab-throbber[pinned],
2986 .tab-icon-image[pinned] {
2987 -moz-margin-start: 2px;
2988 -moz-margin-end: 2px;
2992 /* this needs to add up to the 16px of the icon image */
2994 margin-top: 2px !important;
2995 margin-bottom: 2px !important;
2999 -moz-margin-start: 4px;
3005 .tab-icon-sound[muted] {
3006 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3009 .tab-icon-sound[muted]:hover {
3010 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3013 .tab-icon-sound[muted]:hover:active {
3014 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3017 .tab-icon-sound[soundplaying] {
3018 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3021 .tab-icon-sound[soundplaying]:hover {
3022 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3025 .tab-icon-sound[soundplaying]:hover:active {
3026 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3029 .tab-icon-sound[muted] {
3030 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3033 .tab-icon-sound[muted]:hover {
3034 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3037 .tab-icon-sound[muted]:hover:active {
3038 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3041 .tab-icon-sound[visuallyselected=true][soundplaying] {
3042 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3045 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3046 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3049 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3050 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3053 .tab-icon-sound[visuallyselected=true][muted] {
3054 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3057 .tab-icon-sound[visuallyselected=true][muted]:hover {
3058 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3061 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3062 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3065 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3066 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3069 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3070 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3073 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3074 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3077 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3078 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3081 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3082 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3085 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3086 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3095 .tabs-newtab-button {
3096 /* overlap the tab curves */
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3104 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3107 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3108 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3111 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3114 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3117 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3118 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3121 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3122 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3125 .tab-background-start[visuallyselected=true]::after,
3126 .tab-background-start[visuallyselected=true]::before,
3127 .tab-background-start,
3128 .tab-background-end,
3129 .tab-background-end[visuallyselected=true]::after,
3130 .tab-background-end[visuallyselected=true]::before {
3133 .tabbrowser-tab:not([visuallyselected=true]),
3134 .tabbrowser-tab:-moz-lwtheme {
3137 /* tabbrowser-tab focus ring */
3138 .tabbrowser-tab:focus {
3139 outline: 1px dotted;
3144 .tabbrowser-tab[visuallyselected="true"] {
3147 /* End selected tab */
3149 /* User Context UI - change tab decoration depending on userContextId.
3150 Defaults to gray for unknown usercontextids. */
3151 .tabbrowser-tab[usercontextid] {
3152 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3153 background-size: auto 2px;
3154 background-repeat: no-repeat;
3157 /* Personal User Context */
3158 .tabbrowser-tab[usercontextid="1"] {
3159 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3161 /* Work User Context */
3162 .tabbrowser-tab[usercontextid="2"] {
3163 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3165 /* Banking User Context */
3166 .tabbrowser-tab[usercontextid="3"] {
3167 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3169 /* Shopping User Context */
3170 .tabbrowser-tab[usercontextid="4"] {
3171 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3174 /* Tab pointer-events */
3177 pointer-events: none;
3180 .tab-background-middle,
3181 .tabs-newtab-button,
3182 .tab-icon-overlay[soundplaying],
3183 .tab-icon-overlay[muted]:not([crashed]),
3186 pointer-events: auto;
3191 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3192 background-color: #E7ADE7;
3195 .tabbrowser-tab[pinned][titlechanged]:not([selected="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 {
4904 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4905 background-color: #FF0000;
4906 border: 1px solid #FFC000;
4907 border-top-right-radius: 4px;
4911 margin-bottom: -5px;
4912 -moz-margin-start: 6px;
4913 -moz-margin-end: -5px;
4916 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4917 background-color: #FFCF00;
4918 border-color: #FF0000;
4928 background-color: #9C9CFF;
4935 border: 1px solid #008484;
4937 border-top-left-radius: 4px;
4938 border-top-right-radius: 4px;
4940 background-color: #A09090;
4943 .chat-titlebar[selected] {
4944 background-color: #008484;
4947 .chat-titlebar > .notification-anchor-icon {
4952 .chat-titlebar[minimized="true"] {
4953 border-bottom: none;
4956 .chat-titlebar[selected] {
4957 background-color: #008484;
4960 .chat-titlebar[activity] {
4961 background-color: #E7ADE7;
4971 list-style-image: url("chrome://browser/skin/social/services-16.png");
4972 background-color: #000000;
4978 border-top: 1px solid #008484;
4979 -moz-border-end: 1px solid #008484;
4982 @media (min-resolution: 2dppx) {
4984 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4988 .chatbar-button:hover {
4989 background-color: #FFCF00;
4991 .chatbar-button[open="true"] {
4992 background-color: #FF9F00;
4995 .chatbar-button[activity]:not([open]) {
4996 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%);
4999 .chatbar-button > .toolbarbutton-icon {
5003 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5010 .chatbar-button > .toolbarbutton-icon {
5014 .chatbar-button:hover > .toolbarbutton-icon,
5015 .chatbar-button[open="true"] > .toolbarbutton-icon {
5019 .chatbar-button:hover,
5020 .chatbar-button[open="true"] {
5023 .chatbar-button > .toolbarbutton-text,
5024 .chatbar-button > .toolbarbutton-menu-dropmarker {
5028 .chatbar-button[activity]:not([open="true"]) {
5029 background-color: #E7ADE7;
5032 .chatbar-button > menupopup > menuitem[activity] {
5037 background: transparent;
5042 -moz-margin-end: 20px;
5046 -moz-margin-start: 4px;
5047 background-color: transparent;
5051 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
5053 /* border-top-left-radius: 4px;
5054 border-top-right-radius: 4px;*/
5055 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
5057 /* -moz-margin-end: 5px;*/
5060 chatbox[minimized="true"] {
5066 -moz-margin-start: 0px;
5072 /* === END chat.inc.css === */
5074 /* === BEGIN plugin-doorhanger.inc.css === */
5077 * Plugin Doorhanger Styles
5080 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5081 padding: 6px 1px 2px;
5084 .click-to-play-plugins-notification-center-box {
5087 .plugin-popupnotification-centeritem:nth-child(odd) {
5088 /* background-color: rgba(0,0,0,0.1);*/
5091 .center-item-label {
5093 text-overflow: ellipsis;
5096 .center-item-warning-icon {
5097 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5098 background-repeat: no-repeat;
5101 -moz-margin-start: 6px;
5104 .click-to-play-plugins-notification-button-container {
5107 .click-to-play-popup-button {
5111 .click-to-play-plugins-notification-description-box {
5115 padding-bottom: 3px;
5118 .click-to-play-plugins-outer-description {
5122 .click-to-play-plugins-notification-link,
5127 .messageImage[value="plugin-hidden"] {
5128 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5131 /* Keep any changes to this style in sync with pluginProblem.css */
5132 notification.pluginVulnerable {
5135 notification.pluginVulnerable .messageImage {
5136 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5139 /* === END plugin-doorhanger.inc.css === */
5141 /* === BEGIN login-doorhanger.inc.css === */
5143 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5144 /* Since we display a sliding subview that extends to the border, we cannot
5145 * keep the default padding of arrow panels. We use the same padding in the
5146 * individual content views instead. Since we removed the padding, we also
5147 * have to ensure the contents are clipped to the border box. */
5152 #login-fill-mainview,
5153 #login-fill-details {
5154 padding: var(--panel-arrowcontent-padding);
5157 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5158 transform: translateX(-14px);
5161 #login-fill-mainview,
5162 #login-fill-details {
5163 transition: transform 150ms;
5166 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5167 transform: translateX(105%);
5170 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5171 transform: translateX(-105%);
5174 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5175 background-color: hsla(240,39%,100%,.1);
5178 #login-fill-testing {
5184 border: 1px solid #9C9CFF;
5188 .login-fill-item[disabled] {
5190 background-color: #000000;
5193 .login-fill-item[disabled][selected] {
5194 background-color: #008484;
5202 .login-fill-item.different-hostname > .login-hostname {
5212 #login-fill-details {
5214 background: var(--panel-arrowcontent-background);
5215 color: var(--panel-arrowcontent-color);
5216 background-clip: padding-box;
5217 border-left: 1px solid #9C9CFF;
5218 -moz-margin-start: 38px;
5221 /* === END login-doorhanger.inc.css === */
5223 /* === BEGIN customizeMode.inc.css === */
5225 /* Customization mode */
5227 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5231 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5232 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5233 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5238 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5239 pointer-events: none;
5242 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5243 #PanelUI-contents > .panel-customization-placeholder {
5244 -moz-outline-radius: 2.5px;
5245 outline: 1px dashed transparent;
5248 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5249 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5250 -moz-box-ordinal-group: 0;
5255 outline-offset: -2px;
5256 pointer-events: none;
5262 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5263 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5264 offset from the bottom effectively the same as other targets (-2px). */
5265 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5269 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5270 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5271 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5272 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5276 /* Most target outlines are shown on hover and drag over but the panel menu uses
5277 placeholders instead. */
5278 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5279 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5280 /* nav-bar and panel outlines are always shown */
5281 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5282 outline-color: #A09090;
5285 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5286 transition: outline-color 250ms linear;
5289 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5290 transition: outline-color 250ms linear;
5291 outline-color: #9C9CFF;
5294 #PanelUI-contents > .panel-customization-placeholder {
5296 outline-offset: -5px;
5299 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5301 /* padding-left: 10px;
5302 padding-right: 10px;*/
5305 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5309 #customization-container {
5310 background-color: #000000;
5314 #customization-palette,
5315 #customization-empty {
5316 padding: 0 15px 15px;
5319 #customization-header {
5321 line-height: 1.75em;
5324 margin: 25px 25px 12px;
5325 padding-bottom: 12px;
5326 border-bottom: 1px solid #A09090;
5329 #customization-panel-container {
5330 padding: 10px 10px 0px;
5333 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5334 #customization-footer {
5335 /*background-color: rgb(236,236,236);*/
5338 #customization-footer {
5339 border-top: 1px solid #9C9CFF;
5343 .customizationmode-button {
5347 .customizationmode-button:hover {
5350 #customization-titlebar-visibility-button[checked],
5351 #customization-devedition-theme-button[checked] {
5352 background-color: #008484;
5355 #customization-titlebar-visibility-button[checked]:hover,
5356 #customization-devedition-theme-button[checked]:hover {
5357 background-color: #FFCF00;
5360 #customization-titlebar-visibility-button[checked]:hover:active,
5361 #customization-devedition-theme-button[checked]:hover:active {
5362 background-color: #FF9F00;
5365 .customizationmode-button[disabled="true"] {
5368 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5369 .customizationmode-button > .button-box > .button-icon {
5373 #customization-titlebar-visibility-button {
5374 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5375 -moz-image-region: rect(0, 16px, 16px, 0);
5378 #customization-titlebar-visibility-button:hover {
5379 -moz-image-region: rect(16px, 16px, 32px, 0);
5382 #customization-lwtheme-button,
5383 #customization-titlebar-visibility-button {
5387 #customization-titlebar-visibility-button > .button-box {
5389 padding-bottom: 1px;
5392 #customization-titlebar-visibility-button:hover:active > .button-box {
5397 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5398 #customization-titlebar-visibility-button > .button-box > .button-text {
5399 /* Sadly, button.css thinks its margins are perfect for everyone. */
5400 -moz-margin-start: 5px !important;
5403 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5407 background-size: contain;
5410 #customization-titlebar-visibility-button > .button-box > .button-icon {
5411 vertical-align: middle;
5414 #customization-titlebar-visibility-button[checked] {
5415 -moz-image-region: rect(0, 32px, 16px, 16px);
5416 background-color: #008484;
5419 #customization-titlebar-visibility-button[checked]:hover {
5420 -moz-image-region: rect(16px, 32px, 32px, 16px);
5421 background-color: #FFCF00;
5424 #customization-titlebar-visibility-button[checked]:hover:active {
5425 background-color: #FF9F00;
5428 @media (min-resolution: 1.1dppx) {
5429 #customization-titlebar-visibility-button {
5430 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5431 -moz-image-region: rect(0, 48px, 48px, 0);
5434 #customization-titlebar-visibility-button:hover {
5435 -moz-image-region: rect(48px, 48px, 96px, 0);
5438 #customization-titlebar-visibility-button[checked] {
5439 -moz-image-region: rect(0, 96px, 48px, 48px);
5442 #customization-titlebar-visibility-button[checked]:hover {
5443 -moz-image-region: rect(48px, 96px, 96px, 48px);
5447 #main-window[customize-entered] #customization-panel-container {
5448 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5449 background-position: left top;
5450 background-repeat: repeat;
5451 background-size: auto;
5452 background-attachment: fixed;
5455 toolbarpaletteitem[place="toolbar"] {
5456 transition: border-width 250ms ease-in-out;
5459 toolbarpaletteitem[mousedown] {
5460 outline: 1px solid #008484;
5461 cursor: -moz-grabbing;
5465 .panel-customization-placeholder,
5466 toolbarpaletteitem[place="palette"],
5467 toolbarpaletteitem[place="panel"] {
5468 transition: transform .3s ease-in-out;
5471 #customization-palette {
5472 transition: opacity .3s ease-in-out;
5476 #customization-palette[showing="true"] {
5480 toolbarpaletteitem[notransition].panel-customization-placeholder,
5481 toolbarpaletteitem[notransition][place="toolbar"],
5482 toolbarpaletteitem[notransition][place="palette"],
5483 toolbarpaletteitem[notransition][place="panel"] {
5487 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5488 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5489 toolbarpaletteitem > toolbaritem.panel-wide-item,
5490 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5491 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5494 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5495 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5496 transform: scale(1.3);
5499 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5500 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5501 transform: scale(1.1);
5504 /* Override the toolkit styling for items being dragged over. */
5505 toolbarpaletteitem[place="toolbar"] {
5506 border-left-width: 0;
5507 border-right-width: 0;
5512 #customization-palette:not([hidden]) {
5513 margin-bottom: 25px;
5516 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5517 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5518 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5519 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5523 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5524 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5534 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5535 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5539 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5540 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5543 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5544 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5548 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5549 -moz-box-pack: center;
5553 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5554 -moz-margin-end: 5px;
5557 #customization-palette > toolbarpaletteitem > label {
5563 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5564 -moz-box-orient: vertical;
5565 /* Make the panel padding uniform across all platforms due to the
5566 styling of the section headers and footer. */
5570 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5575 .customization-lwtheme-menu-theme {
5576 -moz-appearance: none;
5579 -moz-padding-end: 5px;
5581 -moz-padding-start: 0;
5584 .customization-lwtheme-menu-theme[defaulttheme] {
5585 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5588 .customization-lwtheme-menu-theme[active="true"] {
5589 background-color: #008484;
5592 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5596 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5600 #customization-lwtheme-menu-header,
5601 #customization-lwtheme-menu-recommended {
5606 #customization-lwtheme-menu-header,
5607 #customization-lwtheme-menu-recommended,
5608 #customization-lwtheme-menu-footer {
5609 background-color: #A09090;
5611 margin-right: -10px;
5615 #customization-lwtheme-menu-header {
5617 border-top-right-radius: 3px;
5618 border-top-left-radius: 3px;
5621 #customization-lwtheme-menu-recommended {
5624 #customization-lwtheme-menu-footer {
5625 margin-bottom: -10px;
5626 border-bottom-right-radius: 3px;
5627 border-bottom-left-radius: 3px;
5630 .customization-lwtheme-menu-footeritem {
5631 -moz-appearance: none;
5633 background-color: #C09070;
5635 border: 1px solid transparent;
5641 .customization-lwtheme-menu-footeritem:hover {
5642 background-color: #FFCF00;
5645 .customization-lwtheme-menu-footeritem:first-child {
5648 /* === END customizeMode.inc.css === */
5650 /* === BEGIN customizeTip.inc.css === */
5652 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5659 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5660 border: 1px solid #9C9CFF;
5664 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5665 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5668 .customization-tipPanel-infoBox {
5669 margin: 20px 25px 25px;
5671 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5672 background-repeat: no-repeat;
5675 .customization-tipPanel-content {
5681 .customization-tipPanel-em {
5686 .customization-tipPanel-contentImage {
5688 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5696 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5697 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5700 .customization-tipPanel-link {
5701 -moz-appearance: none;
5702 background: transparent;
5710 .customization-tipPanel-link > .button-box > .button-text {
5711 margin: 0 !important;
5714 .customization-tipPanel-closeBox > .close-icon {
5715 -moz-appearance: none;
5717 -moz-margin-end: -25px;
5720 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5721 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5722 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5725 /* === END customizeTip.inc.css === */
5728 * This next rule is a hack to disable subpixel anti-aliasing on all
5729 * labels during the customize mode transition. Subpixel anti-aliasing
5730 * on Windows with Direct2D layers acceleration is particularly slow to
5731 * paint, so this hack is how we sidestep that performance bottleneck.
5733 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5734 transform: perspective(0.01px);
5737 #main-window[customize-entered] > #tab-view-deck {
5738 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5739 background-attachment: fixed;
5742 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5743 background-repeat: no-repeat;
5744 background-position: right top;
5745 background-attachment: fixed;
5746 /* The image will get set from CustomizeMode.jsm */
5747 background-image: none;
5748 background-color: transparent;
5751 #main-window[customization-lwtheme]:-moz-lwtheme {
5752 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5753 background-repeat: repeat;
5754 background-attachment: fixed;
5755 background-position: left top;
5758 #main-window[customize-entered] #browser-bottombox,
5759 #main-window[customize-entered] #customization-container {
5760 border-left: 1px solid #9C9CFF;
5761 border-right: 1px solid #9C9CFF;
5762 background-clip: padding-box;
5765 #main-window[customize-entered] #browser-bottombox {
5766 border-bottom: 1px solid #9C9CFF;
5769 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5773 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5777 /* End customization mode */
5779 /* Private browsing indicators */
5782 * Currently, we have two places where we put private browsing indicators on
5783 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5784 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5785 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5786 * want the bottom border of the image to line up with the bottom of the window
5787 * caption buttons. That's why there's so much special-casing going on in here.
5789 .private-browsing-indicator {
5791 pointer-events: none;
5794 #private-browsing-indicator-titlebar {
5799 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5803 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5807 #TabsToolbar > .private-browsing-indicator {
5808 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5809 -moz-margin-start: 4px;
5813 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5814 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5815 * min/max/close window buttons.
5817 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5818 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5819 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5820 -moz-margin-end: 4px;
5826 /* This one is for Linux */
5827 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5828 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5832 /* End private browsing indicators */
5834 /* === BEGIN UITour.inc.css === */
5838 #UITourHighlightContainer {
5839 -moz-appearance: none;
5841 background-color: transparent;
5842 /* This is a buffer to compensate for the movement in the "wobble" effect */
5847 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5848 border-radius: 40px;
5849 border: 1px solid #9C9CFF;
5850 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5851 on Linux without an X compositor where opacity is either 0 or 1. */
5852 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5857 #UITourTooltipBody {
5858 -moz-margin-end: 14px;
5861 #UITourTooltipBody > vbox {
5865 #UITourTooltipIconContainer {
5866 -moz-margin-start: -16px;
5869 #UITourTooltipIcon {
5872 -moz-margin-start: 28px;
5873 -moz-margin-end: 28px;
5876 #UITourTooltipTitle,
5877 #UITourTooltipDescription {
5881 #UITourTooltipTitle {
5884 -moz-margin-start: 0;
5889 #UITourTooltipDescription {
5890 -moz-margin-start: 0;
5893 line-height: 1.8rem;
5894 margin-bottom: 0; /* Override global.css */
5897 #UITourTooltipClose {
5898 -moz-appearance: none;
5900 background-color: transparent;
5902 -moz-margin-start: 4px;
5906 #UITourTooltipClose > .toolbarbutton-text {
5910 #UITourTooltipButtons {
5912 background-color: rgba(0,0,0,.2);
5913 border-top: 1px solid rgba(0,0,0,.4);
5914 margin: 24px -16px -16px;
5918 #UITourTooltipButtons > label,
5919 #UITourTooltipButtons > button {
5923 #UITourTooltipButtons > label:first-child,
5924 #UITourTooltipButtons > button:first-child {
5925 -moz-margin-start: 0;
5928 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5931 -moz-margin-end: 5px;
5934 #UITourTooltipButtons > label,
5935 #UITourTooltipButtons > button .button-text {
5939 #UITourTooltipButtons > button:not(.button-link) {
5940 -moz-appearance: none;
5941 background-color: #C09070;
5942 border-radius: 3000px;
5946 transition-property: background-color, color;
5947 transition-duration: 150ms;
5950 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5951 background-color: #FFCF00;
5955 #UITourTooltipButtons > label,
5956 #UITourTooltipButtons > button.button-link {
5957 -moz-appearance: none;
5958 background: transparent;
5961 color: rgba(0,0,0,0.35);
5963 padding-right: 10px;
5966 #UITourTooltipButtons > button.button-link:hover {
5970 /* The primary button gets the same color as the customize button. */
5971 #UITourTooltipButtons > button.button-primary {
5972 background-color: #A06060; /* LCARS default button background color */
5975 padding-right: 30px;
5978 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5979 background-color: #FFCF00;
5983 /* Notification overrides for Heartbeat UI */
5985 notification.heartbeat {
5986 background-color: #A09090;
5990 @keyframes pulse-onshow {
5993 transform: scale(1.0);
5997 transform: scale(1.1);
6000 transform: scale(1.0);
6003 transform: scale(1.1);
6006 transform: scale(1.0);
6010 @keyframes pulse-twice {
6012 transform: scale(1.1);
6015 transform: scale(0.8);
6018 transform: scale(1);
6022 .messageText.heartbeat {
6024 /* text-shadow: none; */
6025 -moz-margin-start: 0px;
6028 .messageImage.heartbeat {
6031 -moz-margin-start: 8px;
6032 -moz-margin-end: 8px;
6035 .messageImage.heartbeat.pulse-onshow {
6036 animation-name: pulse-onshow;
6037 animation-duration: 1.5s;
6038 animation-iteration-count: 1;
6039 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6042 .messageImage.heartbeat.pulse-twice {
6043 animation-name: pulse-twice;
6044 animation-duration: 1s;
6045 animation-iteration-count: 2;
6046 animation-timing-function: linear;
6049 /* Learn More link styles */
6050 .heartbeat > .text-link {
6052 -moz-margin-start: 0px;
6055 .heartbeat > .text-link:hover {
6057 text-decoration: none;
6060 .heartbeat > .text-link:hover:active {
6064 /* Heartbeat UI Rating Star Classes */
6065 .heartbeat > #star-rating-container {
6067 /* margin-bottom: 4px;*/
6070 .heartbeat > #star-rating-container > #star5 {
6071 -moz-box-ordinal-group: 5;
6074 .heartbeat > #star-rating-container > #star4 {
6075 -moz-box-ordinal-group: 4;
6078 .heartbeat > #star-rating-container > #star3 {
6079 -moz-box-ordinal-group: 3;
6082 .heartbeat > #star-rating-container > #star2 {
6083 -moz-box-ordinal-group: 2;
6086 .heartbeat > #star-rating-container > .star-x {
6087 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6089 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6090 -moz-margin-end: 4px !important;
6095 .heartbeat > #star-rating-container > .star-x:hover,
6096 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6097 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6100 /* === END UITour.inc.css === */
6102 #UITourTooltipButtons {
6104 * Override the --panel-arrowcontent-padding so the background extends
6105 * to the sides and bottom of the panel.
6108 margin-right: -10px;
6109 margin-bottom: -10px;
6112 /* === BEGIN contextmenu.inc.css === */
6114 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6117 #context-navigation > .menuitem-iconic {
6119 -moz-box-pack: center;
6120 -moz-box-align: center;
6123 #context-navigation > .menuitem-iconic[disabled="true"] {
6124 background-color: transparent;
6127 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6128 -moz-appearance: none;
6131 #context-back > .menu-iconic-left {
6132 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6133 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6134 -moz-image-region: rect(0, 54px, 18px, 36px);
6137 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6138 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6139 -moz-image-region: rect(18px, 54px, 36px, 36px);
6142 #context-back[disabled="true"] > .menu-iconic-left {
6143 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6144 -moz-image-region: rect(36px, 54px, 54px, 36px);
6147 #context-forward > .menu-iconic-left {
6148 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6149 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6150 -moz-image-region: rect(0, 72px, 18px, 54px);
6153 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6154 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6155 -moz-image-region: rect(18px, 72px, 36px, 54px);
6158 #context-forward[disabled="true"] > .menu-iconic-left {
6159 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6160 -moz-image-region: rect(36px, 72px, 54px, 54px);
6163 #context-reload > .menu-iconic-left {
6164 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6165 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6166 -moz-image-region: rect(0, 14px, 14px, 0);
6169 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6170 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6171 -moz-image-region: rect(14px, 14px, 28px, 0);
6174 #context-reload[disabled="true"] > .menu-iconic-left {
6175 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6176 -moz-image-region: rect(28px, 14px, 42px, 0);
6179 #context-stop > .menu-iconic-left {
6180 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6181 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6182 -moz-image-region: rect(0, 28px, 14px, 14px);
6185 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6186 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6187 -moz-image-region: rect(14px, 28px, 28px, 14px);
6190 #context-stop[disabled="true"] > .menu-iconic-left {
6191 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6192 -moz-image-region: rect(28px, 28px, 42px, 14px);
6195 #context-bookmarkpage > .menu-iconic-left {
6196 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6197 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6198 -moz-image-region: rect(0, 144px, 18px, 126px);
6201 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6202 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6203 -moz-image-region: rect(18px, 144px, 36px, 126px);
6206 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6207 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6208 -moz-image-region: rect(36px, 144px, 54px, 126px);
6211 #context-bookmarkpage[starred=true] {
6212 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6213 -moz-image-region: rect(0px, 162px, 18px, 144px);
6216 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6217 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6218 -moz-image-region: rect(18px, 162px, 36px, 144px);
6221 #context-bookmarkpage[starred=true][disabled=true] {
6222 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6223 -moz-image-region: rect(36px, 162px, 54px, 144px);
6226 #context-back:-moz-locale-dir(rtl),
6227 #context-forward:-moz-locale-dir(rtl),
6228 #context-reload:-moz-locale-dir(rtl) {
6229 transform: scaleX(-1);
6232 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6233 width: 18px; /*16px;*/
6234 height: 18px; /*16px;*/
6238 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6239 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6245 #context-media-eme-learnmore {
6246 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6249 #context-media-eme-learnmore {
6250 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6253 /* === END contextmenu.inc.css === */
6255 #context-navigation {
6258 #context-sep-navigation {
6259 /* margin-top: -4px; */
6262 .browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {
6266 /* === BEGIN usercontext.inc.css === */
6268 /* User Context UI browser styles */
6270 #menu_newUserContextTabPersonal {
6271 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6274 #menu_newUserContextTabWork {
6275 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6278 #menu_newUserContextTabBanking {
6279 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6282 #menu_newUserContextTabShopping {
6283 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6286 /* URL Bar Decoration */
6288 #userContext-indicator {
6293 #userContext-label {
6294 margin-inline-end: 3px;
6298 #userContext-icons:not([usercontextid]) {
6302 #userContext-icons {
6303 -moz-box-align: center;
6306 /* Personal User Context */
6307 #userContext-icons[usercontextid="1"] > #userContext-label {
6310 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6311 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6314 /* Work User Context */
6315 #userContext-icons[usercontextid="2"] > #userContext-label {
6318 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6319 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6322 /* Banking User Context */
6323 #userContext-icons[usercontextid="3"] > #userContext-label {
6326 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6327 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6330 /* Shopping User Context */
6331 #userContext-icons[usercontextid="4"] > #userContext-label {
6334 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6335 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6338 /* === END usercontext.inc.css === */