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 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
47 --identity-box-verified-background-color: #000000;
49 --panel-separator-color: #A09090;
51 --urlbar-separator-color: #9C9CFF;
55 -moz-box-orient: vertical; /* for flex hack */
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
62 /* ::::: primary toolbar ::::: */
64 .toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
82 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
83 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
89 /* margin-top: var(--space-above-tabbar);*/
92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
93 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
100 /* 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 */
104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
108 outline-color: #A09090;
114 #navigator-toolbox::after {
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
121 #navigator-toolbox > toolbar {
124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
128 overflow: -moz-hidden-unscrollable;
130 transition: min-height 170ms ease-out, max-height 170ms ease-out;
133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
140 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
141 /* Indent also due to non-applicable aero rule in original Windows theme. */
142 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
143 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
145 background-color: #6000CF;
149 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
150 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
151 background-color: #8050B0;
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
170 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
171 #titlebar-buttonbox > .titlebar-button {
177 /* Position the toolbar above the bottom of background tabs */
182 #personal-bookmarks {
183 /* min-height: 24px; */
186 #PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
190 #PersonalToolbar > #home-button > .toolbarbutton-text {
194 #print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
198 #browser-bottombox:not(:-moz-lwtheme) {
201 /* ::::: titlebar ::::: */
205 background-color: #6000CF;
208 #titlebar:-moz-window-inactive {
209 background-color: #8050B0;
213 #main-window[sizemode="normal"] > #titlebar {
218 #main-window[sizemode="maximized"] > #titlebar {
222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
223 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
227 /* There is a margin-bottom set to -23 by code. */
231 /* The button box must appear on top of the navigator-toolbox in order for
232 * click and hover mouse events to work properly for the button in the restored
233 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
234 * can swallow those events. It will also place the buttons above the fog on
235 * themes with Aero Glass.
238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
239 -moz-appearance: none;
242 -moz-margin-end: 3px;
246 .titlebar-placeholder[type="appmenu-button"] {
250 .titlebar-placeholder[type="caption-buttons"] {
254 /* titlebar command buttons */
256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
259 #titlebar-min:hover {
260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
267 #titlebar-max:hover {
268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
271 #main-window[sizemode="maximized"] #titlebar-max {
272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
275 #main-window[sizemode="maximized"] #titlebar-max:hover {
276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
283 #titlebar-close:hover {
284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
288 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
289 #titlebar-fullscreen-button {
290 -moz-appearance: none;
291 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
292 -moz-image-region: rect(0px, 16px, 16px, 0px);
295 #titlebar-fullscreen-button:hover {
296 -moz-image-region: rect(0px, 32px, 16px, 16px);
299 @media (min-resolution: 2dppx) {
300 #titlebar-fullscreen-button {
301 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
302 -moz-image-region: rect(0px, 32px, 32px, 0px);
305 #titlebar-fullscreen-button:hover {
306 -moz-image-region: rect(0px, 64px, 32px, 32px);
312 /* ::::: bookmark buttons ::::: */
314 toolbarbutton.bookmark-item:not(.subviewbutton),
315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
320 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
321 toolbarbutton.bookmark-item[open="true"] {
324 -moz-padding-start: 4px;
325 -moz-padding-end: 2px;*/
328 .bookmark-item > .toolbarbutton-icon,
329 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
332 -moz-margin-start: 1px;
333 -moz-margin-end: 2px;
338 /* Force the display of the label for bookmarks */
339 .bookmark-item > .toolbarbutton-text,
340 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
341 display: -moz-box !important;
344 .bookmark-item > .toolbarbutton-menu-dropmarker {
348 #bookmarks-toolbar-placeholder {
349 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
350 -moz-box-orient: horizontal;
353 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
354 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
355 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
358 /* ----- BOOKMARK STAR ANIMATION ----- */
360 @keyframes animation-bookmarkAdded {
361 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
362 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
364 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
367 @keyframes animation-bookmarkPulse {
368 from { transform: scale(1); }
369 50% { transform: scale(1.3); }
370 to { transform: scale(1); }
373 #bookmarked-notification-container {
382 #bookmarked-notification {
383 background-size: 16px;
384 background-position: center;
385 background-repeat: no-repeat;
391 #bookmarked-notification-dropmarker-anchor {
396 #bookmarked-notification-dropmarker-icon {
402 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
403 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
404 animation: animation-bookmarkAdded 800ms;
405 animation-timing-function: ease, ease, ease;
408 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
409 list-style-image: none !important;
412 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
414 animation: animation-bookmarkPulse 300ms;
415 animation-delay: 600ms;
416 animation-timing-function: ease-out;
419 /* ::::: bookmark menus ::::: */
422 menuitem.bookmark-item {
427 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
432 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
433 -moz-padding-start: 0px;
436 /* ::::: bookmark items ::::: */
439 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
440 -moz-image-region: auto;
443 .bookmark-item[container] {
444 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
445 -moz-image-region: auto;
448 .bookmark-item[container][open] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
450 -moz-image-region: auto;
453 .bookmark-item[container][livemark] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
455 -moz-image-region: auto;
458 .bookmark-item[container][livemark] .bookmark-item {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
460 -moz-image-region: rect(0px, 16px, 16px, 0px);
463 .bookmark-item[container][livemark] .bookmark-item[visited] {
464 -moz-image-region: rect(0px, 32px, 16px, 16px);
467 .bookmark-item[container][query] {
468 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
469 -moz-image-region: auto;
472 .bookmark-item[query][tagContainer] {
473 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
474 -moz-image-region: auto;
477 .bookmark-item[query][dayContainer] {
478 list-style-image: url("chrome://communicator/skin/history/calendar.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][hostContainer] {
483 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
484 -moz-image-region: auto;
487 .bookmark-item[query][hostContainer][open] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
489 -moz-image-region: auto;
492 .bookmark-item[cutting] > .toolbarbutton-icon,
493 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
497 .bookmark-item[cutting] > .toolbarbutton-text,
498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
502 /* ::::: primary toolbar buttons ::::: */
504 /* === BEGIN toolbarbuttons.inc.css === */
506 /* Whole section of this included file: */
507 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
508 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
509 #social-share-button, #open-file-button, #find-button, #developer-button,
510 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
511 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
512 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
513 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button),
514 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
515 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
519 -moz-image-region: rect(0, 36px, 18px, 18px);
522 #back-button:hover:not([disabled="true"]) {
523 -moz-image-region: rect(18px, 36px, 36px, 18px);
526 #back-button[disabled="true"] {
527 -moz-image-region: rect(36px, 36px, 54px, 18px);
531 -moz-image-region: rect(0, 72px, 18px, 54px);
534 #forward-button:hover:not([disabled="true"]) {
535 -moz-image-region: rect(18px, 72px, 36px, 54px);
538 #forward-button[disabled="true"] {
539 -moz-image-region: rect(36px, 72px, 54px, 54px);
542 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
543 #forward-button:-moz-locale-dir(rtl) {
544 transform: scaleX(-1);
547 #home-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 126px, 18px, 108px);
551 #home-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 126px, 36px, 108px);
555 #bookmarks-menu-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 144px, 18px, 126px);
559 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
560 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
561 -moz-image-region: rect(18px, 144px, 36px, 126px);
564 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
565 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
566 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
567 background-color: transparent !important;
570 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
571 -moz-image-region: rect(0, 162px, 18px, 144px);
574 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
575 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
576 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
577 /* When starred and clicked (for edit/delete dialog),
578 * then only the menubutton-button itself is open, but not the whole menubutton. */
579 -moz-image-region: rect(18px, 162px, 36px, 144px);
582 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
583 -moz-image-region: rect(0, 630px, 18px, 612px);
586 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
588 -moz-box-align: center;
591 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
592 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(18px, 630px, 36px, 612px);
596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
600 -moz-padding-start: 2px;
601 -moz-padding-end: 0px;
604 #history-panelmenu[cui-areatype="toolbar"] {
605 -moz-image-region: rect(0, 180px, 18px, 162px);
608 #history-panelmenu[cui-areatype="toolbar"]:hover,
609 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
610 -moz-image-region: rect(18px, 180px, 36px, 162px);
613 #downloads-button[cui-areatype="toolbar"] {
614 -moz-image-region: rect(0, 198px, 18px, 180px);
617 #downloads-button[cui-areatype="toolbar"]:hover,
618 #downloads-button[cui-areatype="toolbar"][open="true"] {
619 -moz-image-region: rect(18px, 198px, 36px, 180px);
622 #add-ons-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 216px, 18px, 198px);
626 #add-ons-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 216px, 36px, 198px);
630 #open-file-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 234px, 18px, 216px);
634 #open-file-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 234px, 36px, 216px);
638 #save-page-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 252px, 18px, 234px);
642 #save-page-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 252px, 36px, 234px);
646 #sync-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 792px, 18px, 774px);
650 #sync-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 792px, 36px, 774px);
654 #feed-button[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 288px, 18px, 270px);
658 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
659 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
660 -moz-image-region: rect(18px, 288px, 36px, 270px);
663 #feed-button[cui-areatype="toolbar"][disabled="true"] {
664 -moz-image-region: rect(36px, 288px, 54px, 270px);
667 #social-share-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0px, 306px, 18px, 288px);
671 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
672 #social-share-button[cui-areatype="toolbar"][open="true"] {
673 -moz-image-region: rect(18px, 306px, 36px, 288px);
676 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
677 -moz-image-region: rect(36px, 306px, 54px, 288px);
680 #characterencoding-button[cui-areatype="toolbar"] {
681 -moz-image-region: rect(0, 324px, 18px, 306px);
684 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
686 -moz-image-region: rect(18px, 324px, 36px, 306px);
689 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 324px, 54px, 306px);
693 #new-window-button[cui-areatype="toolbar"] {
694 -moz-image-region: rect(0, 342px, 18px, 324px);
697 #new-window-button[cui-areatype="toolbar"]:hover {
698 -moz-image-region: rect(18px, 342px, 36px, 324px);
701 #e10s-button[cui-areatype="toolbar"] {
702 -moz-image-region: rect(0, 342px, 18px, 324px);
705 #e10s-button[cui-areatype="toolbar"]:hover {
706 -moz-image-region: rect(18px, 342px, 36px, 324px);
709 #e10s-button > .toolbarbutton-icon {
710 transform: scaleY(-1);
713 #new-tab-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 360px, 18px, 342px);
717 #new-tab-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 360px, 36px, 342px);
721 #privatebrowsing-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 378px, 18px, 360px);
725 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 378px, 36px, 360px);
729 #find-button[cui-areatype="toolbar"] {
730 -moz-image-region: rect(0, 396px, 18px, 378px);
733 #find-button[cui-areatype="toolbar"]:hover {
734 -moz-image-region: rect(18px, 396px, 36px, 378px);
737 #print-button[cui-areatype="toolbar"] {
738 -moz-image-region: rect(0, 414px, 18px, 396px);
741 #print-button[cui-areatype="toolbar"]:hover {
742 -moz-image-region: rect(18px, 414px, 36px, 396px);
745 #fullscreen-button[cui-areatype="toolbar"] {
746 -moz-image-region: rect(0, 432px, 18px, 414px);
749 #fullscreen-button[cui-areatype="toolbar"]:hover {
750 -moz-image-region: rect(18px, 432px, 36px, 414px);
753 #developer-button[cui-areatype="toolbar"] {
754 -moz-image-region: rect(0, 450px, 18px, 432px);
757 #developer-button[cui-areatype="toolbar"]:hover,
758 #developer-button[cui-areatype="toolbar"][open="true"] {
759 -moz-image-region: rect(18px, 450px, 36px, 432px);
762 #preferences-button[cui-areatype="toolbar"] {
763 -moz-image-region: rect(0, 468px, 18px, 450px);
766 #preferences-button[cui-areatype="toolbar"]:hover {
767 -moz-image-region: rect(18px, 468px, 36px, 450px);
770 #PanelUI-menu-button {
771 -moz-image-region: rect(0, 486px, 18px, 468px);
774 #PanelUI-menu-button:hover,
775 #PanelUI-menu-button[open="true"] {
776 -moz-image-region: rect(18px, 486px, 36px, 468px);
779 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
780 -moz-image-region: rect(0, 504px, 18px, 486px);
783 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
784 -moz-image-region: rect(18px, 504px, 36px, 486px);
787 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
788 -moz-image-region: rect(36px, 504px, 54px, 486px);
791 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
792 -moz-image-region: rect(0, 522px, 18px, 504px);
795 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
796 -moz-image-region: rect(18px, 522px, 36px, 504px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
800 -moz-image-region: rect(36px, 522px, 54px, 504px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
804 -moz-image-region: rect(0, 540px, 18px, 522px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
808 -moz-image-region: rect(18px, 540px, 36px, 522px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
812 -moz-image-region: rect(36px, 540px, 54px, 522px);
815 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
816 -moz-image-region: rect(0, 558px, 18px, 540px);
819 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
820 -moz-image-region: rect(18px, 558px, 36px, 540px);
823 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
824 -moz-image-region: rect(36px, 558px, 54px, 540px);
827 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
828 -moz-image-region: rect(0, 576px, 18px, 558px);
831 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
832 -moz-image-region: rect(18px, 576px, 36px, 558px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
836 -moz-image-region: rect(36px, 576px, 54px, 558px);
839 #nav-bar-overflow-button {
840 -moz-image-region: rect(0, 612px, 18px, 594px);
843 #nav-bar-overflow-button:hover,
844 #nav-bar-overflow-button[open="true"] {
845 -moz-image-region: rect(18px, 612px, 36px, 594px);
848 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
849 transform: scaleX(-1);
853 -moz-image-region: rect(0, 648px, 18px, 630px);
856 #tabview-button:hover {
857 -moz-image-region: rect(18px, 648px, 36px, 630px);
860 #email-link-button[cui-areatype="toolbar"] {
861 -moz-image-region: rect(0, 666px, 18px, 648px);
864 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
865 -moz-image-region: rect(18px, 666px, 36px, 648px);
868 #email-button[cui-areatype="toolbar"][disabled="true"] {
869 -moz-image-region: rect(36px, 666px, 54px, 648px);
872 #sidebar-button[cui-areatype="toolbar"] {
873 -moz-image-region: rect(0, 684px, 18px, 666px);
876 #sidebar-button[cui-areatype="toolbar"]:hover {
877 -moz-image-region: rect(18px, 684px, 36px, 666px);
880 #panic-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 702px, 18px, 684px);
884 #panic-button[cui-areatype="toolbar"]:hover,
885 #panic-button[cui-areatype="toolbar"][open] {
886 -moz-image-region: rect(18px, 702px, 36px, 684px);
889 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
890 transform: scaleX(-1);
893 #webide-button[cui-areatype="toolbar"] {
894 -moz-image-region: rect(0, 738px, 18px, 720px);
897 #webide-button[cui-areatype="toolbar"]:hover {
898 -moz-image-region: rect(18px, 738px, 36px, 720px);
901 /* === END toolbarbuttons.inc.css === */
903 /* === BEGIN menupanel.inc.css === */
905 /* Menu panel and palette styles */
908 /* avoid aero overrides with changed filenames */
909 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
910 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
913 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
914 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
915 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
916 #social-share-button, #open-file-button, #find-button, #developer-button,
917 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
918 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
919 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
920 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)[cui-areatype="menu-panel"],
921 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
922 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
923 #social-share-button, #open-file-button, #find-button, #developer-button,
924 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
925 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
926 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
927 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) {
928 list-style-image: var(--menupanel-list-style-image);
931 #home-button[cui-areatype="menu-panel"],
932 toolbarpaletteitem[place="palette"] > #home-button {
933 -moz-image-region: rect(0px, 128px, 32px, 96px);
936 #home-button[cui-areatype="menu-panel"]:hover,
937 toolbarpaletteitem[place="palette"] > #home-button:hover {
938 -moz-image-region: rect(32px, 128px, 64px, 96px);
941 #bookmarks-menu-button[cui-areatype="menu-panel"],
942 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
943 -moz-image-region: rect(0px, 192px, 32px, 160px);
946 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
947 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
948 -moz-image-region: rect(32px, 192px, 64px, 160px);
951 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
952 -moz-image-region: rect(32px, 192px, 64px, 160px);
955 #history-panelmenu[cui-areatype="menu-panel"],
956 toolbarpaletteitem[place="palette"] > #history-panelmenu {
957 -moz-image-region: rect(0px, 224px, 32px, 192px);
960 #history-panelmenu[cui-areatype="menu-panel"]:hover,
961 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
962 -moz-image-region: rect(32px, 224px, 64px, 192px);
965 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
966 -moz-image-region: rect(32px, 224px, 64px, 192px);
969 #downloads-button[cui-areatype="menu-panel"],
970 toolbarpaletteitem[place="palette"] > #downloads-button {
971 -moz-image-region: rect(0px, 256px, 32px, 224px);
974 #downloads-button[cui-areatype="menu-panel"]:hover,
975 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
976 -moz-image-region: rect(32px, 256px, 64px, 224px);
979 #add-ons-button[cui-areatype="menu-panel"],
980 toolbarpaletteitem[place="palette"] > #add-ons-button {
981 -moz-image-region: rect(0px, 288px, 32px, 256px);
984 #add-ons-button[cui-areatype="menu-panel"]:hover,
985 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
986 -moz-image-region: rect(32px, 288px, 64px, 256px);
989 #open-file-button[cui-areatype="menu-panel"],
990 toolbarpaletteitem[place="palette"] > #open-file-button {
991 -moz-image-region: rect(0px, 320px, 32px, 288px);
994 #open-file-button[cui-areatype="menu-panel"]:hover,
995 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
996 -moz-image-region: rect(32px, 320px, 64px, 288px);
999 #save-page-button[cui-areatype="menu-panel"],
1000 toolbarpaletteitem[place="palette"] > #save-page-button {
1001 -moz-image-region: rect(0px, 352px, 32px, 320px);
1004 #save-page-button[cui-areatype="menu-panel"]:hover,
1005 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1006 -moz-image-region: rect(32px, 352px, 64px, 320px);
1009 #sync-button[cui-areatype="menu-panel"],
1010 toolbarpaletteitem[place="palette"] > #sync-button {
1011 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1014 #sync-button[cui-areatype="menu-panel"]:hover,
1015 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1016 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1019 #feed-button[cui-areatype="menu-panel"],
1020 toolbarpaletteitem[place="palette"] > #feed-button {
1021 -moz-image-region: rect(0px, 416px, 32px, 384px);
1024 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1025 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1026 -moz-image-region: rect(32px, 416px, 64px, 384px);
1029 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1030 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1031 -moz-image-region: rect(64px, 416px, 96px, 384px);
1034 #social-share-button[cui-areatype="menu-panel"],
1035 toolbarpaletteitem[place="palette"] > #social-share-button {
1036 -moz-image-region: rect(0px, 448px, 32px, 416px);
1039 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1040 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1041 -moz-image-region: rect(32px, 448px, 64px, 416px);
1044 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1045 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1046 -moz-image-region: rect(64px, 448px, 96px, 416px);
1049 #characterencoding-button[cui-areatype="menu-panel"],
1050 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1051 -moz-image-region: rect(0px, 480px, 32px, 448px);
1054 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1055 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1056 -moz-image-region: rect(32px, 480px, 64px, 448px);
1059 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1060 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1061 -moz-image-region: rect(64px, 480px, 96px, 448px);
1064 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1065 -moz-image-region: rect(32px, 480px, 64px, 448px);
1068 #new-window-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #new-window-button {
1070 -moz-image-region: rect(0px, 512px, 32px, 480px);
1073 #new-window-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1075 -moz-image-region: rect(32px, 512px, 64px, 480px);
1078 #e10s-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #e10s-button {
1080 -moz-image-region: rect(0px, 512px, 32px, 480px);
1083 #e10s-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1085 -moz-image-region: rect(32px, 512px, 64px, 480px);
1088 #new-tab-button[cui-areatype="menu-panel"],
1089 toolbarpaletteitem[place="palette"] > #new-tab-button {
1090 -moz-image-region: rect(0px, 544px, 32px, 512px);
1093 #new-tab-button[cui-areatype="menu-panel"]:hover,
1094 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1095 -moz-image-region: rect(32px, 544px, 64px, 512px);
1098 #privatebrowsing-button[cui-areatype="menu-panel"],
1099 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1100 -moz-image-region: rect(0px, 576px, 32px, 544px);
1103 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1104 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1105 -moz-image-region: rect(32px, 576px, 64px, 544px);
1108 #tabview-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #tabview-button {
1110 -moz-image-region: rect(0px, 608px, 32px, 576px);
1113 #tabview-button[cui-areatype="menu-panel"]:hover,
1114 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1115 -moz-image-region: rect(32px, 608px, 64px, 576px);
1118 #find-button[cui-areatype="menu-panel"],
1119 toolbarpaletteitem[place="palette"] > #find-button {
1120 -moz-image-region: rect(0px, 640px, 32px, 608px);
1123 #find-button[cui-areatype="menu-panel"]:hover,
1124 toolbarpaletteitem[place="palette"] > #find-button:hover {
1125 -moz-image-region: rect(32px, 640px, 64px, 608px);
1128 #print-button[cui-areatype="menu-panel"],
1129 toolbarpaletteitem[place="palette"] > #print-button {
1130 -moz-image-region: rect(0px, 672px, 32px, 640px);
1133 #print-button[cui-areatype="menu-panel"]:hover,
1134 toolbarpaletteitem[place="palette"] > #print-button:hover {
1135 -moz-image-region: rect(32px, 672px, 64px, 640px);
1138 #fullscreen-button[cui-areatype="menu-panel"],
1139 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1140 -moz-image-region: rect(0px, 704px, 32px, 672px);
1143 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1144 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1145 -moz-image-region: rect(32px, 704px, 64px, 672px);
1148 #developer-button[cui-areatype="menu-panel"],
1149 toolbarpaletteitem[place="palette"] > #developer-button {
1150 -moz-image-region: rect(0px, 736px, 32px, 704px);
1153 #developer-button[cui-areatype="menu-panel"]:hover,
1154 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1155 -moz-image-region: rect(32px, 736px, 64px, 704px);
1158 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1159 -moz-image-region: rect(32px, 736px, 64px, 704px);
1162 #preferences-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #preferences-button {
1164 -moz-image-region: rect(0px, 768px, 32px, 736px);
1167 #preferences-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1169 -moz-image-region: rect(32px, 768px, 64px, 736px);
1172 #email-link-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #email-link-button {
1174 -moz-image-region: rect(0, 800px, 32px, 768px);
1177 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1178 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1179 -moz-image-region: rect(32px, 800px, 64px, 768px);
1182 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1183 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1184 -moz-image-region: rect(64px, 800px, 96px, 768px);
1187 #sidebar-button[cui-areatype="menu-panel"],
1188 toolbarpaletteitem[place="palette"] > #sidebar-button {
1189 -moz-image-region: rect(0, 864px, 32px, 832px);
1192 #sidebar-button[cui-areatype="menu-panel"]:hover,
1193 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1194 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1195 -moz-image-region: rect(32px, 864px, 64px, 832px);
1198 #panic-button[cui-areatype="menu-panel"],
1199 toolbarpaletteitem[place="palette"] > #panic-button {
1200 -moz-image-region: rect(0, 896px, 32px, 864px);
1203 #panic-button[cui-areatype="menu-panel"]:hover,
1204 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1205 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1206 -moz-image-region: rect(32px, 896px, 64px, 864px);
1209 #webide-button[cui-areatype="menu-panel"],
1210 toolbarpaletteitem[place="palette"] > #webide-button {
1211 -moz-image-region: rect(0px, 960px, 32px, 928px);
1214 #webide-button[cui-areatype="menu-panel"]:hover,
1215 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1216 -moz-image-region: rect(32px, 960px, 64px, 928px);
1219 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1220 -moz-image-region: rect(0, 832px, 32px, 800px);
1223 /* Wide panel control icons */
1225 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1226 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1227 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1228 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1229 list-style-image: var(--menupanel-small-list-style-image);
1232 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1233 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1234 -moz-image-region: rect(0px, 32px, 16px, 16px);
1237 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1238 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1239 -moz-image-region: rect(16px, 32px, 32px, 16px);
1242 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1243 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1244 -moz-image-region: rect(32px, 32px, 48px, 16px);
1247 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1248 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1249 -moz-image-region: rect(0px, 48px, 16px, 32px);
1252 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1253 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1254 -moz-image-region: rect(16px, 48px, 32px, 32px);
1257 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1258 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1259 -moz-image-region: rect(32px, 48px, 48px, 32px);
1262 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1263 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1264 -moz-image-region: rect(0px, 64px, 16px, 48px);
1267 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1268 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1269 -moz-image-region: rect(16px, 64px, 32px, 48px);
1272 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1273 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1274 -moz-image-region: rect(32px, 64px, 48px, 48px);
1277 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1278 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1279 -moz-image-region: rect(0px, 80px, 16px, 64px);
1282 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1283 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1284 -moz-image-region: rect(16px, 80px, 32px, 64px);
1287 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1288 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1289 -moz-image-region: rect(32px, 80px, 48px, 64px);
1292 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1293 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1294 -moz-image-region: rect(0px, 96px, 16px, 80px);
1297 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1298 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1299 -moz-image-region: rect(16px, 96px, 32px, 80px);
1302 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1303 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1304 -moz-image-region: rect(32px, 96px, 48px, 80px);
1307 #add-share-provider {
1308 list-style-image: var(--menupanel-small-list-style-image);
1309 -moz-image-region: rect(0px, 96px, 16px, 80px);
1312 /* === END menupanel.inc.css === */
1314 .toolbarbutton-1:not([type="menu-button"]) {
1315 -moz-box-orient: vertical;
1319 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1325 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1326 .toolbarbutton-1[disabled="true"]:hover:active,
1327 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1331 .toolbarbutton-1:hover:active,
1332 .toolbarbutton-1[open="true"],
1333 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1335 padding-bottom: 0px;
1336 -moz-padding-start: 3px;
1337 -moz-padding-end: 1px;
1340 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1341 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1342 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1343 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1344 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1347 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1348 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1351 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1352 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1355 .toolbarbutton-1 > .toolbarbutton-icon,
1356 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1360 #nav-bar .toolbarbutton-1,
1361 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1364 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1365 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1366 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1369 #nav-bar #PanelUI-menu-button {
1370 /* -moz-padding-start: 7px;
1371 -moz-padding-end: 5px;*/
1374 #nav-bar .toolbarbutton-1[type=panel],
1375 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1376 /* padding-left: 5px;
1377 padding-right: 5px;*/
1380 #nav-bar .toolbarbutton-1 > menupopup {
1381 /* margin-top: -3px;*/
1384 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1388 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1389 /* -moz-padding-end: 0;*/
1392 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1393 /* -moz-padding-start: 0;
1394 -moz-box-align: center;*/
1397 .findbar-button > .toolbarbutton-text,
1398 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1399 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1400 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1401 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1402 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1403 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1404 /* padding: 2px 6px;
1406 border-color: transparent;
1407 transition-property: background-color, border-color;
1408 transition-duration: 150ms;*/
1411 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1412 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1413 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1418 /* Help SDK icons fit: */
1419 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1420 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1424 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1425 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1429 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1430 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1431 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1432 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1433 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1434 /* -moz-padding-end: 17px;*/
1437 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1438 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1439 /* horizontal padding + border + icon width */
1440 /* max-width: 43px;*/
1443 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1446 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1449 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1452 #nav-bar .toolbaritem-combined-buttons {
1453 /* margin-left: 2px;
1454 margin-right: 2px;*/
1457 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1462 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1463 #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 {
1469 -moz-margin-end: -1px;
1473 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1476 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1477 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1478 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1479 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1480 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1481 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1482 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1483 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1484 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1487 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1488 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1489 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1490 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1491 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1492 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1495 #TabsToolbar .toolbarbutton-1,
1496 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1497 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1498 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1501 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1502 #TabsToolbar .toolbarbutton-1[open],
1503 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1504 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1505 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1508 /* unified back/forward button */
1511 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1514 #forward-button > menupopup {
1515 margin-top: 1px !important;
1518 #forward-button > .toolbarbutton-icon {
1519 background-clip: padding-box !important;
1520 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1521 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1525 -moz-margin-start: -4px !important;
1530 border-radius: 0 10000px 10000px 0;
1531 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1534 #forward-button:-moz-locale-dir(rtl) {
1535 border-radius: 10000px 0 0 10000px;
1538 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1539 transition: margin-left 150ms ease-out;
1542 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1543 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1546 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1547 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1548 transition-delay: 100s;
1551 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1552 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1553 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1557 /* padding-top: 3px !important;
1558 padding-bottom: 3px !important;
1559 -moz-padding-start: 5px !important;
1560 -moz-padding-end: 0 !important;*/
1563 border-radius: 10000px;
1567 margin-bottom: -2px;
1570 #back-button:-moz-locale-dir(rtl) {
1573 #back-button > menupopup {
1574 margin-top: -1px !important;
1577 #back-button > .toolbarbutton-icon {
1578 border-radius: 10000px !important;
1579 background-clip: padding-box !important;
1580 /* background-color: hsla(210,25%,98%,.08) !important;
1581 padding: 6px !important;
1582 border-style: none !important;
1583 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1584 0 0 0 1px hsla(210,4%,10%,.25);*/
1585 transition-property: background-color, box-shadow !important;
1586 transition-duration: 250ms !important;
1589 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1590 /* background-color: hsla(210,4%,10%,.08) !important;*/
1593 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1594 #back-button[open="true"] > .toolbarbutton-icon {
1595 /* background-color: hsla(210,4%,10%,.12) !important;
1596 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1597 0 0 0 1px hsla(210,4%,10%,.25),
1598 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1601 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1602 transform: scaleX(-1);
1605 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1606 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1607 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1610 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1611 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1612 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1615 #home-button.bookmark-item {
1616 list-style-image: url("chrome://browser/skin/Toolbar.png");
1619 #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),
1620 #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),
1621 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1622 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1623 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1624 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1625 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1628 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1631 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1632 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1633 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1637 #downloads-button > .toolbarbutton-icon {
1641 /* tabview menu item */
1644 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1645 -moz-image-region: rect(1px, 89px, 17px, 73px);
1648 #menu_tabview[groups="0"] {
1649 -moz-image-region: rect(1px, 17px, 17px, 1px);
1652 #menu_tabview[groups="1"] {
1653 -moz-image-region: rect(1px, 35px, 17px, 19px);
1656 #menu_tabview[groups="2"] {
1657 -moz-image-region: rect(1px, 53px, 17px, 37px);
1660 #menu_tabview[groups="3"] {
1661 -moz-image-region: rect(1px, 71px, 17px, 55px);
1664 /* undo close tab menu item */
1665 #alltabs_undoCloseTab {
1666 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1669 @media (min-resolution: 1.1dppx) {
1670 #alltabs_undoCloseTab {
1671 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1673 #alltabs_undoCloseTab > .toolbarbutton-icon {
1678 /* zoom control text (reset) button special case: */
1680 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1681 /* To make this line up with the icons, it needs the same height (18px) +
1682 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1683 * increase in text sizes would break things...
1688 /* ::::: fullscreen window controls ::::: */
1691 -moz-margin-start: 4px;
1697 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1702 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1705 #minimize-button:hover {
1706 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1710 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1713 #restore-button:hover {
1714 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1718 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1721 #close-button:hover {
1722 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1725 /* ::::: Location Bar ::::: */
1728 .searchbar-textbox {
1731 -moz-margin-start: 3px;
1735 /* make color as light as possible to deal with dark non-domain parts */
1739 #urlbar:-moz-lwtheme,
1740 .searchbar-textbox:-moz-lwtheme {
1741 /* background-color: rgba(255,255,255,.8);
1742 @navbarTextboxCustomBorder@
1746 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1747 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1748 /* background-color: rgba(255,255,255,.9);*/
1751 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1752 .searchbar-textbox:-moz-lwtheme[focused] {
1753 /* background-color: white;*/
1756 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1757 /* -moz-border-start: none;
1761 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1762 /* border-top-left-radius: 0;
1763 border-bottom-left-radius: 0; */
1766 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1767 /* border-top-right-radius: 0;
1768 border-bottom-right-radius: 0; */
1771 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1772 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1773 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1776 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1777 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1778 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1779 transform: scaleX(-1);
1782 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1783 -moz-box-direction: reverse;
1786 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1787 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1792 -moz-box-orient: horizontal;
1793 -moz-box-align: stretch;
1796 .urlbar-textbox-container {
1797 -moz-box-align: stretch;
1801 -moz-margin-start: 0;
1805 -moz-box-align: center;
1810 /* 16x16 icon with border-box sizing */
1815 .search-go-container {
1819 .search-go-container > .search-go-button {
1823 #urlbar-search-footer {
1824 border-top: 1px solid #A09090;
1827 #urlbar-search-settings {
1830 #urlbar-search-settings:hover {
1833 #urlbar-search-settings:hover:active {
1836 #urlbar-search-splitter {
1838 -moz-margin-start: -3px;
1840 background: transparent;
1843 #urlbar-search-splitter + #urlbar-container > #urlbar,
1844 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1845 -moz-margin-start: 0;
1848 #urlbar-display-box {
1852 -moz-border-end: 1px solid #9C9CFF;
1853 -moz-margin-end: 3px;
1856 -moz-margin-start: 0;
1860 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1862 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1863 border-bottom: 1px solid #A09090;
1864 background-color: #000000;
1866 -moz-padding-start: 44px;
1867 -moz-padding-end: 6px;
1868 background-image: url("chrome://browser/skin/info.svg");
1869 background-clip: padding-box;
1870 background-position: 20px center;
1871 background-repeat: no-repeat;
1872 background-size: 16px 16px;
1875 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1876 background-position: right 20px center;
1879 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1884 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1885 -moz-margin-start: 0;
1888 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1889 -moz-appearance: none;
1894 -moz-margin-start: 10px;
1897 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1900 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1903 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1906 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1909 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1912 min-width: calc(54px + 11ch);
1917 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1918 background-color: var(--identity-box-verified-background-color);
1921 #identity-box:-moz-focusring {
1922 outline: 1px dotted #008484;
1923 outline-offset: -1px;
1926 #identity-box.verifiedDomain:-moz-focusring,
1927 #identity-box.verifiedIdentity:-moz-focusring {
1928 outline-color: #000000;
1931 /* Location bar dropmarker */
1933 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1934 background-color: transparent;
1937 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1938 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1939 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1942 transition: opacity 0.15s ease;
1945 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1949 #navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1953 .urlbar-history-dropmarker:hover {
1956 .urlbar-history-dropmarker:hover:active,
1957 .urlbar-history-dropmarker[open="true"] {
1960 /* page proxy icon */
1962 /* === BEGIN identity-block.inc.css === */
1965 /* --identity-box-hover-background-color: #FFCF00;
1966 --identity-box-selected-background-color: #FF9F00; */
1967 --identity-box-verified-color: #008484;
1968 /* Default theme does different color per channel, we can't as they do it build-time. */
1969 --identity-box-chrome-color: #9C9CFF;
1971 border-inline-end: 1px solid var(--urlbar-separator-color);
1975 margin-inline-end: 4px;
1977 /* The latter two properties have a transition to handle the delayed hiding of
1978 the forward button when hovered. */
1979 transition: background-color 150ms ease, padding-left, padding-right;
1982 #identity-box:-moz-locale-dir(ltr) {
1983 border-top-right-radius: 0;
1984 border-bottom-right-radius: 0;
1987 #identity-box:-moz-locale-dir(rtl) {
1988 border-top-left-radius: 0;
1989 border-bottom-left-radius: 0;
1992 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1993 color: var(--identity-box-chrome-color);
1994 -moz-border-end: 1px solid var(--identity-box-chrome-color);
1997 #identity-box:hover > :not(#identity-icon),
1998 #identity-box[open=true] > :not(#identity-icon) {
1999 /* filter: grayscale(100%);*/
2002 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2003 color: var(--identity-box-verified-color);
2004 -moz-border-end: 1px solid var(--identity-box-verified-color);
2007 #identity-icon-labels:-moz-locale-dir(ltr) {
2011 #identity-icon-labels:-moz-locale-dir(rtl) {
2015 #notification-popup-box:not([hidden]) + #identity-box {
2016 padding-inline-start: 10px;
2020 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2021 /* border-radius: 0;
2022 padding-inline-start: 2px; */
2023 padding-inline-end: 2px;
2024 margin-inline-end: 1px;
2027 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2028 #notification-popup-box[hidden] + #identity-box {
2029 padding-inline-start: 2px;
2032 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2033 #notification-popup-box[hidden] + #identity-box {
2034 /* Forward button hiding is delayed when hovered, so we should use the same
2035 delay for the identity box. We handle both horizontal paddings (for LTR and
2036 RTL), the latter two delays here are for padding-left and padding-right. */
2037 transition-delay: 0s, 100s, 100s;
2040 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2041 #notification-popup-box[hidden] + #identity-box {
2042 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2043 padding-inline-start: 2.01px;
2046 /* MAIN IDENTITY ICON */
2051 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2054 #identity-box:hover > #identity-icon,
2055 #identity-box[open=true] > #identity-icon {
2056 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2059 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2060 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2063 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2067 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2068 -moz-image-region: inherit;
2069 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2075 /* TRACKING PROTECTION ICON */
2077 #tracking-protection-icon {
2080 margin-inline-start: 2px;
2081 margin-inline-end: 0;
2082 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2086 #tracking-protection-icon[state="loaded-tracking-content"] {
2087 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2090 #tracking-protection-icon[animate] {
2091 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2094 #tracking-protection-icon:not([state]) {
2095 margin-inline-end: -18px;
2096 pointer-events: none;
2098 /* Only animate the shield in, when it disappears hide it immediately. */
2102 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2103 visibility: collapse;
2106 /* CONNECTION ICON */
2111 margin-inline-start: 2px;
2112 visibility: collapse;
2115 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2116 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2117 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2118 visibility: visible;
2121 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2122 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2123 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2124 visibility: visible;
2127 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2128 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2129 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2130 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2131 visibility: visible;
2134 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2135 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2136 visibility: visible;
2139 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2140 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2141 visibility: visible;
2144 /* === END identity-block.inc.css === */
2146 #page-proxy-favicon {
2147 -moz-image-region: rect(0, 16px, 16px, 0);
2150 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2151 /* -moz-margin-end: 1px;*/
2154 #identity-box:hover > #page-proxy-favicon {
2155 -moz-image-region: rect(0, 32px, 16px, 16px);
2158 #identity-box:hover:active > #page-proxy-favicon,
2159 #identity-box[open=true] > #page-proxy-favicon {
2160 -moz-image-region: rect(0, 48px, 16px, 32px);
2163 #identity-box:hover {
2164 background-color: #FFCF00;
2168 #identity-box:hover:active,
2169 #identity-box[open=true] {
2170 background-color: #FF9F00;
2174 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2175 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2176 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2177 background-color: #9C9CFF;
2181 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2182 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2183 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2184 background-color: #008484;
2190 #treecolAutoCompleteImage {
2195 .autocomplete-richlistbox {
2199 .autocomplete-richlistitem {
2204 border: 1px solid transparent;
2207 .autocomplete-richlistitem[selected=true] {
2208 background-color: hsl(210, 80%, 52%);
2213 /* color: hsl(0, 0%, 0%);*/
2221 background-color: hsl(216, 0%, 88%);
2222 color: hsl(0, 0%, 0%);
2224 border: 1px solid transparent;
2236 /* color: hsl(0, 0%, 50%);*/
2247 .ac-title[selected=true],
2248 .ac-separator[selected],
2249 .ac-url[selected=true],
2250 .ac-action[selected=true] {
2254 .ac-tags-text[selected] > html|span.ac-tag {
2255 background-color: #A09090;
2259 html|span.ac-emphasize-text-title,
2260 html|span.ac-emphasize-text-tag,
2261 html|span.ac-emphasize-text-url {
2265 .ac-type-icon[type=bookmark] {
2266 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2269 .ac-type-icon[type=bookmark][selected][current] {
2270 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2273 .ac-result-type-bookmark,
2274 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2275 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2276 -moz-image-region: rect(0px 16px 16px 0px);
2281 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2282 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2283 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2286 .ac-type-icon[type=keyword],
2287 .ac-site-icon[type=searchengine],
2288 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2289 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2292 .ac-type-icon[type=keyword][selected],
2293 .ac-site-icon[type=searchengine][selected],
2294 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2295 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2298 .ac-result-type-tag,
2299 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2300 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2305 .ac-type-icon[type=switchtab],
2306 .ac-type-icon[type=remotetab] {
2307 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2310 .ac-type-icon[type=switchtab][selected],
2311 .ac-type-icon[type=remotetab][selected] {
2312 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2315 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2316 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2322 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2323 border-top: 1px solid #9C9CFF;
2326 /* combined go/reload/stop button in location bar */
2329 #urlbar-reload-button,
2330 #urlbar-stop-button {
2332 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2333 /* padding: 0 9px;*/
2334 margin-inline-start: 0px;
2335 border-inline-start: 1px solid var(--urlbar-separator-color);
2336 border-image: linear-gradient(transparent 15%,
2337 var(--urlbar-separator-color) 15%,
2338 var(--urlbar-separator-color) 85%,
2340 border-image-slice: 1;
2343 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2344 border-top-left-radius: 0px;
2345 border-bottom-left-radius: 0px;
2348 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2349 border-top-right-radius: 0px;
2350 border-bottom-right-radius: 0px;
2353 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2354 #urlbar-reload-button:not(:hover) {
2355 -moz-border-start-style: none;
2356 -moz-padding-start: 3px;
2359 #urlbar-reload-button {
2360 -moz-image-region: rect(0px, 14px, 14px, 0px);
2363 #urlbar-reload-button[disabled=true] {
2364 -moz-image-region: rect(28px, 14px, 42px, 0px);
2367 #urlbar-reload-button:not([disabled=true]):hover {
2368 -moz-image-region: rect(14px, 14px, 28px, 0px);
2371 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2372 transform: scaleX(-1);
2376 -moz-image-region: rect(0, 42px, 14px, 28px);
2379 #urlbar-go-button:hover {
2380 -moz-image-region: rect(14px, 42px, 28px, 28px);
2383 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2384 transform: scaleX(-1);
2387 #urlbar-stop-button {
2388 -moz-image-region: rect(0px, 28px, 14px, 14px);
2391 #urlbar-stop-button:hover {
2392 -moz-image-region: rect(14px, 28px, 28px, 14px);
2395 @media (min-resolution: 1.1dppx) {
2397 #urlbar-reload-button,
2398 #urlbar-stop-button {
2399 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2402 #urlbar-go-button > .toolbarbutton-icon,
2403 #urlbar-reload-button > .toolbarbutton-icon,
2404 #urlbar-stop-button > .toolbarbutton-icon {
2409 -moz-image-region: rect(0, 84px, 28px, 56px);
2412 #urlbar-go-button:hover {
2413 -moz-image-region: rect(28px, 84px, 56px, 56px);
2416 #urlbar-go-button:hover:active {
2417 -moz-image-region: rect(56px, 84px, 84px, 56px);
2420 #urlbar-reload-button {
2421 -moz-image-region: rect(0, 28px, 28px, 0);
2424 #urlbar-reload-button:not([disabled]):hover {
2425 -moz-image-region: rect(28px, 28px, 56px, 0);
2428 #urlbar-reload-button:not([disabled]):hover:active {
2429 -moz-image-region: rect(56px, 28px, 84px, 0);
2432 #urlbar-stop-button {
2433 -moz-image-region: rect(0, 56px, 28px, 28px);
2436 #urlbar-stop-button:not([disabled]):hover {
2437 -moz-image-region: rect(28px, 56px, 56px, 28px);
2440 #urlbar-stop-button:hover:active {
2441 -moz-image-region: rect(56px, 56px, 84px, 28px);
2445 /* popup blocker button */
2447 #page-report-button {
2448 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2449 -moz-image-region: rect(0, 16px, 16px, 0);
2452 #page-report-button:hover ,
2453 #page-report-button:hover:active,
2454 #page-report-button[open="true"] {
2455 -moz-image-region: rect(0, 32px, 16px, 16px);
2458 /* Reader mode button */
2460 #reader-mode-button {
2461 list-style-image: url("chrome://browser/skin/readerMode.svg");
2462 -moz-image-region: rect(0, 16px, 16px, 0);
2465 #reader-mode-button:hover,
2466 #reader-mode-button[readeractive]:hover {
2467 -moz-image-region: rect(0, 32px, 16px, 16px);
2470 #reader-mode-button:hover:active,
2471 #reader-mode-button[readeractive] {
2472 -moz-image-region: rect(0, 48px, 16px, 32px);
2475 /* social share panel */
2477 .social-share-frame {
2484 background-color: white;
2485 background-repeat: no-repeat;
2486 background-position: center center;
2488 #share-container[loading] {
2489 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2491 #share-container > browser {
2492 transition: opacity 150ms ease-in-out;
2495 #share-container[loading] > browser {
2499 .social-share-toolbar {
2500 border-bottom: 1px solid #9C9CFF;
2504 #social-share-provider-buttons {
2509 .share-provider-button {
2514 .share-provider-button > .toolbarbutton-text {
2517 .share-provider-button > .toolbarbutton-icon {
2523 /* fixup corners for share panel */
2524 .social-panel > .social-panel-frame {
2525 border-radius: inherit;
2528 #social-share-panel {
2534 .social-share-frame {
2535 border-top-left-radius: 0;
2536 border-bottom-left-radius: inherit;
2537 border-top-right-radius: 0;
2538 border-bottom-right-radius: inherit;
2541 #social-share-panel > .social-share-toolbar {
2542 border-top-left-radius: inherit;
2543 border-top-right-radius: inherit;
2546 #social-share-provider-buttons {
2547 border-top-left-radius: inherit;
2548 border-top-right-radius: inherit;
2551 /* social recommending panel */
2553 #social-mark-button {
2554 -moz-image-region: rect(0, 16px, 16px, 0);
2557 /* bookmarks menu-button */
2559 #bookmarks-menu-button.bookmark-item {
2560 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2561 -moz-image-region: rect(0px 16px 16px 0px);
2564 #bookmarks-menu-button.bookmark-item[starred] {
2565 -moz-image-region: rect(0px 32px 16px 16px);
2568 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2570 padding-bottom: 2px;
2573 #BMB_bookmarksPopup[side="top"],
2574 #BMB_bookmarksPopup[side="bottom"] {
2576 margin-right: -20px;
2579 #BMB_bookmarksPopup[side="left"],
2580 #BMB_bookmarksPopup[side="right"] {
2582 margin-bottom: -20px;
2585 /* bookmarking panel */
2587 #editBookmarkPanelStarIcon {
2588 list-style-image: url("chrome://browser/skin/places/starred48.png");
2593 #editBookmarkPanelStarIcon[unstarred] {
2594 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2597 #editBookmarkPanelTitle {
2601 #editBookmarkPanelHeader,
2602 #editBookmarkPanelContent {
2603 margin-bottom: .5em;
2606 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2607 #editBMPanel_folderTree {
2614 border-top: 1px solid #9C9CFF;
2615 border-bottom-left-radius: 5px;
2616 border-bottom-right-radius: 5px;
2620 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2621 -moz-margin-end: 10px;
2622 vertical-align: middle;
2625 .panel-promo-closebutton {
2626 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2627 -moz-margin-end: -3px;
2631 .panel-promo-closebutton:hover {
2632 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2635 .panel-promo-closebutton:hover:active {
2636 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2639 .panel-promo-closebutton > .toolbarbutton-text {
2643 /* ::::: content area ::::: */
2646 background-color: #9C9CFF;
2651 background-color: #000000;
2655 -moz-margin-start: 0;
2664 -moz-padding-start: 0px;
2667 #sidebar-header > .close-icon {
2668 /* padding: 4px 2px;
2671 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2674 #sidebar-header > .close-icon:hover,
2675 #sidebar-header > .close-icon:hover:active {
2676 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2679 #sidebar-splitter:-moz-locale-dir(ltr),
2680 #sidebar:-moz-locale-dir(ltr) {
2681 border-radius: 0 5px 0 0;
2684 #sidebar-splitter:-moz-locale-dir(rtl),
2685 #sidebar:-moz-locale-dir(rtl) {
2686 border-radius: 5px 0 0 0;
2689 .browserContainer > findbar {
2691 background-color: -moz-dialog;
2692 color: -moz-DialogText;
2701 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2704 #TabsToolbar .toolbar-holder {
2705 background-color: #000000; /* correct effect of being an actual toolbar */
2708 #main-window[disablechrome] #TabsToolbar,
2709 #TabsToolbar[tabsontop="false"] {
2710 border-bottom: 1px solid #008484;
2713 /* === BEGIN tabs.inc.css === */
2716 /* --tab-toolbar-navbar-overlap: 1px; */
2717 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2718 /* --tab-min-height: 31px; */
2721 /* --tab-stroke-background-size: auto 100%; */
2725 .tabs-newtab-button,
2726 #TabsToolbar > #new-tab-button {
2731 padding: 1px 4px 2px;
2734 .tabbrowser-tab:first-of-type {
2735 -moz-margin-start: 2px;
2738 .tabs-newtab-button,
2739 #TabsToolbar > #new-tab-button,
2740 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2741 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2742 border-radius: 8px 8px 0px 0px;
2743 -moz-margin-start: 0;
2746 .tabs-newtab-button:not(:hover),
2747 #TabsToolbar > #new-tab-button:not(:hover),
2748 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2749 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2750 background-color: #C09070;
2753 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2754 .tabbrowser-tab[visuallyselected=true] {
2755 /* position: relative;
2759 .tab-background-middle {
2765 .tab-content[pinned] {
2778 -moz-margin-end: 3px;
2782 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2789 -moz-margin-start: -15px;
2790 margin-inline-end: -1px;
2794 .tab-icon-overlay[crashed] {
2795 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2798 .tab-icon-overlay[soundplaying],
2799 .tab-icon-overlay[muted]:not([crashed]) {
2800 border-radius: 10px;
2803 .tab-icon-overlay[soundplaying]:hover,
2804 .tab-icon-overlay[muted]:hover {
2805 background-color: #FFCF00;
2808 .tab-icon-overlay[soundplaying] {
2810 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2813 .tab-icon-overlay[muted]:not([crashed]) {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2817 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2818 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2822 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2823 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2826 .tab-throbber[busy] {
2827 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2830 .tab-throbber[progress] {
2831 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2834 @media (min-resolution: 1.1dppx) {
2835 .tab-throbber[busy] {
2836 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2839 .tab-throbber[progress] {
2840 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2844 .tab-throbber[pinned],
2845 .tab-icon-image[pinned] {
2846 -moz-margin-start: 2px;
2847 -moz-margin-end: 2px;
2851 /* this needs to add up to the 16px of the icon image */
2853 margin-top: 2px !important;
2854 margin-bottom: 2px !important;
2858 -moz-margin-start: 4px;
2864 .tab-icon-sound[muted] {
2865 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2868 .tab-icon-sound[muted]:hover {
2869 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2872 .tab-icon-sound[muted]:hover:active {
2873 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2876 .tab-icon-sound[soundplaying] {
2877 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2880 .tab-icon-sound[soundplaying]:hover {
2881 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2884 .tab-icon-sound[soundplaying]:hover:active {
2885 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2888 .tab-icon-sound[muted] {
2889 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2892 .tab-icon-sound[muted]:hover {
2893 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2896 .tab-icon-sound[muted]:hover:active {
2897 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2900 .tab-icon-sound[visuallyselected=true][soundplaying] {
2901 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2904 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2905 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2908 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2909 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2912 .tab-icon-sound[visuallyselected=true][muted] {
2913 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2916 .tab-icon-sound[visuallyselected=true][muted]:hover {
2917 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2920 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2921 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2924 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2925 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2928 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2929 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2932 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2936 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2937 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2940 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2944 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2945 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2954 .tabs-newtab-button {
2955 /* overlap the tab curves */
2958 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2962 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2963 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2966 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2967 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2970 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2973 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2976 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2977 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2980 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2981 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2984 .tab-background-start[visuallyselected=true]::after,
2985 .tab-background-start[visuallyselected=true]::before,
2986 .tab-background-start,
2987 .tab-background-end,
2988 .tab-background-end[visuallyselected=true]::after,
2989 .tab-background-end[visuallyselected=true]::before {
2992 .tabbrowser-tab:not([visuallyselected=true]),
2993 .tabbrowser-tab:-moz-lwtheme {
2996 /* tabbrowser-tab focus ring */
2997 .tabbrowser-tab:focus {
2998 outline: 1px dotted;
3003 .tabbrowser-tab[visuallyselected="true"] {
3006 /* End selected tab */
3008 /* User Context UI - change tab decoration depending on userContextId.
3009 Defaults to gray for unknown usercontextids. */
3010 .tabbrowser-tab[usercontextid] {
3011 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3012 background-size: auto 2px;
3013 background-repeat: no-repeat;
3016 /* Personal User Context */
3017 .tabbrowser-tab[usercontextid="1"] {
3018 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3020 /* Work User Context */
3021 .tabbrowser-tab[usercontextid="2"] {
3022 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3024 /* Banking User Context */
3025 .tabbrowser-tab[usercontextid="3"] {
3026 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3028 /* Shopping User Context */
3029 .tabbrowser-tab[usercontextid="4"] {
3030 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3033 /* Tab pointer-events */
3036 pointer-events: none;
3039 .tab-background-middle,
3040 .tabs-newtab-button,
3041 .tab-icon-overlay[soundplaying],
3042 .tab-icon-overlay[muted]:not([crashed]),
3045 pointer-events: auto;
3051 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3052 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3054 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3055 background-color: #E7ADE7;
3058 .tab-label[attention]:not([visuallyselected="true"]) {
3062 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3063 background-color: #3333FF;
3067 /* Tab separators */
3069 .tabbrowser-tab::after,
3070 .tabbrowser-tab::before {
3072 -moz-margin-start: -1px;
3073 background-image: linear-gradient(transparent 5px,
3075 currentColor calc(100% - 4px),
3076 transparent calc(100% - 4px));
3080 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3081 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3085 /* Also show separators beside the selected tab when dragging it. */
3087 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3088 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3089 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3094 /* New tab button */
3096 .tabs-newtab-button {
3098 /* width: calc(36px + var(--tab-curve-width)); */
3101 /* === END tabs.inc.css === */
3105 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3106 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3107 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3109 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3110 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3113 /* Tab DnD indicator */
3114 .tab-drop-indicator {
3115 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3116 margin-bottom: -11px;
3119 /* Tab close button */
3121 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3124 .tab-close-button:hover,
3125 .tab-close-button:hover[selected="true"] {
3126 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3129 .tab-close-button:hover:active,
3130 .tab-close-button:hover:active[selected="true"] {
3131 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3134 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3136 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3137 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3141 background-origin: border-box;
3144 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3145 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3146 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3147 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3150 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3151 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3154 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3155 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3156 /* transform: scaleX(-1);*/
3159 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3160 transition: 1s background-color ease-out;
3163 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3164 background-color: #008484;
3167 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3168 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3169 /* border-width: 0 2px 0 0;
3170 border-style: solid;
3171 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3174 .tabs-newtab-button > .toolbarbutton-icon {
3176 margin-bottom: -1px;
3179 .tabs-newtab-button,
3180 #TabsToolbar > #new-tab-button,
3181 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3182 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3183 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3184 -moz-image-region: auto;
3187 .tabs-newtab-button,
3188 .tabs-newtab-button:hover,
3189 #TabsToolbar > #new-tab-button,
3190 #TabsToolbar > #new-tab-button:hover {
3193 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3194 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3195 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3196 .tabs-newtab-button:-moz-lwtheme-brighttext,
3197 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3198 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3201 #TabsToolbar > #new-tab-button {
3206 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3209 #alltabs-button:hover,
3210 #alltabs-button:hover:active,
3211 #alltabs-button[open="true"] {
3212 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3215 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3216 #alltabs-button:-moz-lwtheme-brighttext {
3219 #alltabs-button > .toolbarbutton-icon {
3223 #alltabs-button > .toolbarbutton-menu-dropmarker {
3227 /* All tabs menupopup */
3228 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3229 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3230 -moz-image-region: auto;
3233 .alltabs-item[selected="true"] {
3237 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3238 list-style-image: url("chrome://global/skin/icons/loading.png");
3241 @media (min-resolution: 1.1dppx) {
3242 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3243 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3247 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3248 background-color: #402800;
3251 .alltabs-endimage[muted] {
3252 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3255 .alltabs-endimage[soundplaying] {
3256 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3259 toolbarbutton.chevron {
3260 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3263 toolbarbutton.chevron:hover {
3264 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3267 toolbar[brighttext] toolbarbutton.chevron {
3268 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3271 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3272 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3273 transform: scaleX(-1);
3276 toolbarbutton.chevron > .toolbarbutton-text,
3277 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3281 toolbarbutton.chevron > .toolbarbutton-icon {
3285 #sidebar-throbber[loading="true"] {
3286 list-style-image: url("chrome://global/skin/icons/loading.png");
3287 -moz-margin-end: 4px;
3290 @media (min-resolution: 1.1dppx) {
3291 #sidebar-throbber[loading="true"] {
3292 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3297 /* Bookmarks toolbar */
3298 #PlacesToolbarDropIndicator {
3299 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3302 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3303 background-color: #008484 !important;
3304 color: #FFCF00 !important;
3307 /* rules for menupopup drop indicators */
3308 .menupopup-drop-indicator-bar {
3310 /* these two margins must together compensate the indicator's height */
3312 margin-bottom: -1px;
3315 .menupopup-drop-indicator {
3316 list-style-image: none;
3318 -moz-margin-end: -4em;
3319 background-color: #008484;
3322 /* === BEGIN notification-icons.inc.css === */
3324 .popup-notification-icon {
3327 -moz-margin-end: 10px;
3330 .popup-notification-icon[popupid="geolocation"] {
3331 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3334 .popup-notification-icon[popupid="xpinstall-disabled"],
3335 .popup-notification-icon[popupid="addon-install-blocked"],
3336 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3337 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3340 .popup-notification-icon[popupid="addon-progress"] {
3341 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3344 .popup-notification-icon[popupid="addon-install-failed"] {
3345 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3348 .popup-notification-icon[popupid="addon-install-confirmation"] {
3349 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3352 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3353 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3356 .popup-notification-icon[popupid="addon-install-complete"] {
3357 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3360 .popup-notification-icon[popupid="addon-install-restart"] {
3361 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3364 .popup-notification-icon[popupid="click-to-play-plugins"] {
3365 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3368 .popup-notification-icon[popupid="web-notifications"] {
3369 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3372 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3373 .popup-notification-icon[popupid*="offline-app-requested"],
3374 .popup-notification-icon[popupid="offline-app-usage"] {
3375 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3378 .popup-notification-icon[popupid="password"] {
3379 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3382 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3383 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3384 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3387 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3388 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3389 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3392 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3393 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3394 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3397 .popup-notification-icon[popupid="pointerLock"] {
3398 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3401 /* Notification icon box */
3402 #notification-popup .panel-promo-box {
3403 /* margin: 10px -10px -10px; */
3406 #notification-popup-box {
3408 background-color: #000000;
3409 background-clip: padding-box;
3412 border-radius: 3px 0 0 3px;
3413 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3414 -moz-margin-end: -8px;
3415 border-right-width: 8px;
3418 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3419 /* padding-left: 7px; */
3422 /* This changes the direction of the main notification box on the url bar. */
3423 #notification-popup-box:-moz-locale-dir(rtl),
3424 /* This adds a second flip for the notification anchors, as they don't switch direction
3426 .notification-anchor-icon:-moz-locale-dir(rtl) {
3427 transform: scaleX(-1);
3430 /* For the anchor icons in the chat window, we don't have the notification popup box,
3431 so we need to cancel the RTL transform. */
3432 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3436 .notification-anchor-icon {
3437 list-style-image: url("chrome://global/skin/icons/information-16.png");
3444 .notification-anchor-icon:-moz-focusring {
3445 outline: 1px dotted #008484;
3448 .geo-notification-icon,
3449 #geo-notification-icon {
3450 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3453 #addons-notification-icon {
3454 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3457 #addons-notification-icon:hover {
3458 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3461 #addons-notification-icon:hover:active {
3462 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3465 .indexedDB-notification-icon,
3466 #indexedDB-notification-icon {
3467 list-style-image: url("chrome://global/skin/icons/question-16.png");
3470 #password-notification-icon {
3471 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3474 #login-fill-notification-icon {
3475 /* Temporary icon until the capture and fill doorhangers are unified. */
3476 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3477 transform: scaleX(-1);
3480 #plugins-notification-icon {
3481 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3484 #plugins-notification-icon.plugin-hidden {
3485 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3488 #plugins-notification-icon.plugin-blocked {
3489 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3492 #plugins-notification-icon {
3493 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3496 #plugins-notification-icon:hover {
3497 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3500 #notification-popup-box[hidden] {
3501 /* Override display:none to make the pluginBlockedNotification animation work
3502 when showing the notification repeatedly. */
3504 visibility: collapse;
3507 #plugins-notification-icon.plugin-blocked[showing] {
3508 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3511 @keyframes pluginBlockedNotification {
3520 .webRTC-shareDevices-notification-icon,
3521 #webRTC-shareDevices-notification-icon {
3522 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3525 .webRTC-sharingDevices-notification-icon,
3526 #webRTC-sharingDevices-notification-icon {
3527 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3530 .webRTC-shareMicrophone-notification-icon,
3531 #webRTC-shareMicrophone-notification-icon {
3532 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3535 .webRTC-sharingMicrophone-notification-icon,
3536 #webRTC-sharingMicrophone-notification-icon {
3537 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3540 .webRTC-shareScreen-notification-icon,
3541 #webRTC-shareScreen-notification-icon {
3542 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3545 .webRTC-sharingScreen-notification-icon,
3546 #webRTC-sharingScreen-notification-icon {
3547 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3550 .web-notifications-notification-icon,
3551 #web-notifications-notification-icon {
3552 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3553 -moz-image-region: rect(0, 16px, 16px, 0);
3556 .web-notifications-notification-icon:hover,
3557 #web-notifications-notification-icon:hover {
3558 -moz-image-region: rect(0, 32px, 16px, 16px);
3561 .web-notifications-notification-icon:hover:active,
3562 #web-notifications-notification-icon:hover:active {
3563 -moz-image-region: rect(0, 48px, 16px, 32px);
3566 #pointerLock-notification-icon {
3567 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3570 .translate-notification-icon,
3571 #translate-notification-icon {
3572 list-style-image: url("chrome://browser/skin/translation-16.png");
3573 -moz-image-region: rect(0px, 16px, 16px, 0px);
3576 .translated-notification-icon,
3577 #translated-notification-icon {
3578 list-style-image: url("chrome://browser/skin/translation-16.png");
3579 -moz-image-region: rect(0px, 32px, 16px, 16px);
3582 .popup-notification-icon[popupid="servicesInstall"] {
3583 list-style-image: url("chrome://browser/skin/social/services-64.png");
3585 #servicesInstall-notification-icon {
3586 list-style-image: url("chrome://browser/skin/social/services-16.png");
3589 /* EME notifications */
3591 .popup-notification-icon[popupid="drmContentPlaying"],
3592 #eme-notification-icon {
3593 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3596 #eme-notification-icon:hover:active {
3597 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3600 #eme-notification-icon[firstplay=true] {
3601 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3604 @keyframes emeTeachingMoment {
3605 0% {transform: translateX(0); }
3606 25% {transform: translateX(3px) }
3607 75% {transform: translateX(-3px) }
3608 100% { transform: translateX(0); }
3611 /* HiDPI notification icons */
3612 @media (min-resolution: 1.1dppx) {
3613 /* #notification-popup-box {
3614 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3617 .notification-anchor-icon {
3618 list-style-image: url(chrome://global/skin/icons/information-32.png);
3621 .webRTC-shareDevices-notification-icon,
3622 #webRTC-shareDevices-notification-icon {
3623 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3626 .webRTC-sharingDevices-notification-icon,
3627 #webRTC-sharingDevices-notification-icon {
3628 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3631 .webRTC-shareMicrophone-notification-icon,
3632 #webRTC-shareMicrophone-notification-icon {
3633 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3636 .webRTC-sharingMicrophone-notification-icon,
3637 #webRTC-sharingMicrophone-notification-icon {
3638 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3641 .webRTC-shareScreen-notification-icon,
3642 #webRTC-shareScreen-notification-icon {
3643 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3646 .webRTC-sharingScreen-notification-icon,
3647 #webRTC-sharingScreen-notification-icon {
3648 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3651 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3652 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3653 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3656 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3657 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3658 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3661 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3662 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3663 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3667 /* === END notification-icons.inc.css === */
3669 .popup-notification-body[popupid="addon-progress"],
3670 .popup-notification-body[popupid="addon-install-confirmation"] {
3675 /* Translation infobar */
3677 /* === BEGIN infobar.inc.css === */
3679 notification[value="translation"] .messageImage {
3680 list-style-image: url("chrome://browser/skin/translation-16.png");
3681 -moz-image-region: rect(0, 32px, 16px, 16px);
3684 @media (min-resolution: 1.25dppx) {
3685 notification[value="translation"] .messageImage {
3686 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3687 -moz-image-region: rect(0, 64px, 32px, 32px);
3691 notification[value="translation"][state="translating"] .messageImage {
3692 list-style-image: url("chrome://browser/skin/translating-16.png");
3693 -moz-image-region: auto;
3696 @media (min-resolution: 1.25dppx) {
3697 notification[value="translation"][state="translating"] .messageImage {
3698 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3702 notification[value="translation"] hbox[anonid="details"] {
3706 notification[value="translation"] button,
3707 notification[value="translation"] menulist {
3711 notification[value="translation"] menulist > .menulist-dropmarker {
3714 .translation-menupopup arrowscrollbox {
3718 .translation-attribution {
3720 -moz-box-align: end;
3724 .translation-attribution > label {
3728 .translation-attribution > image {
3732 .translation-welcome-panel {
3736 .translation-welcome-logo {
3739 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3740 -moz-image-region: rect(0, 64px, 32px, 32px);
3743 .translation-welcome-content {
3744 -moz-margin-start: 16px;
3747 .translation-welcome-headline {
3752 .translation-welcome-body {
3757 /* === END infobar.inc.css === */
3759 notification[value="translation"] {
3763 .translation-menupopup {
3764 -moz-appearance: none;
3767 /* Bookmarks roots menu-items */
3768 #subscribeToPageMenuitem:not([disabled]),
3769 #subscribeToPageMenupopup {
3770 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3773 #bookmarksToolbarFolderMenu,
3774 #BMB_bookmarksToolbar,
3775 #panelMenu_bookmarksToolbar {
3776 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3777 -moz-image-region: auto;
3780 #BMB_unsortedBookmarks,
3781 #panelMenu_unsortedBookmarks {
3782 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3783 -moz-image-region: auto;
3786 /* ::::: Keyboard UI Panel ::::: */
3791 border-radius: 20px;
3794 .KUI-panel[level="top"] {
3795 /*background-color: rgba(27%,27%,27%,.65);*/
3801 padding: 20px 10px 10px;
3805 .ctrlTab-favicon[src] {
3806 background-color: #000000;
3812 .ctrlTab-preview-inner > .tabPreview-canvas {
3815 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3819 .ctrlTab-preview-inner {
3820 padding-bottom: 10px;
3823 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3825 background-color: #000000;
3826 border-radius: .5em;
3829 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3831 background-color: #000000;
3834 border: 2px solid #9C9CFF;
3835 border-radius: .5em;
3838 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3839 margin: -10px -10px 0;
3851 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3859 .sync-panel-button-box {
3863 #sync-start-panel-title {
3869 #sync-start-panel-subtitle {
3875 .statuspanel-label {
3878 background: #404000;
3879 border: 1px none #9C9CFF;
3880 border-top-style: solid;
3885 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3886 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3887 border-right-style: solid;
3888 border-top-right-radius: .3em;
3892 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3893 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3894 border-left-style: solid;
3895 border-top-left-radius: .3em;
3899 /* HACK to abolish devily color on main content */
3902 background-color: transparent !important;
3905 /* === BEGIN fullscreen/warning.inc.css === */
3907 html|*#fullscreen-warning {
3908 align-items: center;
3909 background: rgba(0, 0, 0, 0.9);
3910 border: 2px solid #A09090;
3911 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3914 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3917 html|*#fullscreen-warning::before {
3919 width: 24px; height: 24px;
3922 html|*#fullscreen-warning.verifiedIdentity::before,
3923 html|*#fullscreen-warning.verifiedDomain::before {
3924 content: url("chrome://browser/skin/fullscreen/secure.svg");
3927 html|*#fullscreen-warning.unknownIdentity::before {
3928 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3931 html|*#fullscreen-domain-text,
3932 html|*#fullscreen-generic-text {
3934 font-weight: lighter;
3939 html|*#fullscreen-domain {
3944 html|*#fullscreen-exit-button {
3946 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3948 font-weight: lighter;
3950 box-sizing: content-box;
3952 border-radius: 300px;
3954 background-color: #C09070;
3958 /* === END fullscreen/warning.inc.css === */
3960 /* === BEGIN commandline.inc.css === */
3962 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3963 We are copy/pasting variables from light-theme and dark-theme,
3964 since they aren't loaded in this context (within browser.css). */
3965 :root #developer-toolbar {
3966 --gcli-background-color: #000000; /* --theme-toolbar-background */
3967 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3968 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3969 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3970 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3971 --selection-background: #008484; /* --theme-selection-background */
3972 --selection-color: #000000; /* --theme-selection-color */
3975 /* Developer toolbar */
3977 #developer-toolbar {
3978 border-top: 3px solid var(--gcli-background-color);
3979 border-bottom: none;
3982 #developer-toolbar .toolbar-holder {
3983 background-color: #8050B0;
3987 #developer-toolbar .toolbar-holder {
3988 background-color: #8050B0;
3992 #developer-toolbar .toolbar-startcap,
3993 #developer-toolbar .toolbar-endcap{
3994 background-color: #6000CF;
3997 #developer-toolbar {
3999 min-height: 32px; */
4002 #developer-toolbar > toolbarbutton {
4008 .developer-toolbar-button > image {
4009 /* margin: auto 10px; */
4012 #developer-toolbar-toolbox-button > label {
4016 .developer-toolbar-button > .toolbarbutton-icon,
4017 #developer-toolbar-closebutton > .toolbarbutton-icon {
4022 #developer-toolbar-toolbox-button {
4023 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
4024 -moz-image-region: rect(0px, 16px, 16px, 0px);
4027 #developer-toolbar-toolbox-button > label {
4031 #developer-toolbar-toolbox-button:hover,
4032 #developer-toolbar-toolbox-button:hover:active,
4033 #developer-toolbar-toolbox-button[checked=true] {
4034 -moz-image-region: rect(0px, 32px, 16px, 16px);
4037 @media (min-resolution: 2dppx) {
4038 #developer-toolbar-toolbox-button {
4039 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
4040 -moz-image-region: rect(0px, 32px, 32px, 0px);
4043 #developer-toolbar-toolbox-button:hover,
4044 #developer-toolbar-toolbox-button:hover:active,
4045 #developer-toolbar-toolbox-button[checked=true] {
4046 -moz-image-region: rect(0px, 64px, 32px, 32px);
4050 #developer-toolbar-closebutton {
4051 list-style-image: url("chrome://devtools/skin/close.png");
4052 -moz-image-region: rect(0px, 16px, 16px, 0px);
4057 #developer-toolbar-closebutton > .toolbarbutton-icon {
4060 #developer-toolbar-closebutton > .toolbarbutton-text {
4064 #developer-toolbar-closebutton:hover,
4065 #developer-toolbar-closebutton:hover:active {
4066 -moz-image-region: rect(0px, 32px, 16px, 16px);
4069 @media (min-resolution: 2dppx) {
4070 #developer-toolbar-closebutton {
4071 list-style-image: url("chrome://devtools/skin/close@2x.png");
4072 -moz-image-region: rect(0px, 32px, 32px, 0px);
4075 #developer-toolbar-closebutton:hover,
4076 #developer-toolbar-closebutton:hover:active {
4077 -moz-image-region: rect(0px, 64px, 32px, 32px);
4083 html|*#gcli-tooltip-frame,
4084 html|*#gcli-output-frame {
4087 background-color: transparent;
4093 background-color: transparent;
4096 .gclitoolbar-input-node,
4097 .gclitoolbar-complete-node {
4099 -moz-box-align: center;
4103 background-color: transparent;
4106 .gclitoolbar-input-node {
4107 /* line-height: 32px;
4108 outline-style: none; */
4109 background-repeat: no-repeat;
4110 background-color: var(--gcli-input-background);
4113 .gclitoolbar-input-node[focused="true"] {
4114 background-color: var(--gcli-input-focused-background);
4117 .gclitoolbar-input-node::before {
4119 display: inline-block;
4120 -moz-box-ordinal-group: 0;
4124 background-image: url("chrome://devtools/skin/images/commandline-icon.png");
4125 background-position: 0 center;
4126 background-size: 32px 16px;
4129 .gclitoolbar-input-node[focused="true"]::before {
4130 background-position: -16px center;
4133 @media (min-resolution: 2dppx) {
4134 .gclitoolbar-input-node::before {
4135 background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
4139 .gclitoolbar-input-node:not([focused="true"]) {
4140 border-color: transparent;
4143 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4144 background-color: var(--selection-background);
4145 color: var(--selection-color);
4148 .gclitoolbar-complete-node {
4150 background-color: transparent;
4153 pointer-events: none;
4156 .gcli-in-incomplete,
4160 .gcli-in-closebrace,
4167 .gcli-in-incomplete {
4168 border-bottom: 2px dotted #8050B0;
4172 border-bottom: 2px dotted #FF0000;
4183 .gcli-in-closebrace {
4187 /* === END commandline.inc.css === */
4189 /* === BEGIN responsivedesign.inc.css === */
4191 /* Responsive Mode */
4193 .browserContainer[responsivemode] {
4194 background-color: #221500;
4195 padding: 0 20px 20px 20px;
4198 .browserStack[responsivemode] {
4199 box-shadow: 0 0 7px #9C9CFF;
4202 .devtools-responsiveui-toolbar {
4203 background: transparent;
4204 /* text color is textColor from dark theme, since no theme is applied to
4205 * the responsive toolbar.
4211 border-bottom-width: 0;
4214 .devtools-responsiveui-menulist,
4215 .devtools-responsiveui-toolbarbutton {
4216 -moz-box-align: center;
4218 /* min-height: 22px;*/
4219 /* margin: 0 3px; */
4222 .devtools-responsiveui-menulist .menulist-editable-box {
4223 background-color: transparent;
4226 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4231 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4232 /* background: hsla(212,7%,57%,.35);*/
4235 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4240 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4241 -moz-box-orient: horizontal;
4244 .devtools-responsiveui-menulist:-moz-focusring,
4245 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4246 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4247 outline-offset: -4px;*/
4250 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4254 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4255 /* border-color: hsla(210,8%,5%,.6);
4256 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4257 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); */
4260 .devtools-responsiveui-menulist[open=true],
4261 .devtools-responsiveui-toolbarbutton[open=true],
4262 .devtools-responsiveui-toolbarbutton[checked=true] {
4263 /* border-color: hsla(210,8%,5%,.6) !important;
4264 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4265 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); */
4268 .devtools-responsiveui-toolbarbutton[checked=true] {
4269 /* color: hsl(208,100%,60%); */
4272 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4273 /* background-color: transparent !important;*/
4276 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4277 /* background-color: hsla(210,8%,5%,.2) !important;*/
4280 .devtools-responsiveui-menulist > .menulist-label-box {
4284 .devtools-responsiveui-menulist > .menulist-dropmarker {
4285 /* display: -moz-box;
4286 background-color: transparent;
4287 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4288 -moz-box-align: center;
4293 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4296 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4297 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4300 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4301 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4304 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4305 /* padding: 0 1px;*/
4306 -moz-box-align: stretch;
4309 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4310 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4311 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4312 -moz-box-align: center;
4316 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4317 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4321 .devtools-responsiveui-close {
4322 list-style-image: url("chrome://devtools/skin/close.png");
4323 -moz-image-region: rect(0px,16px,16px,0px);
4326 .devtools-responsiveui-close:hover {
4327 -moz-image-region: rect(0px,32px,16px,16px);
4330 .devtools-responsiveui-rotate {
4331 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4332 -moz-image-region: rect(0px,16px,16px,0px);
4335 .devtools-responsiveui-rotate:hover {
4336 -moz-image-region: rect(0px,32px,16px,16px);
4339 @media (min-resolution: 2dppx) {
4340 .devtools-responsiveui-close {
4341 list-style-image: url("chrome://devtools/skin/close@2x.png");
4344 .devtools-responsiveui-close:hover {
4345 -moz-image-region: rect(0px,64px,32px,32px);
4348 .devtools-responsiveui-rotate {
4349 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4352 .devtools-responsiveui-rotate:hover {
4353 -moz-image-region: rect(0px,64px,32px,32px);
4357 .devtools-responsiveui-touch {
4358 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4359 -moz-image-region: rect(0px,16px,16px,0px);
4362 .devtools-responsiveui-touch:hover,
4363 .devtools-responsiveui-touch[checked],
4364 .devtools-responsiveui-touch[checked]:hover {
4365 -moz-image-region: rect(0px,32px,16px,16px);
4368 @media (min-resolution: 2dppx) {
4369 .devtools-responsiveui-touch {
4370 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4371 -moz-image-region: rect(0px,32px,32px,0px);
4374 .devtools-responsiveui-touch:hover,
4375 .devtools-responsiveui-touch[checked],
4376 .devtools-responsiveui-touch[checked]:hover {
4377 -moz-image-region: rect(0px,64px,32px,32px);
4381 .devtools-responsiveui-screenshot {
4382 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4383 -moz-image-region: rect(0px,16px,16px,0px);
4386 .devtools-responsiveui-screenshot:hover {
4387 -moz-image-region: rect(0px,32px,16px,16px);
4390 @media (min-resolution: 2dppx) {
4391 .devtools-responsiveui-screenshot {
4392 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4395 .devtools-responsiveui-screenshot:hover {
4396 -moz-image-region: rect(0px,64px,32px,32px);
4400 .devtools-responsiveui-resizebarV {
4404 transform: translate(12px, -12px);
4405 background-size: cover;
4406 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4409 .devtools-responsiveui-resizebarH {
4413 transform: translate(-12px, 12px);
4414 background-size: cover;
4415 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4418 .devtools-responsiveui-resizehandle {
4422 transform: translate(12px, 12px);
4423 background-size: cover;
4424 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4427 /* FxOS custom mode with additional buttons and phone look'n feel */
4429 /* Hide devtools manual resizer */
4430 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4431 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4432 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4436 /* Gives responsive mode a phone look'n feel */
4437 .browserStack[responsivemode].fxos-mode {
4438 padding: 60px 15px 0;
4440 border-radius: 25px / 20px;
4441 border-bottom-left-radius: 0;
4442 border-bottom-right-radius: 0;
4443 border: 1px solid #FFFFFF;
4444 border-bottom-width: 0;
4446 background-color: #353535;
4448 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4450 background-image: linear-gradient(to right, #111 11%, #333 56%);
4454 .devtools-responsiveui-hardware-buttons {
4455 -moz-appearance: none;
4458 border: 1px solid #FFFFFF;
4459 border-bottom-left-radius: 25px;
4460 border-bottom-right-radius: 25px;
4461 border-top-width: 0;
4463 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4465 background-image: linear-gradient(to right, #111 11%, #333 56%);
4468 .devtools-responsiveui-home-button {
4469 -moz-user-focus: ignore;
4472 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4475 .devtools-responsiveui-sleep-button {
4476 -moz-user-focus: ignore;
4477 -moz-appearance: none;
4478 /* compensate browserStack top padding */
4486 border: 1px solid #444;
4487 border-top-right-radius: 12px;
4488 border-top-left-radius: 12px;
4489 border-bottom-color: transparent;
4491 background-image: linear-gradient(to top, #111 11%, #333 56%);
4494 .devtools-responsiveui-sleep-button:hover:active {
4495 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4498 .devtools-responsiveui-volume-buttons {
4502 .devtools-responsiveui-volume-up-button,
4503 .devtools-responsiveui-volume-down-button {
4504 -moz-user-focus: ignore;
4505 -moz-appearance: none;
4506 border: 1px solid red;
4510 border: 1px solid #444;
4511 border-right-color: transparent;
4513 background-image: linear-gradient(to right, #111 11%, #333 56%);
4516 .devtools-responsiveui-volume-up-button:hover:active,
4517 .devtools-responsiveui-volume-down-button:hover:active {
4518 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4521 .devtools-responsiveui-volume-up-button {
4522 border-top-left-radius: 12px;
4525 .devtools-responsiveui-volume-down-button {
4526 border-bottom-left-radius: 12px;
4529 @media (min-resolution: 2dppx) {
4530 .devtools-responsiveui-resizebarV {
4531 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4534 .devtools-responsiveui-resizebarH {
4535 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4538 .devtools-responsiveui-resizehandle {
4539 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4543 /* === END responsivedesign.inc.css === */
4545 /* === including indicator.css is done at the start of the file === */
4549 #developer-toolbar-toolbox-button[error-count]:before {
4553 background-color: #FF0000;
4555 -moz-margin-end: 5px;
4558 /* Social toolbar item */
4560 #social-notification-icon-mentions {
4561 background-color: #000000;
4563 -moz-margin-start: 2px;
4566 #social-notification-icon-mentions:hover {
4567 background-color: #FFCF00;
4570 #social-notification-icon-mentions[open="true"] {
4571 background-color: #FF9F00;
4574 #social-sidebar-splitter {
4578 #socialActivatedNotification .popup-notification-button-container {
4582 .social-activation-icon {
4589 #social-activation-message {
4593 #social-activation-message > label {
4597 /* social toolbar provider menu */
4598 .social-statusarea-popup {
4601 margin-right: -12px;
4604 .social-statusarea-user {
4605 border-bottom: 1px solid #9C9CFF;
4606 background-color: #000000;
4612 .social-statusarea-user-portrait {
4619 .social-statusarea-loggedInStatus {
4620 background: transparent;
4625 list-style-image: none;
4628 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4629 text-decoration: underline;
4632 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4636 .social-panel-frame {
4637 border-radius: inherit;
4640 /* === BEGIN chat.inc.css === */
4642 #social-sidebar-header {
4646 #manage-share-providers,
4647 #social-sidebar-button {
4648 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4649 -moz-image-region: rect(0, 468px, 18px, 450px);
4652 #social-sidebar-button {
4653 -moz-appearance: none;
4658 #manage-share-providers > .toolbarbutton-icon,
4659 #social-sidebar-button > .toolbarbutton-icon {
4663 #manage-share-providers:hover,
4664 #manage-share-providers:hover:active,
4665 #social-sidebar-button:hover,
4666 #social-sidebar-button:hover:active {
4667 -moz-image-region: rect(18px, 468px, 36px, 450px);
4669 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4673 #social-sidebar-button[loading="true"] {
4674 list-style-image: url("chrome://global/skin/icons/loading.png");
4677 #social-sidebar-favico {
4690 .chat-toolbarbutton {
4691 -moz-appearance: none;
4698 .chat-toolbarbutton > .toolbarbutton-text {
4702 .chat-toolbarbutton > .toolbarbutton-icon {
4707 .chat-close-button {
4708 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4711 .chat-close-button:hover {
4712 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4715 .chat-close-button:hover:active {
4716 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4719 .chat-minimize-button {
4720 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4723 .chat-minimize-button:hover {
4724 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4727 .chat-minimize-button:hover:active {
4728 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4732 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4733 transform: rotate(180deg);
4736 .chat-swap-button:hover {
4737 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4740 .chat-swap-button:hover:active {
4741 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4744 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4755 background-color: #9C9CFF;
4762 border: 1px solid #008484;
4764 border-top-left-radius: 4px;
4765 border-top-right-radius: 4px;
4767 background-color: #A09090;
4770 .chat-titlebar[selected] {
4771 background-color: #008484;
4774 .chat-titlebar > .notification-anchor-icon {
4779 .chat-titlebar[minimized="true"] {
4780 border-bottom: none;
4783 .chat-titlebar[selected] {
4784 background-color: #008484;
4787 .chat-titlebar[activity] {
4788 background-color: #E7ADE7;
4798 list-style-image: url("chrome://browser/skin/social/services-16.png");
4799 background-color: #000000;
4805 border-top: 1px solid #008484;
4806 -moz-border-end: 1px solid #008484;
4809 @media (min-resolution: 2dppx) {
4811 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4815 .chatbar-button:hover {
4816 background-color: #FFCF00;
4818 .chatbar-button[open="true"] {
4819 background-color: #FF9F00;
4822 .chatbar-button[activity]:not([open]) {
4823 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%);
4826 .chatbar-button > .toolbarbutton-icon {
4830 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4837 .chatbar-button > .toolbarbutton-icon {
4841 .chatbar-button:hover > .toolbarbutton-icon,
4842 .chatbar-button[open="true"] > .toolbarbutton-icon {
4846 .chatbar-button:hover,
4847 .chatbar-button[open="true"] {
4850 .chatbar-button > .toolbarbutton-text,
4851 .chatbar-button > .toolbarbutton-menu-dropmarker {
4855 .chatbar-button[activity]:not([open="true"]) {
4856 background-color: #E7ADE7;
4859 .chatbar-button > menupopup > menuitem[activity] {
4864 background: transparent;
4869 -moz-margin-end: 20px;
4873 -moz-margin-start: 4px;
4874 background-color: transparent;
4878 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4880 /* border-top-left-radius: 4px;
4881 border-top-right-radius: 4px;*/
4882 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4884 /* -moz-margin-end: 5px;*/
4887 chatbox[minimized="true"] {
4893 -moz-margin-start: 0px;
4899 /* === END chat.inc.css === */
4901 /* === BEGIN plugin-doorhanger.inc.css === */
4904 * Plugin Doorhanger Styles
4907 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4908 padding: 6px 1px 2px;
4911 .click-to-play-plugins-notification-center-box {
4914 .plugin-popupnotification-centeritem:nth-child(odd) {
4915 /* background-color: rgba(0,0,0,0.1);*/
4918 .center-item-label {
4920 text-overflow: ellipsis;
4923 .center-item-warning-icon {
4924 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4925 background-repeat: no-repeat;
4928 -moz-margin-start: 6px;
4931 .click-to-play-plugins-notification-button-container {
4934 .click-to-play-popup-button {
4938 .click-to-play-plugins-notification-description-box {
4942 padding-bottom: 3px;
4945 .click-to-play-plugins-outer-description {
4949 .click-to-play-plugins-notification-link,
4954 .messageImage[value="plugin-hidden"] {
4955 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4958 /* Keep any changes to this style in sync with pluginProblem.css */
4959 notification.pluginVulnerable {
4962 notification.pluginVulnerable .messageImage {
4963 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4966 /* === END plugin-doorhanger.inc.css === */
4968 /* === BEGIN login-doorhanger.inc.css === */
4970 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4971 /* Since we display a sliding subview that extends to the border, we cannot
4972 * keep the default padding of arrow panels. We use the same padding in the
4973 * individual content views instead. Since we removed the padding, we also
4974 * have to ensure the contents are clipped to the border box. */
4979 #login-fill-mainview,
4980 #login-fill-details {
4981 padding: var(--panel-arrowcontent-padding);
4984 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4985 transform: translateX(-14px);
4988 #login-fill-mainview,
4989 #login-fill-details {
4990 transition: transform 150ms;
4993 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4994 transform: translateX(105%);
4997 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4998 transform: translateX(-105%);
5001 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5002 background-color: hsla(240,39%,100%,.1);
5005 #login-fill-testing {
5011 border: 1px solid #9C9CFF;
5015 .login-fill-item[disabled] {
5017 background-color: #000000;
5020 .login-fill-item[disabled][selected] {
5021 background-color: #008484;
5029 .login-fill-item.different-hostname > .login-hostname {
5039 #login-fill-details {
5041 background: var(--panel-arrowcontent-background);
5042 color: var(--panel-arrowcontent-color);
5043 background-clip: padding-box;
5044 border-left: 1px solid #9C9CFF;
5045 -moz-margin-start: 38px;
5048 /* === END login-doorhanger.inc.css === */
5050 /* === BEGIN customizeMode.inc.css === */
5052 /* Customization mode */
5054 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5058 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5059 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5060 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5065 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5066 pointer-events: none;
5069 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5070 #PanelUI-contents > .panel-customization-placeholder {
5071 -moz-outline-radius: 2.5px;
5072 outline: 1px dashed transparent;
5075 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5076 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5077 -moz-box-ordinal-group: 0;
5082 outline-offset: -2px;
5083 pointer-events: none;
5089 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5090 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5091 offset from the bottom effectively the same as other targets (-2px). */
5092 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5096 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5097 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5098 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5099 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5103 /* Most target outlines are shown on hover and drag over but the panel menu uses
5104 placeholders instead. */
5105 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5106 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5107 /* nav-bar and panel outlines are always shown */
5108 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5109 outline-color: #A09090;
5112 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5113 transition: outline-color 250ms linear;
5116 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5117 transition: outline-color 250ms linear;
5118 outline-color: #9C9CFF;
5121 #PanelUI-contents > .panel-customization-placeholder {
5123 outline-offset: -5px;
5126 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5128 /* padding-left: 10px;
5129 padding-right: 10px;*/
5132 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5136 #customization-container {
5137 background-color: #000000;
5141 #customization-palette,
5142 #customization-empty {
5143 padding: 0 15px 15px;
5146 #customization-header {
5148 line-height: 1.75em;
5151 margin: 25px 25px 12px;
5152 padding-bottom: 12px;
5153 border-bottom: 1px solid #A09090;
5156 #customization-panel-container {
5157 padding: 10px 10px 0px;
5160 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5161 #customization-footer {
5162 /*background-color: rgb(236,236,236);*/
5165 #customization-footer {
5166 border-top: 1px solid #9C9CFF;
5170 .customizationmode-button {
5174 .customizationmode-button:hover {
5177 #customization-titlebar-visibility-button[checked],
5178 #customization-devedition-theme-button[checked] {
5179 background-color: #008484;
5182 #customization-titlebar-visibility-button[checked]:hover,
5183 #customization-devedition-theme-button[checked]:hover {
5184 background-color: #FFCF00;
5187 #customization-titlebar-visibility-button[checked]:hover:active,
5188 #customization-devedition-theme-button[checked]:hover:active {
5189 background-color: #FF9F00;
5192 .customizationmode-button[disabled="true"] {
5195 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5196 .customizationmode-button > .button-box > .button-icon {
5200 #customization-titlebar-visibility-button {
5201 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5202 -moz-image-region: rect(0, 16px, 16px, 0);
5205 #customization-titlebar-visibility-button:hover {
5206 -moz-image-region: rect(16px, 16px, 32px, 0);
5209 #customization-lwtheme-button,
5210 #customization-titlebar-visibility-button {
5214 #customization-titlebar-visibility-button > .button-box {
5216 padding-bottom: 1px;
5219 #customization-titlebar-visibility-button:hover:active > .button-box {
5224 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5225 #customization-titlebar-visibility-button > .button-box > .button-text {
5226 /* Sadly, button.css thinks its margins are perfect for everyone. */
5227 -moz-margin-start: 5px !important;
5230 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5234 background-size: contain;
5237 #customization-titlebar-visibility-button > .button-box > .button-icon {
5238 vertical-align: middle;
5241 #customization-titlebar-visibility-button[checked] {
5242 -moz-image-region: rect(0, 32px, 16px, 16px);
5243 background-color: #008484;
5246 #customization-titlebar-visibility-button[checked]:hover {
5247 -moz-image-region: rect(16px, 32px, 32px, 16px);
5248 background-color: #FFCF00;
5251 #customization-titlebar-visibility-button[checked]:hover:active {
5252 background-color: #FF9F00;
5255 @media (min-resolution: 1.1dppx) {
5256 #customization-titlebar-visibility-button {
5257 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5258 -moz-image-region: rect(0, 48px, 48px, 0);
5261 #customization-titlebar-visibility-button:hover {
5262 -moz-image-region: rect(48px, 48px, 96px, 0);
5265 #customization-titlebar-visibility-button[checked] {
5266 -moz-image-region: rect(0, 96px, 48px, 48px);
5269 #customization-titlebar-visibility-button[checked]:hover {
5270 -moz-image-region: rect(48px, 96px, 96px, 48px);
5274 #main-window[customize-entered] #customization-panel-container {
5275 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5276 background-position: left top;
5277 background-repeat: repeat;
5278 background-size: auto;
5279 background-attachment: fixed;
5282 toolbarpaletteitem[place="toolbar"] {
5283 transition: border-width 250ms ease-in-out;
5286 toolbarpaletteitem[mousedown] {
5287 outline: 1px solid #008484;
5288 cursor: -moz-grabbing;
5292 .panel-customization-placeholder,
5293 toolbarpaletteitem[place="palette"],
5294 toolbarpaletteitem[place="panel"] {
5295 transition: transform .3s ease-in-out;
5298 #customization-palette {
5299 transition: opacity .3s ease-in-out;
5303 #customization-palette[showing="true"] {
5307 toolbarpaletteitem[notransition].panel-customization-placeholder,
5308 toolbarpaletteitem[notransition][place="toolbar"],
5309 toolbarpaletteitem[notransition][place="palette"],
5310 toolbarpaletteitem[notransition][place="panel"] {
5314 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5315 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5316 toolbarpaletteitem > toolbaritem.panel-wide-item,
5317 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5318 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5321 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5322 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5323 transform: scale(1.3);
5326 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5327 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5328 transform: scale(1.1);
5331 /* Override the toolkit styling for items being dragged over. */
5332 toolbarpaletteitem[place="toolbar"] {
5333 border-left-width: 0;
5334 border-right-width: 0;
5339 #customization-palette:not([hidden]) {
5340 margin-bottom: 25px;
5343 toolbarpaletteitem[place="palette"]:-moz-focusring,
5344 toolbarpaletteitem[place="panel"]:-moz-focusring,
5345 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5346 outline: 1px dotted #A09090;
5347 outline-offset: -5px;
5348 -moz-outline-radius: 2.5px;
5351 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5352 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5353 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5354 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5358 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5359 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5369 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5370 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5374 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5375 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5378 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5379 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5383 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5384 -moz-box-pack: center;
5388 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5389 -moz-margin-end: 5px;
5392 #customization-palette > toolbarpaletteitem > label {
5398 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5399 -moz-box-orient: vertical;
5400 /* Make the panel padding uniform across all platforms due to the
5401 styling of the section headers and footer. */
5405 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5410 .customization-lwtheme-menu-theme {
5411 -moz-appearance: none;
5414 -moz-padding-end: 5px;
5416 -moz-padding-start: 0;
5419 .customization-lwtheme-menu-theme[defaulttheme] {
5420 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5423 .customization-lwtheme-menu-theme[active="true"] {
5424 background-color: #008484;
5427 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5431 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5435 #customization-lwtheme-menu-header,
5436 #customization-lwtheme-menu-recommended {
5441 #customization-lwtheme-menu-header,
5442 #customization-lwtheme-menu-recommended,
5443 #customization-lwtheme-menu-footer {
5444 background-color: #A09090;
5446 margin-right: -10px;
5450 #customization-lwtheme-menu-header {
5452 border-top-right-radius: 3px;
5453 border-top-left-radius: 3px;
5456 #customization-lwtheme-menu-recommended {
5459 #customization-lwtheme-menu-footer {
5460 margin-bottom: -10px;
5461 border-bottom-right-radius: 3px;
5462 border-bottom-left-radius: 3px;
5465 .customization-lwtheme-menu-footeritem {
5466 -moz-appearance: none;
5468 background-color: #C09070;
5470 border: 1px solid transparent;
5476 .customization-lwtheme-menu-footeritem:hover {
5477 background-color: #FFCF00;
5480 .customization-lwtheme-menu-footeritem:first-child {
5483 /* === END customizeMode.inc.css === */
5485 /* === BEGIN customizeTip.inc.css === */
5487 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5494 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5495 border: 1px solid #9C9CFF;
5499 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5500 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5503 .customization-tipPanel-infoBox {
5504 margin: 20px 25px 25px;
5506 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5507 background-repeat: no-repeat;
5510 .customization-tipPanel-content {
5516 .customization-tipPanel-em {
5521 .customization-tipPanel-contentImage {
5523 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5531 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5532 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5535 .customization-tipPanel-link {
5536 -moz-appearance: none;
5537 background: transparent;
5545 .customization-tipPanel-link > .button-box > .button-text {
5546 margin: 0 !important;
5549 .customization-tipPanel-closeBox > .close-icon {
5550 -moz-appearance: none;
5552 -moz-margin-end: -25px;
5555 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5556 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5557 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5560 /* === END customizeTip.inc.css === */
5563 * This next rule is a hack to disable subpixel anti-aliasing on all
5564 * labels during the customize mode transition. Subpixel anti-aliasing
5565 * on Windows with Direct2D layers acceleration is particularly slow to
5566 * paint, so this hack is how we sidestep that performance bottleneck.
5568 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5569 transform: perspective(0.01px);
5572 #main-window[customize-entered] > #tab-view-deck {
5573 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5574 background-attachment: fixed;
5577 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5578 background-repeat: no-repeat;
5579 background-position: right top;
5580 background-attachment: fixed;
5581 /* The image will get set from CustomizeMode.jsm */
5582 background-image: none;
5583 background-color: transparent;
5586 #main-window[customization-lwtheme]:-moz-lwtheme {
5587 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5588 background-repeat: repeat;
5589 background-attachment: fixed;
5590 background-position: left top;
5593 #main-window[customize-entered] #browser-bottombox,
5594 #main-window[customize-entered] #customization-container {
5595 border-left: 1px solid #9C9CFF;
5596 border-right: 1px solid #9C9CFF;
5597 background-clip: padding-box;
5600 #main-window[customize-entered] #browser-bottombox {
5601 border-bottom: 1px solid #9C9CFF;
5604 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5608 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5612 /* End customization mode */
5614 /* Private browsing indicators */
5617 * Currently, we have two places where we put private browsing indicators on
5618 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5619 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5620 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5621 * want the bottom border of the image to line up with the bottom of the window
5622 * caption buttons. That's why there's so much special-casing going on in here.
5624 .private-browsing-indicator {
5626 pointer-events: none;
5629 #private-browsing-indicator-titlebar {
5634 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5638 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5642 #TabsToolbar > .private-browsing-indicator {
5643 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5644 -moz-margin-start: 4px;
5648 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5649 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5650 * min/max/close window buttons.
5652 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5653 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5654 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5655 -moz-margin-end: 4px;
5661 /* This one is for Linux */
5662 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5663 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5667 /* End private browsing indicators */
5669 /* === BEGIN UITour.inc.css === */
5673 #UITourHighlightContainer {
5674 -moz-appearance: none;
5676 background-color: transparent;
5677 /* This is a buffer to compensate for the movement in the "wobble" effect */
5682 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5683 border-radius: 40px;
5684 border: 1px solid #9C9CFF;
5685 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5686 on Linux without an X compositor where opacity is either 0 or 1. */
5687 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5692 #UITourTooltipBody {
5693 -moz-margin-end: 14px;
5694 -moz-margin-start: 14px;
5699 #UITourTooltipIcon {
5702 -moz-margin-start: 14px;
5703 -moz-margin-end: 14px;
5706 #UITourTooltipTitle,
5707 #UITourTooltipDescription {
5711 #UITourTooltipTitle {
5714 -moz-margin-start: 0;
5715 /* Avoid the title overlapping the close button */
5716 -moz-margin-end: 14px;
5721 #UITourTooltipDescription {
5722 -moz-margin-start: 0;
5725 line-height: 1.8rem;
5726 margin-bottom: 0; /* Override global.css */
5729 #UITourTooltipClose {
5731 -moz-appearance: none;
5733 background-color: transparent;
5735 -moz-margin-start: 4px;
5739 #UITourTooltipClose > .toolbarbutton-text {
5743 #UITourTooltipButtons {
5745 background-color: rgba(0,0,0,.2);
5746 border-top: 1px solid rgba(0,0,0,.4);
5747 margin: 10px -16px -16px;
5751 #UITourTooltipButtons > label,
5752 #UITourTooltipButtons > button {
5756 #UITourTooltipButtons > label:first-child,
5757 #UITourTooltipButtons > button:first-child {
5758 -moz-margin-start: 0;
5761 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5764 -moz-margin-end: 5px;
5767 #UITourTooltipButtons > label,
5768 #UITourTooltipButtons > button .button-text {
5772 #UITourTooltipButtons > button:not(.button-link) {
5773 -moz-appearance: none;
5774 background-color: #C09070;
5775 border-radius: 3000px;
5779 transition-property: background-color, color;
5780 transition-duration: 150ms;
5783 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5784 background-color: #FFCF00;
5788 #UITourTooltipButtons > label,
5789 #UITourTooltipButtons > button.button-link {
5790 -moz-appearance: none;
5791 background: transparent;
5794 color: rgba(0,0,0,0.35);
5796 padding-right: 10px;
5799 #UITourTooltipButtons > button.button-link:hover {
5803 /* The primary button gets the same color as the customize button. */
5804 #UITourTooltipButtons > button.button-primary {
5805 background-color: #A06060; /* LCARS default button background color */
5808 padding-right: 30px;
5811 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5812 background-color: #FFCF00;
5816 /* Notification overrides for Heartbeat UI */
5818 notification.heartbeat {
5819 background-color: #A09090;
5823 @keyframes pulse-onshow {
5826 transform: scale(1.0);
5830 transform: scale(1.1);
5833 transform: scale(1.0);
5836 transform: scale(1.1);
5839 transform: scale(1.0);
5843 @keyframes pulse-twice {
5845 transform: scale(1.1);
5848 transform: scale(0.8);
5851 transform: scale(1);
5855 .messageText.heartbeat {
5857 /* text-shadow: none; */
5858 -moz-margin-start: 0px;
5861 .messageImage.heartbeat {
5864 -moz-margin-start: 8px;
5865 -moz-margin-end: 8px;
5868 .messageImage.heartbeat.pulse-onshow {
5869 animation-name: pulse-onshow;
5870 animation-duration: 1.5s;
5871 animation-iteration-count: 1;
5872 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5875 .messageImage.heartbeat.pulse-twice {
5876 animation-name: pulse-twice;
5877 animation-duration: 1s;
5878 animation-iteration-count: 2;
5879 animation-timing-function: linear;
5882 /* Learn More link styles */
5883 .heartbeat > .text-link {
5885 -moz-margin-start: 0px;
5888 .heartbeat > .text-link:hover {
5890 text-decoration: none;
5893 .heartbeat > .text-link:hover:active {
5897 /* Heartbeat UI Rating Star Classes */
5898 .heartbeat > #star-rating-container {
5900 /* margin-bottom: 4px;*/
5903 .heartbeat > #star-rating-container > #star5 {
5904 -moz-box-ordinal-group: 5;
5907 .heartbeat > #star-rating-container > #star4 {
5908 -moz-box-ordinal-group: 4;
5911 .heartbeat > #star-rating-container > #star3 {
5912 -moz-box-ordinal-group: 3;
5915 .heartbeat > #star-rating-container > #star2 {
5916 -moz-box-ordinal-group: 2;
5919 .heartbeat > #star-rating-container > .star-x {
5920 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5922 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
5923 -moz-margin-end: 4px !important;
5928 .heartbeat > #star-rating-container > .star-x:hover,
5929 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5930 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5933 /* === END UITour.inc.css === */
5935 #UITourTooltipButtons {
5937 * Override the --panel-arrowcontent-padding so the background extends
5938 * to the sides and bottom of the panel.
5941 margin-right: -10px;
5942 margin-bottom: -10px;
5945 /* === BEGIN contextmenu.inc.css === */
5947 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5950 #context-navigation > .menuitem-iconic {
5952 -moz-box-pack: center;
5953 -moz-box-align: center;
5956 #context-navigation > .menuitem-iconic[disabled="true"] {
5957 background-color: transparent;
5960 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5961 -moz-appearance: none;
5964 #context-back > .menu-iconic-left {
5965 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5966 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5967 -moz-image-region: rect(0, 54px, 18px, 36px);
5970 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5971 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5972 -moz-image-region: rect(18px, 54px, 36px, 36px);
5975 #context-back[disabled="true"] > .menu-iconic-left {
5976 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5977 -moz-image-region: rect(36px, 54px, 54px, 36px);
5980 #context-forward > .menu-iconic-left {
5981 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5982 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5983 -moz-image-region: rect(0, 72px, 18px, 54px);
5986 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5987 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5988 -moz-image-region: rect(18px, 72px, 36px, 54px);
5991 #context-forward[disabled="true"] > .menu-iconic-left {
5992 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5993 -moz-image-region: rect(36px, 72px, 54px, 54px);
5996 #context-reload > .menu-iconic-left {
5997 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5998 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5999 -moz-image-region: rect(0, 14px, 14px, 0);
6002 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6003 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6004 -moz-image-region: rect(14px, 14px, 28px, 0);
6007 #context-reload[disabled="true"] > .menu-iconic-left {
6008 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6009 -moz-image-region: rect(28px, 14px, 42px, 0);
6012 #context-stop > .menu-iconic-left {
6013 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6014 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6015 -moz-image-region: rect(0, 28px, 14px, 14px);
6018 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6019 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6020 -moz-image-region: rect(14px, 28px, 28px, 14px);
6023 #context-stop[disabled="true"] > .menu-iconic-left {
6024 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6025 -moz-image-region: rect(28px, 28px, 42px, 14px);
6028 #context-bookmarkpage > .menu-iconic-left {
6029 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6030 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6031 -moz-image-region: rect(0, 144px, 18px, 126px);
6034 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6035 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6036 -moz-image-region: rect(18px, 144px, 36px, 126px);
6039 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6040 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6041 -moz-image-region: rect(36px, 144px, 54px, 126px);
6044 #context-bookmarkpage[starred=true] {
6045 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6046 -moz-image-region: rect(0px, 162px, 18px, 144px);
6049 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6050 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6051 -moz-image-region: rect(18px, 162px, 36px, 144px);
6054 #context-bookmarkpage[starred=true][disabled=true] {
6055 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6056 -moz-image-region: rect(36px, 162px, 54px, 144px);
6059 #context-back:-moz-locale-dir(rtl),
6060 #context-forward:-moz-locale-dir(rtl),
6061 #context-reload:-moz-locale-dir(rtl) {
6062 transform: scaleX(-1);
6065 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6066 width: 18px; /*16px;*/
6067 height: 18px; /*16px;*/
6071 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6072 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6078 #context-media-eme-learnmore {
6079 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6082 #context-media-eme-learnmore {
6083 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6086 /* === END contextmenu.inc.css === */
6088 #context-navigation {
6091 #context-sep-navigation {
6092 /* margin-top: -4px; */
6095 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6100 /* === BEGIN usercontext.inc.css === */
6102 /* User Context UI browser styles */
6104 #menu_newUserContextTabPersonal {
6105 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6108 #menu_newUserContextTabWork {
6109 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6112 #menu_newUserContextTabBanking {
6113 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6116 #menu_newUserContextTabShopping {
6117 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6120 /* URL Bar Decoration */
6122 #userContext-indicator {
6127 #userContext-label {
6128 margin-inline-end: 3px;
6132 #userContext-icons:not([usercontextid]) {
6136 #userContext-icons {
6137 -moz-box-align: center;
6140 /* Personal User Context */
6141 #userContext-icons[usercontextid="1"] > #userContext-label {
6144 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6145 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6148 /* Work User Context */
6149 #userContext-icons[usercontextid="2"] > #userContext-label {
6152 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6153 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6156 /* Banking User Context */
6157 #userContext-icons[usercontextid="3"] > #userContext-label {
6160 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6161 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6164 /* Shopping User Context */
6165 #userContext-icons[usercontextid="4"] > #userContext-label {
6168 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6169 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6172 /* === END usercontext.inc.css === */