1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 --identity-box-verified-background-color: #000000;
44 --panel-separator-color: #A09090;
46 --urlbar-separator-color: #9C9CFF;
50 -moz-box-orient: vertical; /* for flex hack */
54 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
57 /* ::::: primary toolbar ::::: */
59 .toolbar-primary > .toolbar-box > .toolbar-holder {
60 background-color: #A09090;
63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
65 background-color: #9C9CFF;
68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
69 are not autohiding the menubar. */
70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
84 /* margin-top: var(--space-above-tabbar);*/
87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
89 #toolbar-menubar:not([autohide="true"]) {
90 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110 outline-color: #A09090;
116 #navigator-toolbox::after {
119 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 #navigator-toolbox > toolbar {
126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130 overflow: -moz-hidden-unscrollable;
132 transition: min-height 170ms ease-out, max-height 170ms ease-out;
135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
138 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143 /* Indent also due to non-applicable aero rule in original Windows theme. */
144 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
147 background-color: #6000CF;
151 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153 background-color: #8050B0;
157 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
161 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
165 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
173 #titlebar-buttonbox > .titlebar-button {
179 /* Position the toolbar above the bottom of background tabs */
184 #personal-bookmarks {
185 /* min-height: 24px; */
188 #PersonalToolbar > #home-button {
189 -moz-box-orient: horizontal;
192 #PersonalToolbar > #home-button > .toolbarbutton-text {
196 #print-preview-toolbar:not(:-moz-lwtheme) {
197 /* -moz-appearance: toolbox; */
200 #browser-bottombox:not(:-moz-lwtheme) {
203 /* ::::: titlebar ::::: */
207 background-color: #6000CF;
210 #titlebar:-moz-window-inactive {
211 background-color: #8050B0;
215 #main-window[sizemode="normal"] > #titlebar {
220 #main-window[sizemode="maximized"] > #titlebar {
224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
226 #main-window[sizemode="normal"] > #titlebar,
227 #main-window[sizemode="maximized"] > #titlebar {
229 /* There is a margin-bottom set to -23 by code. */
233 /* The button box must appear on top of the navigator-toolbox in order for
234 * click and hover mouse events to work properly for the button in the restored
235 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236 * can swallow those events. It will also place the buttons above the fog on
237 * themes with Aero Glass.
240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
241 -moz-appearance: none;
244 -moz-margin-end: 3px;
248 .titlebar-placeholder[type="appmenu-button"] {
252 .titlebar-placeholder[type="caption-buttons"] {
256 /* titlebar command buttons */
258 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
261 #titlebar-min:hover {
262 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
266 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
269 #titlebar-max:hover {
270 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
273 #main-window[sizemode="maximized"] #titlebar-max {
274 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
277 #main-window[sizemode="maximized"] #titlebar-max:hover {
278 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
282 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
285 #titlebar-close:hover {
286 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
291 #titlebar-fullscreen-button {
292 -moz-appearance: none;
293 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294 -moz-image-region: rect(0px, 16px, 16px, 0px);
297 #titlebar-fullscreen-button:hover {
298 -moz-image-region: rect(0px, 32px, 16px, 16px);
301 @media (min-resolution: 2dppx) {
302 #titlebar-fullscreen-button {
303 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304 -moz-image-region: rect(0px, 32px, 32px, 0px);
307 #titlebar-fullscreen-button:hover {
308 -moz-image-region: rect(0px, 64px, 32px, 32px);
314 /* ::::: bookmark buttons ::::: */
316 toolbarbutton.bookmark-item:not(.subviewbutton),
317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323 toolbarbutton.bookmark-item[open="true"] {
326 -moz-padding-start: 4px;
327 -moz-padding-end: 2px;*/
330 .bookmark-item > .toolbarbutton-icon,
331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
334 -moz-margin-start: 1px;
335 -moz-margin-end: 2px;
340 /* Force the display of the label for bookmarks */
341 .bookmark-item > .toolbarbutton-text,
342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
343 display: -moz-box !important;
346 .bookmark-item > .toolbarbutton-menu-dropmarker {
350 #bookmarks-toolbar-placeholder {
351 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
352 -moz-box-orient: horizontal;
355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
360 /* ----- BOOKMARK STAR ANIMATION ----- */
362 @keyframes animation-bookmarkAdded {
363 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
366 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
369 @keyframes animation-bookmarkPulse {
370 from { transform: scale(1); }
371 50% { transform: scale(1.3); }
372 to { transform: scale(1); }
375 #bookmarked-notification-container {
384 #bookmarked-notification {
385 background-size: 16px;
386 background-position: center;
387 background-repeat: no-repeat;
393 #bookmarked-notification-dropmarker-anchor {
398 #bookmarked-notification-dropmarker-icon {
404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406 animation: animation-bookmarkAdded 800ms;
407 animation-timing-function: ease, ease, ease;
410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
411 list-style-image: none !important;
414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
416 animation: animation-bookmarkPulse 300ms;
417 animation-delay: 600ms;
418 animation-timing-function: ease-out;
421 /* ::::: bookmark menus ::::: */
424 menuitem.bookmark-item {
429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435 -moz-padding-start: 0px;
438 /* ::::: bookmark items ::::: */
441 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
442 -moz-image-region: auto;
445 .bookmark-item[container] {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
447 -moz-image-region: auto;
450 .bookmark-item[container][open] {
451 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
452 -moz-image-region: auto;
455 .bookmark-item[container][livemark] {
456 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
457 -moz-image-region: auto;
460 .bookmark-item[container][livemark] .bookmark-item {
461 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
462 -moz-image-region: rect(0px, 16px, 16px, 0px);
465 .bookmark-item[container][livemark] .bookmark-item[visited] {
466 -moz-image-region: rect(0px, 32px, 16px, 16px);
469 .bookmark-item[container][query] {
470 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
471 -moz-image-region: auto;
474 .bookmark-item[query][tagContainer] {
475 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476 -moz-image-region: auto;
479 .bookmark-item[query][dayContainer] {
480 list-style-image: url("chrome://communicator/skin/history/calendar.png");
481 -moz-image-region: auto;
484 .bookmark-item[query][hostContainer] {
485 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
486 -moz-image-region: auto;
489 .bookmark-item[query][hostContainer][open] {
490 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
491 -moz-image-region: auto;
494 .bookmark-item[cutting] > .toolbarbutton-icon,
495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
499 .bookmark-item[cutting] > .toolbarbutton-text,
500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
504 /* ::::: primary toolbar buttons ::::: */
506 /* === BEGIN toolbarbuttons.inc.css === */
508 /* Whole section of this included file: */
509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
511 #social-share-button, #open-file-button, #find-button, #developer-button,
512 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
513 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
515 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button),
516 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
517 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
521 -moz-image-region: rect(0, 36px, 18px, 18px);
524 #back-button:hover:not([disabled="true"]) {
525 -moz-image-region: rect(18px, 36px, 36px, 18px);
528 #back-button[disabled="true"] {
529 -moz-image-region: rect(36px, 36px, 54px, 18px);
533 -moz-image-region: rect(0, 72px, 18px, 54px);
536 #forward-button:hover:not([disabled="true"]) {
537 -moz-image-region: rect(18px, 72px, 36px, 54px);
540 #forward-button[disabled="true"] {
541 -moz-image-region: rect(36px, 72px, 54px, 54px);
544 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
545 #forward-button:-moz-locale-dir(rtl) {
546 transform: scaleX(-1);
549 #home-button[cui-areatype="toolbar"] {
550 -moz-image-region: rect(0, 126px, 18px, 108px);
553 #home-button[cui-areatype="toolbar"]:hover {
554 -moz-image-region: rect(18px, 126px, 36px, 108px);
557 #bookmarks-menu-button[cui-areatype="toolbar"] {
558 -moz-image-region: rect(0, 144px, 18px, 126px);
561 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
562 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
563 -moz-image-region: rect(18px, 144px, 36px, 126px);
566 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
567 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
568 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
569 background-color: transparent !important;
572 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
573 -moz-image-region: rect(0, 162px, 18px, 144px);
576 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
577 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
578 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
579 /* When starred and clicked (for edit/delete dialog),
580 * then only the menubutton-button itself is open, but not the whole menubutton. */
581 -moz-image-region: rect(18px, 162px, 36px, 144px);
584 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
585 -moz-image-region: rect(0, 630px, 18px, 612px);
588 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
590 -moz-box-align: center;
593 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
594 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
595 -moz-image-region: rect(18px, 630px, 36px, 612px);
598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
602 -moz-padding-start: 2px;
603 -moz-padding-end: 0px;
606 #history-panelmenu[cui-areatype="toolbar"] {
607 -moz-image-region: rect(0, 180px, 18px, 162px);
610 #history-panelmenu[cui-areatype="toolbar"]:hover,
611 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
612 -moz-image-region: rect(18px, 180px, 36px, 162px);
615 #downloads-button[cui-areatype="toolbar"] {
616 -moz-image-region: rect(0, 198px, 18px, 180px);
619 #downloads-button[cui-areatype="toolbar"]:hover,
620 #downloads-button[cui-areatype="toolbar"][open="true"] {
621 -moz-image-region: rect(18px, 198px, 36px, 180px);
624 #add-ons-button[cui-areatype="toolbar"] {
625 -moz-image-region: rect(0, 216px, 18px, 198px);
628 #add-ons-button[cui-areatype="toolbar"]:hover {
629 -moz-image-region: rect(18px, 216px, 36px, 198px);
632 #open-file-button[cui-areatype="toolbar"] {
633 -moz-image-region: rect(0, 234px, 18px, 216px);
636 #open-file-button[cui-areatype="toolbar"]:hover {
637 -moz-image-region: rect(18px, 234px, 36px, 216px);
640 #save-page-button[cui-areatype="toolbar"] {
641 -moz-image-region: rect(0, 252px, 18px, 234px);
644 #save-page-button[cui-areatype="toolbar"]:hover {
645 -moz-image-region: rect(18px, 252px, 36px, 234px);
648 #sync-button[cui-areatype="toolbar"] {
649 -moz-image-region: rect(0, 270px, 18px, 252px);
652 #sync-button[cui-areatype="toolbar"]:hover {
653 -moz-image-region: rect(18px, 270px, 36px, 252px);
656 #sync-button[cui-areatype="toolbar"][status="active"],
657 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
658 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
659 -moz-image-region: rect(0, 18px, 18px, 0px);
663 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
664 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
665 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
669 #feed-button[cui-areatype="toolbar"] {
670 -moz-image-region: rect(0, 288px, 18px, 270px);
673 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
674 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
675 -moz-image-region: rect(18px, 288px, 36px, 270px);
678 #feed-button[cui-areatype="toolbar"][disabled="true"] {
679 -moz-image-region: rect(36px, 288px, 54px, 270px);
682 #social-share-button[cui-areatype="toolbar"] {
683 -moz-image-region: rect(0px, 306px, 18px, 288px);
686 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
687 #social-share-button[cui-areatype="toolbar"][open="true"] {
688 -moz-image-region: rect(18px, 306px, 36px, 288px);
691 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
692 -moz-image-region: rect(36px, 306px, 54px, 288px);
695 #characterencoding-button[cui-areatype="toolbar"] {
696 -moz-image-region: rect(0, 324px, 18px, 306px);
699 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
700 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
701 -moz-image-region: rect(18px, 324px, 36px, 306px);
704 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
705 -moz-image-region: rect(36px, 324px, 54px, 306px);
708 #new-window-button[cui-areatype="toolbar"] {
709 -moz-image-region: rect(0, 342px, 18px, 324px);
712 #new-window-button[cui-areatype="toolbar"]:hover {
713 -moz-image-region: rect(18px, 342px, 36px, 324px);
716 #e10s-button[cui-areatype="toolbar"] {
717 -moz-image-region: rect(0, 342px, 18px, 324px);
720 #e10s-button[cui-areatype="toolbar"]:hover {
721 -moz-image-region: rect(18px, 342px, 36px, 324px);
724 #e10s-button > .toolbarbutton-icon {
725 transform: scaleY(-1);
728 #new-tab-button[cui-areatype="toolbar"] {
729 -moz-image-region: rect(0, 360px, 18px, 342px);
732 #new-tab-button[cui-areatype="toolbar"]:hover {
733 -moz-image-region: rect(18px, 360px, 36px, 342px);
736 #privatebrowsing-button[cui-areatype="toolbar"] {
737 -moz-image-region: rect(0, 378px, 18px, 360px);
740 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
741 -moz-image-region: rect(18px, 378px, 36px, 360px);
744 #find-button[cui-areatype="toolbar"] {
745 -moz-image-region: rect(0, 396px, 18px, 378px);
748 #find-button[cui-areatype="toolbar"]:hover {
749 -moz-image-region: rect(18px, 396px, 36px, 378px);
752 #print-button[cui-areatype="toolbar"] {
753 -moz-image-region: rect(0, 414px, 18px, 396px);
756 #print-button[cui-areatype="toolbar"]:hover {
757 -moz-image-region: rect(18px, 414px, 36px, 396px);
760 #fullscreen-button[cui-areatype="toolbar"] {
761 -moz-image-region: rect(0, 432px, 18px, 414px);
764 #fullscreen-button[cui-areatype="toolbar"]:hover {
765 -moz-image-region: rect(18px, 432px, 36px, 414px);
768 #developer-button[cui-areatype="toolbar"] {
769 -moz-image-region: rect(0, 450px, 18px, 432px);
772 #developer-button[cui-areatype="toolbar"]:hover,
773 #developer-button[cui-areatype="toolbar"][open="true"] {
774 -moz-image-region: rect(18px, 450px, 36px, 432px);
777 #preferences-button[cui-areatype="toolbar"] {
778 -moz-image-region: rect(0, 468px, 18px, 450px);
781 #preferences-button[cui-areatype="toolbar"]:hover {
782 -moz-image-region: rect(18px, 468px, 36px, 450px);
785 #PanelUI-menu-button {
786 -moz-image-region: rect(0, 486px, 18px, 468px);
789 #PanelUI-menu-button:hover,
790 #PanelUI-menu-button[open="true"] {
791 -moz-image-region: rect(18px, 486px, 36px, 468px);
794 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
795 -moz-image-region: rect(0, 504px, 18px, 486px);
798 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
799 -moz-image-region: rect(18px, 504px, 36px, 486px);
802 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
803 -moz-image-region: rect(36px, 504px, 54px, 486px);
806 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
807 -moz-image-region: rect(0, 522px, 18px, 504px);
810 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
811 -moz-image-region: rect(18px, 522px, 36px, 504px);
814 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
815 -moz-image-region: rect(36px, 522px, 54px, 504px);
818 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
819 -moz-image-region: rect(0, 540px, 18px, 522px);
822 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
823 -moz-image-region: rect(18px, 540px, 36px, 522px);
826 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
827 -moz-image-region: rect(36px, 540px, 54px, 522px);
830 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
831 -moz-image-region: rect(0, 558px, 18px, 540px);
834 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
835 -moz-image-region: rect(18px, 558px, 36px, 540px);
838 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
839 -moz-image-region: rect(36px, 558px, 54px, 540px);
842 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
843 -moz-image-region: rect(0, 576px, 18px, 558px);
846 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
847 -moz-image-region: rect(18px, 576px, 36px, 558px);
850 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
851 -moz-image-region: rect(36px, 576px, 54px, 558px);
854 #nav-bar-overflow-button {
855 -moz-image-region: rect(0, 612px, 18px, 594px);
858 #nav-bar-overflow-button:hover,
859 #nav-bar-overflow-button[open="true"] {
860 -moz-image-region: rect(18px, 612px, 36px, 594px);
863 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
864 transform: scaleX(-1);
868 -moz-image-region: rect(0, 648px, 18px, 630px);
871 #tabview-button:hover {
872 -moz-image-region: rect(18px, 648px, 36px, 630px);
875 #email-link-button[cui-areatype="toolbar"] {
876 -moz-image-region: rect(0, 666px, 18px, 648px);
879 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
880 -moz-image-region: rect(18px, 666px, 36px, 648px);
883 #email-button[cui-areatype="toolbar"][disabled="true"] {
884 -moz-image-region: rect(36px, 666px, 54px, 648px);
887 #sidebar-button[cui-areatype="toolbar"] {
888 -moz-image-region: rect(0, 684px, 18px, 666px);
891 #sidebar-button[cui-areatype="toolbar"]:hover {
892 -moz-image-region: rect(18px, 684px, 36px, 666px);
895 #panic-button[cui-areatype="toolbar"] {
896 -moz-image-region: rect(0, 702px, 18px, 684px);
899 #panic-button[cui-areatype="toolbar"]:hover,
900 #panic-button[cui-areatype="toolbar"][open] {
901 -moz-image-region: rect(18px, 702px, 36px, 684px);
904 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
905 transform: scaleX(-1);
909 #loop-button > .toolbarbutton-badge-stack {
910 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
911 -moz-image-region: rect(0, 18px, 18px, 0);
914 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
915 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
916 -moz-image-region: rect(0, 90px, 18px, 72px);
919 #loop-button[state="disabled"],
920 #loop-button[disabled="true"],
921 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
922 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
923 -moz-image-region: rect(0, 36px, 18px, 18px);
926 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
927 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
928 -moz-image-region: rect(0, 126px, 18px, 108px);
931 #loop-button:not([disabled="true"])[state="error"],
932 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
933 -moz-image-region: rect(0, 54px, 18px, 36px);
936 #loop-button:not([disabled="true"])[state="action"],
937 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
938 -moz-image-region: rect(0, 72px, 18px, 54px);
941 #loop-button:not([disabled="true"])[state="active"],
942 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
943 -moz-image-region: rect(0, 108px, 18px, 90px);
946 #webide-button[cui-areatype="toolbar"] {
947 -moz-image-region: rect(0, 738px, 18px, 720px);
950 #webide-button[cui-areatype="toolbar"]:hover {
951 -moz-image-region: rect(18px, 738px, 36px, 720px);
954 /* === END toolbarbuttons.inc.css === */
956 /* === BEGIN menupanel.inc.css === */
958 /* Menu panel and palette styles */
961 /* avoid aero overrides with changed filenames */
962 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
963 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
966 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
967 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
968 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
969 #social-share-button, #open-file-button, #find-button, #developer-button,
970 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
971 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
972 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
973 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button)[cui-areatype="menu-panel"],
974 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
975 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
976 #social-share-button, #open-file-button, #find-button, #developer-button,
977 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
978 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
979 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
980 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button) {
981 list-style-image: var(--menupanel-list-style-image);
984 #home-button[cui-areatype="menu-panel"],
985 toolbarpaletteitem[place="palette"] > #home-button {
986 -moz-image-region: rect(0px, 128px, 32px, 96px);
989 #home-button[cui-areatype="menu-panel"]:hover,
990 toolbarpaletteitem[place="palette"] > #home-button:hover {
991 -moz-image-region: rect(32px, 128px, 64px, 96px);
994 #bookmarks-menu-button[cui-areatype="menu-panel"],
995 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
996 -moz-image-region: rect(0px, 192px, 32px, 160px);
999 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1000 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1001 -moz-image-region: rect(32px, 192px, 64px, 160px);
1004 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1005 -moz-image-region: rect(32px, 192px, 64px, 160px);
1008 #history-panelmenu[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1010 -moz-image-region: rect(0px, 224px, 32px, 192px);
1013 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1015 -moz-image-region: rect(32px, 224px, 64px, 192px);
1018 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1019 -moz-image-region: rect(32px, 224px, 64px, 192px);
1022 #downloads-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #downloads-button {
1024 -moz-image-region: rect(0px, 256px, 32px, 224px);
1027 #downloads-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1029 -moz-image-region: rect(32px, 256px, 64px, 224px);
1032 #add-ons-button[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #add-ons-button {
1034 -moz-image-region: rect(0px, 288px, 32px, 256px);
1037 #add-ons-button[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1039 -moz-image-region: rect(32px, 288px, 64px, 256px);
1042 #open-file-button[cui-areatype="menu-panel"],
1043 toolbarpaletteitem[place="palette"] > #open-file-button {
1044 -moz-image-region: rect(0px, 320px, 32px, 288px);
1047 #open-file-button[cui-areatype="menu-panel"]:hover,
1048 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1049 -moz-image-region: rect(32px, 320px, 64px, 288px);
1052 #save-page-button[cui-areatype="menu-panel"],
1053 toolbarpaletteitem[place="palette"] > #save-page-button {
1054 -moz-image-region: rect(0px, 352px, 32px, 320px);
1057 #save-page-button[cui-areatype="menu-panel"]:hover,
1058 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1059 -moz-image-region: rect(32px, 352px, 64px, 320px);
1062 #sync-button[cui-areatype="menu-panel"],
1063 toolbarpaletteitem[place="palette"] > #sync-button {
1064 -moz-image-region: rect(0px, 384px, 32px, 352px);
1067 #sync-button[cui-areatype="menu-panel"]:hover,
1068 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1069 -moz-image-region: rect(32px, 384px, 64px, 352px);
1072 #sync-button[cui-areatype="menu-panel"][status="active"] {
1073 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1074 -moz-image-region: rect(0px, 32px, 32px, 0px);
1077 #feed-button[cui-areatype="menu-panel"],
1078 toolbarpaletteitem[place="palette"] > #feed-button {
1079 -moz-image-region: rect(0px, 416px, 32px, 384px);
1082 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1083 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1084 -moz-image-region: rect(32px, 416px, 64px, 384px);
1087 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1088 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1089 -moz-image-region: rect(64px, 416px, 96px, 384px);
1092 #social-share-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #social-share-button {
1094 -moz-image-region: rect(0px, 448px, 32px, 416px);
1097 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1098 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1099 -moz-image-region: rect(32px, 448px, 64px, 416px);
1102 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1103 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1104 -moz-image-region: rect(64px, 448px, 96px, 416px);
1107 #characterencoding-button[cui-areatype="menu-panel"],
1108 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1109 -moz-image-region: rect(0px, 480px, 32px, 448px);
1112 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1113 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1114 -moz-image-region: rect(32px, 480px, 64px, 448px);
1117 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1118 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1119 -moz-image-region: rect(64px, 480px, 96px, 448px);
1122 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1123 -moz-image-region: rect(32px, 480px, 64px, 448px);
1126 #new-window-button[cui-areatype="menu-panel"],
1127 toolbarpaletteitem[place="palette"] > #new-window-button {
1128 -moz-image-region: rect(0px, 512px, 32px, 480px);
1131 #new-window-button[cui-areatype="menu-panel"]:hover,
1132 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1133 -moz-image-region: rect(32px, 512px, 64px, 480px);
1136 #e10s-button[cui-areatype="menu-panel"],
1137 toolbarpaletteitem[place="palette"] > #e10s-button {
1138 -moz-image-region: rect(0px, 512px, 32px, 480px);
1141 #e10s-button[cui-areatype="menu-panel"]:hover,
1142 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1143 -moz-image-region: rect(32px, 512px, 64px, 480px);
1146 #new-tab-button[cui-areatype="menu-panel"],
1147 toolbarpaletteitem[place="palette"] > #new-tab-button {
1148 -moz-image-region: rect(0px, 544px, 32px, 512px);
1151 #new-tab-button[cui-areatype="menu-panel"]:hover,
1152 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1153 -moz-image-region: rect(32px, 544px, 64px, 512px);
1156 #privatebrowsing-button[cui-areatype="menu-panel"],
1157 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1158 -moz-image-region: rect(0px, 576px, 32px, 544px);
1161 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1162 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1163 -moz-image-region: rect(32px, 576px, 64px, 544px);
1166 #tabview-button[cui-areatype="menu-panel"],
1167 toolbarpaletteitem[place="palette"] > #tabview-button {
1168 -moz-image-region: rect(0px, 608px, 32px, 576px);
1171 #tabview-button[cui-areatype="menu-panel"]:hover,
1172 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1173 -moz-image-region: rect(32px, 608px, 64px, 576px);
1176 #find-button[cui-areatype="menu-panel"],
1177 toolbarpaletteitem[place="palette"] > #find-button {
1178 -moz-image-region: rect(0px, 640px, 32px, 608px);
1181 #find-button[cui-areatype="menu-panel"]:hover,
1182 toolbarpaletteitem[place="palette"] > #find-button:hover {
1183 -moz-image-region: rect(32px, 640px, 64px, 608px);
1186 #print-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #print-button {
1188 -moz-image-region: rect(0px, 672px, 32px, 640px);
1191 #print-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #print-button:hover {
1193 -moz-image-region: rect(32px, 672px, 64px, 640px);
1196 #fullscreen-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1198 -moz-image-region: rect(0px, 704px, 32px, 672px);
1201 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1202 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1203 -moz-image-region: rect(32px, 704px, 64px, 672px);
1206 #developer-button[cui-areatype="menu-panel"],
1207 toolbarpaletteitem[place="palette"] > #developer-button {
1208 -moz-image-region: rect(0px, 736px, 32px, 704px);
1211 #developer-button[cui-areatype="menu-panel"]:hover,
1212 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1213 -moz-image-region: rect(32px, 736px, 64px, 704px);
1216 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1217 -moz-image-region: rect(32px, 736px, 64px, 704px);
1220 #preferences-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #preferences-button {
1222 -moz-image-region: rect(0px, 768px, 32px, 736px);
1225 #preferences-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1227 -moz-image-region: rect(32px, 768px, 64px, 736px);
1230 #email-link-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #email-link-button {
1232 -moz-image-region: rect(0, 800px, 32px, 768px);
1235 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1236 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1237 -moz-image-region: rect(32px, 800px, 64px, 768px);
1240 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1241 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1242 -moz-image-region: rect(64px, 800px, 96px, 768px);
1245 #sidebar-button[cui-areatype="menu-panel"],
1246 toolbarpaletteitem[place="palette"] > #sidebar-button {
1247 -moz-image-region: rect(0, 864px, 32px, 832px);
1250 #sidebar-button[cui-areatype="menu-panel"]:hover,
1251 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1252 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1253 -moz-image-region: rect(32px, 864px, 64px, 832px);
1256 #panic-button[cui-areatype="menu-panel"],
1257 toolbarpaletteitem[place="palette"] > #panic-button {
1258 -moz-image-region: rect(0, 896px, 32px, 864px);
1261 #panic-button[cui-areatype="menu-panel"]:hover,
1262 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1263 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1264 -moz-image-region: rect(32px, 896px, 64px, 864px);
1267 #webide-button[cui-areatype="menu-panel"],
1268 toolbarpaletteitem[place="palette"] > #webide-button {
1269 -moz-image-region: rect(0px, 960px, 32px, 928px);
1272 #webide-button[cui-areatype="menu-panel"]:hover,
1273 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1274 -moz-image-region: rect(32px, 960px, 64px, 928px);
1277 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1278 -moz-image-region: rect(0, 832px, 32px, 800px);
1281 #loop-button[cui-areatype="menu-panel"],
1282 toolbarpaletteitem[place="palette"] > #loop-button {
1283 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1284 -moz-image-region: rect(0, 32px, 32px, 0);
1287 /* Make sure that the state icons are not shown in the customization palette. */
1288 toolbarpaletteitem[place="palette"] > #loop-button {
1289 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1292 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1293 -moz-image-region: rect(0, 160px, 32px, 128px);
1296 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1297 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1298 -moz-image-region: rect(0, 64px, 32px, 32px);
1301 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1302 -moz-image-region: rect(0, 224px, 32px, 192px);
1305 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1306 -moz-image-region: rect(0, 96px, 32px, 64px);
1309 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1310 -moz-image-region: rect(0, 128px, 32px, 96px);
1313 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1314 -moz-image-region: rect(0, 192px, 32px, 160px);
1317 /* Wide panel control icons */
1319 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1320 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1321 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1323 list-style-image: var(--menupanel-small-list-style-image);
1326 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1327 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1328 -moz-image-region: rect(0px, 32px, 16px, 16px);
1331 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1332 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1333 -moz-image-region: rect(16px, 32px, 32px, 16px);
1336 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1337 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1338 -moz-image-region: rect(32px, 32px, 48px, 16px);
1341 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1342 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1343 -moz-image-region: rect(0px, 48px, 16px, 32px);
1346 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1347 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1348 -moz-image-region: rect(16px, 48px, 32px, 32px);
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1353 -moz-image-region: rect(32px, 48px, 48px, 32px);
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1358 -moz-image-region: rect(0px, 64px, 16px, 48px);
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1363 -moz-image-region: rect(16px, 64px, 32px, 48px);
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1368 -moz-image-region: rect(32px, 64px, 48px, 48px);
1371 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1372 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1373 -moz-image-region: rect(0px, 80px, 16px, 64px);
1376 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1377 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1378 -moz-image-region: rect(16px, 80px, 32px, 64px);
1381 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1382 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1383 -moz-image-region: rect(32px, 80px, 48px, 64px);
1386 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1387 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1388 -moz-image-region: rect(0px, 96px, 16px, 80px);
1391 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1392 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1393 -moz-image-region: rect(16px, 96px, 32px, 80px);
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1398 -moz-image-region: rect(32px, 96px, 48px, 80px);
1401 #add-share-provider {
1402 list-style-image: var(--menupanel-small-list-style-image);
1403 -moz-image-region: rect(0px, 96px, 16px, 80px);
1406 /* === END menupanel.inc.css === */
1408 .toolbarbutton-1:not([type="menu-button"]) {
1409 -moz-box-orient: vertical;
1413 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1419 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1420 .toolbarbutton-1[disabled="true"]:hover:active,
1421 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1425 .toolbarbutton-1:hover:active,
1426 .toolbarbutton-1[open="true"],
1427 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1429 padding-bottom: 0px;
1430 -moz-padding-start: 3px;
1431 -moz-padding-end: 1px;
1434 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1435 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1436 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1437 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1438 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1441 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1442 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1445 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1446 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1449 .toolbarbutton-1 > .toolbarbutton-icon,
1450 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1454 #nav-bar .toolbarbutton-1,
1455 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1458 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1459 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1460 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1463 #nav-bar #PanelUI-menu-button {
1464 /* -moz-padding-start: 7px;
1465 -moz-padding-end: 5px;*/
1468 #nav-bar .toolbarbutton-1[type=panel],
1469 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1470 /* padding-left: 5px;
1471 padding-right: 5px;*/
1474 #nav-bar .toolbarbutton-1 > menupopup {
1475 /* margin-top: -3px;*/
1478 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1482 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1483 /* -moz-padding-end: 0;*/
1486 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1487 /* -moz-padding-start: 0;
1488 -moz-box-align: center;*/
1491 .findbar-button > .toolbarbutton-text,
1492 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1493 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1494 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1495 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1496 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1498 /* padding: 2px 6px;
1500 border-color: transparent;
1501 transition-property: background-color, border-color;
1502 transition-duration: 150ms;*/
1505 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1506 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1507 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1512 /* Help SDK icons fit: */
1513 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1514 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1518 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1519 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1523 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1524 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1525 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1526 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1527 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1528 /* -moz-padding-end: 17px;*/
1531 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1532 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1533 /* horizontal padding + border + icon width */
1534 /* max-width: 43px;*/
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1540 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1543 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1546 #nav-bar .toolbaritem-combined-buttons {
1547 /* margin-left: 2px;
1548 margin-right: 2px;*/
1551 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1556 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1557 #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 {
1563 -moz-margin-end: -1px;
1567 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1570 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1571 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1572 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1573 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1574 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1575 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1576 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1577 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1578 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1581 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1582 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1583 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1584 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1585 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1586 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1589 #TabsToolbar .toolbarbutton-1,
1590 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1591 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1592 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1595 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1596 #TabsToolbar .toolbarbutton-1[open],
1597 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1598 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1599 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1602 /* unified back/forward button */
1605 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1608 #forward-button > menupopup {
1609 margin-top: 1px !important;
1612 #forward-button > .toolbarbutton-icon {
1613 background-clip: padding-box !important;
1614 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1615 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1619 -moz-margin-start: -4px !important;
1624 border-radius: 0 10000px 10000px 0;
1627 #forward-button:-moz-locale-dir(rtl) {
1628 border-radius: 10000px 0 0 10000px;
1631 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1632 transition: margin-left 150ms ease-out;
1635 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1636 margin-left: -27px !important;
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1640 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1641 transition-delay: 100s;
1644 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1645 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1646 margin-left: -27.01px !important;
1650 /* padding-top: 3px !important;
1651 padding-bottom: 3px !important;
1652 -moz-padding-start: 5px !important;
1653 -moz-padding-end: 0 !important;*/
1656 border-radius: 10000px;
1660 margin-bottom: -2px;
1663 #back-button:-moz-locale-dir(rtl) {
1666 #back-button > menupopup {
1667 margin-top: -1px !important;
1670 #back-button > .toolbarbutton-icon {
1671 border-radius: 10000px !important;
1672 background-clip: padding-box !important;
1673 /* background-color: hsla(210,25%,98%,.08) !important;
1674 padding: 6px !important;
1675 border-style: none !important;
1676 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1677 0 0 0 1px hsla(210,4%,10%,.25);*/
1678 transition-property: background-color, box-shadow !important;
1679 transition-duration: 250ms !important;
1682 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1683 /* background-color: hsla(210,4%,10%,.08) !important;*/
1686 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1687 #back-button[open="true"] > .toolbarbutton-icon {
1688 /* background-color: hsla(210,4%,10%,.12) !important;
1689 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1690 0 0 0 1px hsla(210,4%,10%,.25),
1691 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1694 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1695 transform: scaleX(-1);
1698 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1699 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1700 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1703 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1704 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1705 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1708 #home-button.bookmark-item {
1709 list-style-image: url("chrome://browser/skin/Toolbar.png");
1712 #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),
1713 #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),
1714 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1715 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1716 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1717 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1718 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1721 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1724 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1725 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1726 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1730 #downloads-button > .toolbarbutton-icon {
1734 /* tabview menu item */
1737 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1738 -moz-image-region: rect(1px, 89px, 17px, 73px);
1741 #menu_tabview[groups="0"] {
1742 -moz-image-region: rect(1px, 17px, 17px, 1px);
1745 #menu_tabview[groups="1"] {
1746 -moz-image-region: rect(1px, 35px, 17px, 19px);
1749 #menu_tabview[groups="2"] {
1750 -moz-image-region: rect(1px, 53px, 17px, 37px);
1753 #menu_tabview[groups="3"] {
1754 -moz-image-region: rect(1px, 71px, 17px, 55px);
1757 /* undo close tab menu item */
1758 #alltabs_undoCloseTab {
1759 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1762 @media (min-resolution: 1.1dppx) {
1763 #alltabs_undoCloseTab {
1764 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1766 #alltabs_undoCloseTab > .toolbarbutton-icon {
1771 /* zoom control text (reset) button special case: */
1773 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1774 /* To make this line up with the icons, it needs the same height (18px) +
1775 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1776 * increase in text sizes would break things...
1781 /* ::::: fullscreen window controls ::::: */
1784 -moz-margin-start: 4px;
1790 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1795 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1798 #minimize-button:hover {
1799 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1803 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1806 #restore-button:hover {
1807 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1811 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1814 #close-button:hover {
1815 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1818 /* ::::: Location Bar ::::: */
1821 .searchbar-textbox {
1824 -moz-margin-start: 3px;
1828 /* make color as light as possible to deal with dark non-domain parts */
1832 /* overlap the urlbar's border */
1833 #PopupAutoCompleteRichResult {
1837 #urlbar:-moz-lwtheme,
1838 .searchbar-textbox:-moz-lwtheme {
1839 /* background-color: rgba(255,255,255,.8);
1840 @navbarTextboxCustomBorder@
1844 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1845 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1846 /* background-color: rgba(255,255,255,.9);*/
1849 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1850 .searchbar-textbox:-moz-lwtheme[focused] {
1851 /* background-color: white;*/
1854 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1855 /* -moz-border-start: none;
1859 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1860 /* border-top-left-radius: 0;
1861 border-bottom-left-radius: 0; */
1864 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1865 /* border-top-right-radius: 0;
1866 border-bottom-right-radius: 0; */
1869 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1870 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1871 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1874 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1875 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1876 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1877 transform: scaleX(-1);
1880 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1881 -moz-box-direction: reverse;
1884 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1885 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1890 -moz-box-orient: horizontal;
1891 -moz-box-align: stretch;
1894 .urlbar-textbox-container {
1895 -moz-box-align: stretch;
1899 -moz-margin-start: 0;
1903 -moz-box-align: center;
1908 /* 16x16 icon with border-box sizing */
1913 .search-go-container {
1917 .search-go-container > .search-go-button {
1921 #urlbar-search-footer {
1922 border-top: 1px solid #A09090;
1925 #urlbar-search-settings {
1928 #urlbar-search-settings:hover {
1931 #urlbar-search-settings:hover:active {
1934 #urlbar-search-splitter {
1936 -moz-margin-start: -3px;
1938 background: transparent;
1941 #urlbar-search-splitter + #urlbar-container > #urlbar,
1942 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1943 -moz-margin-start: 0;
1946 #urlbar-display-box {
1950 -moz-border-end: 1px solid #9C9CFF;
1951 -moz-margin-end: 3px;
1954 -moz-margin-start: 0;
1958 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1960 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1961 border-bottom: 1px solid #A09090;
1962 background-color: #000000;
1964 -moz-padding-start: 44px;
1965 -moz-padding-end: 6px;
1966 background-image: url("chrome://browser/skin/info.svg");
1967 background-clip: padding-box;
1968 background-position: 20px center;
1969 background-repeat: no-repeat;
1970 background-size: 16px 16px;
1973 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1974 background-position: right 20px center;
1977 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1982 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1983 -moz-margin-start: 0;
1986 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1987 -moz-appearance: none;
1992 -moz-margin-start: 10px;
1995 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2001 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2004 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2007 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2010 min-width: calc(54px + 11ch);
2015 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2016 background-color: var(--identity-box-verified-background-color);
2019 #identity-box:-moz-focusring {
2020 outline: 1px dotted #008484;
2021 outline-offset: -1px;
2024 #identity-box.verifiedDomain:-moz-focusring,
2025 #identity-box.verifiedIdentity:-moz-focusring {
2026 outline-color: #000000;
2029 /* Location bar dropmarker */
2031 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2032 background-color: transparent;
2035 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2036 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2037 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2040 transition: opacity 0.15s ease;
2043 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2047 .urlbar-history-dropmarker:hover {
2050 .urlbar-history-dropmarker:hover:active,
2051 .urlbar-history-dropmarker[open="true"] {
2054 /* page proxy icon */
2056 /* === BEGIN identity-block.inc.css === */
2059 /* --identity-box-hover-background-color: #FFCF00;
2060 --identity-box-selected-background-color: #FF9F00; */
2061 --identity-box-verified-color: #008484;
2062 /* Default theme does different color per channel, we can't as they do it build-time. */
2063 --identity-box-chrome-color: #9C9CFF;
2065 border-inline-end: 1px solid var(--urlbar-separator-color);
2069 margin-inline-end: 4px;
2071 /* The latter two properties have a transition to handle the delayed hiding of
2072 the forward button when hovered. */
2073 transition: background-color 150ms ease, padding-left, padding-right;
2076 #identity-box:-moz-locale-dir(ltr) {
2077 border-top-right-radius: 0;
2078 border-bottom-right-radius: 0;
2081 #identity-box:-moz-locale-dir(rtl) {
2082 border-top-left-radius: 0;
2083 border-bottom-left-radius: 0;
2086 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2087 color: var(--identity-box-chrome-color);
2088 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2091 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2092 color: var(--identity-box-verified-color);
2093 -moz-border-end: 1px solid var(--identity-box-verified-color);
2096 #notification-popup-box:not([hidden]) + #identity-box {
2097 padding-inline-start: 10px;
2101 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2102 /* border-radius: 0;
2103 padding-inline-start: 2px; */
2104 padding-inline-end: 2px;
2105 margin-inline-end: 1px;
2108 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2109 #notification-popup-box[hidden] + #identity-box {
2110 padding-inline-start: 2px;
2113 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2114 #notification-popup-box[hidden] + #identity-box {
2115 /* Forward button hiding is delayed when hovered, so we should use the same
2116 delay for the identity box. We handle both horizontal paddings (for LTR and
2117 RTL), the latter two delays here are for padding-left and padding-right. */
2118 transition-delay: 0s, 100s, 100s;
2121 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2122 #notification-popup-box[hidden] + #identity-box {
2123 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2124 padding-inline-start: 2.01px;
2127 /* MAIN IDENTITY ICON */
2132 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2135 #identity-box:hover > #identity-icon,
2136 #identity-box[open=true] > #identity-icon {
2137 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2141 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2144 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2148 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2149 -moz-image-region: inherit;
2150 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2156 /* TRACKING PROTECTION ICON */
2158 #tracking-protection-icon {
2161 margin-inline-start: 2px;
2162 margin-inline-end: 0;
2163 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2167 #tracking-protection-icon[state="loaded-tracking-content"] {
2168 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2171 #tracking-protection-icon[animate] {
2172 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2175 #tracking-protection-icon:not([state]) {
2176 margin-inline-end: -18px;
2177 pointer-events: none;
2179 /* Only animate the shield in, when it disappears hide it immediately. */
2183 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2184 visibility: collapse;
2187 /* CONNECTION ICON */
2192 margin-inline-start: 2px;
2193 visibility: collapse;
2196 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2197 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2198 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2199 visibility: visible;
2202 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2203 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2204 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2205 visibility: visible;
2208 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2209 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2210 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2211 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2212 visibility: visible;
2215 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2216 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2217 visibility: visible;
2220 /* === END identity-block.inc.css === */
2222 #page-proxy-favicon {
2223 -moz-image-region: rect(0, 16px, 16px, 0);
2226 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2227 /* -moz-margin-end: 1px;*/
2230 #identity-box:hover > #page-proxy-favicon {
2231 -moz-image-region: rect(0, 32px, 16px, 16px);
2234 #identity-box:hover:active > #page-proxy-favicon,
2235 #identity-box[open=true] > #page-proxy-favicon {
2236 -moz-image-region: rect(0, 48px, 16px, 32px);
2239 #identity-box:hover {
2240 background-color: #FFCF00;
2244 #identity-box:hover:active,
2245 #identity-box[open=true] {
2246 background-color: #FF9F00;
2250 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2251 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2252 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2253 background-color: #9C9CFF;
2257 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2258 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2259 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2260 background-color: #008484;
2266 #treecolAutoCompleteImage {
2270 .ac-result-type-bookmark,
2271 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2272 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2273 -moz-image-region: rect(0px 16px 16px 0px);
2278 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2279 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2280 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2283 .ac-result-type-keyword,
2284 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2285 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2286 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2291 .ac-result-type-keyword[selected="true"],
2292 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2293 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2294 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2297 .ac-result-type-tag,
2298 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2299 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2305 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2306 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2310 .ac-extra > .ac-comment,
2321 richlistitem[type~="action"][actiontype="tab"] > .ac-url-box > .ac-action-icon {
2322 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2323 -moz-image-region: rect(0, 16px, 16px, 0);
2329 @media (min-resolution: 1.1dppx) {
2330 richlistitem[type~="action"][actiontype="tab"] > .ac-url-box > .ac-action-icon {
2331 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2332 -moz-image-region: rect(0, 32px, 32px, 0);
2336 richlistitem[type~="action"][actiontype="tab"][selected="true"] > .ac-url-box > .ac-action-icon {
2337 -moz-image-region: rect(16px, 16px, 32px, 0);
2340 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2344 .ac-comment[selected="true"],
2345 .ac-url-text[selected="true"],
2346 .ac-action-text[selected="true"] {
2347 color: inherit !important;
2350 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2351 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2357 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2358 border-top: 1px solid #9C9CFF;
2361 /* combined go/reload/stop button in location bar */
2364 #urlbar-reload-button,
2365 #urlbar-stop-button {
2367 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2368 /* padding: 0 9px;*/
2369 margin-inline-start: 0px;
2370 border-inline-start: 1px solid var(--urlbar-separator-color);
2371 border-image: linear-gradient(transparent 15%,
2372 var(--urlbar-separator-color) 15%,
2373 var(--urlbar-separator-color) 85%,
2375 border-image-slice: 1;
2378 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2379 border-top-left-radius: 0px;
2380 border-bottom-left-radius: 0px;
2383 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2384 border-top-right-radius: 0px;
2385 border-bottom-right-radius: 0px;
2388 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2389 #urlbar-reload-button:not(:hover) {
2390 -moz-border-start-style: none;
2391 -moz-padding-start: 3px;
2394 #urlbar-reload-button {
2395 -moz-image-region: rect(0px, 14px, 14px, 0px);
2398 #urlbar-reload-button[disabled=true] {
2399 -moz-image-region: rect(28px, 14px, 42px, 0px);
2402 #urlbar-reload-button:not([disabled=true]):hover {
2403 -moz-image-region: rect(14px, 14px, 28px, 0px);
2406 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2407 transform: scaleX(-1);
2411 -moz-image-region: rect(0, 42px, 14px, 28px);
2414 #urlbar-go-button:hover {
2415 -moz-image-region: rect(14px, 42px, 28px, 28px);
2418 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2419 transform: scaleX(-1);
2422 #urlbar-stop-button {
2423 -moz-image-region: rect(0px, 28px, 14px, 14px);
2426 #urlbar-stop-button:hover {
2427 -moz-image-region: rect(14px, 28px, 28px, 14px);
2430 @media (min-resolution: 1.1dppx) {
2432 #urlbar-reload-button,
2433 #urlbar-stop-button {
2434 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2437 #urlbar-go-button > .toolbarbutton-icon,
2438 #urlbar-reload-button > .toolbarbutton-icon,
2439 #urlbar-stop-button > .toolbarbutton-icon {
2444 -moz-image-region: rect(0, 84px, 28px, 56px);
2447 #urlbar-go-button:hover {
2448 -moz-image-region: rect(28px, 84px, 56px, 56px);
2451 #urlbar-go-button:hover:active {
2452 -moz-image-region: rect(56px, 84px, 84px, 56px);
2455 #urlbar-reload-button {
2456 -moz-image-region: rect(0, 28px, 28px, 0);
2459 #urlbar-reload-button:not([disabled]):hover {
2460 -moz-image-region: rect(28px, 28px, 56px, 0);
2463 #urlbar-reload-button:not([disabled]):hover:active {
2464 -moz-image-region: rect(56px, 28px, 84px, 0);
2467 #urlbar-stop-button {
2468 -moz-image-region: rect(0, 56px, 28px, 28px);
2471 #urlbar-stop-button:not([disabled]):hover {
2472 -moz-image-region: rect(28px, 56px, 56px, 28px);
2475 #urlbar-stop-button:hover:active {
2476 -moz-image-region: rect(56px, 56px, 84px, 28px);
2480 /* popup blocker button */
2482 #page-report-button {
2483 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2484 -moz-image-region: rect(0, 16px, 16px, 0);
2487 #page-report-button:hover ,
2488 #page-report-button:hover:active,
2489 #page-report-button[open="true"] {
2490 -moz-image-region: rect(0, 32px, 16px, 16px);
2493 /* Reader mode button */
2495 #reader-mode-button {
2496 list-style-image: url("chrome://browser/skin/readerMode.svg");
2497 -moz-image-region: rect(0, 16px, 16px, 0);
2500 #reader-mode-button:hover,
2501 #reader-mode-button[readeractive]:hover {
2502 -moz-image-region: rect(0, 32px, 16px, 16px);
2505 #reader-mode-button:hover:active,
2506 #reader-mode-button[readeractive] {
2507 -moz-image-region: rect(0, 48px, 16px, 32px);
2510 /* social share panel */
2512 .social-share-frame {
2519 background-color: white;
2520 background-repeat: no-repeat;
2521 background-position: center center;
2523 #share-container[loading] {
2524 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2526 #share-container > browser {
2527 transition: opacity 150ms ease-in-out;
2530 #share-container[loading] > browser {
2534 .social-share-toolbar {
2535 border-bottom: 1px solid #9C9CFF;
2539 #social-share-provider-buttons {
2544 .share-provider-button {
2549 .share-provider-button > .toolbarbutton-text {
2552 .share-provider-button > .toolbarbutton-icon {
2558 /* fixup corners for share panel */
2559 .social-panel > .social-panel-frame {
2560 border-radius: inherit;
2563 #social-share-panel {
2569 .social-share-frame {
2570 border-top-left-radius: 0;
2571 border-bottom-left-radius: inherit;
2572 border-top-right-radius: 0;
2573 border-bottom-right-radius: inherit;
2576 #social-share-panel > .social-share-toolbar {
2577 border-top-left-radius: inherit;
2578 border-top-right-radius: inherit;
2581 #social-share-provider-buttons {
2582 border-top-left-radius: inherit;
2583 border-top-right-radius: inherit;
2586 /* social recommending panel */
2588 #social-mark-button {
2589 -moz-image-region: rect(0, 16px, 16px, 0);
2592 /* bookmarks menu-button */
2594 #bookmarks-menu-button.bookmark-item {
2595 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2596 -moz-image-region: rect(0px 16px 16px 0px);
2599 #bookmarks-menu-button.bookmark-item[starred] {
2600 -moz-image-region: rect(0px 32px 16px 16px);
2603 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2605 padding-bottom: 2px;
2608 #BMB_bookmarksPopup[side="top"],
2609 #BMB_bookmarksPopup[side="bottom"] {
2611 margin-right: -20px;
2614 #BMB_bookmarksPopup[side="left"],
2615 #BMB_bookmarksPopup[side="right"] {
2617 margin-bottom: -20px;
2620 /* bookmarking panel */
2622 #editBookmarkPanelStarIcon {
2623 list-style-image: url("chrome://browser/skin/places/starred48.png");
2628 #editBookmarkPanelStarIcon[unstarred] {
2629 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2632 #editBookmarkPanelTitle {
2636 #editBookmarkPanelHeader,
2637 #editBookmarkPanelContent {
2638 margin-bottom: .5em;
2641 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2642 #editBMPanel_folderTree {
2649 border-top: 1px solid #9C9CFF;
2650 border-bottom-left-radius: 5px;
2651 border-bottom-right-radius: 5px;
2655 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2656 -moz-margin-end: 10px;
2657 vertical-align: middle;
2660 .panel-promo-closebutton {
2661 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2662 -moz-margin-end: -3px;
2666 .panel-promo-closebutton:hover {
2667 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2670 .panel-promo-closebutton:hover:active {
2671 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2674 .panel-promo-closebutton > .toolbarbutton-text {
2678 /* ::::: content area ::::: */
2681 background-color: #9C9CFF;
2686 background-color: #000000;
2690 -moz-margin-start: 0;
2699 -moz-padding-start: 0px;
2702 #sidebar-header > .close-icon {
2703 /* padding: 4px 2px;
2706 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2709 #sidebar-header > .close-icon:hover,
2710 #sidebar-header > .close-icon:hover:active {
2711 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2714 #sidebar-splitter:-moz-locale-dir(ltr),
2715 #sidebar:-moz-locale-dir(ltr) {
2716 border-radius: 0 5px 0 0;
2719 #sidebar-splitter:-moz-locale-dir(rtl),
2720 #sidebar:-moz-locale-dir(rtl) {
2721 border-radius: 5px 0 0 0;
2724 .browserContainer > findbar {
2726 background-color: -moz-dialog;
2727 color: -moz-DialogText;
2736 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2739 #TabsToolbar .toolbar-holder {
2740 background-color: #000000; /* correct effect of being an actual toolbar */
2743 #main-window[disablechrome] #TabsToolbar,
2744 #TabsToolbar[tabsontop="false"] {
2745 border-bottom: 1px solid #008484;
2748 /* === BEGIN tabs.inc.css === */
2751 /* --tab-toolbar-navbar-overlap: 1px; */
2752 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2753 /* --tab-min-height: 31px; */
2756 /* --tab-stroke-background-size: auto 100%; */
2760 .tabs-newtab-button,
2761 #TabsToolbar > #new-tab-button {
2766 padding: 1px 4px 2px;
2769 .tabbrowser-tab:first-of-type {
2770 -moz-margin-start: 2px;
2773 .tabs-newtab-button,
2774 #TabsToolbar > #new-tab-button,
2775 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2776 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2777 border-radius: 8px 8px 0px 0px;
2778 -moz-margin-start: 0;
2781 .tabs-newtab-button:not(:hover),
2782 #TabsToolbar > #new-tab-button:not(:hover),
2783 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2784 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2785 background-color: #C09070;
2788 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2789 .tabbrowser-tab[visuallyselected=true] {
2790 /* position: relative;
2794 .tab-background-middle {
2800 .tab-content[pinned] {
2813 -moz-margin-end: 3px;
2817 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2824 -moz-margin-start: -15px;
2828 .tab-icon-overlay[crashed] {
2829 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2832 .tab-icon-overlay[soundplaying],
2833 .tab-icon-overlay[muted]:not([crashed]) {
2834 border-radius: 10px;
2837 .tab-icon-overlay[soundplaying]:hover,
2838 .tab-icon-overlay[muted]:hover {
2839 background-color: #FFCF00;
2842 .tab-icon-overlay[soundplaying] {
2844 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2847 .tab-icon-overlay[muted]:not([crashed]) {
2848 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2851 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2852 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2856 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2857 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2860 .tab-throbber[busy] {
2861 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2864 .tab-throbber[progress] {
2865 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2868 @media (min-resolution: 1.1dppx) {
2869 .tab-throbber[busy] {
2870 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2873 .tab-throbber[progress] {
2874 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2878 .tab-throbber[pinned],
2879 .tab-icon-image[pinned] {
2880 -moz-margin-start: 2px;
2881 -moz-margin-end: 2px;
2885 /* this needs to add up to the 16px of the icon image */
2887 margin-top: 2px !important;
2888 margin-bottom: 2px !important;
2892 -moz-margin-start: 4px;
2898 .tab-icon-sound[muted] {
2899 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2902 .tab-icon-sound[muted]:hover {
2903 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2906 .tab-icon-sound[muted]:hover:active {
2907 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2910 .tab-icon-sound[soundplaying] {
2911 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2914 .tab-icon-sound[soundplaying]:hover {
2915 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2918 .tab-icon-sound[soundplaying]:hover:active {
2919 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2922 .tab-icon-sound[muted] {
2923 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2926 .tab-icon-sound[muted]:hover {
2927 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2930 .tab-icon-sound[muted]:hover:active {
2931 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2934 .tab-icon-sound[visuallyselected=true][soundplaying] {
2935 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2938 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2939 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2942 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2943 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2946 .tab-icon-sound[visuallyselected=true][muted] {
2947 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2950 .tab-icon-sound[visuallyselected=true][muted]:hover {
2951 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2954 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2955 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2958 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2959 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2962 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2963 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2966 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2967 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2970 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2971 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2974 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2975 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2978 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2979 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2988 .tabs-newtab-button {
2989 /* overlap the tab curves */
2992 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2996 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2997 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3000 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3004 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3007 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3011 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3014 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3015 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3018 .tab-background-start[visuallyselected=true]::after,
3019 .tab-background-start[visuallyselected=true]::before,
3020 .tab-background-start,
3021 .tab-background-end,
3022 .tab-background-end[visuallyselected=true]::after,
3023 .tab-background-end[visuallyselected=true]::before {
3026 .tabbrowser-tab:not([visuallyselected=true]),
3027 .tabbrowser-tab:-moz-lwtheme {
3030 /* tabbrowser-tab focus ring */
3031 .tabbrowser-tab:focus {
3032 outline: 1px dotted;
3037 .tabbrowser-tab[visuallyselected="true"] {
3040 /* End selected tab */
3042 /* User Context UI - change tab decoration depending on userContextId.
3043 Defaults to gray for unknown usercontextids. */
3044 .tabbrowser-tab[usercontextid] {
3045 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3046 background-size: auto 2px;
3047 background-repeat: no-repeat;
3050 /* Personal User Context */
3051 .tabbrowser-tab[usercontextid="1"] {
3052 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3054 /* Work User Context */
3055 .tabbrowser-tab[usercontextid="2"] {
3056 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3058 /* Banking User Context */
3059 .tabbrowser-tab[usercontextid="3"] {
3060 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3062 /* Shopping User Context */
3063 .tabbrowser-tab[usercontextid="4"] {
3064 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3067 /* Tab pointer-events */
3070 pointer-events: none;
3073 .tab-background-middle,
3074 .tabs-newtab-button,
3075 .tab-icon-overlay[soundplaying],
3076 .tab-icon-overlay[muted]:not([crashed]),
3079 pointer-events: auto;
3085 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3086 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3088 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3089 background-color: #E7ADE7;
3092 .tab-label[attention]:not([visuallyselected="true"]) {
3096 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3097 background-color: #3333FF;
3101 /* Tab separators */
3103 .tabbrowser-tab::after,
3104 .tabbrowser-tab::before {
3106 -moz-margin-start: -1px;
3107 background-image: linear-gradient(transparent 5px,
3109 currentColor calc(100% - 4px),
3110 transparent calc(100% - 4px));
3114 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3115 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3119 /* Also show separators beside the selected tab when dragging it. */
3121 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3122 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3123 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3128 /* New tab button */
3130 .tabs-newtab-button {
3132 /* width: calc(36px + var(--tab-curve-width)); */
3135 /* === END tabs.inc.css === */
3139 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3140 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3141 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3143 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3144 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3147 /* Tab DnD indicator */
3148 .tab-drop-indicator {
3149 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3150 margin-bottom: -11px;
3153 /* Tab close button */
3155 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3158 .tab-close-button:hover,
3159 .tab-close-button:hover[selected="true"] {
3160 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3163 .tab-close-button:hover:active,
3164 .tab-close-button:hover:active[selected="true"] {
3165 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3168 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3170 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3171 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3175 background-origin: border-box;
3178 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3179 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3180 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3181 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3184 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3185 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3188 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3189 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3190 /* transform: scaleX(-1);*/
3193 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3194 transition: 1s background-color ease-out;
3197 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3198 background-color: #008484;
3201 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3202 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3203 /* border-width: 0 2px 0 0;
3204 border-style: solid;
3205 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3208 .tabs-newtab-button > .toolbarbutton-icon {
3210 margin-bottom: -1px;
3213 .tabs-newtab-button,
3214 #TabsToolbar > #new-tab-button,
3215 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3216 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3217 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3218 -moz-image-region: auto;
3221 .tabs-newtab-button,
3222 .tabs-newtab-button:hover,
3223 #TabsToolbar > #new-tab-button,
3224 #TabsToolbar > #new-tab-button:hover {
3227 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3228 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3229 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3230 .tabs-newtab-button:-moz-lwtheme-brighttext,
3231 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3232 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3235 #TabsToolbar > #new-tab-button {
3240 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3243 #alltabs-button:hover,
3244 #alltabs-button:hover:active,
3245 #alltabs-button[open="true"] {
3246 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3249 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3250 #alltabs-button:-moz-lwtheme-brighttext {
3253 #alltabs-button > .toolbarbutton-icon {
3257 #alltabs-button > .toolbarbutton-menu-dropmarker {
3261 /* All tabs menupopup */
3262 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3263 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3264 -moz-image-region: auto;
3267 .alltabs-item[selected="true"] {
3271 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3272 list-style-image: url("chrome://global/skin/icons/loading.gif");
3275 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3276 background-color: #402800;
3279 .alltabs-endimage[muted] {
3280 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3283 .alltabs-endimage[soundplaying] {
3284 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3287 toolbarbutton.chevron {
3288 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3291 toolbarbutton.chevron:hover {
3292 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3295 toolbar[brighttext] toolbarbutton.chevron {
3296 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3299 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3300 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3301 transform: scaleX(-1);
3304 toolbarbutton.chevron > .toolbarbutton-text,
3305 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3309 toolbarbutton.chevron > .toolbarbutton-icon {
3313 #sidebar-throbber[loading="true"] {
3314 list-style-image: url("chrome://global/skin/icons/loading.gif");
3315 -moz-margin-end: 4px;
3318 /* Bookmarks toolbar */
3319 #PlacesToolbarDropIndicator {
3320 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3323 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3324 background-color: #008484 !important;
3325 color: #FFCF00 !important;
3328 /* rules for menupopup drop indicators */
3329 .menupopup-drop-indicator-bar {
3331 /* these two margins must together compensate the indicator's height */
3333 margin-bottom: -1px;
3336 .menupopup-drop-indicator {
3337 list-style-image: none;
3339 -moz-margin-end: -4em;
3340 background-color: #008484;
3343 /* === BEGIN notification-icons.inc.css === */
3345 .popup-notification-icon {
3348 -moz-margin-end: 10px;
3351 .popup-notification-icon[popupid="geolocation"] {
3352 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3355 .popup-notification-icon[popupid="xpinstall-disabled"],
3356 .popup-notification-icon[popupid="addon-install-blocked"],
3357 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3358 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3361 .popup-notification-icon[popupid="addon-progress"] {
3362 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3365 .popup-notification-icon[popupid="addon-install-failed"] {
3366 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3369 .popup-notification-icon[popupid="addon-install-confirmation"] {
3370 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3373 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3374 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3377 .popup-notification-icon[popupid="addon-install-complete"] {
3378 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3381 .popup-notification-icon[popupid="addon-install-restart"] {
3382 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3385 .popup-notification-icon[popupid="click-to-play-plugins"] {
3386 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3389 .popup-notification-icon[popupid="web-notifications"] {
3390 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3393 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3394 .popup-notification-icon[popupid*="offline-app-requested"],
3395 .popup-notification-icon[popupid="offline-app-usage"] {
3396 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3399 .popup-notification-icon[popupid="password"] {
3400 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3403 .popup-notification-icon[popupid="webapps-install-progress"],
3404 .popup-notification-icon[popupid="webapps-install"] {
3405 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3408 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3409 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3410 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3413 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3414 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3415 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3418 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3419 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3420 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3423 .popup-notification-icon[popupid="pointerLock"] {
3424 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3427 /* Notification icon box */
3428 #notification-popup .panel-promo-box {
3429 /* margin: 10px -10px -10px; */
3432 #notification-popup-box {
3434 background-color: #000000;
3435 background-clip: padding-box;
3438 border-radius: 3px 0 0 3px;
3439 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3440 -moz-margin-end: -8px;
3441 border-right-width: 8px;
3444 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3445 /* padding-left: 7px; */
3448 /* This changes the direction of the main notification box on the url bar. */
3449 #notification-popup-box:-moz-locale-dir(rtl),
3450 /* This adds a second flip for the notification anchors, as they don't switch direction
3452 .notification-anchor-icon:-moz-locale-dir(rtl) {
3453 transform: scaleX(-1);
3456 /* For the anchor icons in the chat window, we don't have the notification popup box,
3457 so we need to cancel the RTL transform. */
3458 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3462 .notification-anchor-icon {
3463 list-style-image: url("chrome://global/skin/icons/information-16.png");
3470 .notification-anchor-icon:-moz-focusring {
3471 outline: 1px dotted #008484;
3474 .identity-notification-icon,
3475 #identity-notification-icon {
3476 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3479 .geo-notification-icon,
3480 #geo-notification-icon {
3481 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3484 #addons-notification-icon {
3485 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3488 #addons-notification-icon:hover {
3489 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3492 #addons-notification-icon:hover:active {
3493 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3496 .indexedDB-notification-icon,
3497 #indexedDB-notification-icon {
3498 list-style-image: url("chrome://global/skin/icons/question-16.png");
3501 #password-notification-icon {
3502 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3505 #login-fill-notification-icon {
3506 /* Temporary icon until the capture and fill doorhangers are unified. */
3507 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3508 transform: scaleX(-1);
3511 #webapps-notification-icon {
3512 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3515 #plugins-notification-icon {
3516 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3519 #plugins-notification-icon.plugin-hidden {
3520 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3523 #plugins-notification-icon.plugin-blocked {
3524 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3527 #plugins-notification-icon {
3528 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3531 #plugins-notification-icon:hover {
3532 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3535 #notification-popup-box[hidden] {
3536 /* Override display:none to make the pluginBlockedNotification animation work
3537 when showing the notification repeatedly. */
3539 visibility: collapse;
3542 #plugins-notification-icon.plugin-blocked[showing] {
3543 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3546 @keyframes pluginBlockedNotification {
3555 .webRTC-shareDevices-notification-icon,
3556 #webRTC-shareDevices-notification-icon {
3557 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3560 .webRTC-sharingDevices-notification-icon,
3561 #webRTC-sharingDevices-notification-icon {
3562 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3565 .webRTC-shareMicrophone-notification-icon,
3566 #webRTC-shareMicrophone-notification-icon {
3567 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3570 .webRTC-sharingMicrophone-notification-icon,
3571 #webRTC-sharingMicrophone-notification-icon {
3572 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3575 .webRTC-shareScreen-notification-icon,
3576 #webRTC-shareScreen-notification-icon {
3577 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3580 .webRTC-sharingScreen-notification-icon,
3581 #webRTC-sharingScreen-notification-icon {
3582 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3585 .web-notifications-notification-icon,
3586 #web-notifications-notification-icon {
3587 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3588 -moz-image-region: rect(0, 16px, 16px, 0);
3591 .web-notifications-notification-icon:hover,
3592 #web-notifications-notification-icon:hover {
3593 -moz-image-region: rect(0, 32px, 16px, 16px);
3596 .web-notifications-notification-icon:hover:active,
3597 #web-notifications-notification-icon:hover:active {
3598 -moz-image-region: rect(0, 48px, 16px, 32px);
3601 #pointerLock-notification-icon {
3602 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3605 .translate-notification-icon,
3606 #translate-notification-icon {
3607 list-style-image: url("chrome://browser/skin/translation-16.png");
3608 -moz-image-region: rect(0px, 16px, 16px, 0px);
3611 .translated-notification-icon,
3612 #translated-notification-icon {
3613 list-style-image: url("chrome://browser/skin/translation-16.png");
3614 -moz-image-region: rect(0px, 32px, 16px, 16px);
3617 .popup-notification-icon[popupid="servicesInstall"] {
3618 list-style-image: url("chrome://browser/skin/social/services-64.png");
3620 #servicesInstall-notification-icon {
3621 list-style-image: url("chrome://browser/skin/social/services-16.png");
3624 /* EME notifications */
3626 .popup-notification-icon[popupid="drmContentPlaying"],
3627 #eme-notification-icon {
3628 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3631 #eme-notification-icon:hover:active {
3632 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3635 #eme-notification-icon[firstplay=true] {
3636 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3639 @keyframes emeTeachingMoment {
3640 0% {transform: translateX(0); }
3641 25% {transform: translateX(3px) }
3642 75% {transform: translateX(-3px) }
3643 100% { transform: translateX(0); }
3646 /* HiDPI notification icons */
3647 @media (min-resolution: 1.1dppx) {
3648 /* #notification-popup-box {
3649 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3652 .notification-anchor-icon {
3653 list-style-image: url(chrome://global/skin/icons/information-32.png);
3656 .webRTC-shareDevices-notification-icon,
3657 #webRTC-shareDevices-notification-icon {
3658 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3661 .webRTC-sharingDevices-notification-icon,
3662 #webRTC-sharingDevices-notification-icon {
3663 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3666 .webRTC-shareMicrophone-notification-icon,
3667 #webRTC-shareMicrophone-notification-icon {
3668 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3671 .webRTC-sharingMicrophone-notification-icon,
3672 #webRTC-sharingMicrophone-notification-icon {
3673 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3676 .webRTC-shareScreen-notification-icon,
3677 #webRTC-shareScreen-notification-icon {
3678 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3681 .webRTC-sharingScreen-notification-icon,
3682 #webRTC-sharingScreen-notification-icon {
3683 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3686 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3687 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3688 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3691 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3692 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3693 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3696 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3697 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3698 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3702 /* === END notification-icons.inc.css === */
3704 .popup-notification-body[popupid="addon-progress"],
3705 .popup-notification-body[popupid="addon-install-confirmation"] {
3710 /* Translation infobar */
3712 /* === BEGIN infobar.inc.css === */
3714 notification[value="translation"] .messageImage {
3715 list-style-image: url("chrome://browser/skin/translation-16.png");
3716 -moz-image-region: rect(0, 32px, 16px, 16px);
3719 @media (min-resolution: 1.25dppx) {
3720 notification[value="translation"] .messageImage {
3721 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3722 -moz-image-region: rect(0, 64px, 32px, 32px);
3726 notification[value="translation"][state="translating"] .messageImage {
3727 list-style-image: url("chrome://browser/skin/translating-16.png");
3728 -moz-image-region: auto;
3731 @media (min-resolution: 1.25dppx) {
3732 notification[value="translation"][state="translating"] .messageImage {
3733 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3737 notification[value="translation"] hbox[anonid="details"] {
3741 notification[value="translation"] button,
3742 notification[value="translation"] menulist {
3746 notification[value="translation"] menulist > .menulist-dropmarker {
3749 .translation-menupopup arrowscrollbox {
3753 .translation-attribution {
3755 -moz-box-align: end;
3759 .translation-attribution > label {
3763 .translation-attribution > image {
3767 .translation-welcome-panel {
3771 .translation-welcome-logo {
3774 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3775 -moz-image-region: rect(0, 64px, 32px, 32px);
3778 .translation-welcome-content {
3779 -moz-margin-start: 16px;
3782 .translation-welcome-headline {
3787 .translation-welcome-body {
3792 /* === END infobar.inc.css === */
3794 notification[value="translation"] {
3798 .translation-menupopup {
3799 -moz-appearance: none;
3802 /* Loop/ Hello browser styles */
3804 notification[value="loop-sharing-notification"] .button-menubutton-button {
3810 notification[value="loop-sharing-notification"] .messageImage {
3811 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3814 /* Bookmarks roots menu-items */
3815 #subscribeToPageMenuitem:not([disabled]),
3816 #subscribeToPageMenupopup,
3817 #BMB_subscribeToPageMenuitem:not([disabled]),
3818 #BMB_subscribeToPageMenupopup {
3819 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3822 #bookmarksToolbarFolderMenu,
3823 #BMB_bookmarksToolbar,
3824 #panelMenu_bookmarksToolbar {
3825 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3826 -moz-image-region: auto;
3829 #BMB_unsortedBookmarks,
3830 #panelMenu_unsortedBookmarks {
3831 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3832 -moz-image-region: auto;
3835 /* ::::: Keyboard UI Panel ::::: */
3840 border-radius: 20px;
3843 .KUI-panel[level="top"] {
3844 /*background-color: rgba(27%,27%,27%,.65);*/
3850 padding: 20px 10px 10px;
3854 .ctrlTab-favicon[src] {
3855 background-color: #000000;
3861 .ctrlTab-preview-inner > .tabPreview-canvas {
3864 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3868 .ctrlTab-preview-inner {
3869 padding-bottom: 10px;
3872 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3874 background-color: #000000;
3875 border-radius: .5em;
3878 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3880 background-color: #000000;
3883 border: 2px solid #9C9CFF;
3884 border-radius: .5em;
3887 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3888 margin: -10px -10px 0;
3900 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3908 .sync-panel-button-box {
3912 #sync-start-panel-title {
3918 #sync-start-panel-subtitle {
3924 .statuspanel-label {
3927 background: #404000;
3928 border: 1px none #9C9CFF;
3929 border-top-style: solid;
3934 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3935 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3936 border-right-style: solid;
3937 border-top-right-radius: .3em;
3941 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3942 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3943 border-left-style: solid;
3944 border-top-left-radius: .3em;
3948 /* HACK to abolish devily color on main content */
3951 background-color: transparent !important;
3954 /* === BEGIN fullscreen/warning.inc.css === */
3956 html|*#fullscreen-warning {
3957 align-items: center;
3958 background: rgba(0, 0, 0, 0.9);
3959 border: 2px solid #A09090;
3960 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3963 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3966 html|*#fullscreen-warning::before {
3968 width: 24px; height: 24px;
3971 html|*#fullscreen-warning.verifiedIdentity::before,
3972 html|*#fullscreen-warning.verifiedDomain::before {
3973 content: url("chrome://browser/skin/fullscreen/secure.svg");
3976 html|*#fullscreen-warning.unknownIdentity::before {
3977 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3980 html|*#fullscreen-domain-text,
3981 html|*#fullscreen-generic-text {
3983 font-weight: lighter;
3988 html|*#fullscreen-domain {
3993 html|*#fullscreen-exit-button {
3995 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3997 font-weight: lighter;
3999 box-sizing: content-box;
4001 border-radius: 300px;
4003 background-color: #C09070;
4007 /* === END fullscreen/warning.inc.css === */
4009 /* === BEGIN commandline.inc.css === */
4011 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4012 We are copy/pasting variables from light-theme and dark-theme,
4013 since they aren't loaded in this context (within browser.css). */
4014 :root #developer-toolbar {
4015 --gcli-background-color: #000000; /* --theme-toolbar-background */
4016 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4017 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4018 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4019 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4020 --selection-background: #008484; /* --theme-selection-background */
4021 --selection-color: #000000; /* --theme-selection-color */
4024 /* Developer toolbar */
4026 #developer-toolbar {
4027 border-top: 3px solid var(--gcli-background-color);
4028 border-bottom: none;
4031 #developer-toolbar .toolbar-holder {
4032 background-color: #8050B0;
4036 #developer-toolbar .toolbar-holder {
4037 background-color: #8050B0;
4041 #developer-toolbar .toolbar-startcap,
4042 #developer-toolbar .toolbar-endcap{
4043 background-color: #6000CF;
4046 #developer-toolbar {
4048 min-height: 32px; */
4051 #developer-toolbar > toolbarbutton {
4057 .developer-toolbar-button > image {
4058 /* margin: auto 10px; */
4061 #developer-toolbar-toolbox-button > label {
4065 .developer-toolbar-button > .toolbarbutton-icon,
4066 #developer-toolbar-closebutton > .toolbarbutton-icon {
4071 #developer-toolbar-toolbox-button {
4072 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
4073 -moz-image-region: rect(0px, 16px, 16px, 0px);
4076 #developer-toolbar-toolbox-button > label {
4080 #developer-toolbar-toolbox-button:hover,
4081 #developer-toolbar-toolbox-button:hover:active,
4082 #developer-toolbar-toolbox-button[checked=true] {
4083 -moz-image-region: rect(0px, 32px, 16px, 16px);
4086 @media (min-resolution: 2dppx) {
4087 #developer-toolbar-toolbox-button {
4088 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
4089 -moz-image-region: rect(0px, 32px, 32px, 0px);
4092 #developer-toolbar-toolbox-button:hover,
4093 #developer-toolbar-toolbox-button:hover:active,
4094 #developer-toolbar-toolbox-button[checked=true] {
4095 -moz-image-region: rect(0px, 64px, 32px, 32px);
4099 #developer-toolbar-closebutton {
4100 list-style-image: url("chrome://devtools/skin/close.png");
4101 -moz-image-region: rect(0px, 16px, 16px, 0px);
4106 #developer-toolbar-closebutton > .toolbarbutton-icon {
4109 #developer-toolbar-closebutton > .toolbarbutton-text {
4113 #developer-toolbar-closebutton:hover,
4114 #developer-toolbar-closebutton:hover:active {
4115 -moz-image-region: rect(0px, 32px, 16px, 16px);
4118 @media (min-resolution: 2dppx) {
4119 #developer-toolbar-closebutton {
4120 list-style-image: url("chrome://devtools/skin/close@2x.png");
4121 -moz-image-region: rect(0px, 32px, 32px, 0px);
4124 #developer-toolbar-closebutton:hover,
4125 #developer-toolbar-closebutton:hover:active {
4126 -moz-image-region: rect(0px, 64px, 32px, 32px);
4132 html|*#gcli-tooltip-frame,
4133 html|*#gcli-output-frame {
4136 background-color: transparent;
4142 background-color: transparent;
4145 .gclitoolbar-input-node,
4146 .gclitoolbar-complete-node {
4148 -moz-box-align: center;
4152 background-color: transparent;
4155 .gclitoolbar-input-node {
4156 /* line-height: 32px;
4157 outline-style: none; */
4158 background-repeat: no-repeat;
4159 background-color: var(--gcli-input-background);
4162 .gclitoolbar-input-node[focused="true"] {
4163 background-color: var(--gcli-input-focused-background);
4166 .gclitoolbar-input-node::before {
4168 display: inline-block;
4169 -moz-box-ordinal-group: 0;
4173 background-image: url("chrome://devtools/skin/commandline-icon.png");
4174 background-position: 0 center;
4175 background-size: 32px 16px;
4178 .gclitoolbar-input-node[focused="true"]::before {
4179 background-position: -16px center;
4182 @media (min-resolution: 2dppx) {
4183 .gclitoolbar-input-node::before {
4184 background-image: url("chrome://devtools/skin/commandline-icon@2x.png");
4188 .gclitoolbar-input-node:not([focused="true"]) {
4189 border-color: transparent;
4192 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4193 background-color: var(--selection-background);
4194 color: var(--selection-color);
4197 .gclitoolbar-complete-node {
4199 background-color: transparent;
4202 pointer-events: none;
4205 .gcli-in-incomplete,
4209 .gcli-in-closebrace,
4216 .gcli-in-incomplete {
4217 border-bottom: 2px dotted #8050B0;
4221 border-bottom: 2px dotted #FF0000;
4232 .gcli-in-closebrace {
4236 /* === END commandline.inc.css === */
4238 /* === BEGIN responsivedesign.inc.css === */
4240 /* Responsive Mode */
4242 .browserContainer[responsivemode] {
4243 background-color: #221500;
4244 padding: 0 20px 20px 20px;
4247 .browserStack[responsivemode] {
4248 box-shadow: 0 0 7px #9C9CFF;
4251 .devtools-responsiveui-toolbar {
4252 background: transparent;
4253 /* text color is textColor from dark theme, since no theme is applied to
4254 * the responsive toolbar.
4260 border-bottom-width: 0;
4263 .devtools-responsiveui-menulist,
4264 .devtools-responsiveui-toolbarbutton {
4265 -moz-box-align: center;
4267 /* min-height: 22px;*/
4268 /* margin: 0 3px; */
4271 .devtools-responsiveui-menulist .menulist-editable-box {
4272 background-color: transparent;
4275 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4280 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4281 /* background: hsla(212,7%,57%,.35);*/
4284 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4289 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4290 -moz-box-orient: horizontal;
4293 .devtools-responsiveui-menulist:-moz-focusring,
4294 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4295 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4296 outline-offset: -4px;*/
4299 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4303 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4304 /* border-color: hsla(210,8%,5%,.6);
4305 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4306 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); */
4309 .devtools-responsiveui-menulist[open=true],
4310 .devtools-responsiveui-toolbarbutton[open=true],
4311 .devtools-responsiveui-toolbarbutton[checked=true] {
4312 /* border-color: hsla(210,8%,5%,.6) !important;
4313 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4314 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); */
4317 .devtools-responsiveui-toolbarbutton[checked=true] {
4318 /* color: hsl(208,100%,60%); */
4321 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4322 /* background-color: transparent !important;*/
4325 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4326 /* background-color: hsla(210,8%,5%,.2) !important;*/
4329 .devtools-responsiveui-menulist > .menulist-label-box {
4333 .devtools-responsiveui-menulist > .menulist-dropmarker {
4334 /* display: -moz-box;
4335 background-color: transparent;
4336 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4337 -moz-box-align: center;
4342 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4345 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4346 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4349 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4350 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4353 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4354 /* padding: 0 1px;*/
4355 -moz-box-align: stretch;
4358 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4359 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4360 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4361 -moz-box-align: center;
4365 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4366 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4370 .devtools-responsiveui-close {
4371 list-style-image: url("chrome://devtools/skin/close.png");
4372 -moz-image-region: rect(0px,16px,16px,0px);
4375 .devtools-responsiveui-close:hover {
4376 -moz-image-region: rect(0px,32px,16px,16px);
4379 .devtools-responsiveui-rotate {
4380 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4381 -moz-image-region: rect(0px,16px,16px,0px);
4384 .devtools-responsiveui-rotate:hover {
4385 -moz-image-region: rect(0px,32px,16px,16px);
4388 @media (min-resolution: 2dppx) {
4389 .devtools-responsiveui-close {
4390 list-style-image: url("chrome://devtools/skin/close@2x.png");
4393 .devtools-responsiveui-close:hover {
4394 -moz-image-region: rect(0px,64px,32px,32px);
4397 .devtools-responsiveui-rotate {
4398 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4401 .devtools-responsiveui-rotate:hover {
4402 -moz-image-region: rect(0px,64px,32px,32px);
4406 .devtools-responsiveui-touch {
4407 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4408 -moz-image-region: rect(0px,16px,16px,0px);
4411 .devtools-responsiveui-touch:hover,
4412 .devtools-responsiveui-touch[checked],
4413 .devtools-responsiveui-touch[checked]:hover {
4414 -moz-image-region: rect(0px,32px,16px,16px);
4417 @media (min-resolution: 2dppx) {
4418 .devtools-responsiveui-touch {
4419 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4420 -moz-image-region: rect(0px,32px,32px,0px);
4423 .devtools-responsiveui-touch:hover,
4424 .devtools-responsiveui-touch[checked],
4425 .devtools-responsiveui-touch[checked]:hover {
4426 -moz-image-region: rect(0px,64px,32px,32px);
4430 .devtools-responsiveui-screenshot {
4431 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4432 -moz-image-region: rect(0px,16px,16px,0px);
4435 .devtools-responsiveui-screenshot:hover {
4436 -moz-image-region: rect(0px,32px,16px,16px);
4439 @media (min-resolution: 2dppx) {
4440 .devtools-responsiveui-screenshot {
4441 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4444 .devtools-responsiveui-screenshot:hover {
4445 -moz-image-region: rect(0px,64px,32px,32px);
4449 .devtools-responsiveui-resizebarV {
4453 transform: translate(12px, -12px);
4454 background-size: cover;
4455 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4458 .devtools-responsiveui-resizebarH {
4462 transform: translate(-12px, 12px);
4463 background-size: cover;
4464 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4467 .devtools-responsiveui-resizehandle {
4471 transform: translate(12px, 12px);
4472 background-size: cover;
4473 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4476 /* FxOS custom mode with additional buttons and phone look'n feel */
4478 /* Hide devtools manual resizer */
4479 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4480 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4481 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4485 /* Gives responsive mode a phone look'n feel */
4486 .browserStack[responsivemode].fxos-mode {
4487 padding: 60px 15px 0;
4489 border-radius: 25px / 20px;
4490 border-bottom-left-radius: 0;
4491 border-bottom-right-radius: 0;
4492 border: 1px solid #FFFFFF;
4493 border-bottom-width: 0;
4495 background-color: #353535;
4497 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4499 background-image: linear-gradient(to right, #111 11%, #333 56%);
4503 .devtools-responsiveui-hardware-buttons {
4504 -moz-appearance: none;
4507 border: 1px solid #FFFFFF;
4508 border-bottom-left-radius: 25px;
4509 border-bottom-right-radius: 25px;
4510 border-top-width: 0;
4512 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4514 background-image: linear-gradient(to right, #111 11%, #333 56%);
4517 .devtools-responsiveui-home-button {
4518 -moz-user-focus: ignore;
4521 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4524 .devtools-responsiveui-sleep-button {
4525 -moz-user-focus: ignore;
4526 -moz-appearance: none;
4527 /* compensate browserStack top padding */
4535 border: 1px solid #444;
4536 border-top-right-radius: 12px;
4537 border-top-left-radius: 12px;
4538 border-bottom-color: transparent;
4540 background-image: linear-gradient(to top, #111 11%, #333 56%);
4543 .devtools-responsiveui-sleep-button:hover:active {
4544 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4547 .devtools-responsiveui-volume-buttons {
4551 .devtools-responsiveui-volume-up-button,
4552 .devtools-responsiveui-volume-down-button {
4553 -moz-user-focus: ignore;
4554 -moz-appearance: none;
4555 border: 1px solid red;
4559 border: 1px solid #444;
4560 border-right-color: transparent;
4562 background-image: linear-gradient(to right, #111 11%, #333 56%);
4565 .devtools-responsiveui-volume-up-button:hover:active,
4566 .devtools-responsiveui-volume-down-button:hover:active {
4567 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4570 .devtools-responsiveui-volume-up-button {
4571 border-top-left-radius: 12px;
4574 .devtools-responsiveui-volume-down-button {
4575 border-bottom-left-radius: 12px;
4578 @media (min-resolution: 2dppx) {
4579 .devtools-responsiveui-resizebarV {
4580 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4583 .devtools-responsiveui-resizebarH {
4584 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4587 .devtools-responsiveui-resizehandle {
4588 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4592 /* === END responsivedesign.inc.css === */
4594 /* === including indicator.css is done at the start of the file === */
4598 #developer-toolbar-toolbox-button[error-count]:before {
4602 background-color: #FF0000;
4604 -moz-margin-end: 5px;
4607 /* Social toolbar item */
4609 #social-notification-icon-mentions {
4610 background-color: #000000;
4612 -moz-margin-start: 2px;
4615 #social-notification-icon-mentions:hover {
4616 background-color: #FFCF00;
4619 #social-notification-icon-mentions[open="true"] {
4620 background-color: #FF9F00;
4623 #social-sidebar-splitter {
4627 #socialActivatedNotification .popup-notification-button-container {
4631 .social-activation-icon {
4638 #social-activation-message {
4642 #social-activation-message > label {
4646 /* social toolbar provider menu */
4647 .social-statusarea-popup {
4650 margin-right: -12px;
4653 .social-statusarea-user {
4654 border-bottom: 1px solid #9C9CFF;
4655 background-color: #000000;
4661 .social-statusarea-user-portrait {
4668 .social-statusarea-loggedInStatus {
4669 background: transparent;
4674 list-style-image: none;
4677 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4678 text-decoration: underline;
4681 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4685 .social-panel-frame {
4686 border-radius: inherit;
4689 /* === BEGIN chat.inc.css === */
4691 #social-sidebar-header {
4695 #manage-share-providers,
4696 #social-sidebar-button {
4697 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4698 -moz-image-region: rect(0, 468px, 18px, 450px);
4701 #social-sidebar-button {
4702 -moz-appearance: none;
4707 #manage-share-providers > .toolbarbutton-icon,
4708 #social-sidebar-button > .toolbarbutton-icon {
4712 #manage-share-providers:hover,
4713 #manage-share-providers:hover:active,
4714 #social-sidebar-button:hover,
4715 #social-sidebar-button:hover:active {
4716 -moz-image-region: rect(18px, 468px, 36px, 450px);
4718 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4722 #social-sidebar-button[loading="true"] {
4723 list-style-image: url("chrome://global/skin/icons/loading.gif");
4726 #social-sidebar-favico {
4739 .chat-toolbarbutton {
4740 -moz-appearance: none;
4747 .chat-toolbarbutton > .toolbarbutton-text {
4751 .chat-toolbarbutton > .toolbarbutton-icon {
4756 .chat-close-button {
4757 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4760 .chat-close-button:hover {
4761 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4764 .chat-close-button:hover:active {
4765 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4768 .chat-minimize-button {
4769 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4772 .chat-minimize-button:hover {
4773 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4776 .chat-minimize-button:hover:active {
4777 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4781 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4782 transform: rotate(180deg);
4785 .chat-swap-button:hover {
4786 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4789 .chat-swap-button:hover:active {
4790 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4793 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4797 chatbox[src^="about:loopconversation#"] .chat-minimize-button {
4798 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
4801 chatbox[src^="about:loopconversation#"] .chat-swap-button {
4802 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
4806 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4807 background-color: #FF0000;
4808 border: 1px solid #FFC000;
4809 border-top-right-radius: 4px;
4813 margin-bottom: -5px;
4814 -moz-margin-start: 6px;
4815 -moz-margin-end: -5px;
4818 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4819 background-color: #FFCF00;
4820 border-color: #FF0000;
4829 chatbox[src^="about:loopconversation#"] .chat-title {
4834 background-color: #9C9CFF;
4841 border: 1px solid #008484;
4843 border-top-left-radius: 4px;
4844 border-top-right-radius: 4px;
4846 background-color: #A09090;
4849 .chat-titlebar[selected] {
4850 background-color: #008484;
4853 chatbox[src^="about:loopconversation#"] > .chat-titlebar {
4854 background-color: #008484;
4855 border-color: #008484;
4858 .chat-titlebar > .notification-anchor-icon {
4863 .chat-titlebar[minimized="true"] {
4864 border-bottom: none;
4867 .chat-titlebar[selected] {
4868 background-color: #008484;
4871 .chat-titlebar[activity] {
4872 background-color: #E7ADE7;
4882 list-style-image: url("chrome://browser/skin/social/services-16.png");
4883 background-color: #000000;
4889 border-top: 1px solid #008484;
4890 -moz-border-end: 1px solid #008484;
4893 @media (min-resolution: 2dppx) {
4895 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4899 .chatbar-button:hover {
4900 background-color: #FFCF00;
4902 .chatbar-button[open="true"] {
4903 background-color: #FF9F00;
4906 .chatbar-button[activity]:not([open]) {
4907 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%);
4910 .chatbar-button > .toolbarbutton-icon {
4914 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4921 .chatbar-button > .toolbarbutton-icon {
4925 .chatbar-button:hover > .toolbarbutton-icon,
4926 .chatbar-button[open="true"] > .toolbarbutton-icon {
4930 .chatbar-button:hover,
4931 .chatbar-button[open="true"] {
4934 .chatbar-button > .toolbarbutton-text,
4935 .chatbar-button > .toolbarbutton-menu-dropmarker {
4939 .chatbar-button[activity]:not([open="true"]) {
4940 background-color: #E7ADE7;
4943 .chatbar-button > menupopup > menuitem[activity] {
4948 background: transparent;
4953 -moz-margin-end: 20px;
4957 -moz-margin-start: 4px;
4958 background-color: transparent;
4962 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4964 /* border-top-left-radius: 4px;
4965 border-top-right-radius: 4px;*/
4966 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4968 /* -moz-margin-end: 5px;*/
4971 chatbox[minimized="true"] {
4977 -moz-margin-start: 0px;
4983 /* === END chat.inc.css === */
4985 /* === BEGIN plugin-doorhanger.inc.css === */
4988 * Plugin Doorhanger Styles
4991 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4992 padding: 6px 1px 2px;
4995 .click-to-play-plugins-notification-center-box {
4998 .plugin-popupnotification-centeritem:nth-child(odd) {
4999 /* background-color: rgba(0,0,0,0.1);*/
5002 .center-item-label {
5004 text-overflow: ellipsis;
5007 .center-item-warning-icon {
5008 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5009 background-repeat: no-repeat;
5012 -moz-margin-start: 6px;
5015 .click-to-play-plugins-notification-button-container {
5018 .click-to-play-popup-button {
5022 .click-to-play-plugins-notification-description-box {
5026 padding-bottom: 3px;
5029 .click-to-play-plugins-outer-description {
5033 .click-to-play-plugins-notification-link,
5038 .messageImage[value="plugin-hidden"] {
5039 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5042 /* Keep any changes to this style in sync with pluginProblem.css */
5043 notification.pluginVulnerable {
5046 notification.pluginVulnerable .messageImage {
5047 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5050 /* === END plugin-doorhanger.inc.css === */
5052 /* === BEGIN login-doorhanger.inc.css === */
5054 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5055 /* Since we display a sliding subview that extends to the border, we cannot
5056 * keep the default padding of arrow panels. We use the same padding in the
5057 * individual content views instead. Since we removed the padding, we also
5058 * have to ensure the contents are clipped to the border box. */
5063 #login-fill-mainview,
5064 #login-fill-details {
5065 padding: var(--panel-arrowcontent-padding);
5068 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5069 transform: translateX(-14px);
5072 #login-fill-mainview,
5073 #login-fill-details {
5074 transition: transform 150ms;
5077 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5078 transform: translateX(105%);
5081 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5082 transform: translateX(-105%);
5085 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5086 background-color: hsla(240,39%,100%,.1);
5089 #login-fill-testing {
5095 border: 1px solid #9C9CFF;
5099 .login-fill-item[disabled] {
5101 background-color: #000000;
5104 .login-fill-item[disabled][selected] {
5105 background-color: #008484;
5113 .login-fill-item.different-hostname > .login-hostname {
5123 #login-fill-details {
5125 background: var(--panel-arrowcontent-background);
5126 color: var(--panel-arrowcontent-color);
5127 background-clip: padding-box;
5128 border-left: 1px solid #9C9CFF;
5129 -moz-margin-start: 38px;
5132 /* === END login-doorhanger.inc.css === */
5134 /* === BEGIN customizeMode.inc.css === */
5136 /* Customization mode */
5138 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5142 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5143 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5144 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5149 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5150 pointer-events: none;
5153 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5154 #PanelUI-contents > .panel-customization-placeholder {
5155 -moz-outline-radius: 2.5px;
5156 outline: 1px dashed transparent;
5159 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5160 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5161 -moz-box-ordinal-group: 0;
5166 outline-offset: -2px;
5167 pointer-events: none;
5173 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5174 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5175 offset from the bottom effectively the same as other targets (-2px). */
5176 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5180 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5181 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5182 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5183 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5187 /* Most target outlines are shown on hover and drag over but the panel menu uses
5188 placeholders instead. */
5189 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5190 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5191 /* nav-bar and panel outlines are always shown */
5192 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5193 outline-color: #A09090;
5196 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5197 transition: outline-color 250ms linear;
5200 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5201 transition: outline-color 250ms linear;
5202 outline-color: #9C9CFF;
5205 #PanelUI-contents > .panel-customization-placeholder {
5207 outline-offset: -5px;
5210 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5212 /* padding-left: 10px;
5213 padding-right: 10px;*/
5216 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5220 #customization-container {
5221 background-color: #000000;
5225 #customization-palette,
5226 #customization-empty {
5227 padding: 0 15px 15px;
5230 #customization-header {
5232 line-height: 1.75em;
5235 margin: 25px 25px 12px;
5236 padding-bottom: 12px;
5237 border-bottom: 1px solid #A09090;
5240 #customization-panel-container {
5241 padding: 10px 10px 0px;
5244 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5245 #customization-footer {
5246 /*background-color: rgb(236,236,236);*/
5249 #customization-footer {
5250 border-top: 1px solid #9C9CFF;
5254 .customizationmode-button {
5258 .customizationmode-button:hover {
5261 #customization-titlebar-visibility-button[checked],
5262 #customization-devedition-theme-button[checked] {
5263 background-color: #008484;
5266 #customization-titlebar-visibility-button[checked]:hover,
5267 #customization-devedition-theme-button[checked]:hover {
5268 background-color: #FFCF00;
5271 #customization-titlebar-visibility-button[checked]:hover:active,
5272 #customization-devedition-theme-button[checked]:hover:active {
5273 background-color: #FF9F00;
5276 .customizationmode-button[disabled="true"] {
5279 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5280 .customizationmode-button > .button-box > .button-icon {
5284 #customization-titlebar-visibility-button {
5285 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5286 -moz-image-region: rect(0, 16px, 16px, 0);
5289 #customization-titlebar-visibility-button:hover {
5290 -moz-image-region: rect(16px, 16px, 32px, 0);
5293 #customization-lwtheme-button,
5294 #customization-titlebar-visibility-button {
5298 #customization-titlebar-visibility-button > .button-box {
5300 padding-bottom: 1px;
5303 #customization-titlebar-visibility-button:hover:active > .button-box {
5308 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5309 #customization-titlebar-visibility-button > .button-box > .button-text {
5310 /* Sadly, button.css thinks its margins are perfect for everyone. */
5311 -moz-margin-start: 5px !important;
5314 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5318 background-size: contain;
5321 #customization-titlebar-visibility-button > .button-box > .button-icon {
5322 vertical-align: middle;
5325 #customization-titlebar-visibility-button[checked] {
5326 -moz-image-region: rect(0, 32px, 16px, 16px);
5327 background-color: #008484;
5330 #customization-titlebar-visibility-button[checked]:hover {
5331 -moz-image-region: rect(16px, 32px, 32px, 16px);
5332 background-color: #FFCF00;
5335 #customization-titlebar-visibility-button[checked]:hover:active {
5336 background-color: #FF9F00;
5339 @media (min-resolution: 1.1dppx) {
5340 #customization-titlebar-visibility-button {
5341 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5342 -moz-image-region: rect(0, 48px, 48px, 0);
5345 #customization-titlebar-visibility-button:hover {
5346 -moz-image-region: rect(48px, 48px, 96px, 0);
5349 #customization-titlebar-visibility-button[checked] {
5350 -moz-image-region: rect(0, 96px, 48px, 48px);
5353 #customization-titlebar-visibility-button[checked]:hover {
5354 -moz-image-region: rect(48px, 96px, 96px, 48px);
5358 #main-window[customize-entered] #customization-panel-container {
5359 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5360 background-position: left top;
5361 background-repeat: repeat;
5362 background-size: auto;
5363 background-attachment: fixed;
5366 toolbarpaletteitem[place="toolbar"] {
5367 transition: border-width 250ms ease-in-out;
5370 toolbarpaletteitem[mousedown] {
5371 outline: 1px solid #008484;
5372 cursor: -moz-grabbing;
5376 .panel-customization-placeholder,
5377 toolbarpaletteitem[place="palette"],
5378 toolbarpaletteitem[place="panel"] {
5379 transition: transform .3s ease-in-out;
5382 #customization-palette {
5383 transition: opacity .3s ease-in-out;
5387 #customization-palette[showing="true"] {
5391 toolbarpaletteitem[notransition].panel-customization-placeholder,
5392 toolbarpaletteitem[notransition][place="toolbar"],
5393 toolbarpaletteitem[notransition][place="palette"],
5394 toolbarpaletteitem[notransition][place="panel"] {
5398 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5399 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5400 toolbarpaletteitem > toolbaritem.panel-wide-item,
5401 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5402 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5405 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5406 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5407 transform: scale(1.3);
5410 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5411 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5412 transform: scale(1.1);
5415 /* Override the toolkit styling for items being dragged over. */
5416 toolbarpaletteitem[place="toolbar"] {
5417 border-left-width: 0;
5418 border-right-width: 0;
5423 #customization-palette:not([hidden]) {
5424 margin-bottom: 25px;
5427 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5428 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5429 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5430 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5434 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5435 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5445 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5446 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5450 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5451 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5454 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5455 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5459 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5460 -moz-box-pack: center;
5464 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5465 -moz-margin-end: 5px;
5468 #customization-palette > toolbarpaletteitem > label {
5474 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5475 -moz-box-orient: vertical;
5476 /* Make the panel padding uniform across all platforms due to the
5477 styling of the section headers and footer. */
5481 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5486 .customization-lwtheme-menu-theme {
5487 -moz-appearance: none;
5490 -moz-padding-end: 5px;
5492 -moz-padding-start: 0;
5495 .customization-lwtheme-menu-theme[defaulttheme] {
5496 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5499 .customization-lwtheme-menu-theme[active="true"] {
5500 background-color: #008484;
5503 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5507 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5511 #customization-lwtheme-menu-header,
5512 #customization-lwtheme-menu-recommended {
5517 #customization-lwtheme-menu-header,
5518 #customization-lwtheme-menu-recommended,
5519 #customization-lwtheme-menu-footer {
5520 background-color: #A09090;
5522 margin-right: -10px;
5526 #customization-lwtheme-menu-header {
5528 border-top-right-radius: 3px;
5529 border-top-left-radius: 3px;
5532 #customization-lwtheme-menu-recommended {
5535 #customization-lwtheme-menu-footer {
5536 margin-bottom: -10px;
5537 border-bottom-right-radius: 3px;
5538 border-bottom-left-radius: 3px;
5541 .customization-lwtheme-menu-footeritem {
5542 -moz-appearance: none;
5544 background-color: #C09070;
5546 border: 1px solid transparent;
5552 .customization-lwtheme-menu-footeritem:hover {
5553 background-color: #FFCF00;
5556 .customization-lwtheme-menu-footeritem:first-child {
5559 /* === END customizeMode.inc.css === */
5561 /* === BEGIN customizeTip.inc.css === */
5563 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5570 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5571 border: 1px solid #9C9CFF;
5575 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5576 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5579 .customization-tipPanel-infoBox {
5580 margin: 20px 25px 25px;
5582 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5583 background-repeat: no-repeat;
5586 .customization-tipPanel-content {
5592 .customization-tipPanel-em {
5597 .customization-tipPanel-contentImage {
5599 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5607 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5608 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5611 .customization-tipPanel-link {
5612 -moz-appearance: none;
5613 background: transparent;
5621 .customization-tipPanel-link > .button-box > .button-text {
5622 margin: 0 !important;
5625 .customization-tipPanel-closeBox > .close-icon {
5626 -moz-appearance: none;
5628 -moz-margin-end: -25px;
5631 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5632 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5633 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5636 /* === END customizeTip.inc.css === */
5639 * This next rule is a hack to disable subpixel anti-aliasing on all
5640 * labels during the customize mode transition. Subpixel anti-aliasing
5641 * on Windows with Direct2D layers acceleration is particularly slow to
5642 * paint, so this hack is how we sidestep that performance bottleneck.
5644 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5645 transform: perspective(0.01px);
5648 #main-window[customize-entered] > #tab-view-deck {
5649 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5650 background-attachment: fixed;
5653 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5654 background-repeat: no-repeat;
5655 background-position: right top;
5656 background-attachment: fixed;
5657 /* The image will get set from CustomizeMode.jsm */
5658 background-image: none;
5659 background-color: transparent;
5662 #main-window[customization-lwtheme]:-moz-lwtheme {
5663 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5664 background-repeat: repeat;
5665 background-attachment: fixed;
5666 background-position: left top;
5669 #main-window[customize-entered] #browser-bottombox,
5670 #main-window[customize-entered] #customization-container {
5671 border-left: 1px solid #9C9CFF;
5672 border-right: 1px solid #9C9CFF;
5673 background-clip: padding-box;
5676 #main-window[customize-entered] #browser-bottombox {
5677 border-bottom: 1px solid #9C9CFF;
5680 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5684 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5688 /* End customization mode */
5690 /* Private browsing indicators */
5693 * Currently, we have two places where we put private browsing indicators on
5694 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5695 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5696 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5697 * want the bottom border of the image to line up with the bottom of the window
5698 * caption buttons. That's why there's so much special-casing going on in here.
5700 .private-browsing-indicator {
5702 pointer-events: none;
5705 #private-browsing-indicator-titlebar {
5710 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5714 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5718 #TabsToolbar > .private-browsing-indicator {
5719 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5720 -moz-margin-start: 4px;
5724 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5725 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5726 * min/max/close window buttons.
5728 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5729 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5730 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5731 -moz-margin-end: 4px;
5737 /* This one is for Linux */
5738 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5739 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5743 /* End private browsing indicators */
5745 /* === BEGIN UITour.inc.css === */
5749 #UITourHighlightContainer {
5750 -moz-appearance: none;
5752 background-color: transparent;
5753 /* This is a buffer to compensate for the movement in the "wobble" effect */
5758 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5759 border-radius: 40px;
5760 border: 1px solid #9C9CFF;
5761 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5762 on Linux without an X compositor where opacity is either 0 or 1. */
5763 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5768 #UITourTooltipBody {
5769 -moz-margin-end: 14px;
5772 #UITourTooltipBody > vbox {
5776 #UITourTooltipIconContainer {
5777 -moz-margin-start: -16px;
5780 #UITourTooltipIcon {
5783 -moz-margin-start: 28px;
5784 -moz-margin-end: 28px;
5787 #UITourTooltipTitle,
5788 #UITourTooltipDescription {
5792 #UITourTooltipTitle {
5795 -moz-margin-start: 0;
5800 #UITourTooltipDescription {
5801 -moz-margin-start: 0;
5804 line-height: 1.8rem;
5805 margin-bottom: 0; /* Override global.css */
5808 #UITourTooltipClose {
5809 -moz-appearance: none;
5811 background-color: transparent;
5813 -moz-margin-start: 4px;
5817 #UITourTooltipClose > .toolbarbutton-text {
5821 #UITourTooltipButtons {
5823 background-color: rgba(0,0,0,.2);
5824 border-top: 1px solid rgba(0,0,0,.4);
5825 margin: 24px -16px -16px;
5829 #UITourTooltipButtons > label,
5830 #UITourTooltipButtons > button {
5834 #UITourTooltipButtons > label:first-child,
5835 #UITourTooltipButtons > button:first-child {
5836 -moz-margin-start: 0;
5839 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5842 -moz-margin-end: 5px;
5845 #UITourTooltipButtons > label,
5846 #UITourTooltipButtons > button .button-text {
5850 #UITourTooltipButtons > button:not(.button-link) {
5851 -moz-appearance: none;
5852 background-color: #C09070;
5853 border-radius: 3000px;
5857 transition-property: background-color, color;
5858 transition-duration: 150ms;
5861 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5862 background-color: #FFCF00;
5866 #UITourTooltipButtons > label,
5867 #UITourTooltipButtons > button.button-link {
5868 -moz-appearance: none;
5869 background: transparent;
5872 color: rgba(0,0,0,0.35);
5874 padding-right: 10px;
5877 #UITourTooltipButtons > button.button-link:hover {
5881 /* The primary button gets the same color as the customize button. */
5882 #UITourTooltipButtons > button.button-primary {
5883 background-color: #A06060; /* LCARS default button background color */
5886 padding-right: 30px;
5889 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5890 background-color: #FFCF00;
5894 /* Notification overrides for Heartbeat UI */
5896 notification.heartbeat {
5897 background-color: #A09090;
5901 @keyframes pulse-onshow {
5904 transform: scale(1.0);
5908 transform: scale(1.1);
5911 transform: scale(1.0);
5914 transform: scale(1.1);
5917 transform: scale(1.0);
5921 @keyframes pulse-twice {
5923 transform: scale(1.1);
5926 transform: scale(0.8);
5929 transform: scale(1);
5933 .messageText.heartbeat {
5935 /* text-shadow: none; */
5936 -moz-margin-start: 0px;
5939 .messageImage.heartbeat {
5942 -moz-margin-start: 8px;
5943 -moz-margin-end: 8px;
5946 .messageImage.heartbeat.pulse-onshow {
5947 animation-name: pulse-onshow;
5948 animation-duration: 1.5s;
5949 animation-iteration-count: 1;
5950 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5953 .messageImage.heartbeat.pulse-twice {
5954 animation-name: pulse-twice;
5955 animation-duration: 1s;
5956 animation-iteration-count: 2;
5957 animation-timing-function: linear;
5960 /* Learn More link styles */
5961 .heartbeat > .text-link {
5963 -moz-margin-start: 0px;
5966 .heartbeat > .text-link:hover {
5968 text-decoration: none;
5971 .heartbeat > .text-link:hover:active {
5975 /* Heartbeat UI Rating Star Classes */
5976 .heartbeat > #star-rating-container {
5978 /* margin-bottom: 4px;*/
5981 .heartbeat > #star-rating-container > #star5 {
5982 -moz-box-ordinal-group: 5;
5985 .heartbeat > #star-rating-container > #star4 {
5986 -moz-box-ordinal-group: 4;
5989 .heartbeat > #star-rating-container > #star3 {
5990 -moz-box-ordinal-group: 3;
5993 .heartbeat > #star-rating-container > #star2 {
5994 -moz-box-ordinal-group: 2;
5997 .heartbeat > #star-rating-container > .star-x {
5998 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6000 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6001 -moz-margin-end: 4px !important;
6006 .heartbeat > #star-rating-container > .star-x:hover,
6007 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6008 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6011 /* === END UITour.inc.css === */
6013 #UITourTooltipButtons {
6015 * Override the --panel-arrowcontent-padding so the background extends
6016 * to the sides and bottom of the panel.
6019 margin-right: -10px;
6020 margin-bottom: -10px;
6023 /* === BEGIN contextmenu.inc.css === */
6025 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6028 #context-navigation > .menuitem-iconic {
6030 -moz-box-pack: center;
6031 -moz-box-align: center;
6034 #context-navigation > .menuitem-iconic[disabled="true"] {
6035 background-color: transparent;
6038 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6039 -moz-appearance: none;
6042 #context-back > .menu-iconic-left {
6043 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6044 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6045 -moz-image-region: rect(0, 54px, 18px, 36px);
6048 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6049 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6050 -moz-image-region: rect(18px, 54px, 36px, 36px);
6053 #context-back[disabled="true"] > .menu-iconic-left {
6054 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6055 -moz-image-region: rect(36px, 54px, 54px, 36px);
6058 #context-forward > .menu-iconic-left {
6059 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6060 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6061 -moz-image-region: rect(0, 72px, 18px, 54px);
6064 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6065 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6066 -moz-image-region: rect(18px, 72px, 36px, 54px);
6069 #context-forward[disabled="true"] > .menu-iconic-left {
6070 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6071 -moz-image-region: rect(36px, 72px, 54px, 54px);
6074 #context-reload > .menu-iconic-left {
6075 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6076 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6077 -moz-image-region: rect(0, 14px, 14px, 0);
6080 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6081 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6082 -moz-image-region: rect(14px, 14px, 28px, 0);
6085 #context-reload[disabled="true"] > .menu-iconic-left {
6086 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6087 -moz-image-region: rect(28px, 14px, 42px, 0);
6090 #context-stop > .menu-iconic-left {
6091 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6092 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6093 -moz-image-region: rect(0, 28px, 14px, 14px);
6096 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6097 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6098 -moz-image-region: rect(14px, 28px, 28px, 14px);
6101 #context-stop[disabled="true"] > .menu-iconic-left {
6102 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6103 -moz-image-region: rect(28px, 28px, 42px, 14px);
6106 #context-bookmarkpage > .menu-iconic-left {
6107 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6108 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6109 -moz-image-region: rect(0, 144px, 18px, 126px);
6112 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6113 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6114 -moz-image-region: rect(18px, 144px, 36px, 126px);
6117 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6118 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6119 -moz-image-region: rect(36px, 144px, 54px, 126px);
6122 #context-bookmarkpage[starred=true] {
6123 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6124 -moz-image-region: rect(0px, 162px, 18px, 144px);
6127 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6128 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6129 -moz-image-region: rect(18px, 162px, 36px, 144px);
6132 #context-bookmarkpage[starred=true][disabled=true] {
6133 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6134 -moz-image-region: rect(36px, 162px, 54px, 144px);
6137 #context-back:-moz-locale-dir(rtl),
6138 #context-forward:-moz-locale-dir(rtl),
6139 #context-reload:-moz-locale-dir(rtl) {
6140 transform: scaleX(-1);
6143 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6144 width: 18px; /*16px;*/
6145 height: 18px; /*16px;*/
6149 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6150 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6156 #context-media-eme-learnmore {
6157 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6160 #context-media-eme-learnmore {
6161 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6164 /* === END contextmenu.inc.css === */
6166 #context-navigation {
6169 #context-sep-navigation {
6170 /* margin-top: -4px; */
6173 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6178 /* === BEGIN usercontext.inc.css === */
6180 /* User Context UI browser styles */
6182 #menu_newUserContextTabPersonal {
6183 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6186 #menu_newUserContextTabWork {
6187 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6190 #menu_newUserContextTabBanking {
6191 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6194 #menu_newUserContextTabShopping {
6195 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6198 /* URL Bar Decoration */
6200 #userContext-indicator {
6205 #userContext-label {
6206 margin-inline-end: 3px;
6210 #userContext-icons:not([usercontextid]) {
6214 #userContext-icons {
6215 -moz-box-align: center;
6218 /* Personal User Context */
6219 #userContext-icons[usercontextid="1"] > #userContext-label {
6222 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6223 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6226 /* Work User Context */
6227 #userContext-icons[usercontextid="2"] > #userContext-label {
6230 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6231 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6234 /* Banking User Context */
6235 #userContext-icons[usercontextid="3"] > #userContext-label {
6238 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6239 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6242 /* Shopping User Context */
6243 #userContext-icons[usercontextid="4"] > #userContext-label {
6246 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6247 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6250 /* === END usercontext.inc.css === */