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([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
83 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
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 margin-inline-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 {
318 -moz-appearance: none;
319 border: 1px solid transparent;*/
322 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
323 /* border-color: var(--toolbarbutton-hover-bordercolor);
324 background: var(--toolbarbutton-hover-background);*/
327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
328 /* border-color: var(--toolbarbutton-active-bordercolor);
329 box-shadow: var(--toolbarbutton-active-boxshadow);
330 background: var(--toolbarbutton-active-background);*/
333 .bookmark-item > .toolbarbutton-icon,
334 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
337 margin-inline-start: 1px;
338 margin-inline-end: 2px;
343 /* Force the display of the label for bookmarks */
344 .bookmark-item > .toolbarbutton-text,
345 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
346 display: -moz-box !important;
349 .bookmark-item > .toolbarbutton-menu-dropmarker {
353 #bookmarks-toolbar-placeholder {
354 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
355 -moz-box-orient: horizontal;
358 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
359 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
360 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
363 /* ----- BOOKMARK STAR ANIMATION ----- */
365 @keyframes animation-bookmarkAdded {
366 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
367 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
369 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
372 @keyframes animation-bookmarkPulse {
373 from { transform: scale(1); }
374 50% { transform: scale(1.3); }
375 to { transform: scale(1); }
378 #bookmarked-notification-container {
387 #bookmarked-notification {
388 background-size: 16px;
389 background-position: center;
390 background-repeat: no-repeat;
396 #bookmarked-notification-dropmarker-anchor {
401 #bookmarked-notification-dropmarker-icon {
407 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
408 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
409 animation: animation-bookmarkAdded 800ms;
410 animation-timing-function: ease, ease, ease;
413 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
414 list-style-image: none !important;
417 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
419 animation: animation-bookmarkPulse 300ms;
420 animation-delay: 600ms;
421 animation-timing-function: ease-out;
424 /* ::::: bookmark menus ::::: */
427 menuitem.bookmark-item {
432 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
437 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
438 padding-inline-start: 0px;
441 /* ::::: bookmark items ::::: */
444 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
445 -moz-image-region: auto;
448 .bookmark-item[container] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
450 -moz-image-region: auto;
453 .bookmark-item[container][open] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
455 -moz-image-region: auto;
458 .bookmark-item[container][livemark] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
460 -moz-image-region: auto;
463 .bookmark-item[container][livemark] .bookmark-item {
464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
465 -moz-image-region: rect(0px, 16px, 16px, 0px);
468 .bookmark-item[container][livemark] .bookmark-item[visited] {
469 -moz-image-region: rect(0px, 32px, 16px, 16px);
472 .bookmark-item[container][query] {
473 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
474 -moz-image-region: auto;
477 .bookmark-item[query][tagContainer] {
478 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][dayContainer] {
483 list-style-image: url("chrome://communicator/skin/history/calendar.png");
484 -moz-image-region: auto;
487 .bookmark-item[query][hostContainer] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
489 -moz-image-region: auto;
492 .bookmark-item[query][hostContainer][open] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
494 -moz-image-region: auto;
497 .bookmark-item[cutting] > .toolbarbutton-icon,
498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
502 .bookmark-item[cutting] > .toolbarbutton-text,
503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
507 /* ::::: primary toolbar buttons ::::: */
509 /* === BEGIN toolbarbuttons.inc.css === */
511 /* Whole section of this included file: */
512 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
513 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
514 #social-share-button, #open-file-button, #find-button, #developer-button,
515 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
516 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
517 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
518 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
519 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
520 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
524 -moz-image-region: rect(0, 36px, 18px, 18px);
527 #back-button:hover:not([disabled="true"]) {
528 -moz-image-region: rect(18px, 36px, 36px, 18px);
531 #back-button[disabled="true"] {
532 -moz-image-region: rect(36px, 36px, 54px, 18px);
536 -moz-image-region: rect(0, 72px, 18px, 54px);
539 #forward-button:hover:not([disabled="true"]) {
540 -moz-image-region: rect(18px, 72px, 36px, 54px);
543 #forward-button[disabled="true"] {
544 -moz-image-region: rect(36px, 72px, 54px, 54px);
547 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
548 #forward-button:-moz-locale-dir(rtl) {
549 transform: scaleX(-1);
552 #home-button[cui-areatype="toolbar"] {
553 -moz-image-region: rect(0, 126px, 18px, 108px);
556 #home-button[cui-areatype="toolbar"]:hover {
557 -moz-image-region: rect(18px, 126px, 36px, 108px);
560 #bookmarks-menu-button[cui-areatype="toolbar"] {
561 -moz-image-region: rect(0, 144px, 18px, 126px);
564 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
565 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
566 -moz-image-region: rect(18px, 144px, 36px, 126px);
569 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
570 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
571 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
572 background-color: transparent !important;
575 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
576 -moz-image-region: rect(0, 162px, 18px, 144px);
579 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
580 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
582 /* When starred and clicked (for edit/delete dialog),
583 * then only the menubutton-button itself is open, but not the whole menubutton. */
584 -moz-image-region: rect(18px, 162px, 36px, 144px);
587 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
588 -moz-image-region: rect(0, 630px, 18px, 612px);
591 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
593 -moz-box-align: center;
596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
598 -moz-image-region: rect(18px, 630px, 36px, 612px);
601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
605 padding-inline-start: 2px;
606 padding-inline-end: 0px;
609 #history-panelmenu[cui-areatype="toolbar"] {
610 -moz-image-region: rect(0, 180px, 18px, 162px);
613 #history-panelmenu[cui-areatype="toolbar"]:hover,
614 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
615 -moz-image-region: rect(18px, 180px, 36px, 162px);
618 #downloads-button[cui-areatype="toolbar"] {
619 -moz-image-region: rect(0, 198px, 18px, 180px);
622 #downloads-button[cui-areatype="toolbar"]:hover,
623 #downloads-button[cui-areatype="toolbar"][open="true"] {
624 -moz-image-region: rect(18px, 198px, 36px, 180px);
627 #add-ons-button[cui-areatype="toolbar"] {
628 -moz-image-region: rect(0, 216px, 18px, 198px);
631 #add-ons-button[cui-areatype="toolbar"]:hover {
632 -moz-image-region: rect(18px, 216px, 36px, 198px);
635 #open-file-button[cui-areatype="toolbar"] {
636 -moz-image-region: rect(0, 234px, 18px, 216px);
639 #open-file-button[cui-areatype="toolbar"]:hover {
640 -moz-image-region: rect(18px, 234px, 36px, 216px);
643 #save-page-button[cui-areatype="toolbar"] {
644 -moz-image-region: rect(0, 252px, 18px, 234px);
647 #save-page-button[cui-areatype="toolbar"]:hover {
648 -moz-image-region: rect(18px, 252px, 36px, 234px);
651 #sync-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 792px, 18px, 774px);
655 #sync-button[cui-areatype="toolbar"]:hover {
656 -moz-image-region: rect(18px, 792px, 36px, 774px);
659 #containers-panelmenu[cui-areatype="toolbar"] {
660 -moz-image-region: rect(0, 810px, 18px, 792px);
663 #containers-panelmenu[cui-areatype="toolbar"]:hover {
664 -moz-image-region: rect(18px, 810px, 36px, 792px);
667 #feed-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0, 288px, 18px, 270px);
671 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
672 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
673 -moz-image-region: rect(18px, 288px, 36px, 270px);
676 #feed-button[cui-areatype="toolbar"][disabled="true"] {
677 -moz-image-region: rect(36px, 288px, 54px, 270px);
680 #social-share-button[cui-areatype="toolbar"] {
681 -moz-image-region: rect(0px, 306px, 18px, 288px);
684 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685 #social-share-button[cui-areatype="toolbar"][open="true"] {
686 -moz-image-region: rect(18px, 306px, 36px, 288px);
689 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 306px, 54px, 288px);
693 #characterencoding-button[cui-areatype="toolbar"] {
694 -moz-image-region: rect(0, 324px, 18px, 306px);
697 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
698 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
699 -moz-image-region: rect(18px, 324px, 36px, 306px);
702 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
703 -moz-image-region: rect(36px, 324px, 54px, 306px);
706 #new-window-button[cui-areatype="toolbar"] {
707 -moz-image-region: rect(0, 342px, 18px, 324px);
710 #new-window-button[cui-areatype="toolbar"]:hover {
711 -moz-image-region: rect(18px, 342px, 36px, 324px);
714 #e10s-button[cui-areatype="toolbar"] {
715 -moz-image-region: rect(0, 342px, 18px, 324px);
718 #e10s-button[cui-areatype="toolbar"]:hover {
719 -moz-image-region: rect(18px, 342px, 36px, 324px);
722 #e10s-button > .toolbarbutton-icon {
723 transform: scaleY(-1);
726 #new-tab-button[cui-areatype="toolbar"] {
727 -moz-image-region: rect(0, 360px, 18px, 342px);
730 #new-tab-button[cui-areatype="toolbar"]:hover {
731 -moz-image-region: rect(18px, 360px, 36px, 342px);
734 #privatebrowsing-button[cui-areatype="toolbar"] {
735 -moz-image-region: rect(0, 378px, 18px, 360px);
738 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
739 -moz-image-region: rect(18px, 378px, 36px, 360px);
742 #find-button[cui-areatype="toolbar"] {
743 -moz-image-region: rect(0, 396px, 18px, 378px);
746 #find-button[cui-areatype="toolbar"]:hover {
747 -moz-image-region: rect(18px, 396px, 36px, 378px);
750 #print-button[cui-areatype="toolbar"] {
751 -moz-image-region: rect(0, 414px, 18px, 396px);
754 #print-button[cui-areatype="toolbar"]:hover {
755 -moz-image-region: rect(18px, 414px, 36px, 396px);
758 #fullscreen-button[cui-areatype="toolbar"] {
759 -moz-image-region: rect(0, 432px, 18px, 414px);
762 #fullscreen-button[cui-areatype="toolbar"]:hover {
763 -moz-image-region: rect(18px, 432px, 36px, 414px);
766 #developer-button[cui-areatype="toolbar"] {
767 -moz-image-region: rect(0, 450px, 18px, 432px);
770 #developer-button[cui-areatype="toolbar"]:hover,
771 #developer-button[cui-areatype="toolbar"][open="true"] {
772 -moz-image-region: rect(18px, 450px, 36px, 432px);
775 #preferences-button[cui-areatype="toolbar"] {
776 -moz-image-region: rect(0, 468px, 18px, 450px);
779 #preferences-button[cui-areatype="toolbar"]:hover {
780 -moz-image-region: rect(18px, 468px, 36px, 450px);
783 #PanelUI-menu-button {
784 -moz-image-region: rect(0, 486px, 18px, 468px);
787 #PanelUI-menu-button:hover,
788 #PanelUI-menu-button[open="true"] {
789 -moz-image-region: rect(18px, 486px, 36px, 468px);
792 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
793 -moz-image-region: rect(0, 504px, 18px, 486px);
796 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
797 -moz-image-region: rect(18px, 504px, 36px, 486px);
800 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
801 -moz-image-region: rect(36px, 504px, 54px, 486px);
804 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
805 -moz-image-region: rect(0, 522px, 18px, 504px);
808 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
809 -moz-image-region: rect(18px, 522px, 36px, 504px);
812 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
813 -moz-image-region: rect(36px, 522px, 54px, 504px);
816 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
817 -moz-image-region: rect(0, 540px, 18px, 522px);
820 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
821 -moz-image-region: rect(18px, 540px, 36px, 522px);
824 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
825 -moz-image-region: rect(36px, 540px, 54px, 522px);
828 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
829 -moz-image-region: rect(0, 558px, 18px, 540px);
832 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
833 -moz-image-region: rect(18px, 558px, 36px, 540px);
836 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
837 -moz-image-region: rect(36px, 558px, 54px, 540px);
840 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
841 -moz-image-region: rect(0, 576px, 18px, 558px);
844 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
845 -moz-image-region: rect(18px, 576px, 36px, 558px);
848 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
849 -moz-image-region: rect(36px, 576px, 54px, 558px);
852 #nav-bar-overflow-button {
853 -moz-image-region: rect(0, 612px, 18px, 594px);
856 #nav-bar-overflow-button:hover,
857 #nav-bar-overflow-button[open="true"] {
858 -moz-image-region: rect(18px, 612px, 36px, 594px);
861 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
862 transform: scaleX(-1);
866 -moz-image-region: rect(0, 648px, 18px, 630px);
869 #tabview-button:hover {
870 -moz-image-region: rect(18px, 648px, 36px, 630px);
873 #email-link-button[cui-areatype="toolbar"] {
874 -moz-image-region: rect(0, 666px, 18px, 648px);
877 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
878 -moz-image-region: rect(18px, 666px, 36px, 648px);
881 #email-button[cui-areatype="toolbar"][disabled="true"] {
882 -moz-image-region: rect(36px, 666px, 54px, 648px);
885 #sidebar-button[cui-areatype="toolbar"] {
886 -moz-image-region: rect(0, 684px, 18px, 666px);
889 #sidebar-button[cui-areatype="toolbar"]:hover {
890 -moz-image-region: rect(18px, 684px, 36px, 666px);
893 #panic-button[cui-areatype="toolbar"] {
894 -moz-image-region: rect(0, 702px, 18px, 684px);
897 #panic-button[cui-areatype="toolbar"]:hover,
898 #panic-button[cui-areatype="toolbar"][open] {
899 -moz-image-region: rect(18px, 702px, 36px, 684px);
902 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
903 transform: scaleX(-1);
906 #webide-button[cui-areatype="toolbar"] {
907 -moz-image-region: rect(0, 738px, 18px, 720px);
910 #webide-button[cui-areatype="toolbar"]:hover {
911 -moz-image-region: rect(18px, 738px, 36px, 720px);
914 /* === END toolbarbuttons.inc.css === */
916 /* === BEGIN menupanel.inc.css === */
918 /* Menu panel and palette styles */
921 /* avoid aero overrides with changed filenames */
922 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
923 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
926 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
927 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
928 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
929 #social-share-button, #open-file-button, #find-button, #developer-button,
930 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
931 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
932 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
933 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
934 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
935 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
936 #social-share-button, #open-file-button, #find-button, #developer-button,
937 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
938 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
939 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
940 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
941 list-style-image: var(--menupanel-list-style-image);
944 #home-button[cui-areatype="menu-panel"],
945 toolbarpaletteitem[place="palette"] > #home-button {
946 -moz-image-region: rect(0px, 128px, 32px, 96px);
949 #home-button[cui-areatype="menu-panel"]:hover,
950 toolbarpaletteitem[place="palette"] > #home-button:hover {
951 -moz-image-region: rect(32px, 128px, 64px, 96px);
954 #bookmarks-menu-button[cui-areatype="menu-panel"],
955 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
956 -moz-image-region: rect(0px, 192px, 32px, 160px);
959 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
960 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
961 -moz-image-region: rect(32px, 192px, 64px, 160px);
964 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
965 -moz-image-region: rect(32px, 192px, 64px, 160px);
968 #history-panelmenu[cui-areatype="menu-panel"],
969 toolbarpaletteitem[place="palette"] > #history-panelmenu {
970 -moz-image-region: rect(0px, 224px, 32px, 192px);
973 #history-panelmenu[cui-areatype="menu-panel"]:hover,
974 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
975 -moz-image-region: rect(32px, 224px, 64px, 192px);
978 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
979 -moz-image-region: rect(32px, 224px, 64px, 192px);
982 #downloads-button[cui-areatype="menu-panel"],
983 toolbarpaletteitem[place="palette"] > #downloads-button {
984 -moz-image-region: rect(0px, 256px, 32px, 224px);
987 #downloads-button[cui-areatype="menu-panel"]:hover,
988 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
989 -moz-image-region: rect(32px, 256px, 64px, 224px);
992 #add-ons-button[cui-areatype="menu-panel"],
993 toolbarpaletteitem[place="palette"] > #add-ons-button {
994 -moz-image-region: rect(0px, 288px, 32px, 256px);
997 #add-ons-button[cui-areatype="menu-panel"]:hover,
998 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
999 -moz-image-region: rect(32px, 288px, 64px, 256px);
1002 #open-file-button[cui-areatype="menu-panel"],
1003 toolbarpaletteitem[place="palette"] > #open-file-button {
1004 -moz-image-region: rect(0px, 320px, 32px, 288px);
1007 #open-file-button[cui-areatype="menu-panel"]:hover,
1008 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1009 -moz-image-region: rect(32px, 320px, 64px, 288px);
1012 #save-page-button[cui-areatype="menu-panel"],
1013 toolbarpaletteitem[place="palette"] > #save-page-button {
1014 -moz-image-region: rect(0px, 352px, 32px, 320px);
1017 #save-page-button[cui-areatype="menu-panel"]:hover,
1018 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1019 -moz-image-region: rect(32px, 352px, 64px, 320px);
1022 #sync-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #sync-button {
1024 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1027 #sync-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1029 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1032 #containers-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1034 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1037 #containers-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1039 #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1040 -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1043 #feed-button[cui-areatype="menu-panel"],
1044 toolbarpaletteitem[place="palette"] > #feed-button {
1045 -moz-image-region: rect(0px, 416px, 32px, 384px);
1048 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1049 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1050 -moz-image-region: rect(32px, 416px, 64px, 384px);
1053 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1054 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1055 -moz-image-region: rect(64px, 416px, 96px, 384px);
1058 #social-share-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #social-share-button {
1060 -moz-image-region: rect(0px, 448px, 32px, 416px);
1063 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1064 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1065 -moz-image-region: rect(32px, 448px, 64px, 416px);
1068 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1069 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1070 -moz-image-region: rect(64px, 448px, 96px, 416px);
1073 #characterencoding-button[cui-areatype="menu-panel"],
1074 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1075 -moz-image-region: rect(0px, 480px, 32px, 448px);
1078 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1079 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1080 -moz-image-region: rect(32px, 480px, 64px, 448px);
1083 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1084 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1085 -moz-image-region: rect(64px, 480px, 96px, 448px);
1088 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1089 -moz-image-region: rect(32px, 480px, 64px, 448px);
1092 #new-window-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #new-window-button {
1094 -moz-image-region: rect(0px, 512px, 32px, 480px);
1097 #new-window-button[cui-areatype="menu-panel"]:hover,
1098 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1099 -moz-image-region: rect(32px, 512px, 64px, 480px);
1102 #e10s-button[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #e10s-button {
1104 -moz-image-region: rect(0px, 512px, 32px, 480px);
1107 #e10s-button[cui-areatype="menu-panel"]:hover,
1108 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1109 -moz-image-region: rect(32px, 512px, 64px, 480px);
1112 #new-tab-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #new-tab-button {
1114 -moz-image-region: rect(0px, 544px, 32px, 512px);
1117 #new-tab-button[cui-areatype="menu-panel"]:hover,
1118 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1119 -moz-image-region: rect(32px, 544px, 64px, 512px);
1122 #privatebrowsing-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1124 -moz-image-region: rect(0px, 576px, 32px, 544px);
1127 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1128 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1129 -moz-image-region: rect(32px, 576px, 64px, 544px);
1132 #tabview-button[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #tabview-button {
1134 -moz-image-region: rect(0px, 608px, 32px, 576px);
1137 #tabview-button[cui-areatype="menu-panel"]:hover,
1138 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1139 -moz-image-region: rect(32px, 608px, 64px, 576px);
1142 #find-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #find-button {
1144 -moz-image-region: rect(0px, 640px, 32px, 608px);
1147 #find-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #find-button:hover {
1149 -moz-image-region: rect(32px, 640px, 64px, 608px);
1152 #print-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #print-button {
1154 -moz-image-region: rect(0px, 672px, 32px, 640px);
1157 #print-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #print-button:hover {
1159 -moz-image-region: rect(32px, 672px, 64px, 640px);
1162 #fullscreen-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1164 -moz-image-region: rect(0px, 704px, 32px, 672px);
1167 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1169 -moz-image-region: rect(32px, 704px, 64px, 672px);
1172 #developer-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #developer-button {
1174 -moz-image-region: rect(0px, 736px, 32px, 704px);
1177 #developer-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1179 -moz-image-region: rect(32px, 736px, 64px, 704px);
1182 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1183 -moz-image-region: rect(32px, 736px, 64px, 704px);
1186 #preferences-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #preferences-button {
1188 -moz-image-region: rect(0px, 768px, 32px, 736px);
1191 #preferences-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1193 -moz-image-region: rect(32px, 768px, 64px, 736px);
1196 #email-link-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #email-link-button {
1198 -moz-image-region: rect(0, 800px, 32px, 768px);
1201 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1202 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1203 -moz-image-region: rect(32px, 800px, 64px, 768px);
1206 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1207 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1208 -moz-image-region: rect(64px, 800px, 96px, 768px);
1211 #sidebar-button[cui-areatype="menu-panel"],
1212 toolbarpaletteitem[place="palette"] > #sidebar-button {
1213 -moz-image-region: rect(0, 864px, 32px, 832px);
1216 #sidebar-button[cui-areatype="menu-panel"]:hover,
1217 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1218 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1219 -moz-image-region: rect(32px, 864px, 64px, 832px);
1222 #panic-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #panic-button {
1224 -moz-image-region: rect(0, 896px, 32px, 864px);
1227 #panic-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1229 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1230 -moz-image-region: rect(32px, 896px, 64px, 864px);
1233 #webide-button[cui-areatype="menu-panel"],
1234 toolbarpaletteitem[place="palette"] > #webide-button {
1235 -moz-image-region: rect(0px, 960px, 32px, 928px);
1238 #webide-button[cui-areatype="menu-panel"]:hover,
1239 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1240 -moz-image-region: rect(32px, 960px, 64px, 928px);
1243 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1244 -moz-image-region: rect(0, 832px, 32px, 800px);
1247 /* Wide panel control icons */
1249 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1250 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1251 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1252 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1253 list-style-image: var(--menupanel-small-list-style-image);
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1258 -moz-image-region: rect(0px, 32px, 16px, 16px);
1261 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1262 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1263 -moz-image-region: rect(16px, 32px, 32px, 16px);
1266 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1267 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1268 -moz-image-region: rect(32px, 32px, 48px, 16px);
1271 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1272 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1273 -moz-image-region: rect(0px, 48px, 16px, 32px);
1276 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1277 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1278 -moz-image-region: rect(16px, 48px, 32px, 32px);
1281 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1282 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1283 -moz-image-region: rect(32px, 48px, 48px, 32px);
1286 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1287 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1288 -moz-image-region: rect(0px, 64px, 16px, 48px);
1291 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1292 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1293 -moz-image-region: rect(16px, 64px, 32px, 48px);
1296 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1297 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1298 -moz-image-region: rect(32px, 64px, 48px, 48px);
1301 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1302 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1303 -moz-image-region: rect(0px, 80px, 16px, 64px);
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1307 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1308 -moz-image-region: rect(16px, 80px, 32px, 64px);
1311 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1312 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1313 -moz-image-region: rect(32px, 80px, 48px, 64px);
1316 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1317 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1318 -moz-image-region: rect(0px, 96px, 16px, 80px);
1321 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1323 -moz-image-region: rect(16px, 96px, 32px, 80px);
1326 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1327 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1328 -moz-image-region: rect(32px, 96px, 48px, 80px);
1331 #add-share-provider {
1332 list-style-image: var(--menupanel-small-list-style-image);
1333 -moz-image-region: rect(0px, 96px, 16px, 80px);
1336 /* === END menupanel.inc.css === */
1338 .toolbarbutton-1:not([type="menu-button"]) {
1339 -moz-box-orient: vertical;
1343 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1349 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350 .toolbarbutton-1[disabled="true"]:hover:active,
1351 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1355 .toolbarbutton-1:hover:active,
1356 .toolbarbutton-1[open="true"],
1357 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1359 padding-bottom: 0px;
1360 padding-inline-start: 3px;
1361 padding-inline-end: 1px;
1364 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1365 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1366 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1367 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1371 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1372 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1375 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1376 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1379 .toolbarbutton-1 > .toolbarbutton-icon,
1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1384 #nav-bar .toolbarbutton-1,
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1388 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1389 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1390 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1393 #nav-bar #PanelUI-menu-button {
1394 /* padding-inline-start: 7px;
1395 padding-inline-end: 5px;*/
1398 #nav-bar .toolbarbutton-1[type=panel],
1399 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1400 /* padding-left: 5px;
1401 padding-right: 5px;*/
1404 #nav-bar .toolbarbutton-1 > menupopup {
1405 /* margin-top: -3px;*/
1408 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1412 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1413 /* padding-inline-end: 0;*/
1416 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1417 /* padding-inline-start: 0;
1418 -moz-box-align: center;*/
1421 .findbar-button > .toolbarbutton-text,
1422 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1423 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1424 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1425 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1426 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1427 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1428 /* padding: 2px 6px;
1430 border-color: transparent;
1431 transition-property: background-color, border-color;
1432 transition-duration: 150ms;*/
1435 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1436 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1437 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1438 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1442 /* Help SDK icons fit: */
1443 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1444 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1448 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1449 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1453 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1454 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1455 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1456 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1457 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1458 /* padding-inline-end: 17px;*/
1461 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1462 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1463 /* horizontal padding + border + icon width */
1464 /* max-width: 43px;*/
1467 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1470 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1473 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1476 #nav-bar .toolbaritem-combined-buttons {
1477 /* margin-left: 2px;
1478 margin-right: 2px;*/
1481 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1486 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1487 #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 {
1493 margin-inline-end: -1px;
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1500 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1501 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1502 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1503 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1504 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1505 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1506 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1507 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1508 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1511 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1512 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1513 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1514 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1515 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1516 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1519 #TabsToolbar .toolbarbutton-1,
1520 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1521 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1522 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1525 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1526 #TabsToolbar .toolbarbutton-1[open],
1527 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1528 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1529 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1532 /* unified back/forward button */
1535 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1538 #forward-button > menupopup {
1539 margin-top: 1px !important;
1542 #forward-button > .toolbarbutton-icon {
1543 background-clip: padding-box !important;
1544 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1545 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1549 margin-inline-start: -4px !important;
1554 border-radius: 0 10000px 10000px 0;
1555 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1558 #forward-button:-moz-locale-dir(rtl) {
1559 border-radius: 10000px 0 0 10000px;
1562 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1563 transition: margin-left 150ms ease-out;
1566 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1567 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1570 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1571 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1572 transition-delay: 100s;
1575 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1576 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1577 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1581 /* padding-top: 3px !important;
1582 padding-bottom: 3px !important;
1583 padding-inline-start: 5px !important;
1584 padding-inline-end: 0 !important;*/
1587 border-radius: 10000px;
1591 margin-bottom: -2px;
1594 #back-button:-moz-locale-dir(rtl) {
1597 #back-button > menupopup {
1598 margin-top: -1px !important;
1601 #back-button > .toolbarbutton-icon {
1602 border-radius: 10000px !important;
1603 background-clip: padding-box !important;
1604 /* background-color: hsla(210,25%,98%,.08) !important;
1605 padding: 6px !important;
1606 border-style: none !important;
1607 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1608 0 0 0 1px hsla(210,4%,10%,.25);*/
1609 transition-property: background-color, box-shadow !important;
1610 transition-duration: 250ms !important;
1613 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1614 /* background-color: hsla(210,4%,10%,.08) !important;*/
1617 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1618 #back-button[open="true"] > .toolbarbutton-icon {
1619 /* background-color: hsla(210,4%,10%,.12) !important;
1620 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1621 0 0 0 1px hsla(210,4%,10%,.25),
1622 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1625 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1626 transform: scaleX(-1);
1629 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1630 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1631 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1634 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1635 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1636 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1639 #home-button.bookmark-item {
1640 list-style-image: url("chrome://browser/skin/Toolbar.png");
1643 #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),
1644 #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),
1645 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1646 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1647 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1648 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1649 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1652 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1655 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1656 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1657 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1661 #downloads-button > .toolbarbutton-icon {
1665 /* tabview menu item */
1668 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1669 -moz-image-region: rect(1px, 89px, 17px, 73px);
1672 #menu_tabview[groups="0"] {
1673 -moz-image-region: rect(1px, 17px, 17px, 1px);
1676 #menu_tabview[groups="1"] {
1677 -moz-image-region: rect(1px, 35px, 17px, 19px);
1680 #menu_tabview[groups="2"] {
1681 -moz-image-region: rect(1px, 53px, 17px, 37px);
1684 #menu_tabview[groups="3"] {
1685 -moz-image-region: rect(1px, 71px, 17px, 55px);
1688 /* undo close tab menu item */
1689 #alltabs_undoCloseTab {
1690 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1693 @media (min-resolution: 1.1dppx) {
1694 #alltabs_undoCloseTab {
1695 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1697 #alltabs_undoCloseTab > .toolbarbutton-icon {
1702 /* zoom control text (reset) button special case: */
1704 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1705 /* To make this line up with the icons, it needs the same height (18px) +
1706 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1707 * increase in text sizes would break things...
1712 /* ::::: fullscreen window controls ::::: */
1717 -moz-appearance: none;
1719 /* margin: 0 !important;
1720 padding: 6px 12px;*/
1724 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1727 #minimize-button:hover {
1728 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1732 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1735 #restore-button:hover {
1736 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1739 #minimize-button:hover,
1740 #restore-button:hover {
1741 /* background-color: hsla(0, 0%, 0%, .12);*/
1744 #minimize-button:hover:active,
1745 #restore-button:hover:active {
1746 /* background-color: hsla(0, 0%, 0%, .22);*/
1750 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1753 #close-button:hover {
1754 /* background-color: hsl(355, 86%, 49%);*/
1755 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1758 #close-button:hover:active {
1759 /* background-color: hsl(355, 82%, 69%);*/
1762 /* ::::: Location Bar ::::: */
1765 .searchbar-textbox {
1768 margin-inline-start: 3px;
1772 /* make color as light as possible to deal with dark non-domain parts */
1776 #urlbar:-moz-lwtheme,
1777 .searchbar-textbox:-moz-lwtheme {
1778 /* background-color: rgba(255,255,255,.8);
1779 @navbarTextboxCustomBorder@
1783 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1784 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1785 /* background-color: rgba(255,255,255,.9);*/
1788 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1789 .searchbar-textbox:-moz-lwtheme[focused] {
1790 /* background-color: white;*/
1793 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1794 /* border-inline-start: none;
1798 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1799 /* border-top-left-radius: 0;
1800 border-bottom-left-radius: 0; */
1803 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1804 /* border-top-right-radius: 0;
1805 border-bottom-right-radius: 0; */
1808 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1809 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1810 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1813 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1814 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1815 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1816 transform: scaleX(-1);
1819 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1820 -moz-box-direction: reverse;
1823 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1829 -moz-box-orient: horizontal;
1830 -moz-box-align: stretch;
1833 .urlbar-textbox-container {
1834 -moz-box-align: stretch;
1838 margin-inline-start: 0;
1843 #urlbar-display-box {
1844 padding-inline-start: 4px;
1845 border-inline-start: 1px solid var(--urlbar-separator-color);
1846 border-inline-end: 1px solid var(--urlbar-separator-color);
1847 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1848 border-image-slice: 1;
1852 -moz-box-align: center;
1857 /* 16x16 icon with border-box sizing */
1862 .search-go-container {
1866 .search-go-container > .search-go-button {
1870 #urlbar-search-footer {
1871 border-top: 1px solid #A09090;
1874 #urlbar-search-settings {
1877 #urlbar-search-settings:hover {
1880 #urlbar-search-settings:hover:active {
1883 #urlbar-search-splitter {
1885 margin-inline-start: -3px;
1887 background: transparent;
1890 #urlbar-search-splitter + #urlbar-container > #urlbar,
1891 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1892 margin-inline-start: 0;
1896 border-inline-end: 1px solid #9C9CFF;
1897 margin-inline-end: 3px;
1900 margin-inline-start: 0;
1904 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1906 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1907 border-bottom: 1px solid #A09090;
1908 background-color: #000000;
1910 padding-inline-start: 44px;
1911 padding-inline-end: 6px;
1912 background-image: url("chrome://browser/skin/info.svg");
1913 background-clip: padding-box;
1914 background-position: 20px center;
1915 background-repeat: no-repeat;
1916 background-size: 16px 16px;
1919 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1920 background-position: right 20px center;
1923 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1928 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1929 margin-inline-start: 0;
1932 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1933 -moz-appearance: none;
1938 margin-inline-start: 10px;
1941 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1944 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1947 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1950 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1953 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1956 min-width: calc(54px + 11ch);
1961 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1962 background-color: var(--identity-box-verified-background-color);
1965 #identity-box:-moz-focusring {
1966 outline: 1px dotted #008484;
1967 outline-offset: -1px;
1970 #identity-box.verifiedDomain:-moz-focusring,
1971 #identity-box.verifiedIdentity:-moz-focusring {
1972 outline-color: #000000;
1975 /* Location bar dropmarker */
1977 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1978 background-color: transparent;
1981 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1982 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1983 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1986 transition: opacity 0.15s ease;
1989 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1993 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1997 .urlbar-history-dropmarker:hover {
2000 .urlbar-history-dropmarker:hover:active,
2001 .urlbar-history-dropmarker[open="true"] {
2004 /* page proxy icon */
2006 /* === BEGIN identity-block.inc.css === */
2009 --identity-box-verified-color: #008484;
2010 /* Default theme does different color per channel, we can't as they do it build-time. */
2011 --identity-box-chrome-color: #9C9CFF;
2017 /* The latter two properties have a transition to handle the delayed hiding of
2018 the forward button when hovered. */
2019 transition: background-color 150ms ease, padding-left, padding-right;
2022 #identity-box:-moz-locale-dir(ltr) {
2023 border-top-right-radius: 0;
2024 border-bottom-right-radius: 0;
2027 #identity-box:-moz-locale-dir(rtl) {
2028 border-top-left-radius: 0;
2029 border-bottom-left-radius: 0;
2032 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2033 color: var(--identity-box-chrome-color);
2034 border-inline-end: 1px solid var(--identity-box-chrome-color);
2037 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2038 color: var(--identity-box-verified-color);
2039 border-inline-end: 1px solid var(--identity-box-verified-color);
2042 #identity-icon-labels:-moz-locale-dir(ltr) {
2046 #identity-icon-labels:-moz-locale-dir(rtl) {
2050 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2051 /* border-radius: 0;
2052 padding-inline-start: 2px; */
2053 padding-inline-end: 2px;
2054 margin-inline-end: 1px;
2057 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2058 padding-inline-start: 2px;
2061 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2062 /* Forward button hiding is delayed when hovered, so we should use the same
2063 delay for the identity box. We handle both horizontal paddings (for LTR and
2064 RTL), the latter two delays here are for padding-left and padding-right. */
2065 transition-delay: 0s, 100s, 100s;
2068 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2069 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2070 padding-inline-start: 2.01px;
2073 /* MAIN IDENTITY ICON */
2078 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2081 #identity-box:hover > #identity-icon:not(.no-hover),
2082 #identity-box[open=true] > #identity-icon {
2083 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2086 #identity-box.grantedPermissions > #identity-icon {
2087 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2090 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2091 #identity-box.grantedPermissions[open=true] > #identity-icon {
2092 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2095 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2096 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2099 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2103 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2104 -moz-image-region: inherit;
2105 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2111 /* TRACKING PROTECTION ICON */
2113 #tracking-protection-icon {
2116 margin-inline-start: 2px;
2117 margin-inline-end: 0;
2118 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2122 #tracking-protection-icon[state="loaded-tracking-content"] {
2123 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2126 #tracking-protection-icon[animate] {
2127 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2130 #tracking-protection-icon:not([state]) {
2131 margin-inline-end: -18px;
2132 pointer-events: none;
2134 /* Only animate the shield in, when it disappears hide it immediately. */
2138 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2139 visibility: collapse;
2142 /* CONNECTION ICON */
2147 margin-inline-start: 2px;
2148 visibility: collapse;
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2153 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2154 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2155 visibility: visible;
2158 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2159 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2160 visibility: visible;
2163 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2164 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2165 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2166 visibility: visible;
2169 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2170 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2171 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2172 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2173 visibility: visible;
2176 /* === END identity-block.inc.css === */
2178 #page-proxy-favicon {
2179 -moz-image-region: rect(0, 16px, 16px, 0);
2182 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2183 /* margin-inline-end: 1px;*/
2186 #identity-box:hover > #page-proxy-favicon {
2187 -moz-image-region: rect(0, 32px, 16px, 16px);
2190 #identity-box:hover:active > #page-proxy-favicon,
2191 #identity-box[open=true] > #page-proxy-favicon {
2192 -moz-image-region: rect(0, 48px, 16px, 32px);
2195 #identity-box:hover {
2196 background-color: #FFCF00;
2200 #identity-box:hover:active,
2201 #identity-box[open=true] {
2202 background-color: #FF9F00;
2206 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2207 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2208 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2209 background-color: #9C9CFF;
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2214 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2215 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2216 background-color: #008484;
2222 #treecolAutoCompleteImage {
2227 .autocomplete-richlistbox {
2231 .autocomplete-richlistitem {
2236 border: 1px solid transparent;
2239 .autocomplete-richlistitem[selected=true] {
2240 background-color: hsl(210, 80%, 52%);
2245 /* color: hsl(0, 0%, 0%);*/
2253 background-color: hsl(216, 0%, 88%);
2254 color: hsl(0, 0%, 0%);
2256 border: 1px solid transparent;
2268 /* color: hsl(0, 0%, 50%);*/
2279 .ac-title[selected=true],
2280 .ac-separator[selected],
2281 .ac-url[selected=true],
2282 .ac-action[selected=true] {
2286 .ac-tags-text[selected] > html|span.ac-tag {
2287 background-color: #A09090;
2291 html|span.ac-emphasize-text-title,
2292 html|span.ac-emphasize-text-tag,
2293 html|span.ac-emphasize-text-url {
2297 .ac-type-icon[type=bookmark] {
2298 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2301 .ac-type-icon[type=bookmark][selected][current] {
2302 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2305 .ac-result-type-bookmark,
2306 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2307 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2308 -moz-image-region: rect(0px 16px 16px 0px);
2313 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2314 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2315 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2318 .ac-type-icon[type=keyword],
2319 .ac-site-icon[type=searchengine],
2320 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2321 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2324 .ac-type-icon[type=keyword][selected],
2325 .ac-site-icon[type=searchengine][selected],
2326 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2327 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2330 .ac-result-type-tag,
2331 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2332 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2337 .ac-type-icon[type=switchtab],
2338 .ac-type-icon[type=remotetab] {
2339 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2342 .ac-type-icon[type=switchtab][selected],
2343 .ac-type-icon[type=remotetab][selected] {
2344 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2347 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2348 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2354 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2355 border-top: 1px solid #9C9CFF;
2358 /* combined go/reload/stop button in location bar */
2361 #urlbar-reload-button,
2362 #urlbar-stop-button {
2364 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2365 /* margin: 0 9px; */
2366 margin-inline-start: 0px;
2367 border-inline-start: 1px solid var(--urlbar-separator-color);
2368 border-image: linear-gradient(transparent 15%,
2369 var(--urlbar-separator-color) 15%,
2370 var(--urlbar-separator-color) 85%,
2372 border-image-slice: 1;
2375 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2376 border-top-left-radius: 0px;
2377 border-bottom-left-radius: 0px;
2380 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2381 border-top-right-radius: 0px;
2382 border-bottom-right-radius: 0px;
2385 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2386 #urlbar-reload-button:not(:hover) {
2387 border-inline-start-style: none;
2388 padding-inline-start: 3px;
2391 #urlbar-reload-button {
2392 -moz-image-region: rect(0px, 14px, 14px, 0px);
2395 #urlbar-reload-button[disabled=true] {
2396 -moz-image-region: rect(28px, 14px, 42px, 0px);
2399 #urlbar-reload-button:not([disabled=true]):hover {
2400 -moz-image-region: rect(14px, 14px, 28px, 0px);
2403 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2404 transform: scaleX(-1);
2408 -moz-image-region: rect(0, 42px, 14px, 28px);
2411 #urlbar-go-button:hover {
2412 -moz-image-region: rect(14px, 42px, 28px, 28px);
2415 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2416 transform: scaleX(-1);
2419 #urlbar-stop-button {
2420 -moz-image-region: rect(0px, 28px, 14px, 14px);
2423 #urlbar-stop-button:hover {
2424 -moz-image-region: rect(14px, 28px, 28px, 14px);
2427 @media (min-resolution: 1.1dppx) {
2429 #urlbar-reload-button,
2430 #urlbar-stop-button {
2431 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2434 #urlbar-go-button > .toolbarbutton-icon,
2435 #urlbar-reload-button > .toolbarbutton-icon,
2436 #urlbar-stop-button > .toolbarbutton-icon {
2441 -moz-image-region: rect(0, 84px, 28px, 56px);
2444 #urlbar-go-button:hover {
2445 -moz-image-region: rect(28px, 84px, 56px, 56px);
2448 #urlbar-go-button:hover:active {
2449 -moz-image-region: rect(56px, 84px, 84px, 56px);
2452 #urlbar-reload-button {
2453 -moz-image-region: rect(0, 28px, 28px, 0);
2456 #urlbar-reload-button:not([disabled]):hover {
2457 -moz-image-region: rect(28px, 28px, 56px, 0);
2460 #urlbar-reload-button:not([disabled]):hover:active {
2461 -moz-image-region: rect(56px, 28px, 84px, 0);
2464 #urlbar-stop-button {
2465 -moz-image-region: rect(0, 56px, 28px, 28px);
2468 #urlbar-stop-button:not([disabled]):hover {
2469 -moz-image-region: rect(28px, 56px, 56px, 28px);
2472 #urlbar-stop-button:hover:active {
2473 -moz-image-region: rect(56px, 56px, 84px, 28px);
2477 /* popup blocker button */
2479 #page-report-button {
2480 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2481 -moz-image-region: rect(0, 16px, 16px, 0);
2484 #page-report-button:hover ,
2485 #page-report-button:hover:active,
2486 #page-report-button[open="true"] {
2487 -moz-image-region: rect(0, 32px, 16px, 16px);
2490 /* Reader mode button */
2492 #reader-mode-button {
2493 list-style-image: url("chrome://browser/skin/readerMode.svg");
2494 -moz-image-region: rect(0, 16px, 16px, 0);
2497 #reader-mode-button:hover,
2498 #reader-mode-button[readeractive]:hover {
2499 -moz-image-region: rect(0, 32px, 16px, 16px);
2502 #reader-mode-button:hover:active,
2503 #reader-mode-button[readeractive] {
2504 -moz-image-region: rect(0, 48px, 16px, 32px);
2507 /* social share panel */
2509 .social-share-frame {
2516 background-color: white;
2517 background-repeat: no-repeat;
2518 background-position: center center;
2520 #share-container[loading] {
2521 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2523 #share-container > browser {
2524 transition: opacity 150ms ease-in-out;
2527 #share-container[loading] > browser {
2531 .social-share-toolbar {
2532 border-bottom: 1px solid #9C9CFF;
2536 #social-share-provider-buttons {
2541 .share-provider-button {
2546 .share-provider-button > .toolbarbutton-text {
2549 .share-provider-button > .toolbarbutton-icon {
2555 /* fixup corners for share panel */
2556 .social-panel > .social-panel-frame {
2557 border-radius: inherit;
2560 #social-share-panel {
2566 .social-share-frame {
2567 border-top-left-radius: 0;
2568 border-bottom-left-radius: inherit;
2569 border-top-right-radius: 0;
2570 border-bottom-right-radius: inherit;
2573 #social-share-panel > .social-share-toolbar {
2574 border-top-left-radius: inherit;
2575 border-top-right-radius: inherit;
2578 #social-share-provider-buttons {
2579 border-top-left-radius: inherit;
2580 border-top-right-radius: inherit;
2583 /* social recommending panel */
2585 #social-mark-button {
2586 -moz-image-region: rect(0, 16px, 16px, 0);
2589 /* bookmarks menu-button */
2591 #bookmarks-menu-button.bookmark-item {
2592 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2593 -moz-image-region: rect(0px 16px 16px 0px);
2596 #bookmarks-menu-button.bookmark-item[starred] {
2597 -moz-image-region: rect(0px 32px 16px 16px);
2600 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2602 padding-bottom: 2px;
2605 #BMB_bookmarksPopup[side="top"],
2606 #BMB_bookmarksPopup[side="bottom"] {
2608 margin-right: -20px;
2611 #BMB_bookmarksPopup[side="left"],
2612 #BMB_bookmarksPopup[side="right"] {
2614 margin-bottom: -20px;
2617 /* bookmarking panel */
2619 #editBookmarkPanelStarIcon {
2620 list-style-image: url("chrome://browser/skin/places/starred48.png");
2625 #editBookmarkPanelStarIcon[unstarred] {
2626 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2629 #editBookmarkPanelTitle {
2633 #editBookmarkPanelHeader,
2634 #editBookmarkPanelContent {
2635 margin-bottom: .5em;
2638 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2639 #editBMPanel_folderTree {
2643 /* ::::: content area ::::: */
2646 background-color: #9C9CFF;
2651 background-color: #000000;
2655 margin-inline-start: 0;
2664 padding-inline-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 margin-inline-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 margin-inline-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] {
2770 .tab-sharing-icon-overlay,
2776 .tab-sharing-icon-overlay,
2780 margin-inline-end: 3px;
2784 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2787 .tab-icon-image[sharing]:not([selected]),
2788 .tab-sharing-icon-overlay {
2789 animation: 3s linear pulse infinite;
2793 0%, 16.66%, 83.33%, 100% {
2801 .tab-icon-image[sharing]:not([selected]) {
2802 animation-delay: -1.5s;
2805 .tab-sharing-icon-overlay {
2806 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2807 margin-inline-start: -22px;
2811 .tab-sharing-icon-overlay[sharing="camera"] {
2812 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2815 .tab-sharing-icon-overlay[sharing="microphone"] {
2816 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2819 .tab-sharing-icon-overlay[sharing="screen"] {
2820 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2823 .tab-sharing-icon-overlay[sharing] {
2824 filter: url("chrome://browser/skin/filters.svg#fill");
2832 margin-inline-start: -15px;
2833 margin-inline-end: -1px;
2837 .tab-icon-overlay[crashed] {
2838 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2841 .tab-icon-overlay[soundplaying],
2842 .tab-icon-overlay[muted]:not([crashed]) {
2843 border-radius: 10px;
2846 .tab-icon-overlay[soundplaying]:hover,
2847 .tab-icon-overlay[muted]:hover {
2848 background-color: #FFCF00;
2851 .tab-icon-overlay[soundplaying] {
2853 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2856 .tab-icon-overlay[muted]:not([crashed]) {
2857 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2860 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2861 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2865 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2866 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2869 .tab-throbber[busy] {
2870 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2873 .tab-throbber[progress] {
2874 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2877 @media (min-resolution: 1.1dppx) {
2878 .tab-throbber[busy] {
2879 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2882 .tab-throbber[progress] {
2883 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2887 .tab-throbber[pinned],
2888 .tab-icon-image[pinned] {
2889 margin-inline-start: 2px;
2890 margin-inline-end: 2px;
2894 /* this needs to add up to the 16px of the icon image */
2896 margin-top: 2px !important;
2897 margin-bottom: 2px !important;
2901 margin-inline-start: 4px;
2907 .tab-icon-sound[muted] {
2908 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2911 .tab-icon-sound[muted]:hover {
2912 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2915 .tab-icon-sound[muted]:hover:active {
2916 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2919 .tab-icon-sound[soundplaying] {
2920 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2923 .tab-icon-sound[soundplaying]:hover {
2924 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2927 .tab-icon-sound[soundplaying]:hover:active {
2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2931 .tab-icon-sound[muted] {
2932 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2935 .tab-icon-sound[muted]:hover {
2936 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2939 .tab-icon-sound[muted]:hover:active {
2940 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2943 .tab-icon-sound[visuallyselected=true][soundplaying] {
2944 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2947 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2948 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2952 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2955 .tab-icon-sound[visuallyselected=true][muted] {
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2959 .tab-icon-sound[visuallyselected=true][muted]:hover {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2963 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2967 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2968 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2972 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2976 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2979 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2980 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2984 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2988 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2997 .tabs-newtab-button {
2998 /* overlap the tab curves */
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3006 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3016 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3019 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3027 .tab-background-start[visuallyselected=true]::after,
3028 .tab-background-start[visuallyselected=true]::before,
3029 .tab-background-start,
3030 .tab-background-end,
3031 .tab-background-end[visuallyselected=true]::after,
3032 .tab-background-end[visuallyselected=true]::before {
3035 .tabbrowser-tab:not([visuallyselected=true]),
3036 .tabbrowser-tab:-moz-lwtheme {
3039 /* tabbrowser-tab focus ring */
3040 .tabbrowser-tab:focus {
3041 outline: 1px dotted;
3046 .tabbrowser-tab[visuallyselected="true"] {
3049 /* End selected tab */
3051 /* Tab pointer-events */
3054 pointer-events: none;
3057 .tab-background-middle,
3058 .tabs-newtab-button,
3059 .tab-icon-overlay[soundplaying],
3060 .tab-icon-overlay[muted]:not([crashed]),
3063 pointer-events: auto;
3069 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3070 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3072 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3073 background-color: #E7ADE7;
3076 .tab-label[attention]:not([visuallyselected="true"]) {
3080 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3081 background-color: #3333FF;
3085 /* Tab separators */
3087 .tabbrowser-tab::after,
3088 .tabbrowser-tab::before {
3090 margin-inline-start: -1px;
3091 background-image: linear-gradient(transparent 5px,
3093 currentColor calc(100% - 4px),
3094 transparent calc(100% - 4px));
3098 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3099 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3103 /* Also show separators beside the selected tab when dragging it. */
3105 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3106 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3107 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3112 /* New tab button */
3114 .tabs-newtab-button {
3116 /* width: calc(36px + var(--tab-curve-width)); */
3118 @media (min-resolution: 1.1dppx) {
3119 /* image preloading hack from like lowdpi styles */
3120 #tabbrowser-tabs::before {
3123 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3124 .tabs-newtab-button:hover {
3127 .tab-background-middle[visuallyselected=true] {
3130 .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3131 .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3134 .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135 .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3139 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3143 /* === END tabs.inc.css === */
3145 /* Tab DnD indicator */
3146 .tab-drop-indicator {
3147 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3148 margin-bottom: -11px;
3151 /* Tab close button */
3153 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3156 .tab-close-button:hover,
3157 .tab-close-button:hover[selected="true"] {
3158 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3161 .tab-close-button:hover:active,
3162 .tab-close-button:hover:active[selected="true"] {
3163 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3166 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3168 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3169 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3173 background-origin: border-box;
3176 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3177 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3178 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3179 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3186 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3188 /* transform: scaleX(-1);*/
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3192 transition: 1s background-color ease-out;
3195 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3196 background-color: #008484;
3199 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3200 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3201 /* border-width: 0 2px 0 0;
3202 border-style: solid;
3203 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3206 .tabs-newtab-button > .toolbarbutton-icon {
3208 margin-bottom: -1px;
3211 .tabs-newtab-button,
3212 #TabsToolbar > #new-tab-button,
3213 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3214 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3215 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3216 -moz-image-region: auto;
3219 .tabs-newtab-button,
3220 .tabs-newtab-button:hover,
3221 #TabsToolbar > #new-tab-button,
3222 #TabsToolbar > #new-tab-button:hover {
3225 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3226 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3227 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3228 .tabs-newtab-button:-moz-lwtheme-brighttext,
3229 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3230 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3233 #TabsToolbar > #new-tab-button {
3238 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3241 #alltabs-button:hover,
3242 #alltabs-button:hover:active,
3243 #alltabs-button[open="true"] {
3244 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3247 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248 #alltabs-button:-moz-lwtheme-brighttext {
3251 #alltabs-button > .toolbarbutton-icon {
3255 #alltabs-button > .toolbarbutton-menu-dropmarker {
3259 /* All tabs menupopup */
3260 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3261 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3262 -moz-image-region: auto;
3265 .alltabs-item[selected="true"] {
3269 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3270 list-style-image: url("chrome://global/skin/icons/loading.png");
3273 @media (min-resolution: 1.1dppx) {
3274 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3275 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3279 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3280 background-color: #402800;
3283 .alltabs-endimage[muted] {
3284 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3287 .alltabs-endimage[soundplaying] {
3288 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3291 toolbarbutton.chevron {
3292 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3295 toolbarbutton.chevron:hover {
3296 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3299 toolbar[brighttext] toolbarbutton.chevron {
3300 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3303 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3304 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3305 transform: scaleX(-1);
3308 toolbarbutton.chevron > .toolbarbutton-text,
3309 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3313 toolbarbutton.chevron > .toolbarbutton-icon {
3317 #sidebar-throbber[loading="true"] {
3318 list-style-image: url("chrome://global/skin/icons/loading.png");
3319 margin-inline-end: 4px;
3322 @media (min-resolution: 1.1dppx) {
3323 #sidebar-throbber[loading="true"] {
3324 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3329 /* Bookmarks toolbar */
3330 #PlacesToolbarDropIndicator {
3331 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3334 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3335 background-color: #008484 !important;
3336 color: #FFCF00 !important;
3339 /* rules for menupopup drop indicators */
3340 .menupopup-drop-indicator-bar {
3342 /* these two margins must together compensate the indicator's height */
3344 margin-bottom: -1px;
3347 .menupopup-drop-indicator {
3348 list-style-image: none;
3350 margin-inline-end: -4em;
3351 background-color: #008484;
3354 /* === BEGIN notification-icons.inc.css === */
3356 #notification-popup-box {
3357 border-radius: 3px 0 0 3px;
3360 margin-inline-end: -5px;
3361 padding-inline-end: 5px;
3364 /* This class can be used alone or in combination with the class defining the
3365 type of icon displayed. This rule must be defined before the others in order
3366 for its list-style-image to be overridden. */
3367 .notification-anchor-icon {
3370 margin-inline-start: 2px;
3371 list-style-image: url("chrome://global/skin/icons/information-16.png");
3374 .notification-anchor-icon:-moz-focusring {
3375 outline: 1px dotted #008484;
3378 @media (min-resolution: 1.1dppx) {
3379 .notification-anchor-icon {
3380 list-style-image: url(chrome://global/skin/icons/information-32.png);
3384 .popup-notification-icon {
3387 margin-inline-end: 10px;
3390 #notification-popup-box > .notification-anchor-icon:not(.in-use):hover {
3394 /* INDIVIDUAL NOTIFICATIONS */
3396 /* For the moment we apply the color filter only on the icons listed here.
3397 The first two selectors are used by socialchat.xml (bug 1275558). */
3398 .webRTC-sharingDevices-notification-icon,
3399 .webRTC-sharingMicrophone-notification-icon,
3410 .desktop-notification-icon,
3411 .popup-notification-icon[popupid="geolocation"],
3412 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3413 .popup-notification-icon[popupid="password"],
3414 .popup-notification-icon[popupid="pointerLock"],
3415 .popup-notification-icon[popupid="webRTC-shareDevices"],
3416 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3417 .popup-notification-icon[popupid="webRTC-shareScreen"],
3418 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3419 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3420 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3421 .popup-notification-icon[popupid="web-notifications"] {
3422 filter: url(chrome://browser/skin/filters.svg#fill);
3426 /* The first two selectors are used by socialchat.xml (bug 1275558). The
3427 notifications in the chat window are only shown when they are in use. */
3428 .webRTC-sharingDevices-notification-icon,
3429 .webRTC-sharingMicrophone-notification-icon,
3434 .popup-notification-icon[popupid="web-notifications"],
3435 .desktop-notification-icon {
3436 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3439 .desktop-notification-icon.blocked {
3440 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3444 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3448 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3451 .popup-notification-icon[popupid="geolocation"] {
3452 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3455 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3457 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3460 .indexedDB-icon.blocked {
3461 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3465 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3468 .popup-notification-icon[popupid="password"] {
3469 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3472 #login-fill-notification-icon {
3473 /* Temporary solution until the capture and fill doorhangers are unified. */
3474 transform: scaleX(-1);
3477 /* The first selector is used by socialchat.xml (bug 1275558). */
3478 .webRTC-sharingDevices-notification-icon,
3480 .popup-notification-icon[popupid="webRTC-shareDevices"],
3481 .popup-notification-icon[popupid="webRTC-sharingDevices"] {
3482 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3485 .camera-icon.blocked {
3486 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3489 /* The first selector is used by socialchat.xml (bug 1275558). */
3490 .webRTC-sharingMicrophone-notification-icon,
3492 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3495 .microphone-icon.blocked {
3496 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3499 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3500 .popup-notification-icon[popupid="webRTC-sharingMicrophone"] {
3501 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3504 .popup-notification-icon[popupid="webRTC-shareScreen"],
3505 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3507 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3510 .screen-icon.blocked {
3511 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3514 .popup-notification-icon[popupid="pointerLock"],
3516 list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
3519 .pointerLock-icon.blocked {
3520 list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
3523 /* This icon has a block sign in it, so we don't need a blocked version. */
3525 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3530 .popup-notification-icon[popupid="drmContentPlaying"],
3532 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3535 .drm-icon:hover:active {
3536 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3539 #eme-notification-icon[firstplay=true] {
3540 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3543 @keyframes emeTeachingMoment {
3544 0% {transform: translateX(0); }
3545 25% {transform: translateX(3px) }
3546 75% {transform: translateX(-3px) }
3547 100% { transform: translateX(0); }
3550 /* INSTALL ADDONS */
3553 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3556 .popup-notification-icon[popupid="xpinstall-disabled"],
3557 .popup-notification-icon[popupid="addon-install-blocked"],
3558 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3559 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3562 .popup-notification-icon[popupid="addon-progress"] {
3563 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3566 .popup-notification-icon[popupid="addon-install-failed"] {
3567 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3570 .popup-notification-icon[popupid="addon-install-confirmation"] {
3571 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3574 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3575 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3578 .popup-notification-icon[popupid="addon-install-complete"] {
3579 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3582 .popup-notification-icon[popupid="addon-install-restart"] {
3583 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3586 .popup-notification-icon[popupid="click-to-play-plugins"] {
3587 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3592 .popup-notification-icon[popupid*="offline-app-requested"],
3593 .popup-notification-icon[popupid="offline-app-usage"] {
3594 list-style-image: url(chrome://global/skin/icons/question-64.png);
3600 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3603 .plugin-icon.plugin-blocked {
3604 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3605 fill: #FF0000 !important; /* important! to override the default hover color */
3608 #notification-popup-box[hidden] {
3609 /* Override display:none to make the pluginBlockedNotification animation work
3610 when showing the notification repeatedly. */
3612 visibility: collapse;
3615 #plugins-notification-icon.plugin-blocked[showing] {
3616 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3619 @keyframes pluginBlockedNotification {
3630 .popup-notification-icon[popupid="servicesInstall"] {
3631 list-style-image: url(chrome://browser/skin/social/services-64.png);
3635 list-style-image: url(chrome://browser/skin/social/services-16.png);
3641 list-style-image: url(chrome://browser/skin/translation-16.png);
3642 -moz-image-region: rect(0px, 16px, 16px, 0px);
3645 .translation-icon.in-use {
3646 -moz-image-region: rect(0px, 32px, 16px, 16px);
3649 /* === END notification-icons.inc.css === */
3651 .popup-notification-body[popupid="addon-progress"],
3652 .popup-notification-body[popupid="addon-install-confirmation"] {
3657 /* Translation infobar */
3659 /* === BEGIN infobar.inc.css === */
3661 notification[value="translation"] .messageImage {
3662 list-style-image: url("chrome://browser/skin/translation-16.png");
3663 -moz-image-region: rect(0, 32px, 16px, 16px);
3666 @media (min-resolution: 1.25dppx) {
3667 notification[value="translation"] .messageImage {
3668 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3669 -moz-image-region: rect(0, 64px, 32px, 32px);
3673 notification[value="translation"][state="translating"] .messageImage {
3674 list-style-image: url("chrome://browser/skin/translating-16.png");
3675 -moz-image-region: auto;
3678 @media (min-resolution: 1.25dppx) {
3679 notification[value="translation"][state="translating"] .messageImage {
3680 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3684 notification[value="translation"] hbox[anonid="details"] {
3688 notification[value="translation"] button,
3689 notification[value="translation"] menulist {
3693 notification[value="translation"] menulist > .menulist-dropmarker {
3696 .translation-menupopup arrowscrollbox {
3700 .translation-attribution {
3702 -moz-box-align: end;
3706 .translation-attribution > label {
3710 .translation-attribution > image {
3714 .translation-welcome-panel {
3718 .translation-welcome-logo {
3721 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3722 -moz-image-region: rect(0, 64px, 32px, 32px);
3725 .translation-welcome-content {
3726 margin-inline-start: 16px;
3729 .translation-welcome-headline {
3734 .translation-welcome-body {
3739 /* === END infobar.inc.css === */
3741 notification[value="translation"] {
3745 .translation-menupopup {
3746 -moz-appearance: none;
3749 /* Bookmarks roots menu-items */
3750 #subscribeToPageMenuitem:not([disabled]),
3751 #subscribeToPageMenupopup {
3752 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3755 #bookmarksToolbarFolderMenu,
3756 #BMB_bookmarksToolbar,
3757 #panelMenu_bookmarksToolbar {
3758 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3759 -moz-image-region: auto;
3762 #BMB_unsortedBookmarks,
3763 #panelMenu_unsortedBookmarks {
3764 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3765 -moz-image-region: auto;
3771 -moz-appearance: none;
3772 background: rgba(0%,0%,0%,.7);
3775 padding: 20px 10px 10px;
3779 .ctrlTab-favicon[src] {
3780 background-color: #000000;
3786 .ctrlTab-preview-inner > .tabPreview-canvas {
3787 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3790 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3794 .ctrlTab-preview-inner {
3795 padding-bottom: 10px;
3798 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3800 background-color: #000000;
3801 border-radius: .5em;
3804 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3806 background-color: #000000;
3809 border: 2px solid #9C9CFF;
3810 border-radius: .5em;
3813 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3814 margin: -10px -10px 0;
3823 .statuspanel-label {
3826 background: #404000;
3827 border: 1px none #9C9CFF;
3828 border-top-style: solid;
3833 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3834 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3835 border-right-style: solid;
3836 border-top-right-radius: .3em;
3840 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3841 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3842 border-left-style: solid;
3843 border-top-left-radius: .3em;
3847 /* HACK to abolish devily color on main content */
3850 background-color: transparent !important;
3853 /* === BEGIN fullscreen/warning.inc.css === */
3855 html|*.pointerlockfswarning {
3856 align-items: center;
3857 background: rgba(0, 0, 0, 0.9);
3858 border: 2px solid #A09090;
3859 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3862 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3865 html|*.pointerlockfswarning::before {
3867 width: 24px; height: 24px;
3870 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3871 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3872 content: url("chrome://browser/skin/fullscreen/secure.svg");
3875 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3876 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3879 html|*.pointerlockfswarning-domain-text,
3880 html|*.pointerlockfswarning-generic-text {
3882 font-weight: lighter;
3887 html|*.pointerlockfswarning-domain {
3892 html|*.pointerlockfswarning-exit-button {
3894 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3896 font-weight: lighter;
3898 box-sizing: content-box;
3900 border-radius: 300px;
3902 background-color: #C09070;
3906 /* === END fullscreen/warning.inc.css === */
3908 /* === BEGIN commandline.inc.css === */
3910 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3911 We are copy/pasting variables from light-theme and dark-theme,
3912 since they aren't loaded in this context (within browser.css). */
3913 :root #developer-toolbar {
3914 --gcli-background-color: #000000; /* --theme-toolbar-background */
3915 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3916 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3917 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3918 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3919 --selection-background: #008484; /* --theme-selection-background */
3920 --selection-color: #000000; /* --theme-selection-color */
3923 /* Developer toolbar */
3925 #developer-toolbar {
3926 border-top: 3px solid var(--gcli-background-color);
3927 border-bottom: none;
3930 #developer-toolbar .toolbar-holder {
3931 background-color: #8050B0;
3935 #developer-toolbar .toolbar-holder {
3936 background-color: #8050B0;
3940 #developer-toolbar .toolbar-startcap,
3941 #developer-toolbar .toolbar-endcap{
3942 background-color: #6000CF;
3945 #developer-toolbar {
3947 min-height: 32px; */
3950 #developer-toolbar > toolbarbutton {
3952 background-color: transparent;
3958 .developer-toolbar-button > image {
3959 /* margin: auto 10px; */
3962 #developer-toolbar-toolbox-button > label {
3966 .developer-toolbar-button > .toolbarbutton-icon {
3971 #developer-toolbar-toolbox-button {
3972 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3973 -moz-image-region: rect(0px, 16px, 16px, 0px);
3976 #developer-toolbar-toolbox-button > label {
3980 #developer-toolbar-toolbox-button:hover,
3981 #developer-toolbar-toolbox-button:hover:active,
3982 #developer-toolbar-toolbox-button[checked=true] {
3983 -moz-image-region: rect(0px, 32px, 16px, 16px);
3986 @media (min-resolution: 2dppx) {
3987 #developer-toolbar-toolbox-button {
3988 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3989 -moz-image-region: rect(0px, 32px, 32px, 0px);
3992 #developer-toolbar-toolbox-button:hover,
3993 #developer-toolbar-toolbox-button:hover:active,
3994 #developer-toolbar-toolbox-button[checked=true] {
3995 -moz-image-region: rect(0px, 64px, 32px, 32px);
4001 html|*#gcli-tooltip-frame,
4002 html|*#gcli-output-frame {
4005 background-color: transparent;
4011 background-color: transparent;
4014 .gclitoolbar-input-node,
4015 .gclitoolbar-complete-node {
4017 -moz-box-align: center;
4021 background-color: transparent;
4024 .gclitoolbar-input-node {
4025 /* line-height: 32px;
4026 outline-style: none; */
4027 background-repeat: no-repeat;
4028 background-color: var(--gcli-input-background);
4031 .gclitoolbar-input-node[focused="true"] {
4032 background-color: var(--gcli-input-focused-background);
4035 .gclitoolbar-input-node::before {
4037 display: inline-block;
4038 -moz-box-ordinal-group: 0;
4042 background-image: url("chrome://devtools/skin/images/commandline-icon.png");
4043 background-position: 0 center;
4044 background-size: 32px 16px;
4047 .gclitoolbar-input-node[focused="true"]::before {
4048 background-position: -16px center;
4051 @media (min-resolution: 2dppx) {
4052 .gclitoolbar-input-node::before {
4053 background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
4057 .gclitoolbar-input-node:not([focused="true"]) {
4058 border-color: transparent;
4061 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4062 background-color: var(--selection-background);
4063 color: var(--selection-color);
4066 .gclitoolbar-complete-node {
4068 background-color: transparent;
4071 pointer-events: none;
4074 .gcli-in-incomplete,
4078 .gcli-in-closebrace,
4085 .gcli-in-incomplete {
4086 border-bottom: 2px dotted #8050B0;
4090 border-bottom: 2px dotted #FF0000;
4101 .gcli-in-closebrace {
4105 /* === END commandline.inc.css === */
4107 /* === BEGIN responsivedesign.inc.css === */
4109 /* Responsive Mode */
4111 .browserContainer[responsivemode] {
4112 background-color: #221500;
4113 padding: 0 20px 20px 20px;
4116 .browserStack[responsivemode] {
4117 box-shadow: 0 0 7px #9C9CFF;
4120 .devtools-responsiveui-toolbar {
4121 background: transparent;
4122 /* text color is textColor from dark theme, since no theme is applied to
4123 * the responsive toolbar.
4129 border-bottom-width: 0;
4132 .devtools-responsiveui-textinput {
4133 /* -moz-appearance: none;
4136 border: 1px solid #111;
4143 .devtools-responsiveui-textinput[attention] {
4144 /* border-color: #38ace6;
4145 background: rgba(56,172,230,0.4);*/
4148 .devtools-responsiveui-menulist,
4149 .devtools-responsiveui-toolbarbutton {
4150 -moz-box-align: center;
4152 /* min-height: 22px;*/
4153 /* margin: 0 3px; */
4156 .devtools-responsiveui-menulist .menulist-editable-box {
4157 background-color: transparent;
4160 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4165 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4166 /* background: hsla(212,7%,57%,.35);*/
4169 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4174 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4175 -moz-box-orient: horizontal;
4178 .devtools-responsiveui-menulist:-moz-focusring,
4179 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4180 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4181 outline-offset: -4px;*/
4184 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4188 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4189 /* border-color: hsla(210,8%,5%,.6);
4190 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4191 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); */
4194 .devtools-responsiveui-menulist[open=true],
4195 .devtools-responsiveui-toolbarbutton[open=true],
4196 .devtools-responsiveui-toolbarbutton[checked=true] {
4197 /* border-color: hsla(210,8%,5%,.6) !important;
4198 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4199 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); */
4202 .devtools-responsiveui-toolbarbutton[checked=true] {
4203 /* color: hsl(208,100%,60%); */
4206 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4207 /* background-color: transparent !important;*/
4210 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4211 /* background-color: hsla(210,8%,5%,.2) !important;*/
4214 .devtools-responsiveui-menulist > .menulist-label-box {
4218 .devtools-responsiveui-menulist > .menulist-dropmarker {
4219 /* display: -moz-box;
4220 background-color: transparent;
4221 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4222 -moz-box-align: center;
4227 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4230 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4231 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4234 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4235 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4238 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4239 /* padding: 0 1px;*/
4240 -moz-box-align: stretch;
4243 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4244 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4245 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4246 -moz-box-align: center;
4250 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4251 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4255 .devtools-responsiveui-close {
4256 list-style-image: url("chrome://devtools/skin/close.svg");
4259 .devtools-responsiveui-close:hover {
4260 filter: url(images/filters.svg#checked-icon-state);
4263 .devtools-responsiveui-rotate {
4264 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4265 -moz-image-region: rect(0px,16px,16px,0px);
4268 .devtools-responsiveui-rotate:hover {
4269 -moz-image-region: rect(0px,32px,16px,16px);
4272 @media (min-resolution: 2dppx) {
4273 .devtools-responsiveui-rotate {
4274 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4277 .devtools-responsiveui-rotate:hover {
4278 -moz-image-region: rect(0px,64px,32px,32px);
4282 .devtools-responsiveui-touch {
4283 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4284 -moz-image-region: rect(0px,16px,16px,0px);
4287 .devtools-responsiveui-touch:hover,
4288 .devtools-responsiveui-touch[checked],
4289 .devtools-responsiveui-touch[checked]:hover {
4290 -moz-image-region: rect(0px,32px,16px,16px);
4293 @media (min-resolution: 2dppx) {
4294 .devtools-responsiveui-touch {
4295 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4296 -moz-image-region: rect(0px,32px,32px,0px);
4299 .devtools-responsiveui-touch:hover,
4300 .devtools-responsiveui-touch[checked],
4301 .devtools-responsiveui-touch[checked]:hover {
4302 -moz-image-region: rect(0px,64px,32px,32px);
4306 .devtools-responsiveui-screenshot {
4307 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4308 -moz-image-region: rect(0px,16px,16px,0px);
4311 .devtools-responsiveui-screenshot:hover {
4312 -moz-image-region: rect(0px,32px,16px,16px);
4315 @media (min-resolution: 2dppx) {
4316 .devtools-responsiveui-screenshot {
4317 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4320 .devtools-responsiveui-screenshot:hover {
4321 -moz-image-region: rect(0px,64px,32px,32px);
4325 .devtools-responsiveui-resizebarV {
4329 transform: translate(12px, -12px);
4330 background-size: cover;
4331 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4334 .devtools-responsiveui-resizebarH {
4338 transform: translate(-12px, 12px);
4339 background-size: cover;
4340 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4343 .devtools-responsiveui-resizehandle {
4347 transform: translate(12px, 12px);
4348 background-size: cover;
4349 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4352 /* FxOS custom mode with additional buttons and phone look'n feel */
4354 /* Hide devtools manual resizer */
4355 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4356 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4357 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4361 /* Gives responsive mode a phone look'n feel */
4362 .browserStack[responsivemode].fxos-mode {
4363 padding: 60px 15px 0;
4365 border-radius: 25px / 20px;
4366 border-bottom-left-radius: 0;
4367 border-bottom-right-radius: 0;
4368 border: 1px solid #FFFFFF;
4369 border-bottom-width: 0;
4371 background-color: #353535;
4373 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4375 background-image: linear-gradient(to right, #111 11%, #333 56%);
4379 .devtools-responsiveui-hardware-buttons {
4380 -moz-appearance: none;
4383 border: 1px solid #FFFFFF;
4384 border-bottom-left-radius: 25px;
4385 border-bottom-right-radius: 25px;
4386 border-top-width: 0;
4388 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4390 background-image: linear-gradient(to right, #111 11%, #333 56%);
4393 .devtools-responsiveui-home-button {
4394 -moz-user-focus: ignore;
4397 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4400 .devtools-responsiveui-sleep-button {
4401 -moz-user-focus: ignore;
4402 -moz-appearance: none;
4403 /* compensate browserStack top padding */
4411 border: 1px solid #444;
4412 border-top-right-radius: 12px;
4413 border-top-left-radius: 12px;
4414 border-bottom-color: transparent;
4416 background-image: linear-gradient(to top, #111 11%, #333 56%);
4419 .devtools-responsiveui-sleep-button:hover:active {
4420 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4423 .devtools-responsiveui-volume-buttons {
4427 .devtools-responsiveui-volume-up-button,
4428 .devtools-responsiveui-volume-down-button {
4429 -moz-user-focus: ignore;
4430 -moz-appearance: none;
4431 border: 1px solid red;
4435 border: 1px solid #444;
4436 border-right-color: transparent;
4438 background-image: linear-gradient(to right, #111 11%, #333 56%);
4441 .devtools-responsiveui-volume-up-button:hover:active,
4442 .devtools-responsiveui-volume-down-button:hover:active {
4443 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4446 .devtools-responsiveui-volume-up-button {
4447 border-top-left-radius: 12px;
4450 .devtools-responsiveui-volume-down-button {
4451 border-bottom-left-radius: 12px;
4454 @media (min-resolution: 2dppx) {
4455 .devtools-responsiveui-resizebarV {
4456 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4459 .devtools-responsiveui-resizebarH {
4460 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4463 .devtools-responsiveui-resizehandle {
4464 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4468 /* === END responsivedesign.inc.css === */
4470 /* === including indicator.css is done at the start of the file === */
4474 #developer-toolbar-toolbox-button[error-count]:before {
4478 background-color: #FF0000;
4480 margin-inline-end: 5px;
4483 /* social toolbar provider menu */
4484 .social-statusarea-popup {
4487 margin-right: -12px;
4490 .social-statusarea-user {
4491 border-bottom: 1px solid #9C9CFF;
4492 background-color: #000000;
4498 .social-statusarea-user-portrait {
4505 .social-statusarea-loggedInStatus {
4506 background: transparent;
4511 list-style-image: none;
4514 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4515 text-decoration: underline;
4518 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4522 .social-panel-frame {
4523 border-radius: inherit;
4526 /* === BEGIN chat.inc.css === */
4528 #social-sidebar-header {
4532 #manage-share-providers,
4533 #social-sidebar-button {
4534 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4535 -moz-image-region: rect(0, 468px, 18px, 450px);
4538 #social-sidebar-button {
4539 -moz-appearance: none;
4544 #manage-share-providers > .toolbarbutton-icon,
4545 #social-sidebar-button > .toolbarbutton-icon {
4549 #manage-share-providers:hover,
4550 #manage-share-providers:hover:active,
4551 #social-sidebar-button:hover,
4552 #social-sidebar-button:hover:active {
4553 -moz-image-region: rect(18px, 468px, 36px, 450px);
4555 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4559 #social-sidebar-button[loading="true"] {
4560 list-style-image: url("chrome://global/skin/icons/loading.png");
4563 #social-sidebar-favico {
4576 .chat-toolbarbutton {
4577 -moz-appearance: none;
4584 .chat-toolbarbutton > .toolbarbutton-text {
4588 .chat-toolbarbutton > .toolbarbutton-icon {
4593 .chat-close-button {
4594 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4597 .chat-close-button:hover {
4598 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4601 .chat-close-button:hover:active {
4602 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4605 .chat-minimize-button {
4606 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4609 .chat-minimize-button:hover {
4610 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4613 .chat-minimize-button:hover:active {
4614 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4618 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4619 transform: rotate(180deg);
4622 .chat-swap-button:hover {
4623 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4626 .chat-swap-button:hover:active {
4627 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4630 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4641 background-color: #9C9CFF;
4648 border: 1px solid #008484;
4650 border-top-left-radius: 4px;
4651 border-top-right-radius: 4px;
4653 background-color: #A09090;
4656 .chat-titlebar[selected] {
4657 background-color: #008484;
4660 .chat-titlebar > .notification-anchor-icon {
4665 .chat-titlebar[minimized="true"] {
4666 border-bottom: none;
4669 .chat-titlebar[selected] {
4670 background-color: #008484;
4673 .chat-titlebar[activity] {
4674 background-color: #E7ADE7;
4684 list-style-image: url("chrome://browser/skin/social/services-16.png");
4685 background-color: #000000;
4691 border-top: 1px solid #008484;
4692 border-inline-end: 1px solid #008484;
4695 @media (min-resolution: 2dppx) {
4697 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4701 .chatbar-button:hover {
4702 background-color: #FFCF00;
4704 .chatbar-button[open="true"] {
4705 background-color: #FF9F00;
4708 .chatbar-button[activity]:not([open]) {
4709 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%);
4712 .chatbar-button > .toolbarbutton-icon {
4716 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4723 .chatbar-button > .toolbarbutton-icon {
4725 margin-inline-end: 0;
4727 .chatbar-button:hover > .toolbarbutton-icon,
4728 .chatbar-button[open="true"] > .toolbarbutton-icon {
4732 .chatbar-button:hover,
4733 .chatbar-button[open="true"] {
4736 .chatbar-button > .toolbarbutton-text,
4737 .chatbar-button > .toolbarbutton-menu-dropmarker {
4741 .chatbar-button[activity]:not([open="true"]) {
4742 background-color: #E7ADE7;
4745 .chatbar-button > menupopup > menuitem[activity] {
4750 background: transparent;
4755 margin-inline-end: 20px;
4759 margin-inline-start: 4px;
4760 background-color: transparent;
4764 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4766 /* border-top-left-radius: 4px;
4767 border-top-right-radius: 4px;*/
4768 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4770 /* margin-inline-end: 5px;*/
4773 chatbox[minimized="true"] {
4779 margin-inline-start: 0px;
4785 /* === END chat.inc.css === */
4787 /* === BEGIN plugin-doorhanger.inc.css === */
4790 * Plugin Doorhanger Styles
4793 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4794 padding: 6px 1px 2px;
4797 .click-to-play-plugins-notification-center-box {
4800 .plugin-popupnotification-centeritem:nth-child(odd) {
4801 /* background-color: rgba(0,0,0,0.1);*/
4804 .center-item-label {
4806 text-overflow: ellipsis;
4809 .center-item-warning-icon {
4810 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4811 background-repeat: no-repeat;
4814 margin-inline-start: 6px;
4817 .click-to-play-plugins-notification-button-container {
4820 .click-to-play-popup-button {
4824 .click-to-play-plugins-notification-description-box {
4828 padding-bottom: 3px;
4831 .click-to-play-plugins-outer-description {
4835 .click-to-play-plugins-notification-link,
4840 .messageImage[value="plugin-hidden"] {
4841 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4842 filter: url(chrome://browser/skin/filters.svg#fill);
4846 /* Keep any changes to this style in sync with pluginProblem.css */
4847 notification.pluginVulnerable {
4850 notification.pluginVulnerable .messageImage {
4851 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4852 filter: url(chrome://browser/skin/filters.svg#fill);
4856 /* === END plugin-doorhanger.inc.css === */
4858 /* === BEGIN login-doorhanger.inc.css === */
4860 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4861 /* Since we display a sliding subview that extends to the border, we cannot
4862 * keep the default padding of arrow panels. We use the same padding in the
4863 * individual content views instead. Since we removed the padding, we also
4864 * have to ensure the contents are clipped to the border box. */
4869 #login-fill-mainview,
4870 #login-fill-details {
4871 padding: var(--panel-arrowcontent-padding);
4874 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4875 transform: translateX(-14px);
4878 #login-fill-mainview,
4879 #login-fill-details {
4880 transition: transform 150ms;
4883 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4884 transform: translateX(105%);
4887 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4888 transform: translateX(-105%);
4891 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4892 background-color: hsla(240,39%,100%,.1);
4895 #login-fill-testing {
4901 border: 1px solid #9C9CFF;
4905 .login-fill-item[disabled] {
4907 background-color: #000000;
4910 .login-fill-item[disabled][selected] {
4911 background-color: #008484;
4919 .login-fill-item.different-hostname > .login-hostname {
4929 #login-fill-details {
4931 background: var(--panel-arrowcontent-background);
4932 color: var(--panel-arrowcontent-color);
4933 background-clip: padding-box;
4934 border-left: 1px solid #9C9CFF;
4935 margin-inline-start: 38px;
4938 /* === END login-doorhanger.inc.css === */
4940 /* === BEGIN customizeMode.inc.css === */
4942 /* Customization mode */
4945 --drag-drop-transition-duration: .3s;
4948 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4952 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4953 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4954 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4959 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4960 pointer-events: none;
4963 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4964 #PanelUI-contents > .panel-customization-placeholder {
4965 -moz-outline-radius: 2.5px;
4966 outline: 1px dashed transparent;
4969 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4970 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4971 -moz-box-ordinal-group: 0;
4976 outline-offset: -2px;
4977 pointer-events: none;
4983 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4984 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4985 offset from the bottom effectively the same as other targets (-2px). */
4986 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4990 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4991 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4992 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4993 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4997 /* Most target outlines are shown on hover and drag over but the panel menu uses
4998 placeholders instead. */
4999 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5000 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5001 /* nav-bar and panel outlines are always shown */
5002 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5003 outline-color: #A09090;
5006 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5007 transition: outline-color 250ms linear;
5010 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5011 transition: outline-color 250ms linear;
5012 outline-color: #9C9CFF;
5015 #PanelUI-contents > .panel-customization-placeholder {
5017 outline-offset: -5px;
5020 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5022 /* padding-left: 10px;
5023 padding-right: 10px;*/
5026 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5030 #customization-container {
5031 background-color: #000000;
5035 #customization-palette,
5036 #customization-empty {
5037 padding: 0 15px 15px;
5040 #customization-header {
5042 line-height: 1.75em;
5045 margin: 25px 25px 12px;
5046 padding-bottom: 12px;
5047 border-bottom: 1px solid #A09090;
5050 #customization-panel-container {
5051 padding: 10px 10px 0px;
5054 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5055 #customization-footer {
5056 /*background-color: rgb(236,236,236);*/
5059 #customization-footer {
5060 border-top: 1px solid #9C9CFF;
5064 .customizationmode-button {
5068 .customizationmode-button:hover {
5071 #customization-titlebar-visibility-button[checked],
5072 #customization-devedition-theme-button[checked] {
5073 background-color: #008484;
5076 #customization-titlebar-visibility-button[checked]:hover,
5077 #customization-devedition-theme-button[checked]:hover {
5078 background-color: #FFCF00;
5081 #customization-titlebar-visibility-button[checked]:hover:active,
5082 #customization-devedition-theme-button[checked]:hover:active {
5083 background-color: #FF9F00;
5086 .customizationmode-button[disabled="true"] {
5089 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5090 .customizationmode-button > .button-box > .button-icon {
5094 #customization-titlebar-visibility-button {
5095 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5096 -moz-image-region: rect(0, 16px, 16px, 0);
5099 #customization-titlebar-visibility-button:hover {
5100 -moz-image-region: rect(16px, 16px, 32px, 0);
5103 #customization-lwtheme-button,
5104 #customization-titlebar-visibility-button {
5108 #customization-titlebar-visibility-button > .button-box {
5110 padding-bottom: 1px;
5113 #customization-titlebar-visibility-button:hover:active > .button-box {
5118 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5119 #customization-titlebar-visibility-button > .button-box > .button-text {
5120 /* Sadly, button.css thinks its margins are perfect for everyone. */
5121 margin-inline-start: 5px !important;
5124 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5128 background-size: contain;
5131 #customization-titlebar-visibility-button > .button-box > .button-icon {
5132 vertical-align: middle;
5135 #customization-titlebar-visibility-button[checked] {
5136 -moz-image-region: rect(0, 32px, 16px, 16px);
5137 background-color: #008484;
5140 #customization-titlebar-visibility-button[checked]:hover {
5141 -moz-image-region: rect(16px, 32px, 32px, 16px);
5142 background-color: #FFCF00;
5145 #customization-titlebar-visibility-button[checked]:hover:active {
5146 background-color: #FF9F00;
5149 @media (min-resolution: 1.1dppx) {
5150 #customization-titlebar-visibility-button {
5151 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5152 -moz-image-region: rect(0, 48px, 48px, 0);
5155 #customization-titlebar-visibility-button:hover {
5156 -moz-image-region: rect(48px, 48px, 96px, 0);
5159 #customization-titlebar-visibility-button[checked] {
5160 -moz-image-region: rect(0, 96px, 48px, 48px);
5163 #customization-titlebar-visibility-button[checked]:hover {
5164 -moz-image-region: rect(48px, 96px, 96px, 48px);
5168 #main-window[customize-entered] #customization-panel-container {
5169 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5170 background-position: left top;
5171 background-repeat: repeat;
5172 background-size: auto;
5173 background-attachment: fixed;
5176 toolbarpaletteitem[place="toolbar"] {
5177 transition: border-width 250ms ease-in-out;
5180 toolbarpaletteitem[mousedown] {
5181 outline: 1px solid #008484;
5182 cursor: -moz-grabbing;
5186 .panel-customization-placeholder,
5187 toolbarpaletteitem[place="palette"],
5188 toolbarpaletteitem[place="panel"] {
5189 transition: transform var(--drag-drop-transition-duration) ease-in-out;
5192 #customization-palette {
5193 transition: opacity .3s ease-in-out;
5197 #customization-palette[showing="true"] {
5201 toolbarpaletteitem toolbarbutton[disabled] {
5202 /* color: inherit !important;*/
5205 toolbarpaletteitem[notransition].panel-customization-placeholder,
5206 toolbarpaletteitem[notransition][place="toolbar"],
5207 toolbarpaletteitem[notransition][place="palette"],
5208 toolbarpaletteitem[notransition][place="panel"] {
5212 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5213 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5214 toolbarpaletteitem > toolbaritem.panel-wide-item,
5215 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5216 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5219 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5220 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5221 transform: scale(1.3);
5224 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5225 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5226 transform: scale(1.1);
5229 /* Override the toolkit styling for items being dragged over. */
5230 toolbarpaletteitem[place="toolbar"] {
5231 border-left-width: 0;
5232 border-right-width: 0;
5237 #customization-palette:not([hidden]) {
5238 margin-bottom: 25px;
5241 toolbarpaletteitem[place="palette"]:-moz-focusring,
5242 toolbarpaletteitem[place="panel"]:-moz-focusring,
5243 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5247 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5248 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5249 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5250 /* Delay adding the focusring back until after the transform transition completes. */
5251 transition: outline-width .01s linear var(--drag-drop-transition-duration);
5252 outline: 1px dotted #A09090;
5253 -moz-outline-radius: 2.5px;
5256 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5257 outline-offset: -5px;
5260 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5261 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5262 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5263 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5267 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5268 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5278 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5279 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5283 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5284 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5287 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5288 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5292 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5293 -moz-box-pack: center;
5297 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5298 margin-inline-end: 5px;
5301 #customization-palette > toolbarpaletteitem > label {
5307 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5308 -moz-box-orient: vertical;
5309 /* Make the panel padding uniform across all platforms due to the
5310 styling of the section headers and footer. */
5314 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5319 .customization-lwtheme-menu-theme {
5320 -moz-appearance: none;
5323 padding-inline-end: 5px;
5325 padding-inline-start: 0;
5328 .customization-lwtheme-menu-theme[defaulttheme] {
5329 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5332 .customization-lwtheme-menu-theme[active="true"] {
5333 background-color: #008484;
5336 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5340 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5344 #customization-lwtheme-menu-header,
5345 #customization-lwtheme-menu-recommended {
5350 #customization-lwtheme-menu-header,
5351 #customization-lwtheme-menu-recommended,
5352 #customization-lwtheme-menu-footer {
5353 background-color: #A09090;
5355 margin-right: -10px;
5359 #customization-lwtheme-menu-header {
5361 border-top-right-radius: 3px;
5362 border-top-left-radius: 3px;
5365 #customization-lwtheme-menu-recommended {
5368 #customization-lwtheme-menu-footer {
5369 margin-bottom: -10px;
5370 border-bottom-right-radius: 3px;
5371 border-bottom-left-radius: 3px;
5374 .customization-lwtheme-menu-footeritem {
5375 -moz-appearance: none;
5377 background-color: #C09070;
5379 border: 1px solid transparent;
5385 .customization-lwtheme-menu-footeritem:hover {
5386 background-color: #FFCF00;
5389 .customization-lwtheme-menu-footeritem:first-child {
5392 /* === END customizeMode.inc.css === */
5394 /* === BEGIN customizeTip.inc.css === */
5396 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5403 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5404 border: 1px solid #9C9CFF;
5408 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5409 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5412 .customization-tipPanel-infoBox {
5413 margin: 20px 25px 25px;
5415 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5416 background-repeat: no-repeat;
5419 .customization-tipPanel-content {
5425 .customization-tipPanel-em {
5430 .customization-tipPanel-contentImage {
5432 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5440 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5441 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5444 .customization-tipPanel-link {
5445 -moz-appearance: none;
5446 background: transparent;
5454 .customization-tipPanel-link > .button-box > .button-text {
5455 margin: 0 !important;
5458 .customization-tipPanel-closeBox > .close-icon {
5459 -moz-appearance: none;
5461 margin-inline-end: -25px;
5464 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5465 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5466 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5469 /* === END customizeTip.inc.css === */
5472 * This next rule is a hack to disable subpixel anti-aliasing on all
5473 * labels during the customize mode transition. Subpixel anti-aliasing
5474 * on Windows with Direct2D layers acceleration is particularly slow to
5475 * paint, so this hack is how we sidestep that performance bottleneck.
5477 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5478 transform: perspective(0.01px);
5481 #main-window[customize-entered] > #tab-view-deck {
5482 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5483 background-attachment: fixed;
5486 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5487 background-repeat: no-repeat;
5488 background-position: right top;
5489 background-attachment: fixed;
5490 /* The image will get set from CustomizeMode.jsm */
5491 background-image: none;
5492 background-color: transparent;
5495 #main-window[customization-lwtheme]:-moz-lwtheme {
5496 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5497 background-repeat: repeat;
5498 background-attachment: fixed;
5499 background-position: left top;
5502 #main-window[customize-entered] #browser-bottombox,
5503 #main-window[customize-entered] #customization-container {
5504 border-left: 1px solid #9C9CFF;
5505 border-right: 1px solid #9C9CFF;
5506 background-clip: padding-box;
5509 #main-window[customize-entered] #browser-bottombox {
5510 border-bottom: 1px solid #9C9CFF;
5513 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5517 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5521 /* End customization mode */
5523 /* Private browsing indicators */
5526 * Currently, we have two places where we put private browsing indicators on
5527 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5528 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5529 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5530 * want the bottom border of the image to line up with the bottom of the window
5531 * caption buttons. That's why there's so much special-casing going on in here.
5533 .private-browsing-indicator {
5535 pointer-events: none;
5538 #private-browsing-indicator-titlebar {
5543 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5547 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5551 #TabsToolbar > .private-browsing-indicator {
5552 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5553 margin-inline-start: 4px;
5557 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5558 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5559 * min/max/close window buttons.
5561 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5562 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5563 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5564 margin-inline-end: 4px;
5570 /* This one is for Linux */
5571 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5572 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5576 /* End private browsing indicators */
5578 /* === BEGIN UITour.inc.css === */
5582 #UITourHighlightContainer {
5583 -moz-appearance: none;
5585 background-color: transparent;
5586 /* This is a buffer to compensate for the movement in the "wobble" effect */
5591 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5592 border-radius: 40px;
5593 border: 1px solid #9C9CFF;
5594 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5595 on Linux without an X compositor where opacity is either 0 or 1. */
5596 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5601 #UITourTooltipBody {
5602 -moz-box-align: start;
5605 #UITourTooltipTitleContainer {
5606 -moz-box-align: start;
5607 margin-bottom: 10px;
5610 #UITourTooltipIcon {
5613 margin-inline-end: 10px;
5616 #UITourTooltipTitle,
5617 #UITourTooltipDescription {
5621 #UITourTooltipTitle {
5627 #UITourTooltipDescription {
5628 margin-inline-start: 0;
5629 margin-inline-end: 0;
5631 line-height: 1.8rem;
5632 margin-bottom: 0; /* Override global.css */
5635 #UITourTooltipClose {
5637 -moz-appearance: none;
5639 background-color: transparent;
5641 margin-inline-start: 4px;
5645 #UITourTooltipClose > .toolbarbutton-text {
5649 #UITourTooltipButtons {
5651 background-color: rgba(0,0,0,.2);
5652 border-top: 1px solid rgba(0,0,0,.4);
5653 margin: 10px -16px -16px;
5657 #UITourTooltipButtons > label,
5658 #UITourTooltipButtons > button {
5662 #UITourTooltipButtons > label:first-child,
5663 #UITourTooltipButtons > button:first-child {
5664 margin-inline-start: 0;
5667 #UITourTooltipButtons > label:last-child,
5668 #UITourTooltipButtons > button:last-child {
5669 margin-inline-end: 0;
5672 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5675 margin-inline-end: 5px;
5678 #UITourTooltipButtons > label,
5679 #UITourTooltipButtons > button .button-text {
5683 #UITourTooltipButtons > button:not(.button-link) {
5684 -moz-appearance: none;
5685 background-color: #C09070;
5686 border-radius: 3000px;
5690 transition-property: background-color, color;
5691 transition-duration: 150ms;
5694 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5695 background-color: #FFCF00;
5699 #UITourTooltipButtons > label,
5700 #UITourTooltipButtons > button.button-link {
5701 -moz-appearance: none;
5702 background: transparent;
5705 color: rgba(0,0,0,0.35);
5707 padding-right: 10px;
5710 #UITourTooltipButtons > button.button-link:hover {
5714 /* The primary button gets the same color as the customize button. */
5715 #UITourTooltipButtons > button.button-primary {
5716 background-color: #A06060; /* LCARS default button background color */
5719 padding-right: 30px;
5722 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5723 background-color: #FFCF00;
5727 /* Notification overrides for Heartbeat UI */
5729 notification.heartbeat {
5730 background-color: #A09090;
5734 @keyframes pulse-onshow {
5737 transform: scale(1.0);
5741 transform: scale(1.1);
5744 transform: scale(1.0);
5747 transform: scale(1.1);
5750 transform: scale(1.0);
5754 @keyframes pulse-twice {
5756 transform: scale(1.1);
5759 transform: scale(0.8);
5762 transform: scale(1);
5766 .messageText.heartbeat {
5768 /* text-shadow: none; */
5769 margin-inline-start: 0px;
5772 .messageImage.heartbeat {
5775 margin-inline-start: 8px;
5776 margin-inline-end: 8px;
5779 .messageImage.heartbeat.pulse-onshow {
5780 animation-name: pulse-onshow;
5781 animation-duration: 1.5s;
5782 animation-iteration-count: 1;
5783 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5786 .messageImage.heartbeat.pulse-twice {
5787 animation-name: pulse-twice;
5788 animation-duration: 1s;
5789 animation-iteration-count: 2;
5790 animation-timing-function: linear;
5793 /* Learn More link styles */
5794 .heartbeat > .text-link {
5796 margin-inline-start: 0px;
5799 .heartbeat > .text-link:hover {
5801 text-decoration: none;
5804 .heartbeat > .text-link:hover:active {
5808 /* Heartbeat UI Rating Star Classes */
5809 .heartbeat > #star-rating-container {
5811 /* margin-bottom: 4px;*/
5814 .heartbeat > #star-rating-container > #star5 {
5815 -moz-box-ordinal-group: 5;
5818 .heartbeat > #star-rating-container > #star4 {
5819 -moz-box-ordinal-group: 4;
5822 .heartbeat > #star-rating-container > #star3 {
5823 -moz-box-ordinal-group: 3;
5826 .heartbeat > #star-rating-container > #star2 {
5827 -moz-box-ordinal-group: 2;
5830 .heartbeat > #star-rating-container > .star-x {
5831 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5833 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5834 margin-inline-end: 4px !important;
5839 .heartbeat > #star-rating-container > .star-x:hover,
5840 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5841 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5844 /* === END UITour.inc.css === */
5846 #UITourTooltipButtons {
5848 * Override the --panel-arrowcontent-padding so the background extends
5849 * to the sides and bottom of the panel.
5852 margin-right: -10px;
5853 margin-bottom: -10px;
5856 /* === BEGIN contextmenu.inc.css === */
5858 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5861 #context-navigation > .menuitem-iconic {
5863 -moz-box-pack: center;
5864 -moz-box-align: center;
5867 #context-navigation > .menuitem-iconic[disabled="true"] {
5868 background-color: transparent;
5871 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5872 -moz-appearance: none;
5875 #context-back > .menu-iconic-left {
5876 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5877 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5878 -moz-image-region: rect(0, 54px, 18px, 36px);
5881 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5882 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5883 -moz-image-region: rect(18px, 54px, 36px, 36px);
5886 #context-back[disabled="true"] > .menu-iconic-left {
5887 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5888 -moz-image-region: rect(36px, 54px, 54px, 36px);
5891 #context-forward > .menu-iconic-left {
5892 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5893 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5894 -moz-image-region: rect(0, 72px, 18px, 54px);
5897 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5898 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5899 -moz-image-region: rect(18px, 72px, 36px, 54px);
5902 #context-forward[disabled="true"] > .menu-iconic-left {
5903 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5904 -moz-image-region: rect(36px, 72px, 54px, 54px);
5907 #context-reload > .menu-iconic-left {
5908 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5909 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5910 -moz-image-region: rect(0, 14px, 14px, 0);
5913 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5914 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5915 -moz-image-region: rect(14px, 14px, 28px, 0);
5918 #context-reload[disabled="true"] > .menu-iconic-left {
5919 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5920 -moz-image-region: rect(28px, 14px, 42px, 0);
5923 #context-stop > .menu-iconic-left {
5924 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5925 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5926 -moz-image-region: rect(0, 28px, 14px, 14px);
5929 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5930 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5931 -moz-image-region: rect(14px, 28px, 28px, 14px);
5934 #context-stop[disabled="true"] > .menu-iconic-left {
5935 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5936 -moz-image-region: rect(28px, 28px, 42px, 14px);
5939 #context-bookmarkpage > .menu-iconic-left {
5940 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5941 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5942 -moz-image-region: rect(0, 144px, 18px, 126px);
5945 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5946 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5947 -moz-image-region: rect(18px, 144px, 36px, 126px);
5950 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5951 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5952 -moz-image-region: rect(36px, 144px, 54px, 126px);
5955 #context-bookmarkpage[starred=true] {
5956 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5957 -moz-image-region: rect(0px, 162px, 18px, 144px);
5960 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5961 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5962 -moz-image-region: rect(18px, 162px, 36px, 144px);
5965 #context-bookmarkpage[starred=true][disabled=true] {
5966 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5967 -moz-image-region: rect(36px, 162px, 54px, 144px);
5970 #context-back:-moz-locale-dir(rtl),
5971 #context-forward:-moz-locale-dir(rtl),
5972 #context-reload:-moz-locale-dir(rtl) {
5973 transform: scaleX(-1);
5976 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5977 width: 18px; /*16px;*/
5978 height: 18px; /*16px;*/
5982 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5983 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5989 #context-media-eme-learnmore {
5990 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5993 #context-media-eme-learnmore {
5994 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5997 /* === END contextmenu.inc.css === */
5999 #context-navigation {
6002 #context-sep-navigation {
6003 /* margin-top: -4px; */
6006 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {