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");
39 /* === BEGIN browser.inc.css === */
44 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
48 -moz-image-region: rect(0, 42px, 14px, 28px);
51 .urlbar-go-button:hover {
52 -moz-image-region: rect(14px, 42px, 28px, 28px);
55 .urlbar-go-button:-moz-locale-dir(rtl) {
56 transform: scaleX(-1);
59 @media (min-resolution: 1.1dppx) {
61 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
62 -moz-image-region: rect(0, 84px, 28px, 56px);
66 .urlbar-go-button:hover {
67 -moz-image-region: rect(28px, 84px, 56px, 56px);
70 .urlbar-go-button:hover:active {
71 -moz-image-region: rect(56px, 84px, 84px, 56px);
81 /* background-color: hsla(0,0%,0%,.05);
82 border: 1px solid ThreeDLightShadow;*/
85 #urlbar-zoom-button[animate="true"] {
86 animation-name: urlbar-zoom-reset-pulse;
87 animation-duration: 250ms;
90 #urlbar-zoom-button:hover {
91 /* background-color: hsla(0,0%,0%,.1);*/
94 #urlbar-zoom-button:hover:active {
95 /* background-color: hsla(0,0%,0%,.15);*/
98 #urlbar-zoom-button > .toolbarbutton-text {
102 #urlbar-zoom-button > .toolbarbutton-icon {
106 /* Page action button */
107 #urlbar-page-action-button {
108 list-style-image: url("chrome://browser/skin/page-action.svg");
109 -moz-context-properties: fill;
115 #urlbar-page-action-button > .toolbarbutton-icon {
119 #page-action-copy-url-button {
120 list-style-image: url("chrome://browser/skin/copy-url.svg");
121 -moz-context-properties: fill;
125 #page-action-email-link-button {
126 list-style-image: url("chrome://browser/skin/email-link.svg");
127 -moz-context-properties: fill;
131 /* === END browser.inc.css === */
134 /*--backbutton-urlbar-overlap: 5px;*/
136 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
137 --forwardbutton-width: 27px;
138 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
139 --forwardbutton-width: 25px;*/
141 --identity-box-verified-background-color: #000000;
143 --panel-separator-color: #A09090;
144 --arrowpanel-hover: #FFCF00;
145 --arrowpanel-active: #FF9F00;
146 --arrowpanel-dimmed: #402000;
147 --arrowpanel-dimmed-further: #794900;
148 --arrowpanel-dimmed-even-further: #603000;
150 --urlbar-separator-color: #9C9CFF;
154 -moz-box-orient: vertical; /* for flex hack */
158 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
161 /* ::::: primary toolbar ::::: */
163 .toolbar-primary > .toolbar-box > .toolbar-holder {
164 background-color: #A09090;
167 .toolbar-primary > .toolbar-box > .toolbar-startcap,
168 .toolbar-primary > .toolbar-box > .toolbar-endcap {
169 background-color: #9C9CFF;
172 /* Hides the titlebar-placeholder underneath the window caption buttons when we
173 are not autohiding the menubar. */
174 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
178 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
179 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
180 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
181 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
182 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
183 /* margin-top: 3px;*/
186 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
187 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
188 /* margin-top: var(--space-above-tabbar);*/
191 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
192 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
193 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
198 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
199 /* 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 */
206 #navigator-toolbox::after {
209 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
210 /*border-bottom: 1px solid ThreeDShadow;*/
213 #navigator-toolbox > toolbar {
216 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
219 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
220 overflow: -moz-hidden-unscrollable;
222 transition: min-height 170ms ease-out, max-height 170ms ease-out;
225 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
228 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
231 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
232 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
233 /* Indent also due to non-applicable aero rule in original Windows theme. */
234 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
235 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
237 background-color: #6000CF;
241 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
242 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
243 background-color: #8050B0;
247 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
251 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
255 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
256 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
261 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
262 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
263 #titlebar-buttonbox > .titlebar-button {
269 /* Position the toolbar above the bottom of background tabs */
274 #personal-bookmarks {
275 /* min-height: 24px; */
278 #PersonalToolbar > #home-button {
279 -moz-box-orient: horizontal;
282 #PersonalToolbar > #home-button > .toolbarbutton-text {
286 #print-preview-toolbar:not(:-moz-lwtheme) {
287 /* -moz-appearance: toolbox; */
290 #browser-bottombox:not(:-moz-lwtheme) {
293 /* ::::: titlebar ::::: */
297 background-color: #6000CF;
300 #titlebar:-moz-window-inactive {
301 background-color: #8050B0;
305 #main-window[sizemode="normal"] > #titlebar {
310 #main-window[sizemode="maximized"] > #titlebar {
314 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
315 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
316 #main-window[sizemode="normal"] > #titlebar,
317 #main-window[sizemode="maximized"] > #titlebar {
319 /* There is a margin-bottom set to -23 by code. */
323 /* The button box must appear on top of the navigator-toolbox in order for
324 * click and hover mouse events to work properly for the button in the restored
325 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
326 * can swallow those events. It will also place the buttons above the fog on
327 * themes with Aero Glass.
330 #main-window[sizemode="maximized"] #titlebar-buttonbox {
331 -moz-appearance: none;
334 margin-inline-end: 3px;
338 .titlebar-placeholder[type="appmenu-button"] {
342 .titlebar-placeholder[type="caption-buttons"] {
346 /* titlebar command buttons */
348 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
351 #titlebar-min:hover {
352 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
356 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
359 #titlebar-max:hover {
360 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
363 #main-window[sizemode="maximized"] #titlebar-max {
364 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
367 #main-window[sizemode="maximized"] #titlebar-max:hover {
368 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
372 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
375 #titlebar-close:hover {
376 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
379 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
380 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
381 #titlebar-fullscreen-button {
382 -moz-appearance: none;
383 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
384 -moz-image-region: rect(0px, 16px, 16px, 0px);
387 #titlebar-fullscreen-button:hover {
388 -moz-image-region: rect(0px, 32px, 16px, 16px);
391 @media (min-resolution: 2dppx) {
392 #titlebar-fullscreen-button {
393 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
394 -moz-image-region: rect(0px, 32px, 32px, 0px);
397 #titlebar-fullscreen-button:hover {
398 -moz-image-region: rect(0px, 64px, 32px, 32px);
404 /* ::::: bookmark buttons ::::: */
406 toolbarbutton.bookmark-item:not(.subviewbutton),
407 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
410 -moz-appearance: none;
411 border: 1px solid transparent;*/
414 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
415 /* border-color: var(--toolbarbutton-hover-bordercolor);
416 background: var(--toolbarbutton-hover-background);*/
419 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
420 /* border-color: var(--toolbarbutton-active-bordercolor);
421 box-shadow: var(--toolbarbutton-active-boxshadow);
422 background: var(--toolbarbutton-active-background);*/
425 .bookmark-item > .toolbarbutton-icon,
426 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
429 margin-inline-start: 1px;
430 margin-inline-end: 2px;
435 /* Force the display of the label for bookmarks */
436 .bookmark-item > .toolbarbutton-text,
437 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
438 display: -moz-box !important;
441 .bookmark-item > .toolbarbutton-menu-dropmarker {
445 #bookmarks-toolbar-placeholder {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
447 -moz-box-orient: horizontal;
450 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
451 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
452 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
455 /* ----- BOOKMARK STAR ANIMATION ----- */
457 @keyframes animation-bookmarkAdded {
458 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
459 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
461 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
464 @keyframes animation-bookmarkPulse {
465 from { transform: scale(1); }
466 50% { transform: scale(1.3); }
467 to { transform: scale(1); }
470 #bookmarked-notification-container {
479 #bookmarked-notification {
480 background-size: 16px;
481 background-position: center;
482 background-repeat: no-repeat;
488 #bookmarked-notification-dropmarker-anchor {
493 #bookmarked-notification-dropmarker-icon {
499 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
500 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
501 animation: animation-bookmarkAdded 800ms;
502 animation-timing-function: ease, ease, ease;
505 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
506 list-style-image: none !important;
509 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
511 animation: animation-bookmarkPulse 300ms;
512 animation-delay: 600ms;
513 animation-timing-function: ease-out;
516 /* ::::: bookmark menus ::::: */
519 menuitem.bookmark-item {
524 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
529 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
530 padding-inline-start: 0px;
533 /* ::::: bookmark items ::::: */
536 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
537 -moz-image-region: auto;
540 .bookmark-item[container] {
541 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
542 -moz-image-region: auto;
545 .bookmark-item[container][open] {
546 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
547 -moz-image-region: auto;
550 .bookmark-item[container][livemark] {
551 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
552 -moz-image-region: auto;
555 .bookmark-item[container][livemark] .bookmark-item {
556 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
557 -moz-image-region: rect(0px, 16px, 16px, 0px);
560 .bookmark-item[container][livemark] .bookmark-item[visited] {
561 -moz-image-region: rect(0px, 32px, 16px, 16px);
564 .bookmark-item[container][query] {
565 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
566 -moz-image-region: auto;
569 .bookmark-item[query][tagContainer] {
570 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
571 -moz-image-region: auto;
574 .bookmark-item[query][dayContainer] {
575 list-style-image: url("chrome://communicator/skin/history/calendar.png");
576 -moz-image-region: auto;
579 .bookmark-item[query][hostContainer] {
580 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
581 -moz-image-region: auto;
584 .bookmark-item[query][hostContainer][open] {
585 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
586 -moz-image-region: auto;
589 .bookmark-item[cutting] > .toolbarbutton-icon,
590 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
594 .bookmark-item[cutting] > .toolbarbutton-text,
595 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
599 /* ::::: primary toolbar buttons ::::: */
601 /* === BEGIN toolbarbuttons.inc.css === */
603 /* Whole section of this included file: */
604 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
605 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
606 #social-share-button, #open-file-button, #find-button, #developer-button,
607 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
608 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
609 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
610 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
611 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
612 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
616 -moz-image-region: rect(0, 36px, 18px, 18px);
619 #back-button:hover:not([disabled="true"]) {
620 -moz-image-region: rect(18px, 36px, 36px, 18px);
623 #back-button[disabled="true"] {
624 -moz-image-region: rect(36px, 36px, 54px, 18px);
628 -moz-image-region: rect(0, 72px, 18px, 54px);
631 #forward-button:hover:not([disabled="true"]) {
632 -moz-image-region: rect(18px, 72px, 36px, 54px);
635 #forward-button[disabled="true"] {
636 -moz-image-region: rect(36px, 72px, 54px, 54px);
639 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
640 #forward-button:-moz-locale-dir(rtl) {
641 transform: scaleX(-1);
644 #home-button[cui-areatype="toolbar"] {
645 -moz-image-region: rect(0, 126px, 18px, 108px);
648 #home-button[cui-areatype="toolbar"]:hover {
649 -moz-image-region: rect(18px, 126px, 36px, 108px);
652 #bookmarks-menu-button[cui-areatype="toolbar"] {
653 -moz-image-region: rect(0, 144px, 18px, 126px);
656 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
657 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
658 -moz-image-region: rect(18px, 144px, 36px, 126px);
661 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
662 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
663 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
664 background-color: transparent !important;
667 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
668 -moz-image-region: rect(0, 162px, 18px, 144px);
671 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
672 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
673 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
674 /* When starred and clicked (for edit/delete dialog),
675 * then only the menubutton-button itself is open, but not the whole menubutton. */
676 -moz-image-region: rect(18px, 162px, 36px, 144px);
679 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
680 -moz-image-region: rect(0, 630px, 18px, 612px);
683 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
685 -moz-box-align: center;
688 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
689 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
690 -moz-image-region: rect(18px, 630px, 36px, 612px);
693 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
694 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
697 padding-inline-start: 2px;
698 padding-inline-end: 0px;
701 #history-panelmenu[cui-areatype="toolbar"] {
702 -moz-image-region: rect(0, 180px, 18px, 162px);
705 #history-panelmenu[cui-areatype="toolbar"]:hover,
706 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
707 -moz-image-region: rect(18px, 180px, 36px, 162px);
710 #downloads-button[cui-areatype="toolbar"] {
711 -moz-image-region: rect(0, 198px, 18px, 180px);
714 #downloads-button[cui-areatype="toolbar"]:hover,
715 #downloads-button[cui-areatype="toolbar"][open="true"] {
716 -moz-image-region: rect(18px, 198px, 36px, 180px);
719 #add-ons-button[cui-areatype="toolbar"] {
720 -moz-image-region: rect(0, 216px, 18px, 198px);
723 #add-ons-button[cui-areatype="toolbar"]:hover {
724 -moz-image-region: rect(18px, 216px, 36px, 198px);
727 #open-file-button[cui-areatype="toolbar"] {
728 -moz-image-region: rect(0, 234px, 18px, 216px);
731 #open-file-button[cui-areatype="toolbar"]:hover {
732 -moz-image-region: rect(18px, 234px, 36px, 216px);
735 #save-page-button[cui-areatype="toolbar"] {
736 -moz-image-region: rect(0, 252px, 18px, 234px);
739 #save-page-button[cui-areatype="toolbar"]:hover {
740 -moz-image-region: rect(18px, 252px, 36px, 234px);
743 #sync-button[cui-areatype="toolbar"] {
744 -moz-image-region: rect(0, 792px, 18px, 774px);
747 #sync-button[cui-areatype="toolbar"]:hover {
748 -moz-image-region: rect(18px, 792px, 36px, 774px);
751 #containers-panelmenu[cui-areatype="toolbar"] {
752 -moz-image-region: rect(0, 810px, 18px, 792px);
755 #containers-panelmenu[cui-areatype="toolbar"]:hover {
756 -moz-image-region: rect(18px, 810px, 36px, 792px);
759 #feed-button[cui-areatype="toolbar"] {
760 -moz-image-region: rect(0, 288px, 18px, 270px);
763 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
764 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
765 -moz-image-region: rect(18px, 288px, 36px, 270px);
768 #feed-button[cui-areatype="toolbar"][disabled="true"] {
769 -moz-image-region: rect(36px, 288px, 54px, 270px);
772 #social-share-button[cui-areatype="toolbar"] {
773 -moz-image-region: rect(0px, 306px, 18px, 288px);
776 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
777 #social-share-button[cui-areatype="toolbar"][open="true"] {
778 -moz-image-region: rect(18px, 306px, 36px, 288px);
781 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
782 -moz-image-region: rect(36px, 306px, 54px, 288px);
785 #characterencoding-button[cui-areatype="toolbar"] {
786 -moz-image-region: rect(0, 324px, 18px, 306px);
789 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
790 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
791 -moz-image-region: rect(18px, 324px, 36px, 306px);
794 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
795 -moz-image-region: rect(36px, 324px, 54px, 306px);
798 #new-window-button[cui-areatype="toolbar"] {
799 -moz-image-region: rect(0, 342px, 18px, 324px);
802 #new-window-button[cui-areatype="toolbar"]:hover {
803 -moz-image-region: rect(18px, 342px, 36px, 324px);
806 #e10s-button[cui-areatype="toolbar"] {
807 -moz-image-region: rect(0, 342px, 18px, 324px);
810 #e10s-button[cui-areatype="toolbar"]:hover {
811 -moz-image-region: rect(18px, 342px, 36px, 324px);
814 #e10s-button > .toolbarbutton-icon {
815 transform: scaleY(-1);
818 #new-tab-button[cui-areatype="toolbar"] {
819 -moz-image-region: rect(0, 360px, 18px, 342px);
822 #new-tab-button[cui-areatype="toolbar"]:hover {
823 -moz-image-region: rect(18px, 360px, 36px, 342px);
826 #privatebrowsing-button[cui-areatype="toolbar"] {
827 -moz-image-region: rect(0, 378px, 18px, 360px);
830 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
831 -moz-image-region: rect(18px, 378px, 36px, 360px);
834 #find-button[cui-areatype="toolbar"] {
835 -moz-image-region: rect(0, 396px, 18px, 378px);
838 #find-button[cui-areatype="toolbar"]:hover {
839 -moz-image-region: rect(18px, 396px, 36px, 378px);
842 #print-button[cui-areatype="toolbar"] {
843 -moz-image-region: rect(0, 414px, 18px, 396px);
846 #print-button[cui-areatype="toolbar"]:hover {
847 -moz-image-region: rect(18px, 414px, 36px, 396px);
850 #fullscreen-button[cui-areatype="toolbar"] {
851 -moz-image-region: rect(0, 432px, 18px, 414px);
854 #fullscreen-button[cui-areatype="toolbar"]:hover {
855 -moz-image-region: rect(18px, 432px, 36px, 414px);
858 #developer-button[cui-areatype="toolbar"] {
859 -moz-image-region: rect(0, 450px, 18px, 432px);
862 #developer-button[cui-areatype="toolbar"]:hover,
863 #developer-button[cui-areatype="toolbar"][open="true"] {
864 -moz-image-region: rect(18px, 450px, 36px, 432px);
867 #preferences-button[cui-areatype="toolbar"] {
868 -moz-image-region: rect(0, 468px, 18px, 450px);
871 #preferences-button[cui-areatype="toolbar"]:hover {
872 -moz-image-region: rect(18px, 468px, 36px, 450px);
875 #PanelUI-menu-button {
876 -moz-image-region: rect(0, 486px, 18px, 468px);
879 #PanelUI-menu-button:hover,
880 #PanelUI-menu-button[open="true"] {
881 -moz-image-region: rect(18px, 486px, 36px, 468px);
884 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
885 -moz-image-region: rect(0, 504px, 18px, 486px);
888 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
889 -moz-image-region: rect(18px, 504px, 36px, 486px);
892 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
893 -moz-image-region: rect(36px, 504px, 54px, 486px);
896 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
897 -moz-image-region: rect(0, 522px, 18px, 504px);
900 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
901 -moz-image-region: rect(18px, 522px, 36px, 504px);
904 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
905 -moz-image-region: rect(36px, 522px, 54px, 504px);
908 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
909 -moz-image-region: rect(0, 540px, 18px, 522px);
912 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
913 -moz-image-region: rect(18px, 540px, 36px, 522px);
916 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
917 -moz-image-region: rect(36px, 540px, 54px, 522px);
920 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
921 -moz-image-region: rect(0, 558px, 18px, 540px);
924 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
925 -moz-image-region: rect(18px, 558px, 36px, 540px);
928 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
929 -moz-image-region: rect(36px, 558px, 54px, 540px);
932 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
933 -moz-image-region: rect(0, 576px, 18px, 558px);
936 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
937 -moz-image-region: rect(18px, 576px, 36px, 558px);
940 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
941 -moz-image-region: rect(36px, 576px, 54px, 558px);
944 #nav-bar-overflow-button {
945 -moz-image-region: rect(0, 612px, 18px, 594px);
948 #nav-bar-overflow-button:hover,
949 #nav-bar-overflow-button[open="true"] {
950 -moz-image-region: rect(18px, 612px, 36px, 594px);
953 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
954 transform: scaleX(-1);
958 -moz-image-region: rect(0, 648px, 18px, 630px);
961 #tabview-button:hover {
962 -moz-image-region: rect(18px, 648px, 36px, 630px);
965 #email-link-button[cui-areatype="toolbar"] {
966 -moz-image-region: rect(0, 666px, 18px, 648px);
969 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
970 -moz-image-region: rect(18px, 666px, 36px, 648px);
973 #email-button[cui-areatype="toolbar"][disabled="true"] {
974 -moz-image-region: rect(36px, 666px, 54px, 648px);
977 #sidebar-button[cui-areatype="toolbar"] {
978 -moz-image-region: rect(0, 684px, 18px, 666px);
981 #sidebar-button[cui-areatype="toolbar"]:hover {
982 -moz-image-region: rect(18px, 684px, 36px, 666px);
985 #panic-button[cui-areatype="toolbar"] {
986 -moz-image-region: rect(0, 702px, 18px, 684px);
989 #panic-button[cui-areatype="toolbar"]:hover,
990 #panic-button[cui-areatype="toolbar"][open] {
991 -moz-image-region: rect(18px, 702px, 36px, 684px);
994 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
995 transform: scaleX(-1);
998 #webide-button[cui-areatype="toolbar"] {
999 -moz-image-region: rect(0, 738px, 18px, 720px);
1002 #webide-button[cui-areatype="toolbar"]:hover {
1003 -moz-image-region: rect(18px, 738px, 36px, 720px);
1006 /* === END toolbarbuttons.inc.css === */
1008 /* === BEGIN menupanel.inc.css === */
1010 /* Menu panel and palette styles */
1012 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1013 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1014 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1015 #social-share-button, #open-file-button, #find-button, #developer-button,
1016 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1017 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1018 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1019 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1020 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1021 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1022 #social-share-button, #open-file-button, #find-button, #developer-button,
1023 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1024 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1025 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1026 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1027 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1030 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1031 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1032 #social-share-button, #open-file-button, #find-button, #developer-button,
1033 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1034 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1035 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1036 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1037 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1038 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1039 #social-share-button, #open-file-button, #find-button, #developer-button,
1040 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1041 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1042 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1043 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1044 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1045 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1046 #social-share-button, #open-file-button, #find-button, #developer-button,
1047 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1048 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1049 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1050 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
1051 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1052 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1053 #social-share-button, #open-file-button, #find-button, #developer-button,
1054 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1055 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1056 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1057 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1058 filter: url(chrome://global/skin/filters.svg#fill);
1062 #home-button[cui-areatype="menu-panel"],
1063 toolbarpaletteitem[place="palette"] > #home-button {
1064 -moz-image-region: rect(0px, 128px, 32px, 96px);
1067 #bookmarks-menu-button[cui-areatype="menu-panel"],
1068 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1069 -moz-image-region: rect(0px, 192px, 32px, 160px);
1072 #history-panelmenu[cui-areatype="menu-panel"],
1073 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1074 -moz-image-region: rect(0px, 224px, 32px, 192px);
1077 #downloads-button[cui-areatype="menu-panel"],
1078 toolbarpaletteitem[place="palette"] > #downloads-button {
1079 -moz-image-region: rect(0px, 256px, 32px, 224px);
1082 #add-ons-button[cui-areatype="menu-panel"],
1083 toolbarpaletteitem[place="palette"] > #add-ons-button {
1084 -moz-image-region: rect(0px, 288px, 32px, 256px);
1087 #open-file-button[cui-areatype="menu-panel"],
1088 toolbarpaletteitem[place="palette"] > #open-file-button {
1089 -moz-image-region: rect(0px, 320px, 32px, 288px);
1092 #save-page-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #save-page-button {
1094 -moz-image-region: rect(0px, 352px, 32px, 320px);
1097 #sync-button[cui-areatype="menu-panel"],
1098 toolbarpaletteitem[place="palette"] > #sync-button {
1099 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1102 #containers-panelmenu[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1104 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1107 #feed-button[cui-areatype="menu-panel"],
1108 toolbarpaletteitem[place="palette"] > #feed-button {
1109 -moz-image-region: rect(0px, 416px, 32px, 384px);
1112 #social-share-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #social-share-button {
1114 -moz-image-region: rect(0px, 448px, 32px, 416px);
1117 #characterencoding-button[cui-areatype="menu-panel"],
1118 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1119 -moz-image-region: rect(0px, 480px, 32px, 448px);
1122 #new-window-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #new-window-button {
1124 -moz-image-region: rect(0px, 512px, 32px, 480px);
1127 #e10s-button[cui-areatype="menu-panel"],
1128 toolbarpaletteitem[place="palette"] > #e10s-button {
1129 -moz-image-region: rect(0px, 512px, 32px, 480px);
1132 #new-tab-button[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #new-tab-button {
1134 -moz-image-region: rect(0px, 544px, 32px, 512px);
1137 #privatebrowsing-button[cui-areatype="menu-panel"],
1138 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1139 -moz-image-region: rect(0px, 576px, 32px, 544px);
1142 #tabview-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #tabview-button {
1144 -moz-image-region: rect(0px, 608px, 32px, 576px);
1147 #find-button[cui-areatype="menu-panel"],
1148 toolbarpaletteitem[place="palette"] > #find-button {
1149 -moz-image-region: rect(0px, 640px, 32px, 608px);
1152 #print-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #print-button {
1154 -moz-image-region: rect(0px, 672px, 32px, 640px);
1157 #fullscreen-button[cui-areatype="menu-panel"],
1158 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1159 -moz-image-region: rect(0px, 704px, 32px, 672px);
1162 #developer-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #developer-button {
1164 -moz-image-region: rect(0px, 736px, 32px, 704px);
1167 #preferences-button[cui-areatype="menu-panel"],
1168 toolbarpaletteitem[place="palette"] > #preferences-button {
1169 -moz-image-region: rect(0px, 768px, 32px, 736px);
1172 #email-link-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #email-link-button {
1174 -moz-image-region: rect(0, 800px, 32px, 768px);
1177 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1178 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1179 -moz-image-region: rect(64px, 800px, 96px, 768px);
1182 #sidebar-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #sidebar-button {
1184 -moz-image-region: rect(0, 864px, 32px, 832px);
1187 #panic-button[cui-areatype="menu-panel"],
1188 toolbarpaletteitem[place="palette"] > #panic-button {
1189 -moz-image-region: rect(0, 896px, 32px, 864px);
1192 #webide-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #webide-button {
1194 -moz-image-region: rect(0px, 960px, 32px, 928px);
1197 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1198 -moz-image-region: rect(0, 832px, 32px, 800px);
1201 /* Wide panel control icons */
1203 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1204 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1205 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1206 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1207 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1210 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1211 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1212 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1213 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1214 filter: url(chrome://global/skin/filters.svg#fill);
1218 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1219 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1220 -moz-image-region: rect(0px, 32px, 16px, 16px);
1223 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1224 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1225 -moz-image-region: rect(0px, 48px, 16px, 32px);
1228 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1229 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1230 -moz-image-region: rect(0px, 64px, 16px, 48px);
1233 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1234 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1235 -moz-image-region: rect(0px, 80px, 16px, 64px);
1238 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1239 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1240 -moz-image-region: rect(0px, 96px, 16px, 80px);
1243 #add-share-provider {
1244 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1245 -moz-image-region: rect(0px, 96px, 16px, 80px);
1248 /* === END menupanel.inc.css === */
1250 .toolbarbutton-1:not([type="menu-button"]) {
1251 -moz-box-orient: vertical;
1255 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1261 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1262 .toolbarbutton-1[disabled="true"]:hover:active,
1263 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1267 .toolbarbutton-1:hover:active,
1268 .toolbarbutton-1[open="true"],
1269 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1271 padding-bottom: 0px;
1272 padding-inline-start: 3px;
1273 padding-inline-end: 1px;
1276 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1277 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1278 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1279 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1280 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1283 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1284 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1287 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1288 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1291 .toolbarbutton-1 > .toolbarbutton-icon,
1292 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1296 #nav-bar .toolbarbutton-1,
1297 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1300 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1301 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1302 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1305 #nav-bar #PanelUI-menu-button {
1306 /* padding-inline-start: 7px;
1307 padding-inline-end: 5px;*/
1310 #nav-bar .toolbarbutton-1[type=panel],
1311 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1312 /* padding-left: 5px;
1313 padding-right: 5px;*/
1316 #nav-bar .toolbarbutton-1 > menupopup {
1317 /* margin-top: -3px;*/
1320 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1324 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1325 /* padding-inline-end: 0;*/
1328 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1329 /* padding-inline-start: 0;
1330 -moz-box-align: center;*/
1333 .findbar-button > .toolbarbutton-text,
1334 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1335 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1336 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1337 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1338 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1339 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1340 /* padding: 2px 6px;
1342 border-color: transparent;
1343 transition-property: background-color, border-color;
1344 transition-duration: 150ms;*/
1347 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1348 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1349 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1350 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1354 /* Help SDK icons fit: */
1355 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1356 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1360 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1361 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1365 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1366 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1367 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
1368 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1369 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1370 /* padding-inline-end: 17px;*/
1373 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1374 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
1375 /* horizontal padding + border + icon width */
1376 /* max-width: 43px;*/
1379 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1382 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1388 #nav-bar .toolbaritem-combined-buttons {
1389 /* margin-left: 2px;
1390 margin-right: 2px;*/
1393 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1398 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1399 #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 {
1405 margin-inline-end: -1px;
1409 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1412 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1413 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1414 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1415 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1416 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1417 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1418 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1419 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1420 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1423 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1424 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1425 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1426 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1427 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1428 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1431 #TabsToolbar .toolbarbutton-1,
1432 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1433 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1434 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1437 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1438 #TabsToolbar .toolbarbutton-1[open],
1439 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1440 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1441 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1444 /* unified back/forward button */
1447 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1450 #forward-button > menupopup {
1451 margin-top: 1px !important;
1454 #forward-button > .toolbarbutton-icon {
1455 background-clip: padding-box !important;
1456 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1457 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1461 margin-inline-start: -4px !important;
1466 border-radius: 0 10000px 10000px 0;
1467 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1470 #forward-button:-moz-locale-dir(rtl) {
1471 border-radius: 10000px 0 0 10000px;
1474 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1475 transition: margin-left 150ms ease-out;
1478 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1479 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1482 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1483 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1484 transition-delay: 100s;
1487 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1488 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1489 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1493 /* padding-top: 3px !important;
1494 padding-bottom: 3px !important;
1495 padding-inline-start: 5px !important;
1496 padding-inline-end: 0 !important;*/
1499 border-radius: 10000px;
1503 margin-bottom: -2px;
1506 #back-button:-moz-locale-dir(rtl) {
1509 #back-button > menupopup {
1510 margin-top: -1px !important;
1513 #back-button > .toolbarbutton-icon {
1514 border-radius: 10000px !important;
1515 background-clip: padding-box !important;
1516 /* background-color: hsla(210,25%,98%,.08) !important;
1517 padding: 6px !important;
1518 border-style: none !important;
1519 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1520 0 0 0 1px hsla(210,4%,10%,.25);*/
1521 transition-property: background-color, box-shadow !important;
1522 transition-duration: 250ms !important;
1525 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1526 /* background-color: hsla(210,4%,10%,.08) !important;*/
1529 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1530 #back-button[open="true"] > .toolbarbutton-icon {
1531 /* background-color: hsla(210,4%,10%,.12) !important;
1532 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1533 0 0 0 1px hsla(210,4%,10%,.25),
1534 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1537 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1538 transform: scaleX(-1);
1541 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1542 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1543 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1546 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1547 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1548 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1551 #home-button.bookmark-item {
1552 list-style-image: url("chrome://browser/skin/Toolbar.png");
1555 #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),
1556 #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),
1557 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1558 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1559 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1560 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1561 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1564 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1567 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1568 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1569 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1573 #downloads-button > .toolbarbutton-icon {
1577 /* tabview menu item */
1580 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1581 -moz-image-region: rect(1px, 89px, 17px, 73px);
1584 #menu_tabview[groups="0"] {
1585 -moz-image-region: rect(1px, 17px, 17px, 1px);
1588 #menu_tabview[groups="1"] {
1589 -moz-image-region: rect(1px, 35px, 17px, 19px);
1592 #menu_tabview[groups="2"] {
1593 -moz-image-region: rect(1px, 53px, 17px, 37px);
1596 #menu_tabview[groups="3"] {
1597 -moz-image-region: rect(1px, 71px, 17px, 55px);
1600 /* undo close tab menu item */
1601 #alltabs_undoCloseTab {
1602 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1605 @media (min-resolution: 1.1dppx) {
1606 #alltabs_undoCloseTab {
1607 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1609 #alltabs_undoCloseTab > .toolbarbutton-icon {
1614 /* zoom control text (reset) button special case: */
1616 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1617 /* To make this line up with the icons, it needs the same height (18px) +
1618 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1619 * increase in text sizes would break things...
1624 /* ::::: fullscreen window controls ::::: */
1629 -moz-appearance: none;
1631 /* margin: 0 !important;
1632 padding: 6px 12px;*/
1636 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1639 #minimize-button:hover {
1640 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1644 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1647 #restore-button:hover {
1648 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1651 #minimize-button:hover,
1652 #restore-button:hover {
1653 /* background-color: hsla(0, 0%, 0%, .12);*/
1656 #minimize-button:hover:active,
1657 #restore-button:hover:active {
1658 /* background-color: hsla(0, 0%, 0%, .22);*/
1662 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1665 #close-button:hover {
1666 /* background-color: hsl(355, 86%, 49%);*/
1667 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1670 #close-button:hover:active {
1671 /* background-color: hsl(355, 82%, 69%);*/
1674 /* ::::: Location Bar ::::: */
1677 .searchbar-textbox {
1680 margin-inline-start: 3px;
1684 /* make color as light as possible to deal with dark non-domain parts */
1688 #urlbar:-moz-lwtheme,
1689 .searchbar-textbox:-moz-lwtheme {
1690 /* background-color: rgba(255,255,255,.8);
1691 @navbarTextboxCustomBorder@
1695 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1696 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1697 /* background-color: rgba(255,255,255,.9);*/
1700 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1701 .searchbar-textbox:-moz-lwtheme[focused] {
1702 /* background-color: white;*/
1705 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1706 /* border-inline-start: none;
1710 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1711 /* border-top-left-radius: 0;
1712 border-bottom-left-radius: 0; */
1715 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1716 /* border-top-right-radius: 0;
1717 border-bottom-right-radius: 0; */
1720 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1721 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1722 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1725 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1726 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1727 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1728 transform: scaleX(-1);
1731 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1732 -moz-box-direction: reverse;
1735 html|*.urlbar-input:-moz-lwtheme::placeholder,
1736 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1741 -moz-box-orient: horizontal;
1742 -moz-box-align: stretch;
1745 .urlbar-textbox-container {
1746 -moz-box-align: stretch;
1750 margin-inline-start: 0;
1754 #urlbar-display-box {
1755 padding-inline-start: 4px;
1756 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1757 border-inline-end: 1px solid var(--urlbar-separator-color);
1758 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1759 border-image-slice: 1; */
1763 -moz-box-align: center;
1768 /* 16x16 icon with border-box sizing */
1773 /* ::::: URL Bar Zoom Reset Button ::::: */
1775 @keyframes urlbar-zoom-reset-pulse {
1777 transform: scale(0);
1780 transform: scale(1.5);
1783 transform: scale(1.0);
1787 #urlbar-zoom-button {
1788 /* -moz-appearance: none;*/
1789 /* color: inherit;*/
1792 .search-go-container {
1796 .search-go-container > .search-go-button {
1800 #urlbar-search-footer {
1801 border-top: 1px solid var(--panel-separator-color);
1804 #urlbar-search-settings {
1807 #urlbar-search-settings:hover {
1810 #urlbar-search-settings:hover:active {
1813 #urlbar-search-splitter {
1814 /* The splitter width should equal the location and search bars' combined
1815 neighboring margin and border width. */
1820 background: transparent;
1824 border-inline-end: 1px solid #9C9CFF;
1825 margin-inline-end: 3px;
1828 margin-inline-start: 0;
1832 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1834 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1835 border-bottom: 1px solid var(--panel-separator-color);
1836 background-color: #000000;
1838 padding-inline-start: 44px;
1839 padding-inline-end: 6px;
1840 background-image: url("chrome://browser/skin/info.svg");
1841 background-clip: padding-box;
1842 background-position: 20px center;
1843 background-repeat: no-repeat;
1844 background-size: 16px 16px;
1847 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1848 background-position: right 20px center;
1851 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1856 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1857 margin-inline-start: 0;
1860 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1861 -moz-appearance: none;
1866 margin-inline-start: 10px;
1869 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1872 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1875 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1878 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1881 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1884 min-width: calc(54px + 11ch);
1889 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1890 background-color: var(--identity-box-verified-background-color);
1893 #identity-box:-moz-focusring {
1894 outline: 1px dotted;
1895 outline-offset: -1px;
1898 #identity-box.verifiedDomain:-moz-focusring,
1899 #identity-box.verifiedIdentity:-moz-focusring {
1900 outline-color: #000000;
1903 /* Location bar dropmarker */
1905 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1906 background-color: transparent;
1909 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1910 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1911 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1914 transition: opacity 0.15s ease;
1917 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1921 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1925 .urlbar-history-dropmarker:hover {
1928 .urlbar-history-dropmarker:hover:active,
1929 .urlbar-history-dropmarker[open="true"] {
1932 /* page proxy icon */
1933 /* === BEGIN identity-block.inc.css === */
1935 /* === BEGIN identity-block/icons.inc.css === */
1938 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1941 #identity-box:hover > #identity-icon:not(.no-hover),
1942 #identity-box[open=true] > #identity-icon {
1943 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1946 #identity-box.grantedPermissions > #identity-icon {
1947 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1950 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1951 #identity-box.grantedPermissions[open=true] > #identity-icon {
1952 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1955 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1956 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1959 #tracking-protection-icon {
1960 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1963 #tracking-protection-icon[state="loaded-tracking-content"] {
1964 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1968 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1969 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1970 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1971 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1972 visibility: visible;
1975 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1976 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1977 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
1978 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1979 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1980 visibility: visible;
1983 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1984 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1985 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1986 visibility: visible;
1989 /* === END identity-block/icons.inc.css === */
1996 /* The padding-left and padding-right transitions handle the delayed hiding of
1997 the forward button when hovered. */
1998 transition: background-color 150ms ease, padding-left, padding-right;
2001 #identity-box:-moz-locale-dir(ltr) {
2002 border-top-right-radius: 0;
2003 border-bottom-right-radius: 0;
2006 #identity-box:-moz-locale-dir(rtl) {
2007 border-top-left-radius: 0;
2008 border-bottom-left-radius: 0;
2011 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2012 border-inline-end: 1px solid #008484;
2015 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2019 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2020 border-inline-end: 1px solid #9C9CFF;
2023 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2028 #identity-icon-labels:-moz-locale-dir(ltr) {
2032 #identity-icon-labels:-moz-locale-dir(rtl) {
2036 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2037 /* border-radius: 0;
2038 padding-inline-start: 2px; */
2039 padding-inline-end: 2px;
2040 margin-inline-end: 1px;
2043 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2044 padding-inline-start: 2px;
2047 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2048 /* Forward button hiding is delayed when hovered, so we should use the same
2049 delay for the identity box. We handle both horizontal paddings (for LTR and
2050 RTL), the latter two delays here are for padding-left and padding-right. */
2051 transition-delay: 0s, 100s, 100s;
2054 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2055 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2056 padding-inline-start: 2.01px;
2059 /* MAIN IDENTITY ICON */
2066 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2070 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2071 -moz-image-region: inherit;
2072 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2077 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2078 -moz-image-region: inherit;
2079 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2089 margin-inline-start: -16px;
2094 #identity-box[sharing="camera"] > #sharing-icon {
2095 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2098 #identity-box[sharing="microphone"] > #sharing-icon {
2099 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2102 #identity-box[sharing="screen"] > #sharing-icon {
2103 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2107 #identity-box[sharing] > #sharing-icon {
2109 animation-delay: -1.5s;
2112 #identity-box[sharing] > #identity-icon,
2114 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2117 @keyframes identity-box-sharing-icon-pulse {
2118 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2119 0%, 16.66%, 83.33%, 100% {
2127 /* TRACKING PROTECTION ICON */
2129 #tracking-protection-icon {
2132 margin-inline-start: 2px;
2133 margin-inline-end: 0;
2136 #tracking-protection-icon[animate] {
2137 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2140 #tracking-protection-icon:not([state]) {
2141 margin-inline-end: -18px;
2142 pointer-events: none;
2144 /* Only animate the shield in, when it disappears hide it immediately. */
2148 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2149 visibility: collapse;
2152 /* CONNECTION ICON */
2157 margin-inline-start: 2px;
2158 visibility: collapse;
2161 /* === END identity-block.inc.css === */
2163 #page-proxy-favicon {
2164 -moz-image-region: rect(0, 16px, 16px, 0);
2167 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2168 /* margin-inline-end: 1px;*/
2171 #identity-box:hover > #page-proxy-favicon {
2172 -moz-image-region: rect(0, 32px, 16px, 16px);
2175 #identity-box:hover:active > #page-proxy-favicon,
2176 #identity-box[open=true] > #page-proxy-favicon {
2177 -moz-image-region: rect(0, 48px, 16px, 32px);
2180 #identity-box:hover {
2181 background-color: #FFCF00;
2185 #identity-box:hover:active,
2186 #identity-box[open=true] {
2187 background-color: #FF9F00;
2191 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2192 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2193 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2194 background-color: #A09090;
2198 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2199 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2200 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2204 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2205 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2206 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2207 background-color: #008484;
2211 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2212 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2217 #identity-box:hover > image,
2218 #identity-box:hover:active > image,
2219 #identity-box[open=true] > image {
2220 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2225 /* === BEGIN autocomplete.inc.css === */
2227 #PopupAutoComplete > richlistbox > richlistitem {
2232 padding: 0px 1px 0px 1px;
2235 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2236 margin-inline-start: 4px;
2237 margin-inline-end: 0;
2240 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2242 margin-inline-start: 4px;
2245 #PopupAutoComplete > richlistbox {
2249 /* Login form autocompletion */
2250 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2252 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2255 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2256 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2259 /* Insecure field warning */
2260 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2261 background-color: var(--arrowpanel-dimmed);
2262 border-bottom: 1px solid var(--panel-separator-color);
2263 padding-bottom: 4px;
2267 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2268 background-color: var(--arrowpanel-dimmed-further);
2272 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2277 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2281 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2282 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2285 /* === END autocomplete.inc.css === */
2287 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2288 border-top: 1px solid #A09090;
2291 #treecolAutoCompleteImage {
2296 .autocomplete-richlistbox {
2300 .autocomplete-richlistitem {
2305 border: 1px solid transparent;
2318 border: 1px solid transparent;
2329 html|span.ac-emphasize-text-title,
2330 html|span.ac-emphasize-text-tag,
2331 html|span.ac-emphasize-text-url {
2335 .ac-type-icon[type=bookmark] {
2336 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2339 .ac-type-icon[type=bookmark][selected][current] {
2340 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2343 .ac-result-type-bookmark {
2344 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2345 -moz-image-region: rect(0px 16px 16px 0px);
2350 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2351 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2354 .ac-type-icon[type=keyword],
2355 .ac-site-icon[type=searchengine] {
2356 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2359 .ac-type-icon[type=keyword][selected],
2360 .ac-site-icon[type=searchengine][selected] {
2361 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2364 .ac-result-type-tag {
2365 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2370 .ac-type-icon[type=switchtab],
2371 .ac-type-icon[type=remotetab] {
2372 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2375 .ac-type-icon[type=switchtab][selected],
2376 .ac-type-icon[type=remotetab][selected] {
2377 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2380 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2381 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2387 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2388 border-top: 1px solid #9C9CFF;
2391 /* combined go/reload/stop button in location bar */
2394 #urlbar-reload-button,
2395 #urlbar-stop-button {
2397 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2398 /* margin: 0 9px; */
2399 margin-inline-start: 0px;
2400 border-inline-start: 1px solid var(--urlbar-separator-color);
2401 border-image: linear-gradient(transparent 15%,
2402 var(--urlbar-separator-color) 15%,
2403 var(--urlbar-separator-color) 85%,
2405 border-image-slice: 1;
2408 /* XXX: temporary for Photon preview changes */
2411 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2414 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2415 border-top-left-radius: 0px;
2416 border-bottom-left-radius: 0px;
2419 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2420 border-top-right-radius: 0px;
2421 border-bottom-right-radius: 0px;
2424 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2425 #urlbar-reload-button:not(:hover) {
2426 border-inline-start-style: none;
2427 padding-inline-start: 3px;
2431 #urlbar-reload-button {
2432 -moz-image-region: rect(0px, 14px, 14px, 0px);
2435 #reload-button[disabled=true],
2436 #urlbar-reload-button[disabled=true] {
2437 -moz-image-region: rect(28px, 14px, 42px, 0px);
2440 #reload-button:not([disabled=true]):hover,
2441 #urlbar-reload-button:not([disabled=true]):hover {
2442 -moz-image-region: rect(14px, 14px, 28px, 0px);
2445 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2446 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2447 transform: scaleX(-1);
2451 -moz-image-region: rect(0, 42px, 14px, 28px);
2454 #urlbar-go-button:hover {
2455 -moz-image-region: rect(14px, 42px, 28px, 28px);
2458 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2459 transform: scaleX(-1);
2463 #urlbar-stop-button {
2464 -moz-image-region: rect(0px, 28px, 14px, 14px);
2468 #urlbar-stop-button:hover {
2469 -moz-image-region: rect(14px, 28px, 28px, 14px);
2472 @media (min-resolution: 1.1dppx) {
2476 #urlbar-reload-button,
2477 #urlbar-stop-button {
2478 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2481 #reload-button > .toolbarbutton-icon,
2482 #stop-button > .toolbarbutton-icon,
2483 #urlbar-go-button > .toolbarbutton-icon,
2484 #urlbar-reload-button > .toolbarbutton-icon,
2485 #urlbar-stop-button > .toolbarbutton-icon {
2490 -moz-image-region: rect(0, 84px, 28px, 56px);
2493 #urlbar-go-button:hover {
2494 -moz-image-region: rect(28px, 84px, 56px, 56px);
2497 #urlbar-go-button:hover:active {
2498 -moz-image-region: rect(56px, 84px, 84px, 56px);
2502 #urlbar-reload-button {
2503 -moz-image-region: rect(0, 28px, 28px, 0);
2506 #reload-button:not([disabled]):hover,
2507 #urlbar-reload-button:not([disabled]):hover {
2508 -moz-image-region: rect(28px, 28px, 56px, 0);
2511 #reload-button:not([disabled]):hover:active,
2512 #urlbar-reload-button:not([disabled]):hover:active {
2513 -moz-image-region: rect(56px, 28px, 84px, 0);
2517 #urlbar-stop-button {
2518 -moz-image-region: rect(0, 56px, 28px, 28px);
2521 #stop-button:not([disabled]):hover,
2522 #urlbar-stop-button:not([disabled]):hover {
2523 -moz-image-region: rect(28px, 56px, 56px, 28px);
2526 #stop-button:hover:active,
2527 #urlbar-stop-button:hover:active {
2528 -moz-image-region: rect(56px, 56px, 84px, 28px);
2532 /* popup blocker button */
2534 #page-report-button {
2535 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2536 -moz-image-region: rect(0, 16px, 16px, 0);
2539 #page-report-button:hover ,
2540 #page-report-button:hover:active,
2541 #page-report-button[open="true"] {
2542 -moz-image-region: rect(0, 32px, 16px, 16px);
2545 /* Reader mode button */
2547 #reader-mode-button {
2548 list-style-image: url("chrome://browser/skin/readerMode.svg");
2549 -moz-image-region: rect(0, 16px, 16px, 0);
2552 #reader-mode-button:hover,
2553 #reader-mode-button[readeractive]:hover {
2554 -moz-image-region: rect(0, 32px, 16px, 16px);
2557 #reader-mode-button:hover:active,
2558 #reader-mode-button[readeractive] {
2559 -moz-image-region: rect(0, 48px, 16px, 32px);
2562 /* social share panel */
2564 /* === BEGIN social.inc.css === */
2566 #manage-share-providers {
2567 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2568 -moz-image-region: rect(0, 468px, 18px, 450px);
2571 #manage-share-providers > .toolbarbutton-icon {
2576 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2579 /* fixup corners for share panel */
2580 .social-panel > .social-panel-frame {
2581 border-radius: inherit;
2584 /* === END social.inc.css === */
2586 .social-panel-frame {
2587 border-radius: inherit;
2590 .social-share-frame {
2597 background-color: white;
2598 background-repeat: no-repeat;
2599 background-position: center center;
2601 #share-container[loading] {
2602 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2604 #share-container > browser {
2605 transition: opacity 150ms ease-in-out;
2608 #share-container[loading] > browser {
2612 .social-share-toolbar {
2613 border-bottom: 1px solid #9C9CFF;
2617 #social-share-provider-buttons {
2622 .share-provider-button {
2627 .share-provider-button > .toolbarbutton-text {
2630 .share-provider-button > .toolbarbutton-icon {
2636 #social-share-panel {
2642 .social-share-frame {
2643 border-top-left-radius: 0;
2644 border-bottom-left-radius: inherit;
2645 border-top-right-radius: 0;
2646 border-bottom-right-radius: inherit;
2649 #social-share-panel > .social-share-toolbar {
2650 border-top-left-radius: inherit;
2651 border-top-right-radius: inherit;
2654 #social-share-provider-buttons {
2655 border-top-left-radius: inherit;
2656 border-top-right-radius: inherit;
2659 /* bookmarks menu-button */
2661 #bookmarks-menu-button.bookmark-item {
2662 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2663 -moz-image-region: rect(0px 16px 16px 0px);
2666 #bookmarks-menu-button.bookmark-item[starred] {
2667 -moz-image-region: rect(0px 32px 16px 16px);
2670 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2672 padding-bottom: 2px;
2675 #BMB_bookmarksPopup[side="top"],
2676 #BMB_bookmarksPopup[side="bottom"] {
2678 margin-right: -20px;
2681 #BMB_bookmarksPopup[side="left"],
2682 #BMB_bookmarksPopup[side="right"] {
2684 margin-bottom: -20px;
2687 /* bookmarking panel */
2689 #editBookmarkPanelStarIcon {
2690 list-style-image: url("chrome://browser/skin/places/starred48.png");
2695 #editBookmarkPanelStarIcon[unstarred] {
2696 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2699 #editBookmarkPanelTitle {
2703 #editBookmarkPanelHeader,
2704 #editBookmarkPanelContent {
2705 margin-bottom: .5em;
2708 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2709 #editBMPanel_folderTree {
2713 /* ::::: content area ::::: */
2716 background-color: #9C9CFF;
2721 background-color: #000000;
2725 margin-inline-start: 0;
2734 padding-inline-start: 0px;
2737 #sidebar-header > .close-icon {
2738 /* padding: 4px 2px;
2741 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2744 #sidebar-header > .close-icon:hover,
2745 #sidebar-header > .close-icon:hover:active {
2746 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2749 #sidebar-splitter:-moz-locale-dir(ltr),
2750 #sidebar:-moz-locale-dir(ltr) {
2751 border-radius: 0 5px 0 0;
2754 #sidebar-splitter:-moz-locale-dir(rtl),
2755 #sidebar:-moz-locale-dir(rtl) {
2756 border-radius: 5px 0 0 0;
2759 .browserContainer > findbar {
2761 background-color: -moz-dialog;
2762 color: -moz-DialogText;
2771 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2774 #TabsToolbar .toolbar-holder {
2775 background-color: #000000; /* correct effect of being an actual toolbar */
2778 #main-window[disablechrome] #TabsToolbar,
2779 #TabsToolbar[tabsontop="false"] {
2780 border-bottom: 1px solid #008484;
2783 /* === BEGIN tabs.inc.css === */
2786 /* --tab-toolbar-navbar-overlap: 1px; */
2787 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2788 /* --tab-min-height: 31px; */
2791 /* --tab-stroke-background-size: auto 100%; */
2795 .tabs-newtab-button,
2796 #TabsToolbar > #new-tab-button {
2801 padding: 1px 4px 2px;
2804 .tabbrowser-tab:first-of-type {
2805 margin-inline-start: 2px;
2808 .tabs-newtab-button,
2809 #TabsToolbar > #new-tab-button,
2810 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2811 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2812 border-radius: 8px 8px 0px 0px;
2813 margin-inline-start: 0;
2816 .tabs-newtab-button:not(:hover),
2817 #TabsToolbar > #new-tab-button:not(:hover),
2818 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2819 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2820 background-color: #C09070;
2823 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2824 .tabbrowser-tab[visuallyselected=true] {
2825 /* position: relative;
2829 .tab-background-middle {
2835 .tab-content[pinned] {
2840 .tab-sharing-icon-overlay,
2846 .tab-sharing-icon-overlay,
2850 margin-inline-end: 3px;
2854 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2857 .tab-icon-image[sharing]:not([selected]),
2858 .tab-sharing-icon-overlay {
2859 animation: 3s linear tab-sharing-icon-pulse infinite;
2862 @keyframes tab-sharing-icon-pulse {
2863 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2864 0%, 16.66%, 83.33%, 100% {
2872 .tab-icon-image[sharing]:not([selected]) {
2873 animation-delay: -1.5s;
2876 .tab-sharing-icon-overlay {
2877 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2878 margin-inline-start: -22px;
2882 .tab-sharing-icon-overlay[sharing="camera"] {
2883 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2886 .tab-sharing-icon-overlay[sharing="microphone"] {
2887 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2890 .tab-sharing-icon-overlay[sharing="screen"] {
2891 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2898 margin-inline-start: -15px;
2899 margin-inline-end: -1px;
2903 .tab-icon-overlay[crashed] {
2904 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2907 .tab-icon-overlay[soundplaying],
2908 .tab-icon-overlay[muted]:not([crashed]),
2909 .tab-icon-overlay[blocked]:not([crashed]) {
2910 border-radius: 10px;
2913 .tab-icon-overlay[soundplaying]:hover,
2914 .tab-icon-overlay[muted]:hover,
2915 .tab-icon-overlay[blocked]:not([crashed]):hover {
2916 background-color: #FFCF00;
2919 .tab-icon-overlay[soundplaying] {
2920 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2923 .tab-icon-overlay[muted]:not([crashed]) {
2924 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2927 .tab-icon-overlay[blocked]:not([crashed]) {
2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2931 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2932 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2936 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2937 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2938 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2941 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2942 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2943 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2946 .tab-throbber[busy] {
2947 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2950 .tab-throbber[progress] {
2951 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2954 @media (min-resolution: 1.1dppx) {
2955 .tab-throbber[busy] {
2956 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2959 .tab-throbber[progress] {
2960 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2964 .tab-throbber[pinned],
2965 .tab-icon-image[pinned] {
2966 margin-inline-start: 2px;
2967 margin-inline-end: 2px;
2971 /* this needs to add up to the 16px of the icon image */
2973 margin-top: 2px !important;
2974 margin-bottom: 2px !important;
2978 margin-inline-start: 4px;
2984 .tab-icon-sound[soundplaying],
2985 .tab-icon-sound[muted],
2986 .tab-icon-sound[blocked] {
2987 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2988 filter: url(chrome://global/skin/filters.svg#fill);
2992 .tab-icon-sound[muted] {
2993 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2996 .tab-icon-sound[blocked] {
2997 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3005 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3006 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3007 transition: opacity .3s linear var(--soundplaying-removal-delay);
3012 .tabs-newtab-button {
3013 /* overlap the tab curves */
3016 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3021 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3025 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3028 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3031 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3034 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3035 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3038 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3039 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3042 .tab-background-start[selected=true]::after,
3043 .tab-background-start[selected=true]::before,
3044 .tab-background-start,
3045 .tab-background-end,
3046 .tab-background-end[selected=true]::after,
3047 .tab-background-end[selected=true]::before {
3050 .tabbrowser-tab:not([visuallyselected=true]),
3051 .tabbrowser-tab:-moz-lwtheme {
3054 /* tabbrowser-tab focus ring */
3055 .tabbrowser-tab:focus {
3056 outline: 1px dotted;
3061 .tabbrowser-tab[visuallyselected="true"] {
3064 /* End selected tab */
3066 /* Tab pointer-events */
3069 pointer-events: none;
3072 .tab-background-middle,
3073 .tabs-newtab-button,
3074 .tab-icon-overlay[soundplaying],
3075 .tab-icon-overlay[muted]:not([crashed]),
3076 .tab-icon-overlay[blocked]:not([crashed]),
3079 pointer-events: auto;
3085 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3086 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3088 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3089 background-color: #E7ADE7;
3092 .tab-label[attention]:not([selected="true"]) {
3096 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3097 background-color: #3333FF;
3101 /* Tab separators */
3103 .tabbrowser-tab::after,
3104 .tabbrowser-tab::before {
3106 margin-inline-start: -1px;
3107 background-image: linear-gradient(transparent 5px,
3109 currentColor calc(100% - 4px),
3110 transparent calc(100% - 4px));
3114 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3115 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3119 /* Also show separators beside the selected tab when dragging it. */
3121 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3122 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3123 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3128 /* New tab button */
3130 .tabs-newtab-button {
3132 /* width: calc(36px + var(--tab-curve-width)); */
3134 @media (min-resolution: 1.1dppx) {
3135 /* image preloading hack from like lowdpi styles */
3136 #tabbrowser-tabs::before {
3139 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3140 .tabs-newtab-button:hover {
3143 .tab-background-middle[selected=true] {
3146 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3147 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3150 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3151 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3155 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3159 /* All tabs menupopup */
3161 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3162 background-color: #402800;
3165 .alltabs-endimage[soundplaying],
3166 .alltabs-endimage[muted],
3167 .alltabs-endimage[blocked] {
3168 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3169 filter: url(chrome://global/skin/filters.svg#fill);
3173 .alltabs-endimage[muted] {
3174 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3177 .alltabs-endimage[blocked] {
3178 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3181 /* === END tabs.inc.css === */
3183 /* Tab DnD indicator */
3184 .tab-drop-indicator {
3185 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3186 margin-bottom: -11px;
3189 /* Tab close button */
3191 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3192 -moz-image-region: auto !important;
3195 .tab-close-button:hover,
3196 .tab-close-button:hover[selected="true"] {
3197 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3198 -moz-image-region: auto !important;
3201 .tab-close-button:hover:active,
3202 .tab-close-button:hover:active[selected="true"] {
3203 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3204 -moz-image-region: auto !important;
3207 .tab-close-button > .button-icon,
3208 .tab-close-button > .button-box > .button-icon,
3209 .tab-close-button > .toolbarbutton-icon {
3210 width: auto !important;
3214 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3216 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3217 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3221 background-origin: border-box;
3224 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3225 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3226 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3227 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3230 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3231 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3234 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3235 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3236 /* transform: scaleX(-1);*/
3239 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3240 transition: 1s background-color ease-out;
3243 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3244 background-color: #008484;
3247 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3248 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3249 /* border-width: 0 2px 0 0;
3250 border-style: solid;
3251 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3254 .tabs-newtab-button > .toolbarbutton-icon {
3256 margin-bottom: -1px;
3259 .tabs-newtab-button,
3260 #TabsToolbar > #new-tab-button,
3261 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3262 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3263 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3264 -moz-image-region: auto;
3267 .tabs-newtab-button,
3268 .tabs-newtab-button:hover,
3269 #TabsToolbar > #new-tab-button,
3270 #TabsToolbar > #new-tab-button:hover {
3273 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3274 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3275 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3276 .tabs-newtab-button:-moz-lwtheme-brighttext,
3277 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3278 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3281 #TabsToolbar > #new-tab-button {
3286 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3289 #alltabs-button:hover,
3290 #alltabs-button:hover:active,
3291 #alltabs-button[open="true"] {
3292 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3295 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3296 #alltabs-button:-moz-lwtheme-brighttext {
3299 #alltabs-button > .toolbarbutton-icon {
3303 #alltabs-button > .toolbarbutton-menu-dropmarker {
3307 /* All tabs menupopup */
3308 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3309 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3310 -moz-image-region: auto;
3313 .alltabs-item[selected="true"] {
3317 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3318 list-style-image: url("chrome://global/skin/icons/loading.png");
3321 @media (min-resolution: 1.1dppx) {
3322 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3323 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3327 toolbarbutton.chevron {
3328 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3331 toolbarbutton.chevron:hover {
3332 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3335 toolbar[brighttext] toolbarbutton.chevron {
3336 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3339 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3340 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3341 transform: scaleX(-1);
3344 toolbarbutton.chevron > .toolbarbutton-text,
3345 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3349 toolbarbutton.chevron > .toolbarbutton-icon {
3353 #sidebar-throbber[loading="true"] {
3354 list-style-image: url("chrome://global/skin/icons/loading.png");
3355 margin-inline-end: 4px;
3358 @media (min-resolution: 1.1dppx) {
3359 #sidebar-throbber[loading="true"] {
3360 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3365 /* Bookmarks toolbar */
3366 #PlacesToolbarDropIndicator {
3367 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3370 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3371 background-color: #008484 !important;
3372 color: #FFCF00 !important;
3375 /* rules for menupopup drop indicators */
3376 .menupopup-drop-indicator-bar {
3378 /* these two margins must together compensate the indicator's height */
3380 margin-bottom: -1px;
3383 .menupopup-drop-indicator {
3384 list-style-image: none;
3386 margin-inline-end: -4em;
3387 background-color: #008484;
3390 /* === BEGIN notification-icons.inc.css === */
3392 #notification-popup-box {
3393 border-radius: 3px 0 0 3px;
3396 margin-inline-end: -5px;
3397 padding-inline-end: 5px;
3400 .notification-anchor-icon,
3401 #blocked-permissions-container > .blocked-permission-icon {
3404 margin-inline-start: 2px;
3407 /* This class can be used alone or in combination with the class defining the
3408 type of icon displayed. This rule must be defined before the others in order
3409 for its list-style-image to be overridden. */
3410 .notification-anchor-icon {
3411 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3414 .notification-anchor-icon:-moz-focusring {
3415 outline: 1px dotted #008484;
3418 @media (min-resolution: 1.1dppx) {
3419 .notification-anchor-icon {
3420 list-style-image: url(chrome://global/skin/icons/information-32.png);
3424 .notification-anchor-icon:not(.plugin-blocked),
3425 #blocked-permissions-container > .blocked-permission-icon {
3426 filter: url(chrome://global/skin/filters.svg#fill);
3430 /* INDIVIDUAL NOTIFICATIONS */
3432 .popup-notification-icon[popupid="web-notifications"],
3433 .desktop-notification-icon {
3434 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3437 .desktop-notification-icon.blocked-permission-icon {
3438 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3442 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3445 .geo-icon.blocked-permission-icon {
3446 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3449 .popup-notification-icon[popupid="geolocation"] {
3450 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3453 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3455 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3458 .indexedDB-icon.blocked-permission-icon {
3459 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3463 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3466 .popup-notification-icon[popupid="password"] {
3467 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3471 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3474 .camera-icon.in-use {
3475 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3478 .camera-icon.blocked-permission-icon {
3479 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3483 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3486 .microphone-icon.in-use {
3487 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3490 .microphone-icon.blocked-permission-icon {
3491 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3494 .popup-notification-icon.microphone-icon {
3495 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3499 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3502 .screen-icon.in-use {
3503 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3506 .screen-icon.blocked-permission-icon {
3507 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3510 #webRTC-preview:not([hidden]) {
3511 display: -moz-stack;
3513 border: 1px solid #A09090;
3519 html|*#webRTC-previewVideo {
3521 /* If we don't set the min-width, width is ignored. */
3526 #webRTC-previewWarning {
3527 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3530 padding-inline-start: calc(1.5em + 16px);
3531 border-top: 1px solid #A09090;
3534 #webRTC-previewWarning > .text-link {
3535 margin-inline-start: 0;
3538 /* This icon has a block sign in it, so we don't need a blocked version. */
3540 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3545 .popup-notification-icon[popupid="drmContentPlaying"],
3547 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3550 .drm-icon:hover:active {
3551 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3554 #eme-notification-icon[firstplay=true] {
3555 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3558 @keyframes emeTeachingMoment {
3559 0% {transform: translateX(0); }
3560 25% {transform: translateX(3px) }
3561 75% {transform: translateX(-3px) }
3562 100% { transform: translateX(0); }
3565 /* INSTALL ADDONS */
3568 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3571 .popup-notification-icon[popupid="xpinstall-disabled"],
3572 .popup-notification-icon[popupid="addon-install-blocked"],
3573 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3574 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3577 .popup-notification-icon[popupid="addon-progress"] {
3578 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3581 .popup-notification-icon[popupid="addon-install-failed"] {
3582 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3585 .popup-notification-icon[popupid="addon-install-confirmation"] {
3586 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3589 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3590 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3593 .popup-notification-icon[popupid="addon-install-complete"] {
3594 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3597 .popup-notification-icon[popupid="addon-install-restart"] {
3598 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3601 .popup-notification-icon[popupid="click-to-play-plugins"] {
3602 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3607 .popup-notification-icon[popupid*="offline-app-requested"],
3608 .popup-notification-icon[popupid="offline-app-usage"] {
3609 list-style-image: url(chrome://global/skin/icons/question-64.png);
3615 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3618 .plugin-icon.plugin-blocked {
3619 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3622 #notification-popup-box[hidden] {
3623 /* Override display:none to make the pluginBlockedNotification animation work
3624 when showing the notification repeatedly. */
3626 visibility: collapse;
3629 #plugins-notification-icon.plugin-blocked[showing] {
3630 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3633 @keyframes pluginBlockedNotification {
3644 .popup-notification-icon[popupid="servicesInstall"] {
3645 list-style-image: url(chrome://browser/skin/social/services-64.png);
3649 list-style-image: url(chrome://browser/skin/social/services-16.png);
3655 list-style-image: url(chrome://browser/skin/translation-16.png);
3656 -moz-image-region: rect(0px, 16px, 16px, 0px);
3659 .translation-icon.in-use {
3660 -moz-image-region: rect(0px, 32px, 16px, 16px);
3663 /* === END notification-icons.inc.css === */
3665 .popup-notification-body[popupid="addon-progress"],
3666 .popup-notification-body[popupid="addon-install-confirmation"] {
3671 .addon-install-confirmation-name {
3675 .addon-webext-perm-header {
3679 .addon-webext-name {
3688 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3689 -moz-image-region: rect(0px, 288px, 32px, 256px);
3692 .addon-toolbar-icon {
3695 list-style-image: url("chrome://browser/skin/Toolbar.png");
3696 -moz-image-region: rect(0, 486px, 18px, 468px);
3699 /* Notification icon box */
3701 .notification-anchor-icon:-moz-focusring {
3702 /* outline: 1px dotted -moz-DialogText;*/
3705 /* Translation infobar */
3707 /* === BEGIN infobar.inc.css === */
3709 notification[value="translation"] .messageImage {
3710 list-style-image: url("chrome://browser/skin/translation-16.png");
3711 -moz-image-region: rect(0, 32px, 16px, 16px);
3714 @media (min-resolution: 1.25dppx) {
3715 notification[value="translation"] .messageImage {
3716 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3717 -moz-image-region: rect(0, 64px, 32px, 32px);
3721 notification[value="translation"][state="translating"] .messageImage {
3722 list-style-image: url("chrome://browser/skin/translating-16.png");
3723 -moz-image-region: auto;
3726 @media (min-resolution: 1.25dppx) {
3727 notification[value="translation"][state="translating"] .messageImage {
3728 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3732 notification[value="translation"] hbox[anonid="details"] {
3736 notification[value="translation"] button,
3737 notification[value="translation"] menulist {
3741 notification[value="translation"] menulist > .menulist-dropmarker {
3744 .translation-menupopup arrowscrollbox {
3748 .translation-attribution {
3750 -moz-box-align: end;
3754 .translation-attribution > label {
3758 .translation-attribution > image {
3762 .translation-welcome-panel {
3766 .translation-welcome-logo {
3769 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3770 -moz-image-region: rect(0, 64px, 32px, 32px);
3773 .translation-welcome-content {
3774 margin-inline-start: 16px;
3777 .translation-welcome-headline {
3782 .translation-welcome-body {
3787 /* === END infobar.inc.css === */
3789 notification[value="translation"] {
3793 .translation-menupopup {
3794 -moz-appearance: none;
3797 /* Bookmarks roots menu-items */
3798 #subscribeToPageMenuitem:not([disabled]),
3799 #subscribeToPageMenupopup {
3800 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3803 #bookmarksToolbarFolderMenu,
3804 #BMB_bookmarksToolbar,
3805 #panelMenu_bookmarksToolbar {
3806 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3807 -moz-image-region: auto;
3810 #BMB_unsortedBookmarks,
3811 #panelMenu_unsortedBookmarks {
3812 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3813 -moz-image-region: auto;
3818 .statuspanel-label {
3821 background: #404000;
3822 border: 1px none #9C9CFF;
3823 border-top-style: solid;
3828 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3829 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3830 border-right-style: solid;
3831 border-top-right-radius: .3em;
3835 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3836 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3837 border-left-style: solid;
3838 border-top-left-radius: .3em;
3842 /* HACK to abolish devily color on main content */
3845 background-color: transparent !important;
3848 /* === BEGIN fullscreen/warning.inc.css === */
3850 html|*.pointerlockfswarning {
3851 align-items: center;
3852 background: rgba(0, 0, 0, 0.9);
3853 border: 2px solid #A09090;
3854 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3857 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3860 html|*.pointerlockfswarning::before {
3862 width: 24px; height: 24px;
3865 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3866 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3867 content: url("chrome://browser/skin/fullscreen/secure.svg");
3870 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3871 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3873 html|*.pointerlockfswarning-domain-text,
3874 html|*.pointerlockfswarning-generic-text {
3876 font-weight: lighter;
3881 html|*.pointerlockfswarning-domain {
3886 html|*#fullscreen-exit-button,
3887 html|*.pointerlockfswarning-exit-button {
3890 border-radius: 300px;
3892 background-color: #C09070;
3896 /* === END fullscreen/warning.inc.css === */
3898 /* === BEGIN ctrlTab.inc.css === */
3903 -moz-appearance: none;
3904 background: rgba(0%,0%,0%,.7);
3907 padding: 20px 10px 10px;
3911 .ctrlTab-favicon[src] {
3912 background-color: #000000;
3918 .ctrlTab-preview-inner > .tabPreview-canvas {
3919 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3922 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3926 .ctrlTab-preview-inner {
3928 border: 2px solid transparent;
3929 border-radius: .5em;
3932 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3933 margin: -10px -10px 0;
3936 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3937 background-color: #000000;
3940 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3942 background-color: #000000;
3944 border-color: #9C9CFF;
3951 /* === END ctrlTab.inc.css === */
3953 /* === BEGIN commandline.inc.css === */
3955 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3956 We are copy/pasting variables from light-theme and dark-theme,
3957 since they aren't loaded in this context (within browser.css). */
3958 :root #developer-toolbar {
3959 --gcli-background-color: #000000; /* --theme-toolbar-background */
3960 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3961 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3962 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3963 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3964 --selection-background: #008484; /* --theme-selection-background */
3965 --selection-color: #000000; /* --theme-selection-color */
3966 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3967 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3970 /* Developer toolbar */
3972 #developer-toolbar {
3973 border-top: 3px solid var(--gcli-background-color);
3974 border-bottom: none;
3977 #developer-toolbar .toolbar-holder {
3978 background-color: #8050B0;
3982 #developer-toolbar .toolbar-holder {
3983 background-color: #8050B0;
3987 #developer-toolbar .toolbar-startcap,
3988 #developer-toolbar .toolbar-endcap{
3989 background-color: #6000CF;
3992 #developer-toolbar {
3994 min-height: 32px; */
3997 #developer-toolbar > toolbarbutton {
3999 background-color: transparent;
4005 .developer-toolbar-button > image {
4006 /* margin: auto 10px; */
4009 #developer-toolbar-toolbox-button > label {
4013 .developer-toolbar-button > .toolbarbutton-icon {
4018 #developer-toolbar-toolbox-button {
4019 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4020 -moz-image-region: rect(0px, 16px, 16px, 0px);
4023 #developer-toolbar-toolbox-button > label {
4027 #developer-toolbar-toolbox-button:hover,
4028 #developer-toolbar-toolbox-button:hover:active,
4029 #developer-toolbar-toolbox-button[checked=true] {
4030 -moz-image-region: rect(0px, 32px, 16px, 16px);
4033 @media (min-resolution: 2dppx) {
4034 #developer-toolbar-toolbox-button {
4035 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4036 -moz-image-region: rect(0px, 32px, 32px, 0px);
4039 #developer-toolbar-toolbox-button:hover,
4040 #developer-toolbar-toolbox-button:hover:active,
4041 #developer-toolbar-toolbox-button[checked=true] {
4042 -moz-image-region: rect(0px, 64px, 32px, 32px);
4048 html|*#gcli-tooltip-frame,
4049 html|*#gcli-output-frame {
4052 background-color: transparent;
4058 background-color: transparent;
4061 .gclitoolbar-input-node,
4062 .gclitoolbar-complete-node {
4064 -moz-box-align: center;
4068 background-color: transparent;
4071 .gclitoolbar-input-node {
4072 /* line-height: 32px;
4073 outline-style: none; */
4074 background-repeat: no-repeat;
4075 background-color: var(--gcli-input-background);
4078 .gclitoolbar-input-node[focused="true"] {
4079 background-color: var(--gcli-input-focused-background);
4082 .gclitoolbar-input-node::before {
4084 display: inline-block;
4085 -moz-box-ordinal-group: 0;
4089 background-image: var(--command-line-image);
4092 .gclitoolbar-input-node[focused="true"]::before {
4093 background-image: var(--command-line-image-focus);
4096 .gclitoolbar-input-node:not([focused="true"]) {
4097 border-color: transparent;
4100 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4101 background-color: var(--selection-background);
4102 color: var(--selection-color);
4105 .gclitoolbar-complete-node {
4107 background-color: transparent;
4110 pointer-events: none;
4113 .gcli-in-incomplete,
4117 .gcli-in-closebrace,
4124 .gcli-in-incomplete {
4125 border-bottom: 2px dotted #8050B0;
4129 border-bottom: 2px dotted #FF0000;
4140 .gcli-in-closebrace {
4144 /* === END commandline.inc.css === */
4146 /* === BEGIN responsivedesign.inc.css === */
4148 /* Responsive Mode */
4150 .browserContainer[responsivemode] {
4151 background-color: #221500;
4152 padding: 0 20px 20px 20px;
4155 .browserStack[responsivemode] {
4156 box-shadow: 0 0 7px #9C9CFF;
4159 .devtools-responsiveui-toolbar {
4160 background: transparent;
4161 /* text color is textColor from dark theme, since no theme is applied to
4162 * the responsive toolbar.
4168 border-bottom-width: 0;
4171 .devtools-responsiveui-textinput {
4172 /* -moz-appearance: none;
4175 border: 1px solid #111;
4182 .devtools-responsiveui-textinput[attention] {
4183 /* border-color: #38ace6;
4184 background: rgba(56,172,230,0.4);*/
4187 .devtools-responsiveui-menulist,
4188 .devtools-responsiveui-toolbarbutton {
4189 -moz-box-align: center;
4191 /* min-height: 22px;*/
4192 /* margin: 0 3px; */
4195 .devtools-responsiveui-menulist .menulist-editable-box {
4196 background-color: transparent;
4199 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4204 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4205 /* background: hsla(212,7%,57%,.35);*/
4208 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4213 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4214 -moz-box-orient: horizontal;
4217 .devtools-responsiveui-menulist:-moz-focusring,
4218 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4219 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4220 outline-offset: -4px;*/
4223 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4227 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4228 /* border-color: hsla(210,8%,5%,.6);
4229 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4230 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); */
4233 .devtools-responsiveui-menulist[open=true],
4234 .devtools-responsiveui-toolbarbutton[open=true],
4235 .devtools-responsiveui-toolbarbutton[checked=true] {
4236 /* border-color: hsla(210,8%,5%,.6) !important;
4237 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4238 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); */
4241 .devtools-responsiveui-toolbarbutton[checked=true] {
4242 /* color: hsl(208,100%,60%); */
4245 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4246 /* background-color: transparent !important;*/
4249 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4250 /* background-color: hsla(210,8%,5%,.2) !important;*/
4253 .devtools-responsiveui-menulist > .menulist-label-box {
4257 .devtools-responsiveui-menulist > .menulist-dropmarker {
4258 /* display: -moz-box;
4259 background-color: transparent;
4260 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4261 -moz-box-align: center;
4266 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4269 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4270 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4273 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4274 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4277 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4278 /* padding: 0 1px;*/
4279 -moz-box-align: stretch;
4282 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4283 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4284 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4285 -moz-box-align: center;
4289 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4290 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4294 .devtools-responsiveui-close {
4295 list-style-image: url("chrome://devtools/skin/close.svg");
4298 .devtools-responsiveui-close:hover {
4299 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4302 .devtools-responsiveui-close > image {
4306 .devtools-responsiveui-rotate {
4307 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4308 -moz-image-region: rect(0px,16px,16px,0px);
4311 .devtools-responsiveui-rotate:hover {
4312 -moz-image-region: rect(0px,32px,16px,16px);
4315 @media (min-resolution: 2dppx) {
4316 .devtools-responsiveui-rotate {
4317 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4320 .devtools-responsiveui-rotate:hover {
4321 -moz-image-region: rect(0px,64px,32px,32px);
4325 .devtools-responsiveui-touch {
4326 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4327 -moz-image-region: rect(0px,16px,16px,0px);
4330 .devtools-responsiveui-touch:hover,
4331 .devtools-responsiveui-touch[checked],
4332 .devtools-responsiveui-touch[checked]:hover {
4333 -moz-image-region: rect(0px,32px,16px,16px);
4336 @media (min-resolution: 2dppx) {
4337 .devtools-responsiveui-touch {
4338 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4339 -moz-image-region: rect(0px,32px,32px,0px);
4342 .devtools-responsiveui-touch:hover,
4343 .devtools-responsiveui-touch[checked],
4344 .devtools-responsiveui-touch[checked]:hover {
4345 -moz-image-region: rect(0px,64px,32px,32px);
4349 .devtools-responsiveui-screenshot {
4350 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4351 -moz-image-region: rect(0px,16px,16px,0px);
4354 .devtools-responsiveui-screenshot:hover {
4355 -moz-image-region: rect(0px,32px,16px,16px);
4358 @media (min-resolution: 2dppx) {
4359 .devtools-responsiveui-screenshot {
4360 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4363 .devtools-responsiveui-screenshot:hover {
4364 -moz-image-region: rect(0px,64px,32px,32px);
4368 .devtools-responsiveui-resizebarV {
4372 transform: translate(12px, -12px);
4373 background-size: cover;
4374 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4377 .devtools-responsiveui-resizebarH {
4381 transform: translate(-12px, 12px);
4382 background-size: cover;
4383 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4386 .devtools-responsiveui-resizehandle {
4390 transform: translate(12px, 12px);
4391 background-size: cover;
4392 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4395 /* FxOS custom mode with additional buttons and phone look'n feel */
4397 /* Hide devtools manual resizer */
4398 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4399 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4400 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4404 /* Gives responsive mode a phone look'n feel */
4405 .browserStack[responsivemode].fxos-mode {
4406 padding: 60px 15px 0;
4408 border-radius: 25px / 20px;
4409 border-bottom-left-radius: 0;
4410 border-bottom-right-radius: 0;
4411 border: 1px solid #FFFFFF;
4412 border-bottom-width: 0;
4414 background-color: #353535;
4416 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4418 background-image: linear-gradient(to right, #111 11%, #333 56%);
4422 .devtools-responsiveui-hardware-buttons {
4423 -moz-appearance: none;
4426 border: 1px solid #FFFFFF;
4427 border-bottom-left-radius: 25px;
4428 border-bottom-right-radius: 25px;
4429 border-top-width: 0;
4431 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4433 background-image: linear-gradient(to right, #111 11%, #333 56%);
4436 .devtools-responsiveui-home-button {
4437 -moz-user-focus: ignore;
4440 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4443 .devtools-responsiveui-sleep-button {
4444 -moz-user-focus: ignore;
4445 -moz-appearance: none;
4446 /* compensate browserStack top padding */
4454 border: 1px solid #444;
4455 border-top-right-radius: 12px;
4456 border-top-left-radius: 12px;
4457 border-bottom-color: transparent;
4459 background-image: linear-gradient(to top, #111 11%, #333 56%);
4462 .devtools-responsiveui-sleep-button:hover:active {
4463 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4466 .devtools-responsiveui-volume-buttons {
4470 .devtools-responsiveui-volume-up-button,
4471 .devtools-responsiveui-volume-down-button {
4472 -moz-user-focus: ignore;
4473 -moz-appearance: none;
4474 border: 1px solid red;
4478 border: 1px solid #444;
4479 border-right-color: transparent;
4481 background-image: linear-gradient(to right, #111 11%, #333 56%);
4484 .devtools-responsiveui-volume-up-button:hover:active,
4485 .devtools-responsiveui-volume-down-button:hover:active {
4486 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4489 .devtools-responsiveui-volume-up-button {
4490 border-top-left-radius: 12px;
4493 .devtools-responsiveui-volume-down-button {
4494 border-bottom-left-radius: 12px;
4497 @media (min-resolution: 2dppx) {
4498 .devtools-responsiveui-resizebarV {
4499 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4502 .devtools-responsiveui-resizebarH {
4503 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4506 .devtools-responsiveui-resizehandle {
4507 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4511 /* === END responsivedesign.inc.css === */
4513 /* === including indicator.css is done at the start of the file === */
4517 #developer-toolbar-toolbox-button[error-count]:before {
4521 background-color: #FF0000;
4523 margin-inline-end: 5px;
4526 /* === BEGIN plugin-doorhanger.inc.css === */
4529 * Plugin Doorhanger Styles
4532 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4533 padding: 6px 1px 2px;
4536 .click-to-play-plugins-notification-center-box {
4539 .plugin-popupnotification-centeritem:nth-child(odd) {
4540 /* background-color: rgba(0,0,0,0.1);*/
4543 .center-item-label {
4545 text-overflow: ellipsis;
4548 .center-item-warning-icon {
4549 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4550 background-repeat: no-repeat;
4553 margin-inline-start: 6px;
4556 .click-to-play-plugins-notification-button-container {
4559 .click-to-play-popup-button {
4563 .click-to-play-plugins-notification-description-box {
4567 padding-bottom: 3px;
4570 .click-to-play-plugins-outer-description {
4574 .click-to-play-plugins-notification-link,
4579 .messageImage[value="plugin-hidden"] {
4580 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4583 /* Keep any changes to this style in sync with pluginProblem.css */
4584 notification.pluginVulnerable {
4587 notification.pluginVulnerable .messageImage {
4588 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4591 /* === END plugin-doorhanger.inc.css === */
4593 /* === BEGIN customizeMode.inc.css === */
4595 /* Customization mode */
4598 --drag-drop-transition-duration: .3s;
4601 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4602 background-repeat: no-repeat;
4603 background-position: right top;
4604 background-attachment: fixed;
4605 background-color: transparent;
4606 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4607 var(--toolbox-rect-height), 0),
4608 linear-gradient(to bottom,
4609 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4610 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4611 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4612 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4613 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4614 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4617 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4621 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4622 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4623 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4628 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4629 pointer-events: none;
4632 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4633 #PanelUI-contents > .panel-customization-placeholder {
4634 -moz-outline-radius: 2.5px;
4635 outline: 1px dashed transparent;
4638 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4639 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4640 -moz-box-ordinal-group: 0;
4645 outline-offset: -2px;
4646 pointer-events: none;
4652 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4653 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4654 offset from the bottom effectively the same as other targets (-2px). */
4655 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4659 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4660 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4661 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4662 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4666 /* Most target outlines are shown on hover and drag over but the panel menu uses
4667 placeholders instead. */
4668 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4669 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4670 /* nav-bar and panel outlines are always shown */
4671 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4672 outline-color: currentColor;
4675 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4676 transition: outline-color 250ms linear;
4679 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4680 transition: outline-color 250ms linear;
4681 outline-color: var(--panel-separator-color);
4684 #PanelUI-contents > .panel-customization-placeholder {
4686 outline-offset: -5px;
4689 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4691 /* padding-left: 10px;
4692 padding-right: 10px;*/
4695 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4699 #customization-container {
4700 background-color: #000000;
4704 #customization-palette,
4705 #customization-empty {
4706 padding: 0 15px 15px;
4709 #customization-header {
4711 line-height: 1.75em;
4714 margin: 25px 25px 12px;
4715 padding-bottom: 12px;
4716 border-bottom: 1px solid #A09090;
4719 #customization-panel-container {
4720 padding: 10px 10px 0px;
4723 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4724 #customization-footer {
4725 /*background-color: rgb(236,236,236);*/
4728 #customization-footer {
4729 border-top: 1px solid #9C9CFF;
4733 .customizationmode-button {
4737 .customizationmode-button:hover {
4740 .customizationmode-button > .box-inherit {
4743 .customizationmode-button > .button-icon {
4746 .customizationmode-button:not([type=menu]) > .button-text {
4749 .customizationmode-button > .button-menu-dropmarker {
4754 .customizationmode-button[checked] {
4755 background-color: #008484;
4758 .customizationmode-button[checked]:hover:not([disabled]),
4759 .customizationmode-button:hover:not([disabled]) {
4760 background-color: #FFCF00;
4763 .customizationmode-button[checked]:hover:active:not([disabled]),
4764 .customizationmode-button:hover:active:not([disabled]),
4765 .customizationmode-button[open] {
4766 background-color: #FF9F00;
4769 .customizationmode-button[disabled="true"] {
4772 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4773 .customizationmode-button > .button-box > .button-icon {
4777 #customization-titlebar-visibility-button {
4778 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4779 -moz-image-region: rect(0, 16px, 16px, 0);
4782 #customization-titlebar-visibility-button:hover {
4783 -moz-image-region: rect(16px, 16px, 32px, 0);
4786 #customization-titlebar-visibility-button > .button-box {
4788 padding-bottom: 1px;
4791 #customization-titlebar-visibility-button:hover:active > .button-box {
4796 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4797 #customization-titlebar-visibility-button > .button-box > .button-text {
4798 /* Sadly, button.css thinks its margins are perfect for everyone. */
4799 margin-inline-start: 5px !important;
4802 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4806 background-image: url("chrome://browser/content/default-theme-icon.svg");
4807 background-size: contain;
4810 #customization-titlebar-visibility-button > .button-box > .button-icon {
4811 vertical-align: middle;
4814 #customization-titlebar-visibility-button[checked] {
4815 -moz-image-region: rect(0, 32px, 16px, 16px);
4816 background-color: #008484;
4819 #customization-titlebar-visibility-button[checked]:hover {
4820 -moz-image-region: rect(16px, 32px, 32px, 16px);
4821 background-color: #FFCF00;
4824 #customization-titlebar-visibility-button[checked]:hover:active {
4825 background-color: #FF9F00;
4828 @media (min-resolution: 1.1dppx) {
4829 #customization-titlebar-visibility-button {
4830 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4831 -moz-image-region: rect(0, 48px, 48px, 0);
4834 #customization-titlebar-visibility-button:hover {
4835 -moz-image-region: rect(48px, 48px, 96px, 0);
4838 #customization-titlebar-visibility-button[checked] {
4839 -moz-image-region: rect(0, 96px, 48px, 48px);
4842 #customization-titlebar-visibility-button[checked]:hover {
4843 -moz-image-region: rect(48px, 96px, 96px, 48px);
4847 #main-window[customize-entered] #customization-panel-container {
4848 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4849 background-position: left top;
4850 background-repeat: repeat;
4851 background-size: auto;
4852 background-attachment: fixed;
4855 toolbarpaletteitem[place="toolbar"] {
4856 transition: border-width 250ms ease-in-out;
4859 toolbarpaletteitem[mousedown] {
4860 outline: 1px solid #008484;
4861 cursor: -moz-grabbing;
4865 .panel-customization-placeholder,
4866 toolbarpaletteitem[place="palette"],
4867 toolbarpaletteitem[place="panel"] {
4868 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4871 #customization-palette {
4872 transition: opacity .3s ease-in-out;
4876 #customization-palette[showing="true"] {
4880 toolbarpaletteitem toolbarbutton[disabled] {
4881 /* color: inherit !important;*/
4884 toolbarpaletteitem[notransition].panel-customization-placeholder,
4885 toolbarpaletteitem[notransition][place="toolbar"],
4886 toolbarpaletteitem[notransition][place="palette"],
4887 toolbarpaletteitem[notransition][place="panel"] {
4891 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4892 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4893 toolbarpaletteitem > toolbaritem.panel-wide-item,
4894 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4895 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4898 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4899 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4900 transform: scale(1.3);
4903 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4904 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4905 transform: scale(1.1);
4908 /* Override the toolkit styling for items being dragged over. */
4909 toolbarpaletteitem[place="toolbar"] {
4910 border-left-width: 0;
4911 border-right-width: 0;
4916 #customization-palette:not([hidden]) {
4917 margin-bottom: 25px;
4920 toolbarpaletteitem[place="palette"]:-moz-focusring,
4921 toolbarpaletteitem[place="panel"]:-moz-focusring,
4922 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4926 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4927 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4928 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4929 /* Delay adding the focusring back until after the transform transition completes. */
4930 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4931 outline: 1px dotted;
4932 -moz-outline-radius: 2.5px;
4935 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4936 outline-offset: -5px;
4939 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4940 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4941 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4942 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4946 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4947 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4957 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4958 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4962 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4963 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4966 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4967 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4971 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4972 -moz-box-pack: center;
4976 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4977 margin-inline-end: 5px;
4980 #customization-palette > toolbarpaletteitem > label {
4986 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4987 -moz-box-orient: vertical;
4988 /* Make the panel padding uniform across all platforms due to the
4989 styling of the section headers and footer. */
4993 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4998 .customization-lwtheme-menu-theme {
4999 -moz-appearance: none;
5002 padding-inline-end: 5px;
5004 padding-inline-start: 0;
5007 .customization-lwtheme-menu-theme[defaulttheme] {
5008 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
5011 .customization-lwtheme-menu-theme[active="true"] {
5012 background-color: #008484;
5015 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5019 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5023 #customization-lwtheme-menu-header,
5024 #customization-lwtheme-menu-recommended {
5029 #customization-lwtheme-menu-header,
5030 #customization-lwtheme-menu-recommended,
5031 #customization-lwtheme-menu-footer {
5032 background-color: #A09090;
5034 margin-right: -10px;
5038 #customization-lwtheme-menu-header {
5040 border-top-right-radius: 3px;
5041 border-top-left-radius: 3px;
5044 #customization-lwtheme-menu-recommended {
5047 #customization-lwtheme-menu-footer {
5048 margin-bottom: -10px;
5049 border-bottom-right-radius: 3px;
5050 border-bottom-left-radius: 3px;
5053 .customization-lwtheme-menu-footeritem {
5054 -moz-appearance: none;
5056 background-color: #C09070;
5058 border: 1px solid transparent;
5064 .customization-lwtheme-menu-footeritem:hover {
5065 background-color: #FFCF00;
5068 .customization-lwtheme-menu-footeritem:first-child {
5071 /* === END customizeMode.inc.css === */
5073 /* === BEGIN customizeTip.inc.css === */
5075 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5082 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5083 border: 1px solid #9C9CFF;
5087 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5088 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5091 .customization-tipPanel-infoBox {
5092 margin: 20px 25px 25px;
5094 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5095 background-repeat: no-repeat;
5098 .customization-tipPanel-content {
5104 .customization-tipPanel-em {
5109 .customization-tipPanel-contentImage {
5111 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5119 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5120 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5123 .customization-tipPanel-link {
5124 -moz-appearance: none;
5125 background: transparent;
5133 .customization-tipPanel-link > .button-box > .button-text {
5134 margin: 0 !important;
5137 .customization-tipPanel-closeBox > .close-icon {
5138 -moz-appearance: none;
5140 margin-inline-end: -25px;
5143 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5144 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5145 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5148 /* === END customizeTip.inc.css === */
5151 * This next rule is a hack to disable subpixel anti-aliasing on all
5152 * labels during the customize mode transition. Subpixel anti-aliasing
5153 * on Windows with Direct2D layers acceleration is particularly slow to
5154 * paint, so this hack is how we sidestep that performance bottleneck.
5156 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5157 transform: perspective(0.01px);
5160 #main-window[customize-entered] > #tab-view-deck {
5161 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5162 background-attachment: fixed;
5165 #main-window[customization-lwtheme]:-moz-lwtheme {
5166 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5167 background-repeat: repeat;
5168 background-attachment: fixed;
5169 background-position: left top;
5172 #main-window[customize-entered] #browser-bottombox,
5173 #main-window[customize-entered] #customization-container {
5174 border-left: 1px solid #9C9CFF;
5175 border-right: 1px solid #9C9CFF;
5176 background-clip: padding-box;
5179 #main-window[customize-entered] #browser-bottombox {
5180 border-bottom: 1px solid #9C9CFF;
5183 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5187 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5191 /* End customization mode */
5193 /* Private browsing indicators */
5196 * Currently, we have two places where we put private browsing indicators on
5197 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5198 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5199 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5200 * want the bottom border of the image to line up with the bottom of the window
5201 * caption buttons. That's why there's so much special-casing going on in here.
5203 .private-browsing-indicator {
5205 pointer-events: none;
5208 #private-browsing-indicator-titlebar {
5213 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5217 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5221 #TabsToolbar > .private-browsing-indicator {
5222 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5223 margin-inline-start: 4px;
5227 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5228 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5229 * min/max/close window buttons.
5231 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5232 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5233 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5234 margin-inline-end: 4px;
5240 /* This one is for Linux */
5241 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5242 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5246 /* End private browsing indicators */
5248 /* === BEGIN UITour.inc.css === */
5252 #UITourHighlightContainer {
5253 -moz-appearance: none;
5255 background-color: transparent;
5256 /* This is a buffer to compensate for the movement in the "wobble" effect,
5257 and for the box-shadow of #UITourHighlight. */
5262 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5263 border-radius: 40px;
5264 border: 1px solid #9C9CFF;
5265 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5266 on Linux without an X compositor where opacity is either 0 or 1. */
5267 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5272 #UITourTooltipBody {
5273 -moz-box-align: start;
5276 #UITourTooltipTitleContainer {
5277 -moz-box-align: start;
5278 margin-bottom: 10px;
5281 #UITourTooltipIcon {
5284 margin-inline-end: 10px;
5287 #UITourTooltipTitle,
5288 #UITourTooltipDescription {
5292 #UITourTooltipTitle {
5298 #UITourTooltipDescription {
5299 margin-inline-start: 0;
5300 margin-inline-end: 0;
5302 line-height: 1.8rem;
5303 margin-bottom: 0; /* Override global.css */
5306 #UITourTooltipClose {
5308 -moz-appearance: none;
5310 background-color: transparent;
5312 margin-inline-start: 4px;
5316 #UITourTooltipClose > .toolbarbutton-text {
5320 #UITourTooltipButtons {
5322 background-color: rgba(0,0,0,.2);
5323 border-top: 1px solid rgba(0,0,0,.4);
5324 margin: 10px -16px -16px;
5328 #UITourTooltipButtons > label,
5329 #UITourTooltipButtons > button {
5333 #UITourTooltipButtons > label:first-child,
5334 #UITourTooltipButtons > button:first-child {
5335 margin-inline-start: 0;
5338 #UITourTooltipButtons > label:last-child,
5339 #UITourTooltipButtons > button:last-child {
5340 margin-inline-end: 0;
5343 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5346 margin-inline-end: 5px;
5349 #UITourTooltipButtons > label,
5350 #UITourTooltipButtons > button .button-text {
5354 #UITourTooltipButtons > button:not(.button-link) {
5355 -moz-appearance: none;
5356 background-color: #C09070;
5357 border-radius: 3000px;
5361 transition-property: background-color, color;
5362 transition-duration: 150ms;
5365 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5366 background-color: #FFCF00;
5370 #UITourTooltipButtons > label,
5371 #UITourTooltipButtons > button.button-link {
5372 -moz-appearance: none;
5373 background: transparent;
5376 color: rgba(0,0,0,0.35);
5378 padding-right: 10px;
5381 #UITourTooltipButtons > button.button-link:hover {
5385 /* The primary button gets the same color as the customize button. */
5386 #UITourTooltipButtons > button.button-primary {
5387 background-color: #A06060; /* LCARS default button background color */
5390 padding-right: 30px;
5393 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5394 background-color: #FFCF00;
5398 /* Notification overrides for Heartbeat UI */
5400 notification.heartbeat {
5401 background-color: #A09090;
5405 @keyframes pulse-onshow {
5408 transform: scale(1.0);
5412 transform: scale(1.1);
5415 transform: scale(1.0);
5418 transform: scale(1.1);
5421 transform: scale(1.0);
5425 @keyframes pulse-twice {
5427 transform: scale(1.1);
5430 transform: scale(0.8);
5433 transform: scale(1);
5437 .messageText.heartbeat {
5439 /* text-shadow: none; */
5440 margin-inline-start: 0px;
5443 .messageImage.heartbeat {
5446 margin-inline-start: 8px;
5447 margin-inline-end: 8px;
5450 .messageImage.heartbeat.pulse-onshow {
5451 animation-name: pulse-onshow;
5452 animation-duration: 1.5s;
5453 animation-iteration-count: 1;
5454 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5457 .messageImage.heartbeat.pulse-twice {
5458 animation-name: pulse-twice;
5459 animation-duration: 1s;
5460 animation-iteration-count: 2;
5461 animation-timing-function: linear;
5464 /* Learn More link styles */
5465 .heartbeat > .text-link {
5467 margin-inline-start: 0px;
5470 .heartbeat > .text-link:hover {
5472 text-decoration: none;
5475 .heartbeat > .text-link:hover:active {
5479 /* Heartbeat UI Rating Star Classes */
5480 .heartbeat > #star-rating-container {
5482 /* margin-bottom: 4px;*/
5485 .heartbeat > #star-rating-container > #star5 {
5486 -moz-box-ordinal-group: 5;
5489 .heartbeat > #star-rating-container > #star4 {
5490 -moz-box-ordinal-group: 4;
5493 .heartbeat > #star-rating-container > #star3 {
5494 -moz-box-ordinal-group: 3;
5497 .heartbeat > #star-rating-container > #star2 {
5498 -moz-box-ordinal-group: 2;
5501 .heartbeat > #star-rating-container > .star-x {
5502 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5504 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5505 margin-inline-end: 4px !important;
5510 .heartbeat > #star-rating-container > .star-x:hover,
5511 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5512 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5515 /* === END UITour.inc.css === */
5517 #UITourTooltipButtons {
5519 * Override the --arrowpanel-padding so the background extends
5520 * to the sides and bottom of the panel.
5523 margin-right: -10px;
5524 margin-bottom: -10px;
5527 /* === BEGIN contextmenu.inc.css === */
5529 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5532 #context-navigation > .menuitem-iconic {
5534 -moz-box-pack: center;
5535 -moz-box-align: center;
5538 #context-navigation > .menuitem-iconic[disabled="true"] {
5539 background-color: transparent;
5542 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5543 -moz-appearance: none;
5546 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5550 filter: url(chrome://global/skin/filters.svg#fill);
5555 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5559 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5563 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5567 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5570 #context-bookmarkpage {
5571 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5574 #context-bookmarkpage[starred=true] {
5575 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5578 #context-back:-moz-locale-dir(rtl),
5579 #context-forward:-moz-locale-dir(rtl),
5580 #context-reload:-moz-locale-dir(rtl) {
5581 transform: scaleX(-1);
5584 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5585 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5591 #context-media-eme-learnmore {
5592 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5595 #context-media-eme-learnmore {
5596 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5599 /* === END contextmenu.inc.css === */
5601 #context-navigation {
5604 #context-sep-navigation {
5605 /* margin-top: -4px; */
5608 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5613 .webextension-popup-browser {
5614 border-radius: inherit;
5617 .contentSelectDropdown-ingroup > .menu-iconic-text {
5618 padding-inline-start: 20px;
5621 #ContentSelectDropdown > menupopup {
5622 background-color: #000000;
5623 -moz-border-top-colors: #A09090;
5624 -moz-border-right-colors: #A09090;
5625 -moz-border-bottom-colors: #A09090;
5626 -moz-border-left-colors: #A09090;
5629 #ContentSelectDropdown > menupopup > menucaption,
5630 #ContentSelectDropdown > menupopup > menuitem {
5633 /* font: -moz-list;*/
5636 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5637 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5638 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5639 with 4px being the preferred padding size. */
5640 padding-top: .3333em;
5641 padding-bottom: .3333em;
5644 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5648 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5650 background-color: unset;
5653 #ContentSelectDropdown > menupopup > menucaption {
5654 background-color: buttonface;
5657 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5661 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5662 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5663 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5664 font-size with 11px being the preferred padding size. */
5665 padding-top: .9167em;
5666 padding-bottom: .9167em;