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 */
3921 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3922 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3925 /* Developer toolbar */
3927 #developer-toolbar {
3928 border-top: 3px solid var(--gcli-background-color);
3929 border-bottom: none;
3932 #developer-toolbar .toolbar-holder {
3933 background-color: #8050B0;
3937 #developer-toolbar .toolbar-holder {
3938 background-color: #8050B0;
3942 #developer-toolbar .toolbar-startcap,
3943 #developer-toolbar .toolbar-endcap{
3944 background-color: #6000CF;
3947 #developer-toolbar {
3949 min-height: 32px; */
3952 #developer-toolbar > toolbarbutton {
3954 background-color: transparent;
3960 .developer-toolbar-button > image {
3961 /* margin: auto 10px; */
3964 #developer-toolbar-toolbox-button > label {
3968 .developer-toolbar-button > .toolbarbutton-icon {
3973 #developer-toolbar-toolbox-button {
3974 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3975 -moz-image-region: rect(0px, 16px, 16px, 0px);
3978 #developer-toolbar-toolbox-button > label {
3982 #developer-toolbar-toolbox-button:hover,
3983 #developer-toolbar-toolbox-button:hover:active,
3984 #developer-toolbar-toolbox-button[checked=true] {
3985 -moz-image-region: rect(0px, 32px, 16px, 16px);
3988 @media (min-resolution: 2dppx) {
3989 #developer-toolbar-toolbox-button {
3990 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3991 -moz-image-region: rect(0px, 32px, 32px, 0px);
3994 #developer-toolbar-toolbox-button:hover,
3995 #developer-toolbar-toolbox-button:hover:active,
3996 #developer-toolbar-toolbox-button[checked=true] {
3997 -moz-image-region: rect(0px, 64px, 32px, 32px);
4003 html|*#gcli-tooltip-frame,
4004 html|*#gcli-output-frame {
4007 background-color: transparent;
4013 background-color: transparent;
4016 .gclitoolbar-input-node,
4017 .gclitoolbar-complete-node {
4019 -moz-box-align: center;
4023 background-color: transparent;
4026 .gclitoolbar-input-node {
4027 /* line-height: 32px;
4028 outline-style: none; */
4029 background-repeat: no-repeat;
4030 background-color: var(--gcli-input-background);
4033 .gclitoolbar-input-node[focused="true"] {
4034 background-color: var(--gcli-input-focused-background);
4037 .gclitoolbar-input-node::before {
4039 display: inline-block;
4040 -moz-box-ordinal-group: 0;
4044 background-image: var(--command-line-image);
4047 .gclitoolbar-input-node[focused="true"]::before {
4048 background-image: var(--command-line-image-focus);
4051 .gclitoolbar-input-node:not([focused="true"]) {
4052 border-color: transparent;
4055 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4056 background-color: var(--selection-background);
4057 color: var(--selection-color);
4060 .gclitoolbar-complete-node {
4062 background-color: transparent;
4065 pointer-events: none;
4068 .gcli-in-incomplete,
4072 .gcli-in-closebrace,
4079 .gcli-in-incomplete {
4080 border-bottom: 2px dotted #8050B0;
4084 border-bottom: 2px dotted #FF0000;
4095 .gcli-in-closebrace {
4099 /* === END commandline.inc.css === */
4101 /* === BEGIN responsivedesign.inc.css === */
4103 /* Responsive Mode */
4105 .browserContainer[responsivemode] {
4106 background-color: #221500;
4107 padding: 0 20px 20px 20px;
4110 .browserStack[responsivemode] {
4111 box-shadow: 0 0 7px #9C9CFF;
4114 .devtools-responsiveui-toolbar {
4115 background: transparent;
4116 /* text color is textColor from dark theme, since no theme is applied to
4117 * the responsive toolbar.
4123 border-bottom-width: 0;
4126 .devtools-responsiveui-textinput {
4127 /* -moz-appearance: none;
4130 border: 1px solid #111;
4137 .devtools-responsiveui-textinput[attention] {
4138 /* border-color: #38ace6;
4139 background: rgba(56,172,230,0.4);*/
4142 .devtools-responsiveui-menulist,
4143 .devtools-responsiveui-toolbarbutton {
4144 -moz-box-align: center;
4146 /* min-height: 22px;*/
4147 /* margin: 0 3px; */
4150 .devtools-responsiveui-menulist .menulist-editable-box {
4151 background-color: transparent;
4154 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4159 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4160 /* background: hsla(212,7%,57%,.35);*/
4163 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4168 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4169 -moz-box-orient: horizontal;
4172 .devtools-responsiveui-menulist:-moz-focusring,
4173 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4174 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4175 outline-offset: -4px;*/
4178 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4182 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4183 /* border-color: hsla(210,8%,5%,.6);
4184 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4185 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); */
4188 .devtools-responsiveui-menulist[open=true],
4189 .devtools-responsiveui-toolbarbutton[open=true],
4190 .devtools-responsiveui-toolbarbutton[checked=true] {
4191 /* border-color: hsla(210,8%,5%,.6) !important;
4192 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4193 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); */
4196 .devtools-responsiveui-toolbarbutton[checked=true] {
4197 /* color: hsl(208,100%,60%); */
4200 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4201 /* background-color: transparent !important;*/
4204 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4205 /* background-color: hsla(210,8%,5%,.2) !important;*/
4208 .devtools-responsiveui-menulist > .menulist-label-box {
4212 .devtools-responsiveui-menulist > .menulist-dropmarker {
4213 /* display: -moz-box;
4214 background-color: transparent;
4215 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4216 -moz-box-align: center;
4221 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4224 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4225 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4228 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4229 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4232 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4233 /* padding: 0 1px;*/
4234 -moz-box-align: stretch;
4237 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4238 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4239 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4240 -moz-box-align: center;
4244 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4245 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4249 .devtools-responsiveui-close {
4250 list-style-image: url("chrome://devtools/skin/close.svg");
4253 .devtools-responsiveui-close:hover {
4254 filter: url(images/filters.svg#checked-icon-state);
4257 .devtools-responsiveui-rotate {
4258 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4259 -moz-image-region: rect(0px,16px,16px,0px);
4262 .devtools-responsiveui-rotate:hover {
4263 -moz-image-region: rect(0px,32px,16px,16px);
4266 @media (min-resolution: 2dppx) {
4267 .devtools-responsiveui-rotate {
4268 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4271 .devtools-responsiveui-rotate:hover {
4272 -moz-image-region: rect(0px,64px,32px,32px);
4276 .devtools-responsiveui-touch {
4277 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4278 -moz-image-region: rect(0px,16px,16px,0px);
4281 .devtools-responsiveui-touch:hover,
4282 .devtools-responsiveui-touch[checked],
4283 .devtools-responsiveui-touch[checked]:hover {
4284 -moz-image-region: rect(0px,32px,16px,16px);
4287 @media (min-resolution: 2dppx) {
4288 .devtools-responsiveui-touch {
4289 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4290 -moz-image-region: rect(0px,32px,32px,0px);
4293 .devtools-responsiveui-touch:hover,
4294 .devtools-responsiveui-touch[checked],
4295 .devtools-responsiveui-touch[checked]:hover {
4296 -moz-image-region: rect(0px,64px,32px,32px);
4300 .devtools-responsiveui-screenshot {
4301 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4302 -moz-image-region: rect(0px,16px,16px,0px);
4305 .devtools-responsiveui-screenshot:hover {
4306 -moz-image-region: rect(0px,32px,16px,16px);
4309 @media (min-resolution: 2dppx) {
4310 .devtools-responsiveui-screenshot {
4311 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4314 .devtools-responsiveui-screenshot:hover {
4315 -moz-image-region: rect(0px,64px,32px,32px);
4319 .devtools-responsiveui-resizebarV {
4323 transform: translate(12px, -12px);
4324 background-size: cover;
4325 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4328 .devtools-responsiveui-resizebarH {
4332 transform: translate(-12px, 12px);
4333 background-size: cover;
4334 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4337 .devtools-responsiveui-resizehandle {
4341 transform: translate(12px, 12px);
4342 background-size: cover;
4343 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4346 /* FxOS custom mode with additional buttons and phone look'n feel */
4348 /* Hide devtools manual resizer */
4349 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4350 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4351 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4355 /* Gives responsive mode a phone look'n feel */
4356 .browserStack[responsivemode].fxos-mode {
4357 padding: 60px 15px 0;
4359 border-radius: 25px / 20px;
4360 border-bottom-left-radius: 0;
4361 border-bottom-right-radius: 0;
4362 border: 1px solid #FFFFFF;
4363 border-bottom-width: 0;
4365 background-color: #353535;
4367 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4369 background-image: linear-gradient(to right, #111 11%, #333 56%);
4373 .devtools-responsiveui-hardware-buttons {
4374 -moz-appearance: none;
4377 border: 1px solid #FFFFFF;
4378 border-bottom-left-radius: 25px;
4379 border-bottom-right-radius: 25px;
4380 border-top-width: 0;
4382 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4384 background-image: linear-gradient(to right, #111 11%, #333 56%);
4387 .devtools-responsiveui-home-button {
4388 -moz-user-focus: ignore;
4391 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4394 .devtools-responsiveui-sleep-button {
4395 -moz-user-focus: ignore;
4396 -moz-appearance: none;
4397 /* compensate browserStack top padding */
4405 border: 1px solid #444;
4406 border-top-right-radius: 12px;
4407 border-top-left-radius: 12px;
4408 border-bottom-color: transparent;
4410 background-image: linear-gradient(to top, #111 11%, #333 56%);
4413 .devtools-responsiveui-sleep-button:hover:active {
4414 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4417 .devtools-responsiveui-volume-buttons {
4421 .devtools-responsiveui-volume-up-button,
4422 .devtools-responsiveui-volume-down-button {
4423 -moz-user-focus: ignore;
4424 -moz-appearance: none;
4425 border: 1px solid red;
4429 border: 1px solid #444;
4430 border-right-color: transparent;
4432 background-image: linear-gradient(to right, #111 11%, #333 56%);
4435 .devtools-responsiveui-volume-up-button:hover:active,
4436 .devtools-responsiveui-volume-down-button:hover:active {
4437 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4440 .devtools-responsiveui-volume-up-button {
4441 border-top-left-radius: 12px;
4444 .devtools-responsiveui-volume-down-button {
4445 border-bottom-left-radius: 12px;
4448 @media (min-resolution: 2dppx) {
4449 .devtools-responsiveui-resizebarV {
4450 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4453 .devtools-responsiveui-resizebarH {
4454 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4457 .devtools-responsiveui-resizehandle {
4458 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4462 /* === END responsivedesign.inc.css === */
4464 /* === including indicator.css is done at the start of the file === */
4468 #developer-toolbar-toolbox-button[error-count]:before {
4472 background-color: #FF0000;
4474 margin-inline-end: 5px;
4477 /* social toolbar provider menu */
4478 .social-statusarea-popup {
4481 margin-right: -12px;
4484 .social-statusarea-user {
4485 border-bottom: 1px solid #9C9CFF;
4486 background-color: #000000;
4492 .social-statusarea-user-portrait {
4499 .social-statusarea-loggedInStatus {
4500 background: transparent;
4505 list-style-image: none;
4508 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4509 text-decoration: underline;
4512 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4516 .social-panel-frame {
4517 border-radius: inherit;
4520 /* === BEGIN chat.inc.css === */
4522 #social-sidebar-header {
4526 #manage-share-providers,
4527 #social-sidebar-button {
4528 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4529 -moz-image-region: rect(0, 468px, 18px, 450px);
4532 #social-sidebar-button {
4533 -moz-appearance: none;
4538 #manage-share-providers > .toolbarbutton-icon,
4539 #social-sidebar-button > .toolbarbutton-icon {
4543 #manage-share-providers:hover,
4544 #manage-share-providers:hover:active,
4545 #social-sidebar-button:hover,
4546 #social-sidebar-button:hover:active {
4547 -moz-image-region: rect(18px, 468px, 36px, 450px);
4549 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4553 #social-sidebar-button[loading="true"] {
4554 list-style-image: url("chrome://global/skin/icons/loading.png");
4557 #social-sidebar-favico {
4570 .chat-toolbarbutton {
4571 -moz-appearance: none;
4578 .chat-toolbarbutton > .toolbarbutton-text {
4582 .chat-toolbarbutton > .toolbarbutton-icon {
4587 .chat-close-button {
4588 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4591 .chat-close-button:hover {
4592 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4595 .chat-close-button:hover:active {
4596 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4599 .chat-minimize-button {
4600 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4603 .chat-minimize-button:hover {
4604 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4607 .chat-minimize-button:hover:active {
4608 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4612 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4613 transform: rotate(180deg);
4616 .chat-swap-button:hover {
4617 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4620 .chat-swap-button:hover:active {
4621 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4624 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4635 background-color: #9C9CFF;
4642 border: 1px solid #008484;
4644 border-top-left-radius: 4px;
4645 border-top-right-radius: 4px;
4647 background-color: #A09090;
4650 .chat-titlebar[selected] {
4651 background-color: #008484;
4654 .chat-titlebar > .notification-anchor-icon {
4659 .chat-titlebar[minimized="true"] {
4660 border-bottom: none;
4663 .chat-titlebar[selected] {
4664 background-color: #008484;
4667 .chat-titlebar[activity] {
4668 background-color: #E7ADE7;
4678 list-style-image: url("chrome://browser/skin/social/services-16.png");
4679 background-color: #000000;
4685 border-top: 1px solid #008484;
4686 border-inline-end: 1px solid #008484;
4689 @media (min-resolution: 2dppx) {
4691 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4695 .chatbar-button:hover {
4696 background-color: #FFCF00;
4698 .chatbar-button[open="true"] {
4699 background-color: #FF9F00;
4702 .chatbar-button[activity]:not([open]) {
4703 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%);
4706 .chatbar-button > .toolbarbutton-icon {
4710 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4717 .chatbar-button > .toolbarbutton-icon {
4719 margin-inline-end: 0;
4721 .chatbar-button:hover > .toolbarbutton-icon,
4722 .chatbar-button[open="true"] > .toolbarbutton-icon {
4726 .chatbar-button:hover,
4727 .chatbar-button[open="true"] {
4730 .chatbar-button > .toolbarbutton-text,
4731 .chatbar-button > .toolbarbutton-menu-dropmarker {
4735 .chatbar-button[activity]:not([open="true"]) {
4736 background-color: #E7ADE7;
4739 .chatbar-button > menupopup > menuitem[activity] {
4744 background: transparent;
4749 margin-inline-end: 20px;
4753 margin-inline-start: 4px;
4754 background-color: transparent;
4758 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4760 /* border-top-left-radius: 4px;
4761 border-top-right-radius: 4px;*/
4762 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4764 /* margin-inline-end: 5px;*/
4767 chatbox[minimized="true"] {
4773 margin-inline-start: 0px;
4779 /* === END chat.inc.css === */
4781 /* === BEGIN plugin-doorhanger.inc.css === */
4784 * Plugin Doorhanger Styles
4787 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4788 padding: 6px 1px 2px;
4791 .click-to-play-plugins-notification-center-box {
4794 .plugin-popupnotification-centeritem:nth-child(odd) {
4795 /* background-color: rgba(0,0,0,0.1);*/
4798 .center-item-label {
4800 text-overflow: ellipsis;
4803 .center-item-warning-icon {
4804 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4805 background-repeat: no-repeat;
4808 margin-inline-start: 6px;
4811 .click-to-play-plugins-notification-button-container {
4814 .click-to-play-popup-button {
4818 .click-to-play-plugins-notification-description-box {
4822 padding-bottom: 3px;
4825 .click-to-play-plugins-outer-description {
4829 .click-to-play-plugins-notification-link,
4834 .messageImage[value="plugin-hidden"] {
4835 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4836 filter: url(chrome://browser/skin/filters.svg#fill);
4840 /* Keep any changes to this style in sync with pluginProblem.css */
4841 notification.pluginVulnerable {
4844 notification.pluginVulnerable .messageImage {
4845 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4846 filter: url(chrome://browser/skin/filters.svg#fill);
4850 /* === END plugin-doorhanger.inc.css === */
4852 /* === BEGIN login-doorhanger.inc.css === */
4854 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4855 /* Since we display a sliding subview that extends to the border, we cannot
4856 * keep the default padding of arrow panels. We use the same padding in the
4857 * individual content views instead. Since we removed the padding, we also
4858 * have to ensure the contents are clipped to the border box. */
4863 #login-fill-mainview,
4864 #login-fill-details {
4865 padding: var(--panel-arrowcontent-padding);
4868 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4869 transform: translateX(-14px);
4872 #login-fill-mainview,
4873 #login-fill-details {
4874 transition: transform 150ms;
4877 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4878 transform: translateX(105%);
4881 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4882 transform: translateX(-105%);
4885 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4886 background-color: hsla(240,39%,100%,.1);
4889 #login-fill-testing {
4895 border: 1px solid #9C9CFF;
4899 .login-fill-item[disabled] {
4901 background-color: #000000;
4904 .login-fill-item[disabled][selected] {
4905 background-color: #008484;
4913 .login-fill-item.different-hostname > .login-hostname {
4923 #login-fill-details {
4925 background: var(--panel-arrowcontent-background);
4926 color: var(--panel-arrowcontent-color);
4927 background-clip: padding-box;
4928 border-left: 1px solid #9C9CFF;
4929 margin-inline-start: 38px;
4932 /* === END login-doorhanger.inc.css === */
4934 /* === BEGIN customizeMode.inc.css === */
4936 /* Customization mode */
4939 --drag-drop-transition-duration: .3s;
4942 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4946 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4947 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4948 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4953 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4954 pointer-events: none;
4957 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4958 #PanelUI-contents > .panel-customization-placeholder {
4959 -moz-outline-radius: 2.5px;
4960 outline: 1px dashed transparent;
4963 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4964 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4965 -moz-box-ordinal-group: 0;
4970 outline-offset: -2px;
4971 pointer-events: none;
4977 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4978 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4979 offset from the bottom effectively the same as other targets (-2px). */
4980 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4984 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4985 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4986 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4987 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4991 /* Most target outlines are shown on hover and drag over but the panel menu uses
4992 placeholders instead. */
4993 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4994 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4995 /* nav-bar and panel outlines are always shown */
4996 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4997 outline-color: #A09090;
5000 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5001 transition: outline-color 250ms linear;
5004 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5005 transition: outline-color 250ms linear;
5006 outline-color: #9C9CFF;
5009 #PanelUI-contents > .panel-customization-placeholder {
5011 outline-offset: -5px;
5014 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5016 /* padding-left: 10px;
5017 padding-right: 10px;*/
5020 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5024 #customization-container {
5025 background-color: #000000;
5029 #customization-palette,
5030 #customization-empty {
5031 padding: 0 15px 15px;
5034 #customization-header {
5036 line-height: 1.75em;
5039 margin: 25px 25px 12px;
5040 padding-bottom: 12px;
5041 border-bottom: 1px solid #A09090;
5044 #customization-panel-container {
5045 padding: 10px 10px 0px;
5048 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5049 #customization-footer {
5050 /*background-color: rgb(236,236,236);*/
5053 #customization-footer {
5054 border-top: 1px solid #9C9CFF;
5058 .customizationmode-button {
5062 .customizationmode-button:hover {
5065 #customization-titlebar-visibility-button[checked],
5066 #customization-devedition-theme-button[checked] {
5067 background-color: #008484;
5070 #customization-titlebar-visibility-button[checked]:hover,
5071 #customization-devedition-theme-button[checked]:hover {
5072 background-color: #FFCF00;
5075 #customization-titlebar-visibility-button[checked]:hover:active,
5076 #customization-devedition-theme-button[checked]:hover:active {
5077 background-color: #FF9F00;
5080 .customizationmode-button[disabled="true"] {
5083 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5084 .customizationmode-button > .button-box > .button-icon {
5088 #customization-titlebar-visibility-button {
5089 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5090 -moz-image-region: rect(0, 16px, 16px, 0);
5093 #customization-titlebar-visibility-button:hover {
5094 -moz-image-region: rect(16px, 16px, 32px, 0);
5097 #customization-lwtheme-button,
5098 #customization-titlebar-visibility-button {
5102 #customization-titlebar-visibility-button > .button-box {
5104 padding-bottom: 1px;
5107 #customization-titlebar-visibility-button:hover:active > .button-box {
5112 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5113 #customization-titlebar-visibility-button > .button-box > .button-text {
5114 /* Sadly, button.css thinks its margins are perfect for everyone. */
5115 margin-inline-start: 5px !important;
5118 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5122 background-size: contain;
5125 #customization-titlebar-visibility-button > .button-box > .button-icon {
5126 vertical-align: middle;
5129 #customization-titlebar-visibility-button[checked] {
5130 -moz-image-region: rect(0, 32px, 16px, 16px);
5131 background-color: #008484;
5134 #customization-titlebar-visibility-button[checked]:hover {
5135 -moz-image-region: rect(16px, 32px, 32px, 16px);
5136 background-color: #FFCF00;
5139 #customization-titlebar-visibility-button[checked]:hover:active {
5140 background-color: #FF9F00;
5143 @media (min-resolution: 1.1dppx) {
5144 #customization-titlebar-visibility-button {
5145 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5146 -moz-image-region: rect(0, 48px, 48px, 0);
5149 #customization-titlebar-visibility-button:hover {
5150 -moz-image-region: rect(48px, 48px, 96px, 0);
5153 #customization-titlebar-visibility-button[checked] {
5154 -moz-image-region: rect(0, 96px, 48px, 48px);
5157 #customization-titlebar-visibility-button[checked]:hover {
5158 -moz-image-region: rect(48px, 96px, 96px, 48px);
5162 #main-window[customize-entered] #customization-panel-container {
5163 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5164 background-position: left top;
5165 background-repeat: repeat;
5166 background-size: auto;
5167 background-attachment: fixed;
5170 toolbarpaletteitem[place="toolbar"] {
5171 transition: border-width 250ms ease-in-out;
5174 toolbarpaletteitem[mousedown] {
5175 outline: 1px solid #008484;
5176 cursor: -moz-grabbing;
5180 .panel-customization-placeholder,
5181 toolbarpaletteitem[place="palette"],
5182 toolbarpaletteitem[place="panel"] {
5183 transition: transform var(--drag-drop-transition-duration) ease-in-out;
5186 #customization-palette {
5187 transition: opacity .3s ease-in-out;
5191 #customization-palette[showing="true"] {
5195 toolbarpaletteitem toolbarbutton[disabled] {
5196 /* color: inherit !important;*/
5199 toolbarpaletteitem[notransition].panel-customization-placeholder,
5200 toolbarpaletteitem[notransition][place="toolbar"],
5201 toolbarpaletteitem[notransition][place="palette"],
5202 toolbarpaletteitem[notransition][place="panel"] {
5206 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5207 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5208 toolbarpaletteitem > toolbaritem.panel-wide-item,
5209 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5210 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5213 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5214 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5215 transform: scale(1.3);
5218 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5219 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5220 transform: scale(1.1);
5223 /* Override the toolkit styling for items being dragged over. */
5224 toolbarpaletteitem[place="toolbar"] {
5225 border-left-width: 0;
5226 border-right-width: 0;
5231 #customization-palette:not([hidden]) {
5232 margin-bottom: 25px;
5235 toolbarpaletteitem[place="palette"]:-moz-focusring,
5236 toolbarpaletteitem[place="panel"]:-moz-focusring,
5237 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5241 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5242 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5243 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5244 /* Delay adding the focusring back until after the transform transition completes. */
5245 transition: outline-width .01s linear var(--drag-drop-transition-duration);
5246 outline: 1px dotted #A09090;
5247 -moz-outline-radius: 2.5px;
5250 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5251 outline-offset: -5px;
5254 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5255 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5256 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5257 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5261 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5262 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5272 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5273 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5277 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5278 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5281 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5282 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5286 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5287 -moz-box-pack: center;
5291 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5292 margin-inline-end: 5px;
5295 #customization-palette > toolbarpaletteitem > label {
5301 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5302 -moz-box-orient: vertical;
5303 /* Make the panel padding uniform across all platforms due to the
5304 styling of the section headers and footer. */
5308 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5313 .customization-lwtheme-menu-theme {
5314 -moz-appearance: none;
5317 padding-inline-end: 5px;
5319 padding-inline-start: 0;
5322 .customization-lwtheme-menu-theme[defaulttheme] {
5323 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5326 .customization-lwtheme-menu-theme[active="true"] {
5327 background-color: #008484;
5330 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5334 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5338 #customization-lwtheme-menu-header,
5339 #customization-lwtheme-menu-recommended {
5344 #customization-lwtheme-menu-header,
5345 #customization-lwtheme-menu-recommended,
5346 #customization-lwtheme-menu-footer {
5347 background-color: #A09090;
5349 margin-right: -10px;
5353 #customization-lwtheme-menu-header {
5355 border-top-right-radius: 3px;
5356 border-top-left-radius: 3px;
5359 #customization-lwtheme-menu-recommended {
5362 #customization-lwtheme-menu-footer {
5363 margin-bottom: -10px;
5364 border-bottom-right-radius: 3px;
5365 border-bottom-left-radius: 3px;
5368 .customization-lwtheme-menu-footeritem {
5369 -moz-appearance: none;
5371 background-color: #C09070;
5373 border: 1px solid transparent;
5379 .customization-lwtheme-menu-footeritem:hover {
5380 background-color: #FFCF00;
5383 .customization-lwtheme-menu-footeritem:first-child {
5386 /* === END customizeMode.inc.css === */
5388 /* === BEGIN customizeTip.inc.css === */
5390 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5397 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5398 border: 1px solid #9C9CFF;
5402 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5403 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5406 .customization-tipPanel-infoBox {
5407 margin: 20px 25px 25px;
5409 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5410 background-repeat: no-repeat;
5413 .customization-tipPanel-content {
5419 .customization-tipPanel-em {
5424 .customization-tipPanel-contentImage {
5426 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5434 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5435 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5438 .customization-tipPanel-link {
5439 -moz-appearance: none;
5440 background: transparent;
5448 .customization-tipPanel-link > .button-box > .button-text {
5449 margin: 0 !important;
5452 .customization-tipPanel-closeBox > .close-icon {
5453 -moz-appearance: none;
5455 margin-inline-end: -25px;
5458 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5459 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5460 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5463 /* === END customizeTip.inc.css === */
5466 * This next rule is a hack to disable subpixel anti-aliasing on all
5467 * labels during the customize mode transition. Subpixel anti-aliasing
5468 * on Windows with Direct2D layers acceleration is particularly slow to
5469 * paint, so this hack is how we sidestep that performance bottleneck.
5471 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5472 transform: perspective(0.01px);
5475 #main-window[customize-entered] > #tab-view-deck {
5476 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5477 background-attachment: fixed;
5480 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5481 background-repeat: no-repeat;
5482 background-position: right top;
5483 background-attachment: fixed;
5484 /* The image will get set from CustomizeMode.jsm */
5485 background-image: none;
5486 background-color: transparent;
5489 #main-window[customization-lwtheme]:-moz-lwtheme {
5490 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5491 background-repeat: repeat;
5492 background-attachment: fixed;
5493 background-position: left top;
5496 #main-window[customize-entered] #browser-bottombox,
5497 #main-window[customize-entered] #customization-container {
5498 border-left: 1px solid #9C9CFF;
5499 border-right: 1px solid #9C9CFF;
5500 background-clip: padding-box;
5503 #main-window[customize-entered] #browser-bottombox {
5504 border-bottom: 1px solid #9C9CFF;
5507 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5511 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5515 /* End customization mode */
5517 /* Private browsing indicators */
5520 * Currently, we have two places where we put private browsing indicators on
5521 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5522 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5523 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5524 * want the bottom border of the image to line up with the bottom of the window
5525 * caption buttons. That's why there's so much special-casing going on in here.
5527 .private-browsing-indicator {
5529 pointer-events: none;
5532 #private-browsing-indicator-titlebar {
5537 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5541 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5545 #TabsToolbar > .private-browsing-indicator {
5546 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5547 margin-inline-start: 4px;
5551 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5552 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5553 * min/max/close window buttons.
5555 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5556 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5557 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5558 margin-inline-end: 4px;
5564 /* This one is for Linux */
5565 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5566 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5570 /* End private browsing indicators */
5572 /* === BEGIN UITour.inc.css === */
5576 #UITourHighlightContainer {
5577 -moz-appearance: none;
5579 background-color: transparent;
5580 /* This is a buffer to compensate for the movement in the "wobble" effect */
5585 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5586 border-radius: 40px;
5587 border: 1px solid #9C9CFF;
5588 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5589 on Linux without an X compositor where opacity is either 0 or 1. */
5590 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5595 #UITourTooltipBody {
5596 -moz-box-align: start;
5599 #UITourTooltipTitleContainer {
5600 -moz-box-align: start;
5601 margin-bottom: 10px;
5604 #UITourTooltipIcon {
5607 margin-inline-end: 10px;
5610 #UITourTooltipTitle,
5611 #UITourTooltipDescription {
5615 #UITourTooltipTitle {
5621 #UITourTooltipDescription {
5622 margin-inline-start: 0;
5623 margin-inline-end: 0;
5625 line-height: 1.8rem;
5626 margin-bottom: 0; /* Override global.css */
5629 #UITourTooltipClose {
5631 -moz-appearance: none;
5633 background-color: transparent;
5635 margin-inline-start: 4px;
5639 #UITourTooltipClose > .toolbarbutton-text {
5643 #UITourTooltipButtons {
5645 background-color: rgba(0,0,0,.2);
5646 border-top: 1px solid rgba(0,0,0,.4);
5647 margin: 10px -16px -16px;
5651 #UITourTooltipButtons > label,
5652 #UITourTooltipButtons > button {
5656 #UITourTooltipButtons > label:first-child,
5657 #UITourTooltipButtons > button:first-child {
5658 margin-inline-start: 0;
5661 #UITourTooltipButtons > label:last-child,
5662 #UITourTooltipButtons > button:last-child {
5663 margin-inline-end: 0;
5666 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5669 margin-inline-end: 5px;
5672 #UITourTooltipButtons > label,
5673 #UITourTooltipButtons > button .button-text {
5677 #UITourTooltipButtons > button:not(.button-link) {
5678 -moz-appearance: none;
5679 background-color: #C09070;
5680 border-radius: 3000px;
5684 transition-property: background-color, color;
5685 transition-duration: 150ms;
5688 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5689 background-color: #FFCF00;
5693 #UITourTooltipButtons > label,
5694 #UITourTooltipButtons > button.button-link {
5695 -moz-appearance: none;
5696 background: transparent;
5699 color: rgba(0,0,0,0.35);
5701 padding-right: 10px;
5704 #UITourTooltipButtons > button.button-link:hover {
5708 /* The primary button gets the same color as the customize button. */
5709 #UITourTooltipButtons > button.button-primary {
5710 background-color: #A06060; /* LCARS default button background color */
5713 padding-right: 30px;
5716 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5717 background-color: #FFCF00;
5721 /* Notification overrides for Heartbeat UI */
5723 notification.heartbeat {
5724 background-color: #A09090;
5728 @keyframes pulse-onshow {
5731 transform: scale(1.0);
5735 transform: scale(1.1);
5738 transform: scale(1.0);
5741 transform: scale(1.1);
5744 transform: scale(1.0);
5748 @keyframes pulse-twice {
5750 transform: scale(1.1);
5753 transform: scale(0.8);
5756 transform: scale(1);
5760 .messageText.heartbeat {
5762 /* text-shadow: none; */
5763 margin-inline-start: 0px;
5766 .messageImage.heartbeat {
5769 margin-inline-start: 8px;
5770 margin-inline-end: 8px;
5773 .messageImage.heartbeat.pulse-onshow {
5774 animation-name: pulse-onshow;
5775 animation-duration: 1.5s;
5776 animation-iteration-count: 1;
5777 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5780 .messageImage.heartbeat.pulse-twice {
5781 animation-name: pulse-twice;
5782 animation-duration: 1s;
5783 animation-iteration-count: 2;
5784 animation-timing-function: linear;
5787 /* Learn More link styles */
5788 .heartbeat > .text-link {
5790 margin-inline-start: 0px;
5793 .heartbeat > .text-link:hover {
5795 text-decoration: none;
5798 .heartbeat > .text-link:hover:active {
5802 /* Heartbeat UI Rating Star Classes */
5803 .heartbeat > #star-rating-container {
5805 /* margin-bottom: 4px;*/
5808 .heartbeat > #star-rating-container > #star5 {
5809 -moz-box-ordinal-group: 5;
5812 .heartbeat > #star-rating-container > #star4 {
5813 -moz-box-ordinal-group: 4;
5816 .heartbeat > #star-rating-container > #star3 {
5817 -moz-box-ordinal-group: 3;
5820 .heartbeat > #star-rating-container > #star2 {
5821 -moz-box-ordinal-group: 2;
5824 .heartbeat > #star-rating-container > .star-x {
5825 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5827 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5828 margin-inline-end: 4px !important;
5833 .heartbeat > #star-rating-container > .star-x:hover,
5834 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5835 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5838 /* === END UITour.inc.css === */
5840 #UITourTooltipButtons {
5842 * Override the --panel-arrowcontent-padding so the background extends
5843 * to the sides and bottom of the panel.
5846 margin-right: -10px;
5847 margin-bottom: -10px;
5850 /* === BEGIN contextmenu.inc.css === */
5852 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5855 #context-navigation > .menuitem-iconic {
5857 -moz-box-pack: center;
5858 -moz-box-align: center;
5861 #context-navigation > .menuitem-iconic[disabled="true"] {
5862 background-color: transparent;
5865 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5866 -moz-appearance: none;
5869 #context-back > .menu-iconic-left {
5870 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5871 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5872 -moz-image-region: rect(0, 54px, 18px, 36px);
5875 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5876 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5877 -moz-image-region: rect(18px, 54px, 36px, 36px);
5880 #context-back[disabled="true"] > .menu-iconic-left {
5881 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5882 -moz-image-region: rect(36px, 54px, 54px, 36px);
5885 #context-forward > .menu-iconic-left {
5886 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5887 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5888 -moz-image-region: rect(0, 72px, 18px, 54px);
5891 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5892 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5893 -moz-image-region: rect(18px, 72px, 36px, 54px);
5896 #context-forward[disabled="true"] > .menu-iconic-left {
5897 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5898 -moz-image-region: rect(36px, 72px, 54px, 54px);
5901 #context-reload > .menu-iconic-left {
5902 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5903 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5904 -moz-image-region: rect(0, 14px, 14px, 0);
5907 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5908 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5909 -moz-image-region: rect(14px, 14px, 28px, 0);
5912 #context-reload[disabled="true"] > .menu-iconic-left {
5913 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5914 -moz-image-region: rect(28px, 14px, 42px, 0);
5917 #context-stop > .menu-iconic-left {
5918 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5919 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5920 -moz-image-region: rect(0, 28px, 14px, 14px);
5923 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5924 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5925 -moz-image-region: rect(14px, 28px, 28px, 14px);
5928 #context-stop[disabled="true"] > .menu-iconic-left {
5929 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5930 -moz-image-region: rect(28px, 28px, 42px, 14px);
5933 #context-bookmarkpage > .menu-iconic-left {
5934 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5935 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5936 -moz-image-region: rect(0, 144px, 18px, 126px);
5939 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5940 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5941 -moz-image-region: rect(18px, 144px, 36px, 126px);
5944 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5945 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5946 -moz-image-region: rect(36px, 144px, 54px, 126px);
5949 #context-bookmarkpage[starred=true] {
5950 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5951 -moz-image-region: rect(0px, 162px, 18px, 144px);
5954 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5955 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5956 -moz-image-region: rect(18px, 162px, 36px, 144px);
5959 #context-bookmarkpage[starred=true][disabled=true] {
5960 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5961 -moz-image-region: rect(36px, 162px, 54px, 144px);
5964 #context-back:-moz-locale-dir(rtl),
5965 #context-forward:-moz-locale-dir(rtl),
5966 #context-reload:-moz-locale-dir(rtl) {
5967 transform: scaleX(-1);
5970 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5971 width: 18px; /*16px;*/
5972 height: 18px; /*16px;*/
5976 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5977 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5983 #context-media-eme-learnmore {
5984 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5987 #context-media-eme-learnmore {
5988 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5991 /* === END contextmenu.inc.css === */
5993 #context-navigation {
5996 #context-sep-navigation {
5997 /* margin-top: -4px; */
6000 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {