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 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-verified-color: #008484;
2060 /* Default theme does different color per channel, we can't as they do it build-time. */
2061 --identity-box-chrome-color: #9C9CFF;
2063 border-inline-end: 1px solid --urlbar-separator-color);
2067 margin-inline-end: 4px;
2069 /* The latter two properties have a transition to handle the delayed hiding of
2070 the forward button when hovered. */
2071 transition: background-color 150ms ease, padding-left, padding-right;
2074 #identity-box:-moz-locale-dir(ltr) {
2075 border-top-right-radius: 0;
2076 border-bottom-right-radius: 0;
2079 #identity-box:-moz-locale-dir(rtl) {
2080 border-top-left-radius: 0;
2081 border-bottom-left-radius: 0;
2084 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2085 color: var(--identity-box-chrome-color);
2086 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2089 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2090 color: var(--identity-box-verified-color);
2091 -moz-border-end: 1px solid var(--identity-box-verified-color);
2094 #notification-popup-box:not([hidden]) + #identity-box {
2095 padding-inline-start: 10px;
2099 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2100 /* border-radius: 0;
2101 padding-inline-start: 2px; */
2102 padding-inline-end: 2px;
2103 margin-inline-end: 1px;
2106 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2107 #notification-popup-box[hidden] + #identity-box {
2108 padding-inline-start: 2px;
2111 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2112 #notification-popup-box[hidden] + #identity-box {
2113 /* Forward button hiding is delayed when hovered, so we should use the same
2114 delay for the identity box. We handle both horizontal paddings (for LTR and
2115 RTL), the latter two delays here are for padding-left and padding-right. */
2116 transition-delay: 0s, 100s, 100s;
2119 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2120 #notification-popup-box[hidden] + #identity-box {
2121 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2122 padding-inline-start: 2.01px;
2125 /* MAIN IDENTITY ICON */
2130 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2133 #identity-box:hover > #identity-icon,
2134 #identity-box[open=true] > #identity-icon {
2135 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2139 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2142 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2146 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2147 -moz-image-region: inherit;
2148 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2154 /* TRACKING PROTECTION ICON */
2156 #tracking-protection-icon {
2159 margin-inline-start: 2px;
2160 margin-inline-end: 0;
2161 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2165 #tracking-protection-icon[state="loaded-tracking-content"] {
2166 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2169 #tracking-protection-icon[animate] {
2170 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2173 #tracking-protection-icon:not([state]) {
2174 margin-inline-end: -18px;
2175 pointer-events: none;
2177 /* Only animate the shield in, when it disappears hide it immediately. */
2181 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2182 visibility: collapse;
2185 /* CONNECTION ICON */
2190 margin-inline-start: 2px;
2191 visibility: collapse;
2194 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2195 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2196 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2197 visibility: visible;
2200 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2201 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2202 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2203 visibility: visible;
2206 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2207 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2208 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2209 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2210 visibility: visible;
2213 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2214 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2215 visibility: visible;
2218 /* === END identity-block.inc.css === */
2220 #page-proxy-favicon {
2221 -moz-image-region: rect(0, 16px, 16px, 0);
2224 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2225 /* -moz-margin-end: 1px;*/
2228 #identity-box:hover > #page-proxy-favicon {
2229 -moz-image-region: rect(0, 32px, 16px, 16px);
2232 #identity-box:hover:active > #page-proxy-favicon,
2233 #identity-box[open=true] > #page-proxy-favicon {
2234 -moz-image-region: rect(0, 48px, 16px, 32px);
2237 #identity-box:hover {
2238 background-color: #FFCF00;
2242 #identity-box:hover:active,
2243 #identity-box[open=true] {
2244 background-color: #FF9F00;
2248 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2249 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2250 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2251 background-color: #9C9CFF;
2255 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2256 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2257 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2258 background-color: #008484;
2264 #treecolAutoCompleteImage {
2268 .ac-result-type-bookmark,
2269 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2270 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2271 -moz-image-region: rect(0px 16px 16px 0px);
2276 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2277 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2278 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2281 .ac-result-type-keyword,
2282 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2283 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2284 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2289 .ac-result-type-keyword[selected="true"],
2290 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2291 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2292 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2295 .ac-result-type-tag,
2296 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2297 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2303 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2304 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2308 .ac-extra > .ac-comment,
2319 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2320 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2321 -moz-image-region: rect(0, 16px, 16px, 0);
2327 @media (min-resolution: 1.1dppx) {
2328 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2329 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2330 -moz-image-region: rect(0, 32px, 32px, 0);
2334 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2335 -moz-image-region: rect(16px, 16px, 32px, 0);
2338 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2342 .ac-comment[selected="true"],
2343 .ac-url-text[selected="true"],
2344 .ac-action-text[selected="true"] {
2345 color: inherit !important;
2348 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2349 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2355 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2356 border-top: 1px solid #9C9CFF;
2359 /* combined go/reload/stop button in location bar */
2362 #urlbar-reload-button,
2363 #urlbar-stop-button {
2365 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2366 /* padding: 0 9px;*/
2367 margin-inline-start: 0px;
2368 border-inline-start: 1px solid var(--urlbar-separator-color);
2369 border-image: linear-gradient(transparent 15%,
2370 var(--urlbar-separator-color) 15%,
2371 var(--urlbar-separator-color) 85%,
2373 border-image-slice: 1;
2376 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2377 border-top-left-radius: 0px;
2378 border-bottom-left-radius: 0px;
2381 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2382 border-top-right-radius: 0px;
2383 border-bottom-right-radius: 0px;
2386 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2387 #urlbar-reload-button:not(:hover) {
2388 -moz-border-start-style: none;
2389 -moz-padding-start: 3px;
2392 #urlbar-reload-button {
2393 -moz-image-region: rect(0px, 14px, 14px, 0px);
2396 #urlbar-reload-button[disabled=true] {
2397 -moz-image-region: rect(28px, 14px, 42px, 0px);
2400 #urlbar-reload-button:not([disabled=true]):hover {
2401 -moz-image-region: rect(14px, 14px, 28px, 0px);
2404 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2405 transform: scaleX(-1);
2409 -moz-image-region: rect(0, 42px, 14px, 28px);
2412 #urlbar-go-button:hover {
2413 -moz-image-region: rect(14px, 42px, 28px, 28px);
2416 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2417 transform: scaleX(-1);
2420 #urlbar-stop-button {
2421 -moz-image-region: rect(0px, 28px, 14px, 14px);
2424 #urlbar-stop-button:hover {
2425 -moz-image-region: rect(14px, 28px, 28px, 14px);
2428 @media (min-resolution: 1.1dppx) {
2430 #urlbar-reload-button,
2431 #urlbar-stop-button {
2432 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2435 #urlbar-go-button > .toolbarbutton-icon,
2436 #urlbar-reload-button > .toolbarbutton-icon,
2437 #urlbar-stop-button > .toolbarbutton-icon {
2442 -moz-image-region: rect(0, 84px, 28px, 56px);
2445 #urlbar-go-button:hover {
2446 -moz-image-region: rect(28px, 84px, 56px, 56px);
2449 #urlbar-go-button:hover:active {
2450 -moz-image-region: rect(56px, 84px, 84px, 56px);
2453 #urlbar-reload-button {
2454 -moz-image-region: rect(0, 28px, 28px, 0);
2457 #urlbar-reload-button:not([disabled]):hover {
2458 -moz-image-region: rect(28px, 28px, 56px, 0);
2461 #urlbar-reload-button:not([disabled]):hover:active {
2462 -moz-image-region: rect(56px, 28px, 84px, 0);
2465 #urlbar-stop-button {
2466 -moz-image-region: rect(0, 56px, 28px, 28px);
2469 #urlbar-stop-button:not([disabled]):hover {
2470 -moz-image-region: rect(28px, 56px, 56px, 28px);
2473 #urlbar-stop-button:hover:active {
2474 -moz-image-region: rect(56px, 56px, 84px, 28px);
2478 /* popup blocker button */
2480 #page-report-button {
2481 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2482 -moz-image-region: rect(0, 16px, 16px, 0);
2485 #page-report-button:hover ,
2486 #page-report-button:hover:active,
2487 #page-report-button[open="true"] {
2488 -moz-image-region: rect(0, 32px, 16px, 16px);
2491 /* Reader mode button */
2493 #reader-mode-button {
2494 list-style-image: url("chrome://browser/skin/readerMode.svg");
2495 -moz-image-region: rect(0, 16px, 16px, 0);
2498 #reader-mode-button:hover,
2499 #reader-mode-button[readeractive]:hover {
2500 -moz-image-region: rect(0, 32px, 16px, 16px);
2503 #reader-mode-button:hover:active,
2504 #reader-mode-button[readeractive] {
2505 -moz-image-region: rect(0, 48px, 16px, 32px);
2508 /* social share panel */
2510 .social-share-frame {
2517 background-color: white;
2518 background-repeat: no-repeat;
2519 background-position: center center;
2521 #share-container[loading] {
2522 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2524 #share-container > browser {
2525 transition: opacity 150ms ease-in-out;
2528 #share-container[loading] > browser {
2532 .social-share-toolbar {
2533 border-bottom: 1px solid #9C9CFF;
2537 #social-share-provider-buttons {
2542 .share-provider-button {
2547 .share-provider-button > .toolbarbutton-text {
2550 .share-provider-button > .toolbarbutton-icon {
2556 /* fixup corners for share panel */
2557 .social-panel > .social-panel-frame {
2558 border-radius: inherit;
2561 #social-share-panel {
2567 .social-share-frame {
2568 border-top-left-radius: 0;
2569 border-bottom-left-radius: inherit;
2570 border-top-right-radius: 0;
2571 border-bottom-right-radius: inherit;
2574 #social-share-panel > .social-share-toolbar {
2575 border-top-left-radius: inherit;
2576 border-top-right-radius: inherit;
2579 #social-share-provider-buttons {
2580 border-top-left-radius: inherit;
2581 border-top-right-radius: inherit;
2584 /* social recommending panel */
2586 #social-mark-button {
2587 -moz-image-region: rect(0, 16px, 16px, 0);
2590 /* bookmarks menu-button */
2592 #bookmarks-menu-button.bookmark-item {
2593 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2594 -moz-image-region: rect(0px 16px 16px 0px);
2597 #bookmarks-menu-button.bookmark-item[starred] {
2598 -moz-image-region: rect(0px 32px 16px 16px);
2601 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2603 padding-bottom: 2px;
2606 #BMB_bookmarksPopup[side="top"],
2607 #BMB_bookmarksPopup[side="bottom"] {
2609 margin-right: -20px;
2612 #BMB_bookmarksPopup[side="left"],
2613 #BMB_bookmarksPopup[side="right"] {
2615 margin-bottom: -20px;
2618 /* bookmarking panel */
2620 #editBookmarkPanelStarIcon {
2621 list-style-image: url("chrome://browser/skin/places/starred48.png");
2626 #editBookmarkPanelStarIcon[unstarred] {
2627 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2630 #editBookmarkPanelTitle {
2634 #editBookmarkPanelHeader,
2635 #editBookmarkPanelContent {
2636 margin-bottom: .5em;
2639 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2640 #editBMPanel_folderTree {
2647 border-top: 1px solid #9C9CFF;
2648 border-bottom-left-radius: 5px;
2649 border-bottom-right-radius: 5px;
2653 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2654 -moz-margin-end: 10px;
2655 vertical-align: middle;
2658 .panel-promo-closebutton {
2659 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2660 -moz-margin-end: -3px;
2664 .panel-promo-closebutton:hover {
2665 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2668 .panel-promo-closebutton:hover:active {
2669 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2672 .panel-promo-closebutton > .toolbarbutton-text {
2676 /* ::::: content area ::::: */
2679 background-color: #9C9CFF;
2684 background-color: #000000;
2688 -moz-margin-start: 0;
2697 -moz-padding-start: 0px;
2700 #sidebar-header > .close-icon {
2701 /* padding: 4px 2px;
2704 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2707 #sidebar-header > .close-icon:hover,
2708 #sidebar-header > .close-icon:hover:active {
2709 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2712 #sidebar-splitter:-moz-locale-dir(ltr),
2713 #sidebar:-moz-locale-dir(ltr) {
2714 border-radius: 0 5px 0 0;
2717 #sidebar-splitter:-moz-locale-dir(rtl),
2718 #sidebar:-moz-locale-dir(rtl) {
2719 border-radius: 5px 0 0 0;
2722 .browserContainer > findbar {
2724 background-color: -moz-dialog;
2725 color: -moz-DialogText;
2734 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2737 #TabsToolbar .toolbar-holder {
2738 background-color: #000000; /* correct effect of being an actual toolbar */
2741 #main-window[disablechrome] #TabsToolbar,
2742 #TabsToolbar[tabsontop="false"] {
2743 border-bottom: 1px solid #008484;
2746 /* === BEGIN tabs.inc.css === */
2749 /* --tab-toolbar-navbar-overlap: 1px; */
2750 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2751 /* --tab-min-height: 31px; */
2754 /* --tab-stroke-background-size: auto 100%; */
2758 .tabs-newtab-button,
2759 #TabsToolbar > #new-tab-button {
2764 padding: 1px 4px 2px;
2767 .tabbrowser-tab:first-of-type {
2768 -moz-margin-start: 2px;
2771 .tabs-newtab-button,
2772 #TabsToolbar > #new-tab-button {
2773 border-radius: 8px 8px 0px 0px;
2774 -moz-margin-start: 0;
2777 .tabs-newtab-button:not(:hover),
2778 #TabsToolbar > #new-tab-button:not(:hover) {
2779 background-color: #C09070;
2782 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2783 .tabbrowser-tab[visuallyselected=true] {
2784 /* position: relative;
2788 .tab-background-middle {
2794 .tab-content[pinned] {
2807 -moz-margin-end: 3px;
2811 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2818 -moz-margin-start: -15px;
2822 .tab-icon-overlay[crashed] {
2823 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2826 .tab-icon-overlay[soundplaying],
2827 .tab-icon-overlay[muted]:not([crashed]) {
2828 border-radius: 10px;
2831 .tab-icon-overlay[soundplaying]:hover,
2832 .tab-icon-overlay[muted]:hover {
2833 background-color: #FFCF00;
2836 .tab-icon-overlay[soundplaying] {
2838 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2841 .tab-icon-overlay[muted]:not([crashed]) {
2842 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2845 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2846 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2850 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2851 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2854 .tab-throbber[busy] {
2855 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2858 .tab-throbber[progress] {
2859 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2862 @media (min-resolution: 1.1dppx) {
2863 .tab-throbber[busy] {
2864 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2867 .tab-throbber[progress] {
2868 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2872 .tab-throbber[pinned],
2873 .tab-icon-image[pinned] {
2874 -moz-margin-start: 2px;
2875 -moz-margin-end: 2px;
2879 /* this needs to add up to the 16px of the icon image */
2881 margin-top: 2px !important;
2882 margin-bottom: 2px !important;
2886 -moz-margin-start: 4px;
2892 .tab-icon-sound[muted] {
2893 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2896 .tab-icon-sound[muted]:hover {
2897 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2900 .tab-icon-sound[muted]:hover:active {
2901 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2904 .tab-icon-sound[soundplaying] {
2905 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2908 .tab-icon-sound[soundplaying]:hover {
2909 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2912 .tab-icon-sound[soundplaying]:hover:active {
2913 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2916 .tab-icon-sound[muted] {
2917 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2920 .tab-icon-sound[muted]:hover {
2921 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2924 .tab-icon-sound[muted]:hover:active {
2925 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2928 .tab-icon-sound[visuallyselected=true][soundplaying] {
2929 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2932 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2936 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2937 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2940 .tab-icon-sound[visuallyselected=true][muted] {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2944 .tab-icon-sound[visuallyselected=true][muted]:hover {
2945 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2948 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2949 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2952 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2953 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2956 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2957 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2960 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2961 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2964 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2968 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2972 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2973 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2982 .tabs-newtab-button {
2983 /* overlap the tab curves */
2986 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2990 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2991 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2994 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2995 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2998 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3004 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3008 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3012 .tab-background-start[visuallyselected=true]::after,
3013 .tab-background-start[visuallyselected=true]::before,
3014 .tab-background-start,
3015 .tab-background-end,
3016 .tab-background-end[visuallyselected=true]::after,
3017 .tab-background-end[visuallyselected=true]::before {
3020 .tabbrowser-tab:not([visuallyselected=true]),
3021 .tabbrowser-tab:-moz-lwtheme {
3024 /* tabbrowser-tab focus ring */
3025 .tabbrowser-tab:focus {
3026 outline: 1px dotted;
3031 .tabbrowser-tab[visuallyselected="true"] {
3034 /* End selected tab */
3036 /* User Context UI - change tab decoration depending on userContextId.
3037 Defaults to gray for unknown usercontextids. */
3038 .tabbrowser-tab[usercontextid] {
3039 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3040 background-size: auto 2px;
3041 background-repeat: no-repeat;
3044 /* Personal User Context */
3045 .tabbrowser-tab[usercontextid="1"] {
3046 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3048 /* Work User Context */
3049 .tabbrowser-tab[usercontextid="2"] {
3050 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3052 /* Banking User Context */
3053 .tabbrowser-tab[usercontextid="3"] {
3054 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3056 /* Shopping User Context */
3057 .tabbrowser-tab[usercontextid="4"] {
3058 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3061 /* Tab pointer-events */
3064 pointer-events: none;
3067 .tab-background-middle,
3068 .tabs-newtab-button,
3069 .tab-icon-overlay[soundplaying],
3070 .tab-icon-overlay[muted]:not([crashed]),
3073 pointer-events: auto;
3079 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3080 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3082 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3083 background-color: #E7ADE7;
3086 .tab-label[attention]:not([visuallyselected="true"]) {
3090 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3091 background-color: #3333FF;
3095 /* Tab separators */
3097 .tabbrowser-tab::after,
3098 .tabbrowser-tab::before {
3100 -moz-margin-start: -1px;
3101 background-image: linear-gradient(transparent 5px,
3103 currentColor calc(100% - 4px),
3104 transparent calc(100% - 4px));
3108 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3109 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3113 /* Also show separators beside the selected tab when dragging it. */
3115 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3116 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3117 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3122 /* New tab button */
3124 .tabs-newtab-button {
3126 /* width: calc(36px + var(--tab-curve-width)); */
3129 /* === END tabs.inc.css === */
3133 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3134 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3135 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3137 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3138 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3141 /* Tab DnD indicator */
3142 .tab-drop-indicator {
3143 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3144 margin-bottom: -11px;
3147 /* Tab close button */
3149 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3152 .tab-close-button:hover,
3153 .tab-close-button:hover[selected="true"] {
3154 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3157 .tab-close-button:hover:active,
3158 .tab-close-button:hover:active[selected="true"] {
3159 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3162 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3164 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3165 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3169 background-origin: border-box;
3172 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3173 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3174 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3175 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3178 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3179 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3184 /* transform: scaleX(-1);*/
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3188 transition: 1s background-color ease-out;
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3192 background-color: #008484;
3195 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3196 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3197 /* border-width: 0 2px 0 0;
3198 border-style: solid;
3199 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3202 .tabs-newtab-button > .toolbarbutton-icon {
3204 margin-bottom: -1px;
3207 .tabs-newtab-button,
3208 #TabsToolbar > #new-tab-button,
3209 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3210 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3211 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3212 -moz-image-region: rect(0, 16px, 18px, 0);
3215 .tabs-newtab-button,
3216 .tabs-newtab-button:hover,
3217 #TabsToolbar > #new-tab-button,
3218 #TabsToolbar > #new-tab-button:hover {
3219 -moz-image-region: rect(0, 32px, 18px, 16px);
3222 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3223 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3224 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3225 .tabs-newtab-button:-moz-lwtheme-brighttext,
3226 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3227 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3230 #TabsToolbar > #new-tab-button {
3235 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3238 #alltabs-button:hover,
3239 #alltabs-button:hover:active,
3240 #alltabs-button[open="true"] {
3241 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3244 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3245 #alltabs-button:-moz-lwtheme-brighttext {
3248 #alltabs-button > .toolbarbutton-icon {
3252 #alltabs-button > .toolbarbutton-menu-dropmarker {
3256 /* All tabs menupopup */
3257 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3258 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3259 -moz-image-region: auto;
3262 .alltabs-item[selected="true"] {
3266 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3267 list-style-image: url("chrome://global/skin/icons/loading.gif");
3270 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3271 background-color: #402800;
3274 .alltabs-endimage[muted] {
3275 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3278 .alltabs-endimage[soundplaying] {
3279 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3282 toolbarbutton.chevron {
3283 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3286 toolbarbutton.chevron:hover {
3287 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3290 toolbar[brighttext] toolbarbutton.chevron {
3291 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3294 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3295 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3296 transform: scaleX(-1);
3299 toolbarbutton.chevron > .toolbarbutton-text,
3300 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3304 toolbarbutton.chevron > .toolbarbutton-icon {
3308 #sidebar-throbber[loading="true"] {
3309 list-style-image: url("chrome://global/skin/icons/loading.gif");
3310 -moz-margin-end: 4px;
3313 /* Bookmarks toolbar */
3314 #PlacesToolbarDropIndicator {
3315 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3318 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3319 background-color: #008484 !important;
3320 color: #FFCF00 !important;
3323 /* rules for menupopup drop indicators */
3324 .menupopup-drop-indicator-bar {
3326 /* these two margins must together compensate the indicator's height */
3328 margin-bottom: -1px;
3331 .menupopup-drop-indicator {
3332 list-style-image: none;
3334 -moz-margin-end: -4em;
3335 background-color: #008484;
3338 /* === BEGIN notification-icons.inc.css === */
3340 .popup-notification-icon {
3343 -moz-margin-end: 10px;
3346 .popup-notification-icon[popupid="geolocation"] {
3347 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3350 .popup-notification-icon[popupid="xpinstall-disabled"],
3351 .popup-notification-icon[popupid="addon-install-blocked"],
3352 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3353 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3356 .popup-notification-icon[popupid="addon-progress"] {
3357 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3360 .popup-notification-icon[popupid="addon-install-failed"] {
3361 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3364 .popup-notification-icon[popupid="addon-install-confirmation"] {
3365 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3368 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3369 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3372 .popup-notification-icon[popupid="addon-install-complete"] {
3373 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3376 .popup-notification-icon[popupid="addon-install-restart"] {
3377 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3380 .popup-notification-icon[popupid="click-to-play-plugins"] {
3381 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3384 .popup-notification-icon[popupid="web-notifications"] {
3385 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3388 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3389 .popup-notification-icon[popupid*="offline-app-requested"],
3390 .popup-notification-icon[popupid="offline-app-usage"] {
3391 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3394 .popup-notification-icon[popupid="password"] {
3395 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3398 .popup-notification-icon[popupid="webapps-install-progress"],
3399 .popup-notification-icon[popupid="webapps-install"] {
3400 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3403 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3404 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3405 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3408 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3409 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3410 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3413 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3414 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3415 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3418 .popup-notification-icon[popupid="pointerLock"] {
3419 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3422 /* Notification icon box */
3423 #notification-popup .panel-promo-box {
3424 /* margin: 10px -10px -10px; */
3427 #notification-popup-box {
3429 background-color: #000000;
3430 background-clip: padding-box;
3433 border-radius: 3px 0 0 3px;
3434 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3435 -moz-margin-end: -8px;
3436 border-right-width: 8px;
3439 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3440 /* padding-left: 7px; */
3443 /* This changes the direction of the main notification box on the url bar. */
3444 #notification-popup-box:-moz-locale-dir(rtl),
3445 /* This adds a second flip for the notification anchors, as they don't switch direction
3447 .notification-anchor-icon:-moz-locale-dir(rtl) {
3448 transform: scaleX(-1);
3451 /* For the anchor icons in the chat window, we don't have the notification popup box,
3452 so we need to cancel the RTL transform. */
3453 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3457 .notification-anchor-icon {
3458 list-style-image: url("chrome://global/skin/icons/information-16.png");
3465 .notification-anchor-icon:-moz-focusring {
3466 outline: 1px dotted #008484;
3469 .identity-notification-icon,
3470 #identity-notification-icon {
3471 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3474 .geo-notification-icon,
3475 #geo-notification-icon {
3476 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3479 #addons-notification-icon {
3480 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3483 #addons-notification-icon:hover {
3484 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3487 #addons-notification-icon:hover:active {
3488 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3491 .indexedDB-notification-icon,
3492 #indexedDB-notification-icon {
3493 list-style-image: url("chrome://global/skin/icons/question-16.png");
3496 #password-notification-icon {
3497 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3500 #login-fill-notification-icon {
3501 /* Temporary icon until the capture and fill doorhangers are unified. */
3502 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3503 transform: scaleX(-1);
3506 #webapps-notification-icon {
3507 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3510 #plugins-notification-icon {
3511 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3514 #plugins-notification-icon.plugin-hidden {
3515 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3518 #plugins-notification-icon.plugin-blocked {
3519 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3522 #plugins-notification-icon {
3523 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3526 #plugins-notification-icon:hover {
3527 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3530 #notification-popup-box[hidden] {
3531 /* Override display:none to make the pluginBlockedNotification animation work
3532 when showing the notification repeatedly. */
3534 visibility: collapse;
3537 #plugins-notification-icon.plugin-blocked[showing] {
3538 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3541 @keyframes pluginBlockedNotification {
3550 .webRTC-shareDevices-notification-icon,
3551 #webRTC-shareDevices-notification-icon {
3552 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3555 .webRTC-sharingDevices-notification-icon,
3556 #webRTC-sharingDevices-notification-icon {
3557 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3560 .webRTC-shareMicrophone-notification-icon,
3561 #webRTC-shareMicrophone-notification-icon {
3562 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3565 .webRTC-sharingMicrophone-notification-icon,
3566 #webRTC-sharingMicrophone-notification-icon {
3567 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3570 .webRTC-shareScreen-notification-icon,
3571 #webRTC-shareScreen-notification-icon {
3572 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3575 .webRTC-sharingScreen-notification-icon,
3576 #webRTC-sharingScreen-notification-icon {
3577 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3580 .web-notifications-notification-icon,
3581 #web-notifications-notification-icon {
3582 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3583 -moz-image-region: rect(0, 16px, 16px, 0);
3586 .web-notifications-notification-icon:hover,
3587 #web-notifications-notification-icon:hover {
3588 -moz-image-region: rect(0, 32px, 16px, 16px);
3591 .web-notifications-notification-icon:hover:active,
3592 #web-notifications-notification-icon:hover:active {
3593 -moz-image-region: rect(0, 48px, 16px, 32px);
3596 #pointerLock-notification-icon {
3597 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3600 .translate-notification-icon,
3601 #translate-notification-icon {
3602 list-style-image: url("chrome://browser/skin/translation-16.png");
3603 -moz-image-region: rect(0px, 16px, 16px, 0px);
3606 .translated-notification-icon,
3607 #translated-notification-icon {
3608 list-style-image: url("chrome://browser/skin/translation-16.png");
3609 -moz-image-region: rect(0px, 32px, 16px, 16px);
3612 .popup-notification-icon[popupid="servicesInstall"] {
3613 list-style-image: url("chrome://browser/skin/social/services-64.png");
3615 #servicesInstall-notification-icon {
3616 list-style-image: url("chrome://browser/skin/social/services-16.png");
3619 /* EME notifications */
3621 .popup-notification-icon[popupid="drmContentPlaying"],
3622 #eme-notification-icon {
3623 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3626 #eme-notification-icon:hover:active {
3627 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3630 #eme-notification-icon[firstplay=true] {
3631 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3634 @keyframes emeTeachingMoment {
3635 0% {transform: translateX(0); }
3636 25% {transform: translateX(3px) }
3637 75% {transform: translateX(-3px) }
3638 100% { transform: translateX(0); }
3641 /* HiDPI notification icons */
3642 @media (min-resolution: 1.1dppx) {
3643 /* #notification-popup-box {
3644 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3647 .notification-anchor-icon {
3648 list-style-image: url(chrome://global/skin/icons/information-32.png);
3651 .webRTC-shareDevices-notification-icon,
3652 #webRTC-shareDevices-notification-icon {
3653 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3656 .webRTC-sharingDevices-notification-icon,
3657 #webRTC-sharingDevices-notification-icon {
3658 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3661 .webRTC-shareMicrophone-notification-icon,
3662 #webRTC-shareMicrophone-notification-icon {
3663 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3666 .webRTC-sharingMicrophone-notification-icon,
3667 #webRTC-sharingMicrophone-notification-icon {
3668 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3671 .webRTC-shareScreen-notification-icon,
3672 #webRTC-shareScreen-notification-icon {
3673 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3676 .webRTC-sharingScreen-notification-icon,
3677 #webRTC-sharingScreen-notification-icon {
3678 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3681 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3682 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3683 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3686 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3687 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3688 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3691 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3692 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3693 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3697 /* === END notification-icons.inc.css === */
3699 .popup-notification-body[popupid="addon-progress"],
3700 .popup-notification-body[popupid="addon-install-confirmation"] {
3705 /* Translation infobar */
3707 /* === BEGIN infobar.inc.css === */
3709 notification[value="translation"] .messageImage {
3710 list-style-image: url("chrome://browser/skin/translation-16.png");
3711 -moz-image-region: rect(0, 32px, 16px, 16px);
3714 @media (min-resolution: 1.25dppx) {
3715 notification[value="translation"] .messageImage {
3716 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3717 -moz-image-region: rect(0, 64px, 32px, 32px);
3721 notification[value="translation"][state="translating"] .messageImage {
3722 list-style-image: url("chrome://browser/skin/translating-16.png");
3723 -moz-image-region: auto;
3726 @media (min-resolution: 1.25dppx) {
3727 notification[value="translation"][state="translating"] .messageImage {
3728 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3732 notification[value="translation"] hbox[anonid="details"] {
3736 notification[value="translation"] button,
3737 notification[value="translation"] menulist {
3741 notification[value="translation"] menulist > .menulist-dropmarker {
3744 .translation-menupopup arrowscrollbox {
3748 .translation-attribution {
3750 -moz-box-align: end;
3754 .translation-attribution > label {
3758 .translation-attribution > image {
3762 .translation-welcome-panel {
3766 .translation-welcome-logo {
3769 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3770 -moz-image-region: rect(0, 64px, 32px, 32px);
3773 .translation-welcome-content {
3774 -moz-margin-start: 16px;
3777 .translation-welcome-headline {
3782 .translation-welcome-body {
3787 /* === END infobar.inc.css === */
3789 notification[value="translation"] {
3793 .translation-menupopup {
3794 -moz-appearance: none;
3797 /* Loop/ Hello browser styles */
3799 notification[value="loop-sharing-notification"] .button-menubutton-button {
3805 notification[value="loop-sharing-notification"] .messageImage {
3806 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3809 /* Bookmarks roots menu-items */
3810 #subscribeToPageMenuitem:not([disabled]),
3811 #subscribeToPageMenupopup,
3812 #BMB_subscribeToPageMenuitem:not([disabled]),
3813 #BMB_subscribeToPageMenupopup {
3814 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3817 #bookmarksToolbarFolderMenu,
3818 #BMB_bookmarksToolbar,
3819 #panelMenu_bookmarksToolbar {
3820 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3821 -moz-image-region: auto;
3824 #BMB_unsortedBookmarks,
3825 #panelMenu_unsortedBookmarks {
3826 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3827 -moz-image-region: auto;
3830 /* ::::: Keyboard UI Panel ::::: */
3835 border-radius: 20px;
3838 .KUI-panel[level="top"] {
3839 /*background-color: rgba(27%,27%,27%,.65);*/
3845 padding: 20px 10px 10px;
3849 .ctrlTab-favicon[src] {
3850 background-color: #000000;
3856 .ctrlTab-preview-inner > .tabPreview-canvas {
3859 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3863 .ctrlTab-preview-inner {
3864 padding-bottom: 10px;
3867 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3869 background-color: #000000;
3870 border-radius: .5em;
3873 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3875 background-color: #000000;
3878 border: 2px solid #9C9CFF;
3879 border-radius: .5em;
3882 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3883 margin: -10px -10px 0;
3895 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3903 .sync-panel-button-box {
3907 #sync-start-panel-title {
3913 #sync-start-panel-subtitle {
3919 .statuspanel-label {
3922 background: #404000;
3923 border: 1px none #9C9CFF;
3924 border-top-style: solid;
3929 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3930 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3931 border-right-style: solid;
3932 border-top-right-radius: .3em;
3936 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3937 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3938 border-left-style: solid;
3939 border-top-left-radius: .3em;
3943 /* HACK to abolish devily color on main content */
3946 background-color: transparent !important;
3949 /* === BEGIN fullscreen/warning.inc.css === */
3951 html|*#fullscreen-warning {
3952 align-items: center;
3953 background: rgba(0, 0, 0, 0.9);
3954 border: 2px solid #A09090;
3955 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3958 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3961 html|*#fullscreen-warning::before {
3963 width: 24px; height: 24px;
3966 html|*#fullscreen-warning.verifiedIdentity::before,
3967 html|*#fullscreen-warning.verifiedDomain::before {
3968 content: url("chrome://browser/skin/fullscreen/secure.svg");
3971 html|*#fullscreen-warning.unknownIdentity::before {
3972 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3975 html|*#fullscreen-domain-text,
3976 html|*#fullscreen-generic-text {
3978 font-weight: lighter;
3983 html|*#fullscreen-domain {
3988 html|*#fullscreen-exit-button {
3990 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3992 font-weight: lighter;
3994 box-sizing: content-box;
3996 border-radius: 300px;
3998 background-color: #C09070;
4002 /* === END fullscreen/warning.inc.css === */
4004 /* === BEGIN commandline.inc.css === */
4006 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4007 We are copy/pasting variables from light-theme and dark-theme,
4008 since they aren't loaded in this context (within browser.css). */
4009 :root #developer-toolbar {
4010 --gcli-background-color: #000000; /* --theme-toolbar-background */
4011 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4012 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4013 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4014 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4015 --selection-background: #008484; /* --theme-selection-background */
4016 --selection-color: #000000; /* --theme-selection-color */
4019 /* Developer toolbar */
4021 #developer-toolbar {
4022 border-top: 3px solid var(--gcli-background-color);
4023 border-bottom: none;
4026 #developer-toolbar .toolbar-holder {
4027 background-color: #8050B0;
4031 #developer-toolbar .toolbar-holder {
4032 background-color: #8050B0;
4036 #developer-toolbar .toolbar-startcap,
4037 #developer-toolbar .toolbar-endcap{
4038 background-color: #6000CF;
4041 #developer-toolbar {
4043 min-height: 32px; */
4046 #developer-toolbar > toolbarbutton {
4052 .developer-toolbar-button > image {
4053 /* margin: auto 10px; */
4056 #developer-toolbar-toolbox-button > label {
4060 .developer-toolbar-button > .toolbarbutton-icon,
4061 #developer-toolbar-closebutton > .toolbarbutton-icon {
4066 #developer-toolbar-toolbox-button {
4067 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
4068 -moz-image-region: rect(0px, 16px, 16px, 0px);
4071 #developer-toolbar-toolbox-button > label {
4075 #developer-toolbar-toolbox-button:hover,
4076 #developer-toolbar-toolbox-button:hover:active,
4077 #developer-toolbar-toolbox-button[checked=true] {
4078 -moz-image-region: rect(0px, 32px, 16px, 16px);
4081 @media (min-resolution: 2dppx) {
4082 #developer-toolbar-toolbox-button {
4083 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
4084 -moz-image-region: rect(0px, 32px, 32px, 0px);
4087 #developer-toolbar-toolbox-button:hover,
4088 #developer-toolbar-toolbox-button:hover:active,
4089 #developer-toolbar-toolbox-button[checked=true] {
4090 -moz-image-region: rect(0px, 64px, 32px, 32px);
4094 #developer-toolbar-closebutton {
4095 list-style-image: url("chrome://devtools/skin/close.png");
4096 -moz-image-region: rect(0px, 16px, 16px, 0px);
4101 #developer-toolbar-closebutton > .toolbarbutton-icon {
4104 #developer-toolbar-closebutton > .toolbarbutton-text {
4108 #developer-toolbar-closebutton:hover,
4109 #developer-toolbar-closebutton:hover:active {
4110 -moz-image-region: rect(0px, 32px, 16px, 16px);
4113 @media (min-resolution: 2dppx) {
4114 #developer-toolbar-closebutton {
4115 list-style-image: url("chrome://devtools/skin/close@2x.png");
4116 -moz-image-region: rect(0px, 32px, 32px, 0px);
4119 #developer-toolbar-closebutton:hover,
4120 #developer-toolbar-closebutton:hover:active {
4121 -moz-image-region: rect(0px, 64px, 32px, 32px);
4127 html|*#gcli-tooltip-frame,
4128 html|*#gcli-output-frame {
4131 background-color: transparent;
4137 background-color: transparent;
4140 .gclitoolbar-input-node,
4141 .gclitoolbar-complete-node {
4143 -moz-box-align: center;
4147 background-color: transparent;
4150 .gclitoolbar-input-node {
4151 /* line-height: 32px;
4152 outline-style: none; */
4153 background-repeat: no-repeat;
4154 background-color: var(--gcli-input-background);
4157 .gclitoolbar-input-node[focused="true"] {
4158 background-color: var(--gcli-input-focused-background);
4161 .gclitoolbar-input-node::before {
4163 display: inline-block;
4164 -moz-box-ordinal-group: 0;
4168 background-image: url("chrome://devtools/skin/commandline-icon.png");
4169 background-position: 0 center;
4170 background-size: 32px 16px;
4173 .gclitoolbar-input-node[focused="true"]::before {
4174 background-position: -16px center;
4177 @media (min-resolution: 2dppx) {
4178 .gclitoolbar-input-node::before {
4179 background-image: url("chrome://devtools/skin/commandline-icon@2x.png");
4183 .gclitoolbar-input-node:not([focused="true"]) {
4184 border-color: transparent;
4187 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4188 background-color: var(--selection-background);
4189 color: var(--selection-color);
4192 .gclitoolbar-complete-node {
4194 background-color: transparent;
4197 pointer-events: none;
4200 .gcli-in-incomplete,
4204 .gcli-in-closebrace,
4211 .gcli-in-incomplete {
4212 border-bottom: 2px dotted #8050B0;
4216 border-bottom: 2px dotted #FF0000;
4227 .gcli-in-closebrace {
4231 /* === END commandline.inc.css === */
4233 /* === BEGIN responsivedesign.inc.css === */
4235 /* Responsive Mode */
4237 .browserContainer[responsivemode] {
4238 background-color: #221500;
4239 padding: 0 20px 20px 20px;
4242 .browserStack[responsivemode] {
4243 box-shadow: 0 0 7px #9C9CFF;
4246 .devtools-responsiveui-toolbar {
4247 background: transparent;
4248 /* text color is textColor from dark theme, since no theme is applied to
4249 * the responsive toolbar.
4255 border-bottom-width: 0;
4258 .devtools-responsiveui-menulist,
4259 .devtools-responsiveui-toolbarbutton {
4260 -moz-box-align: center;
4262 /* min-height: 22px;*/
4263 /* margin: 0 3px; */
4266 .devtools-responsiveui-menulist .menulist-editable-box {
4267 background-color: transparent;
4270 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4275 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4276 /* background: hsla(212,7%,57%,.35);*/
4279 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4284 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4285 -moz-box-orient: horizontal;
4288 .devtools-responsiveui-menulist:-moz-focusring,
4289 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4290 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4291 outline-offset: -4px;*/
4294 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4298 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4299 /* border-color: hsla(210,8%,5%,.6);
4300 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4301 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); */
4304 .devtools-responsiveui-menulist[open=true],
4305 .devtools-responsiveui-toolbarbutton[open=true],
4306 .devtools-responsiveui-toolbarbutton[checked=true] {
4307 /* border-color: hsla(210,8%,5%,.6) !important;
4308 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4309 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); */
4312 .devtools-responsiveui-toolbarbutton[checked=true] {
4313 /* color: hsl(208,100%,60%); */
4316 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4317 /* background-color: transparent !important;*/
4320 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4321 /* background-color: hsla(210,8%,5%,.2) !important;*/
4324 .devtools-responsiveui-menulist > .menulist-label-box {
4328 .devtools-responsiveui-menulist > .menulist-dropmarker {
4329 /* display: -moz-box;
4330 background-color: transparent;
4331 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4332 -moz-box-align: center;
4337 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4340 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4341 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4344 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4345 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4348 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4349 /* padding: 0 1px;*/
4350 -moz-box-align: stretch;
4353 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4354 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4355 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4356 -moz-box-align: center;
4360 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4361 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4365 .devtools-responsiveui-close {
4366 list-style-image: url("chrome://devtools/skin/close.png");
4367 -moz-image-region: rect(0px,16px,16px,0px);
4370 .devtools-responsiveui-close:hover {
4371 -moz-image-region: rect(0px,32px,16px,16px);
4374 .devtools-responsiveui-rotate {
4375 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4376 -moz-image-region: rect(0px,16px,16px,0px);
4379 .devtools-responsiveui-rotate:hover {
4380 -moz-image-region: rect(0px,32px,16px,16px);
4383 @media (min-resolution: 2dppx) {
4384 .devtools-responsiveui-close {
4385 list-style-image: url("chrome://devtools/skin/close@2x.png");
4388 .devtools-responsiveui-close:hover {
4389 -moz-image-region: rect(0px,64px,32px,32px);
4392 .devtools-responsiveui-rotate {
4393 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4396 .devtools-responsiveui-rotate:hover {
4397 -moz-image-region: rect(0px,64px,32px,32px);
4401 .devtools-responsiveui-touch {
4402 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4403 -moz-image-region: rect(0px,16px,16px,0px);
4406 .devtools-responsiveui-touch:hover,
4407 .devtools-responsiveui-touch[checked],
4408 .devtools-responsiveui-touch[checked]:hover {
4409 -moz-image-region: rect(0px,32px,16px,16px);
4412 @media (min-resolution: 2dppx) {
4413 .devtools-responsiveui-touch {
4414 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4415 -moz-image-region: rect(0px,32px,32px,0px);
4418 .devtools-responsiveui-touch:hover,
4419 .devtools-responsiveui-touch[checked],
4420 .devtools-responsiveui-touch[checked]:hover {
4421 -moz-image-region: rect(0px,64px,32px,32px);
4425 .devtools-responsiveui-screenshot {
4426 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4427 -moz-image-region: rect(0px,16px,16px,0px);
4430 .devtools-responsiveui-screenshot:hover {
4431 -moz-image-region: rect(0px,32px,16px,16px);
4434 @media (min-resolution: 2dppx) {
4435 .devtools-responsiveui-screenshot {
4436 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4439 .devtools-responsiveui-screenshot:hover {
4440 -moz-image-region: rect(0px,64px,32px,32px);
4444 .devtools-responsiveui-resizebarV {
4448 transform: translate(12px, -12px);
4449 background-size: cover;
4450 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4453 .devtools-responsiveui-resizebarH {
4457 transform: translate(-12px, 12px);
4458 background-size: cover;
4459 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4462 .devtools-responsiveui-resizehandle {
4466 transform: translate(12px, 12px);
4467 background-size: cover;
4468 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4471 /* FxOS custom mode with additional buttons and phone look'n feel */
4473 /* Hide devtools manual resizer */
4474 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4475 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4476 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4480 /* Gives responsive mode a phone look'n feel */
4481 .browserStack[responsivemode].fxos-mode {
4482 padding: 60px 15px 0;
4484 border-radius: 25px / 20px;
4485 border-bottom-left-radius: 0;
4486 border-bottom-right-radius: 0;
4487 border: 1px solid #FFFFFF;
4488 border-bottom-width: 0;
4490 background-color: #353535;
4492 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4494 background-image: linear-gradient(to right, #111 11%, #333 56%);
4498 .devtools-responsiveui-hardware-buttons {
4499 -moz-appearance: none;
4502 border: 1px solid #FFFFFF;
4503 border-bottom-left-radius: 25px;
4504 border-bottom-right-radius: 25px;
4505 border-top-width: 0;
4507 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4509 background-image: linear-gradient(to right, #111 11%, #333 56%);
4512 .devtools-responsiveui-home-button {
4513 -moz-user-focus: ignore;
4516 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4519 .devtools-responsiveui-sleep-button {
4520 -moz-user-focus: ignore;
4521 -moz-appearance: none;
4522 /* compensate browserStack top padding */
4530 border: 1px solid #444;
4531 border-top-right-radius: 12px;
4532 border-top-left-radius: 12px;
4533 border-bottom-color: transparent;
4535 background-image: linear-gradient(to top, #111 11%, #333 56%);
4538 .devtools-responsiveui-sleep-button:hover:active {
4539 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4542 .devtools-responsiveui-volume-buttons {
4546 .devtools-responsiveui-volume-up-button,
4547 .devtools-responsiveui-volume-down-button {
4548 -moz-user-focus: ignore;
4549 -moz-appearance: none;
4550 border: 1px solid red;
4554 border: 1px solid #444;
4555 border-right-color: transparent;
4557 background-image: linear-gradient(to right, #111 11%, #333 56%);
4560 .devtools-responsiveui-volume-up-button:hover:active,
4561 .devtools-responsiveui-volume-down-button:hover:active {
4562 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4565 .devtools-responsiveui-volume-up-button {
4566 border-top-left-radius: 12px;
4569 .devtools-responsiveui-volume-down-button {
4570 border-bottom-left-radius: 12px;
4573 @media (min-resolution: 2dppx) {
4574 .devtools-responsiveui-resizebarV {
4575 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4578 .devtools-responsiveui-resizebarH {
4579 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4582 .devtools-responsiveui-resizehandle {
4583 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4587 /* === END responsivedesign.inc.css === */
4589 /* === including indicator.css is done at the start of the file === */
4593 #developer-toolbar-toolbox-button[error-count]:before {
4597 background-color: #FF0000;
4599 -moz-margin-end: 5px;
4602 /* Social toolbar item */
4604 #social-notification-icon-mentions {
4605 background-color: #000000;
4607 -moz-margin-start: 2px;
4610 #social-notification-icon-mentions:hover {
4611 background-color: #FFCF00;
4614 #social-notification-icon-mentions[open="true"] {
4615 background-color: #FF9F00;
4618 #social-sidebar-splitter {
4622 #socialActivatedNotification .popup-notification-button-container {
4626 .social-activation-icon {
4633 #social-activation-message {
4637 #social-activation-message > label {
4641 /* social toolbar provider menu */
4642 .social-statusarea-popup {
4645 margin-right: -12px;
4648 .social-statusarea-user {
4649 border-bottom: 1px solid #9C9CFF;
4650 background-color: #000000;
4656 .social-statusarea-user-portrait {
4663 .social-statusarea-loggedInStatus {
4664 background: transparent;
4669 list-style-image: none;
4672 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4673 text-decoration: underline;
4676 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4680 .social-panel-frame {
4681 border-radius: inherit;
4684 /* === BEGIN chat.inc.css === */
4686 #social-sidebar-header {
4690 #manage-share-providers,
4691 #social-sidebar-button {
4692 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4693 -moz-image-region: rect(0, 468px, 18px, 450px);
4696 #social-sidebar-button {
4697 -moz-appearance: none;
4702 #manage-share-providers > .toolbarbutton-icon,
4703 #social-sidebar-button > .toolbarbutton-icon {
4707 #manage-share-providers:hover,
4708 #manage-share-providers:hover:active,
4709 #social-sidebar-button:hover,
4710 #social-sidebar-button:hover:active {
4711 -moz-image-region: rect(18px, 468px, 36px, 450px);
4713 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4717 #social-sidebar-button[loading="true"] {
4718 list-style-image: url("chrome://global/skin/icons/loading.gif");
4721 #social-sidebar-favico {
4734 .chat-toolbarbutton {
4735 -moz-appearance: none;
4742 .chat-toolbarbutton > .toolbarbutton-text {
4746 .chat-toolbarbutton > .toolbarbutton-icon {
4751 .chat-close-button {
4752 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4755 .chat-close-button:hover {
4756 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4759 .chat-close-button:hover:active {
4760 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4763 .chat-minimize-button {
4764 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4767 .chat-minimize-button:hover {
4768 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4771 .chat-minimize-button:hover:active {
4772 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4776 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4777 transform: rotate(180deg);
4780 .chat-swap-button:hover {
4781 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4784 .chat-swap-button:hover:active {
4785 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4788 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4792 chatbox[src^="about:loopconversation#"] .chat-minimize-button {
4793 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
4796 chatbox[src^="about:loopconversation#"] .chat-swap-button {
4797 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
4801 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4802 background-color: #FF0000;
4803 border: 1px solid #FFC000;
4804 border-top-right-radius: 4px;
4808 margin-bottom: -5px;
4809 -moz-margin-start: 6px;
4810 -moz-margin-end: -5px;
4813 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4814 background-color: #FFCF00;
4815 border-color: #FF0000;
4824 chatbox[src^="about:loopconversation#"] .chat-title {
4829 background-color: #9C9CFF;
4836 border: 1px solid #008484;
4838 border-top-left-radius: 4px;
4839 border-top-right-radius: 4px;
4841 background-color: #A09090;
4844 .chat-titlebar[selected] {
4845 background-color: #008484;
4848 chatbox[src^="about:loopconversation#"] > .chat-titlebar {
4849 background-color: #008484;
4850 border-color: #008484;
4853 .chat-titlebar > .notification-anchor-icon {
4858 .chat-titlebar[minimized="true"] {
4859 border-bottom: none;
4862 .chat-titlebar[selected] {
4863 background-color: #008484;
4866 .chat-titlebar[activity] {
4867 background-color: #E7ADE7;
4877 list-style-image: url("chrome://browser/skin/social/services-16.png");
4878 background-color: #000000;
4884 border-top: 1px solid #008484;
4885 -moz-border-end: 1px solid #008484;
4888 @media (min-resolution: 2dppx) {
4890 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4894 .chatbar-button:hover {
4895 background-color: #FFCF00;
4897 .chatbar-button[open="true"] {
4898 background-color: #FF9F00;
4901 .chatbar-button[activity]:not([open]) {
4902 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%);
4905 .chatbar-button > .toolbarbutton-icon {
4909 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4916 .chatbar-button > .toolbarbutton-icon {
4920 .chatbar-button:hover > .toolbarbutton-icon,
4921 .chatbar-button[open="true"] > .toolbarbutton-icon {
4925 .chatbar-button:hover,
4926 .chatbar-button[open="true"] {
4929 .chatbar-button > .toolbarbutton-text,
4930 .chatbar-button > .toolbarbutton-menu-dropmarker {
4934 .chatbar-button[activity]:not([open="true"]) {
4935 background-color: #E7ADE7;
4938 .chatbar-button > menupopup > menuitem[activity] {
4943 background: transparent;
4948 -moz-margin-end: 20px;
4952 -moz-margin-start: 4px;
4953 background-color: transparent;
4957 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4959 /* border-top-left-radius: 4px;
4960 border-top-right-radius: 4px;*/
4961 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4963 /* -moz-margin-end: 5px;*/
4966 chatbox[minimized="true"] {
4972 -moz-margin-start: 0px;
4978 /* === END chat.inc.css === */
4980 /* === BEGIN plugin-doorhanger.inc.css === */
4983 * Plugin Doorhanger Styles
4986 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4987 padding: 6px 1px 2px;
4990 .click-to-play-plugins-notification-center-box {
4993 .plugin-popupnotification-centeritem:nth-child(odd) {
4994 /* background-color: rgba(0,0,0,0.1);*/
4997 .center-item-label {
4999 text-overflow: ellipsis;
5002 .center-item-warning-icon {
5003 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5004 background-repeat: no-repeat;
5007 -moz-margin-start: 6px;
5010 .click-to-play-plugins-notification-button-container {
5013 .click-to-play-popup-button {
5017 .click-to-play-plugins-notification-description-box {
5021 padding-bottom: 3px;
5024 .click-to-play-plugins-outer-description {
5028 .click-to-play-plugins-notification-link,
5033 .messageImage[value="plugin-hidden"] {
5034 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5037 /* Keep any changes to this style in sync with pluginProblem.css */
5038 notification.pluginVulnerable {
5041 notification.pluginVulnerable .messageImage {
5042 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5045 /* === END plugin-doorhanger.inc.css === */
5047 /* === BEGIN login-doorhanger.inc.css === */
5049 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5050 /* Since we display a sliding subview that extends to the border, we cannot
5051 * keep the default padding of arrow panels. We use the same padding in the
5052 * individual content views instead. Since we removed the padding, we also
5053 * have to ensure the contents are clipped to the border box. */
5058 #login-fill-mainview,
5059 #login-fill-details {
5060 padding: var(--panel-arrowcontent-padding);
5063 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5064 transform: translateX(-14px);
5067 #login-fill-mainview,
5068 #login-fill-details {
5069 transition: transform 150ms;
5072 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5073 transform: translateX(105%);
5076 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5077 transform: translateX(-105%);
5080 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5081 background-color: hsla(240,39%,100%,.1);
5084 #login-fill-testing {
5090 border: 1px solid #9C9CFF;
5094 .login-fill-item[disabled] {
5096 background-color: #000000;
5099 .login-fill-item[disabled][selected] {
5100 background-color: #008484;
5108 .login-fill-item.different-hostname > .login-hostname {
5118 #login-fill-details {
5120 background: var(--panel-arrowcontent-background);
5121 color: var(--panel-arrowcontent-color);
5122 background-clip: padding-box;
5123 border-left: 1px solid #9C9CFF;
5124 -moz-margin-start: 38px;
5127 /* === END login-doorhanger.inc.css === */
5129 /* === BEGIN customizeMode.inc.css === */
5131 /* Customization mode */
5133 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5137 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5138 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5139 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5144 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5145 pointer-events: none;
5148 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5149 #PanelUI-contents > .panel-customization-placeholder {
5150 -moz-outline-radius: 2.5px;
5151 outline: 1px dashed transparent;
5154 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5155 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5156 -moz-box-ordinal-group: 0;
5161 outline-offset: -2px;
5162 pointer-events: none;
5168 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5169 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5170 offset from the bottom effectively the same as other targets (-2px). */
5171 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5175 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5176 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5177 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5178 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5182 /* Most target outlines are shown on hover and drag over but the panel menu uses
5183 placeholders instead. */
5184 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5185 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5186 /* nav-bar and panel outlines are always shown */
5187 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5188 outline-color: #A09090;
5191 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5192 transition: outline-color 250ms linear;
5195 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5196 transition: outline-color 250ms linear;
5197 outline-color: #9C9CFF;
5200 #PanelUI-contents > .panel-customization-placeholder {
5202 outline-offset: -5px;
5205 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5207 /* padding-left: 10px;
5208 padding-right: 10px;*/
5211 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5215 #customization-container {
5216 background-color: #000000;
5220 #customization-palette,
5221 #customization-empty {
5222 padding: 0 15px 15px;
5225 #customization-header {
5227 line-height: 1.75em;
5230 margin: 25px 25px 12px;
5231 padding-bottom: 12px;
5232 border-bottom: 1px solid #A09090;
5235 #customization-panel-container {
5236 padding: 10px 10px 0px;
5239 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5240 #customization-footer {
5241 /*background-color: rgb(236,236,236);*/
5244 #customization-footer {
5245 border-top: 1px solid #9C9CFF;
5249 .customizationmode-button {
5253 .customizationmode-button:hover {
5256 #customization-titlebar-visibility-button[checked],
5257 #customization-devedition-theme-button[checked] {
5258 background-color: #008484;
5261 #customization-titlebar-visibility-button[checked]:hover,
5262 #customization-devedition-theme-button[checked]:hover {
5263 background-color: #FFCF00;
5266 #customization-titlebar-visibility-button[checked]:hover:active,
5267 #customization-devedition-theme-button[checked]:hover:active {
5268 background-color: #FF9F00;
5271 .customizationmode-button[disabled="true"] {
5274 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5275 .customizationmode-button > .button-box > .button-icon {
5279 #customization-titlebar-visibility-button {
5280 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5281 -moz-image-region: rect(0, 16px, 16px, 0);
5284 #customization-titlebar-visibility-button:hover {
5285 -moz-image-region: rect(16px, 16px, 32px, 0);
5288 #customization-lwtheme-button,
5289 #customization-titlebar-visibility-button {
5293 #customization-titlebar-visibility-button > .button-box {
5295 padding-bottom: 1px;
5298 #customization-titlebar-visibility-button:hover:active > .button-box {
5303 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5304 #customization-titlebar-visibility-button > .button-box > .button-text {
5305 /* Sadly, button.css thinks its margins are perfect for everyone. */
5306 -moz-margin-start: 5px !important;
5309 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5313 background-size: contain;
5316 #customization-titlebar-visibility-button > .button-box > .button-icon {
5317 vertical-align: middle;
5320 #customization-titlebar-visibility-button[checked] {
5321 -moz-image-region: rect(0, 32px, 16px, 16px);
5322 background-color: #008484;
5325 #customization-titlebar-visibility-button[checked]:hover {
5326 -moz-image-region: rect(16px, 32px, 32px, 16px);
5327 background-color: #FFCF00;
5330 #customization-titlebar-visibility-button[checked]:hover:active {
5331 background-color: #FF9F00;
5334 @media (min-resolution: 1.1dppx) {
5335 #customization-titlebar-visibility-button {
5336 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5337 -moz-image-region: rect(0, 48px, 48px, 0);
5340 #customization-titlebar-visibility-button:hover {
5341 -moz-image-region: rect(48px, 48px, 96px, 0);
5344 #customization-titlebar-visibility-button[checked] {
5345 -moz-image-region: rect(0, 96px, 48px, 48px);
5348 #customization-titlebar-visibility-button[checked]:hover {
5349 -moz-image-region: rect(48px, 96px, 96px, 48px);
5353 #main-window[customize-entered] #customization-panel-container {
5354 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5355 background-position: left top;
5356 background-repeat: repeat;
5357 background-size: auto;
5358 background-attachment: fixed;
5361 toolbarpaletteitem[place="toolbar"] {
5362 transition: border-width 250ms ease-in-out;
5365 toolbarpaletteitem[mousedown] {
5366 outline: 1px solid #008484;
5367 cursor: -moz-grabbing;
5371 .panel-customization-placeholder,
5372 toolbarpaletteitem[place="palette"],
5373 toolbarpaletteitem[place="panel"] {
5374 transition: transform .3s ease-in-out;
5377 #customization-palette {
5378 transition: opacity .3s ease-in-out;
5382 #customization-palette[showing="true"] {
5386 toolbarpaletteitem[notransition].panel-customization-placeholder,
5387 toolbarpaletteitem[notransition][place="toolbar"],
5388 toolbarpaletteitem[notransition][place="palette"],
5389 toolbarpaletteitem[notransition][place="panel"] {
5393 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5394 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5395 toolbarpaletteitem > toolbaritem.panel-wide-item,
5396 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5397 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5400 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5401 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5402 transform: scale(1.3);
5405 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5406 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5407 transform: scale(1.1);
5410 /* Override the toolkit styling for items being dragged over. */
5411 toolbarpaletteitem[place="toolbar"] {
5412 border-left-width: 0;
5413 border-right-width: 0;
5418 #customization-palette:not([hidden]) {
5419 margin-bottom: 25px;
5422 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5423 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5424 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5425 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5429 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5430 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5440 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5441 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5445 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5446 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5449 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5450 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5454 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5455 -moz-box-pack: center;
5459 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5460 -moz-margin-end: 5px;
5463 #customization-palette > toolbarpaletteitem > label {
5469 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5470 -moz-box-orient: vertical;
5471 /* Make the panel padding uniform across all platforms due to the
5472 styling of the section headers and footer. */
5476 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5481 .customization-lwtheme-menu-theme {
5482 -moz-appearance: none;
5485 -moz-padding-end: 5px;
5487 -moz-padding-start: 0;
5490 .customization-lwtheme-menu-theme[defaulttheme] {
5491 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5494 .customization-lwtheme-menu-theme[active="true"] {
5495 background-color: #008484;
5498 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5502 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5506 #customization-lwtheme-menu-header,
5507 #customization-lwtheme-menu-recommended {
5512 #customization-lwtheme-menu-header,
5513 #customization-lwtheme-menu-recommended,
5514 #customization-lwtheme-menu-footer {
5515 background-color: #A09090;
5517 margin-right: -10px;
5521 #customization-lwtheme-menu-header {
5523 border-top-right-radius: 3px;
5524 border-top-left-radius: 3px;
5527 #customization-lwtheme-menu-recommended {
5530 #customization-lwtheme-menu-footer {
5531 margin-bottom: -10px;
5532 border-bottom-right-radius: 3px;
5533 border-bottom-left-radius: 3px;
5536 .customization-lwtheme-menu-footeritem {
5537 -moz-appearance: none;
5539 background-color: #C09070;
5541 border: 1px solid transparent;
5547 .customization-lwtheme-menu-footeritem:hover {
5548 background-color: #FFCF00;
5551 .customization-lwtheme-menu-footeritem:first-child {
5554 /* === END customizeMode.inc.css === */
5556 /* === BEGIN customizeTip.inc.css === */
5558 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5565 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5566 border: 1px solid #9C9CFF;
5570 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5571 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5574 .customization-tipPanel-infoBox {
5575 margin: 20px 25px 25px;
5577 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5578 background-repeat: no-repeat;
5581 .customization-tipPanel-content {
5587 .customization-tipPanel-em {
5592 .customization-tipPanel-contentImage {
5594 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5602 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5603 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5606 .customization-tipPanel-link {
5607 -moz-appearance: none;
5608 background: transparent;
5616 .customization-tipPanel-link > .button-box > .button-text {
5617 margin: 0 !important;
5620 .customization-tipPanel-closeBox > .close-icon {
5621 -moz-appearance: none;
5623 -moz-margin-end: -25px;
5626 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5627 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5628 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5631 /* === END customizeTip.inc.css === */
5634 * This next rule is a hack to disable subpixel anti-aliasing on all
5635 * labels during the customize mode transition. Subpixel anti-aliasing
5636 * on Windows with Direct2D layers acceleration is particularly slow to
5637 * paint, so this hack is how we sidestep that performance bottleneck.
5639 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5640 transform: perspective(0.01px);
5643 #main-window[customize-entered] > #tab-view-deck {
5644 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5645 background-attachment: fixed;
5648 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5649 background-repeat: no-repeat;
5650 background-position: right top;
5651 background-attachment: fixed;
5652 /* The image will get set from CustomizeMode.jsm */
5653 background-image: none;
5654 background-color: transparent;
5657 #main-window[customization-lwtheme]:-moz-lwtheme {
5658 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5659 background-repeat: repeat;
5660 background-attachment: fixed;
5661 background-position: left top;
5664 #main-window[customize-entered] #browser-bottombox,
5665 #main-window[customize-entered] #customization-container {
5666 border-left: 1px solid #9C9CFF;
5667 border-right: 1px solid #9C9CFF;
5668 background-clip: padding-box;
5671 #main-window[customize-entered] #browser-bottombox {
5672 border-bottom: 1px solid #9C9CFF;
5675 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5679 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5683 /* End customization mode */
5685 /* Private browsing indicators */
5688 * Currently, we have two places where we put private browsing indicators on
5689 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5690 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5691 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5692 * want the bottom border of the image to line up with the bottom of the window
5693 * caption buttons. That's why there's so much special-casing going on in here.
5695 .private-browsing-indicator {
5697 pointer-events: none;
5700 #private-browsing-indicator-titlebar {
5705 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5709 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5713 #TabsToolbar > .private-browsing-indicator {
5714 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5715 -moz-margin-start: 4px;
5719 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5720 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5721 * min/max/close window buttons.
5723 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5724 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5725 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5726 -moz-margin-end: 4px;
5732 /* This one is for Linux */
5733 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5734 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5738 /* End private browsing indicators */
5740 /* === BEGIN UITour.inc.css === */
5744 #UITourHighlightContainer {
5745 -moz-appearance: none;
5747 background-color: transparent;
5748 /* This is a buffer to compensate for the movement in the "wobble" effect */
5753 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5754 border-radius: 40px;
5755 border: 1px solid #9C9CFF;
5756 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5757 on Linux without an X compositor where opacity is either 0 or 1. */
5758 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5763 #UITourTooltipBody {
5764 -moz-margin-end: 14px;
5767 #UITourTooltipBody > vbox {
5771 #UITourTooltipIconContainer {
5772 -moz-margin-start: -16px;
5775 #UITourTooltipIcon {
5778 -moz-margin-start: 28px;
5779 -moz-margin-end: 28px;
5782 #UITourTooltipTitle,
5783 #UITourTooltipDescription {
5787 #UITourTooltipTitle {
5790 -moz-margin-start: 0;
5795 #UITourTooltipDescription {
5796 -moz-margin-start: 0;
5799 line-height: 1.8rem;
5800 margin-bottom: 0; /* Override global.css */
5803 #UITourTooltipClose {
5804 -moz-appearance: none;
5806 background-color: transparent;
5808 -moz-margin-start: 4px;
5812 #UITourTooltipClose > .toolbarbutton-text {
5816 #UITourTooltipButtons {
5818 background-color: rgba(0,0,0,.2);
5819 border-top: 1px solid rgba(0,0,0,.4);
5820 margin: 24px -16px -16px;
5824 #UITourTooltipButtons > label,
5825 #UITourTooltipButtons > button {
5829 #UITourTooltipButtons > label:first-child,
5830 #UITourTooltipButtons > button:first-child {
5831 -moz-margin-start: 0;
5834 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5837 -moz-margin-end: 5px;
5840 #UITourTooltipButtons > label,
5841 #UITourTooltipButtons > button .button-text {
5845 #UITourTooltipButtons > button:not(.button-link) {
5846 -moz-appearance: none;
5847 background-color: #C09070;
5848 border-radius: 3000px;
5852 transition-property: background-color, color;
5853 transition-duration: 150ms;
5856 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5857 background-color: #FFCF00;
5861 #UITourTooltipButtons > label,
5862 #UITourTooltipButtons > button.button-link {
5863 -moz-appearance: none;
5864 background: transparent;
5867 color: rgba(0,0,0,0.35);
5869 padding-right: 10px;
5872 #UITourTooltipButtons > button.button-link:hover {
5876 /* The primary button gets the same color as the customize button. */
5877 #UITourTooltipButtons > button.button-primary {
5878 background-color: #A06060; /* LCARS default button background color */
5881 padding-right: 30px;
5884 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5885 background-color: #FFCF00;
5889 /* Notification overrides for Heartbeat UI */
5891 notification.heartbeat {
5892 background-color: #A09090;
5896 @keyframes pulse-onshow {
5899 transform: scale(1.0);
5903 transform: scale(1.1);
5906 transform: scale(1.0);
5909 transform: scale(1.1);
5912 transform: scale(1.0);
5916 @keyframes pulse-twice {
5918 transform: scale(1.1);
5921 transform: scale(0.8);
5924 transform: scale(1);
5928 .messageText.heartbeat {
5930 /* text-shadow: none; */
5931 -moz-margin-start: 0px;
5934 .messageImage.heartbeat {
5937 -moz-margin-start: 8px;
5938 -moz-margin-end: 8px;
5941 .messageImage.heartbeat.pulse-onshow {
5942 animation-name: pulse-onshow;
5943 animation-duration: 1.5s;
5944 animation-iteration-count: 1;
5945 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5948 .messageImage.heartbeat.pulse-twice {
5949 animation-name: pulse-twice;
5950 animation-duration: 1s;
5951 animation-iteration-count: 2;
5952 animation-timing-function: linear;
5955 /* Learn More link styles */
5956 .heartbeat > .text-link {
5958 -moz-margin-start: 0px;
5961 .heartbeat > .text-link:hover {
5963 text-decoration: none;
5966 .heartbeat > .text-link:hover:active {
5970 /* Heartbeat UI Rating Star Classes */
5971 .heartbeat > #star-rating-container {
5973 /* margin-bottom: 4px;*/
5976 .heartbeat > #star-rating-container > #star5 {
5977 -moz-box-ordinal-group: 5;
5980 .heartbeat > #star-rating-container > #star4 {
5981 -moz-box-ordinal-group: 4;
5984 .heartbeat > #star-rating-container > #star3 {
5985 -moz-box-ordinal-group: 3;
5988 .heartbeat > #star-rating-container > #star2 {
5989 -moz-box-ordinal-group: 2;
5992 .heartbeat > #star-rating-container > .star-x {
5993 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5995 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
5996 -moz-margin-end: 4px !important;
6001 .heartbeat > #star-rating-container > .star-x:hover,
6002 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6003 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6006 /* === END UITour.inc.css === */
6008 #UITourTooltipButtons {
6010 * Override the --panel-arrowcontent-padding so the background extends
6011 * to the sides and bottom of the panel.
6014 margin-right: -10px;
6015 margin-bottom: -10px;
6018 /* === BEGIN contextmenu.inc.css === */
6020 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6023 #context-navigation > .menuitem-iconic {
6025 -moz-box-pack: center;
6026 -moz-box-align: center;
6029 #context-navigation > .menuitem-iconic[disabled="true"] {
6030 background-color: transparent;
6033 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6034 -moz-appearance: none;
6037 #context-back > .menu-iconic-left {
6038 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6039 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6040 -moz-image-region: rect(0, 54px, 18px, 36px);
6043 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6044 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6045 -moz-image-region: rect(18px, 54px, 36px, 36px);
6048 #context-back[disabled="true"] > .menu-iconic-left {
6049 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6050 -moz-image-region: rect(36px, 54px, 54px, 36px);
6053 #context-forward > .menu-iconic-left {
6054 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6055 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6056 -moz-image-region: rect(0, 72px, 18px, 54px);
6059 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6060 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6061 -moz-image-region: rect(18px, 72px, 36px, 54px);
6064 #context-forward[disabled="true"] > .menu-iconic-left {
6065 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6066 -moz-image-region: rect(36px, 72px, 54px, 54px);
6069 #context-reload > .menu-iconic-left {
6070 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6071 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6072 -moz-image-region: rect(0, 14px, 14px, 0);
6075 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6076 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6077 -moz-image-region: rect(14px, 14px, 28px, 0);
6080 #context-reload[disabled="true"] > .menu-iconic-left {
6081 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6082 -moz-image-region: rect(28px, 14px, 42px, 0);
6085 #context-stop > .menu-iconic-left {
6086 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6087 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6088 -moz-image-region: rect(0, 28px, 14px, 14px);
6091 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6092 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6093 -moz-image-region: rect(14px, 28px, 28px, 14px);
6096 #context-stop[disabled="true"] > .menu-iconic-left {
6097 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6098 -moz-image-region: rect(28px, 28px, 42px, 14px);
6101 #context-bookmarkpage > .menu-iconic-left {
6102 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6103 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6104 -moz-image-region: rect(0, 144px, 18px, 126px);
6107 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6108 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6109 -moz-image-region: rect(18px, 144px, 36px, 126px);
6112 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6113 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6114 -moz-image-region: rect(36px, 144px, 54px, 126px);
6117 #context-bookmarkpage[starred=true] {
6118 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6119 -moz-image-region: rect(0px, 162px, 18px, 144px);
6122 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6123 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6124 -moz-image-region: rect(18px, 162px, 36px, 144px);
6127 #context-bookmarkpage[starred=true][disabled=true] {
6128 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6129 -moz-image-region: rect(36px, 162px, 54px, 144px);
6132 #context-back:-moz-locale-dir(rtl),
6133 #context-forward:-moz-locale-dir(rtl),
6134 #context-reload:-moz-locale-dir(rtl) {
6135 transform: scaleX(-1);
6138 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6139 width: 18px; /*16px;*/
6140 height: 18px; /*16px;*/
6144 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6145 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6151 #context-media-eme-learnmore {
6152 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6155 #context-media-eme-learnmore {
6156 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6159 /* === END contextmenu.inc.css === */
6161 #context-navigation {
6164 #context-sep-navigation {
6165 /* margin-top: -4px; */
6168 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6173 /* === BEGIN usercontext.inc.css === */
6175 /* User Context UI browser styles */
6177 #menu_newUserContextTabPersonal {
6178 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6181 #menu_newUserContextTabWork {
6182 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6185 #menu_newUserContextTabBanking {
6186 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6189 #menu_newUserContextTabShopping {
6190 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6193 /* URL Bar Decoration */
6195 #userContext-indicator {
6200 #userContext-label {
6201 margin-inline-end: 3px;
6205 #userContext-icons:not([usercontextid]) {
6209 #userContext-icons {
6210 -moz-box-align: center;
6213 /* Personal User Context */
6214 #userContext-icons[usercontextid="1"] > #userContext-label {
6217 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6218 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6221 /* Work User Context */
6222 #userContext-icons[usercontextid="2"] > #userContext-label {
6225 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6226 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6229 /* Banking User Context */
6230 #userContext-icons[usercontextid="3"] > #userContext-label {
6233 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6234 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6237 /* Shopping User Context */
6238 #userContext-icons[usercontextid="4"] > #userContext-label {
6241 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6242 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6245 /* === END usercontext.inc.css === */