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");
111 -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 #page-action-send-to-device-button {
132 list-style-image: url("chrome://browser/skin/device-mobile.svg");
133 -moz-context-properties: fill;
137 .page-action-sendToDevice-device[clientType=mobile] {
138 list-style-image: url("chrome://browser/skin/device-mobile.svg");
139 -moz-context-properties: fill;
143 .page-action-sendToDevice-device[clientType=desktop] {
144 list-style-image: url("chrome://browser/skin/device-desktop.svg");
145 -moz-context-properties: fill;
149 #page-action-sendToDevice-fxa-button {
150 list-style-image: url("chrome://browser/skin/sync.svg");
151 -moz-context-properties: fill;
155 /* === END browser.inc.css === */
158 /*--backbutton-urlbar-overlap: 5px;*/
160 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
161 --forwardbutton-width: 27px;
162 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
163 --forwardbutton-width: 25px;*/
165 --identity-box-verified-background-color: #000000;
167 --panel-separator-color: #A09090;
168 --arrowpanel-hover: #FFCF00;
169 --arrowpanel-active: #FF9F00;
170 --arrowpanel-dimmed: #402000;
171 --arrowpanel-dimmed-further: #794900;
172 --arrowpanel-dimmed-even-further: #603000;
174 --urlbar-separator-color: #9C9CFF;
178 -moz-box-orient: vertical; /* for flex hack */
182 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
185 /* ::::: primary toolbar ::::: */
187 .toolbar-primary > .toolbar-box > .toolbar-holder {
188 background-color: #A09090;
191 .toolbar-primary > .toolbar-box > .toolbar-startcap,
192 .toolbar-primary > .toolbar-box > .toolbar-endcap {
193 background-color: #9C9CFF;
196 /* Hides the titlebar-placeholder underneath the window caption buttons when we
197 are not autohiding the menubar. */
198 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
202 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
203 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
204 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
205 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
206 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
207 /* margin-top: 3px;*/
210 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
211 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
212 /* margin-top: var(--space-above-tabbar);*/
215 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
216 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
217 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
222 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
223 /* 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 */
230 #navigator-toolbox::after {
233 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
234 /*border-bottom: 1px solid ThreeDShadow;*/
237 #navigator-toolbox > toolbar {
240 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
243 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
244 overflow: -moz-hidden-unscrollable;
246 transition: min-height 170ms ease-out, max-height 170ms ease-out;
249 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
252 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
255 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
256 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
257 /* Indent also due to non-applicable aero rule in original Windows theme. */
258 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
259 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
261 background-color: #6000CF;
265 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
266 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
267 background-color: #8050B0;
271 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
275 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
279 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
280 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
285 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
286 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
287 #titlebar-buttonbox > .titlebar-button {
293 /* Position the toolbar above the bottom of background tabs */
298 #personal-bookmarks {
299 /* min-height: 24px; */
302 #PersonalToolbar > #home-button {
303 -moz-box-orient: horizontal;
306 #PersonalToolbar > #home-button > .toolbarbutton-text {
310 #print-preview-toolbar:not(:-moz-lwtheme) {
311 /* -moz-appearance: toolbox; */
314 #browser-bottombox:not(:-moz-lwtheme) {
317 /* ::::: titlebar ::::: */
321 background-color: #6000CF;
324 #titlebar:-moz-window-inactive {
325 background-color: #8050B0;
329 #main-window[sizemode="normal"] > #titlebar {
334 #main-window[sizemode="maximized"] > #titlebar {
338 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
339 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
340 #main-window[sizemode="normal"] > #titlebar,
341 #main-window[sizemode="maximized"] > #titlebar {
343 /* There is a margin-bottom set to -23 by code. */
347 /* The button box must appear on top of the navigator-toolbox in order for
348 * click and hover mouse events to work properly for the button in the restored
349 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
350 * can swallow those events. It will also place the buttons above the fog on
351 * themes with Aero Glass.
354 #main-window[sizemode="maximized"] #titlebar-buttonbox {
355 -moz-appearance: none;
358 margin-inline-end: 3px;
362 .titlebar-placeholder[type="appmenu-button"] {
366 .titlebar-placeholder[type="caption-buttons"] {
370 /* titlebar command buttons */
372 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
375 #titlebar-min:hover {
376 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
380 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
383 #titlebar-max:hover {
384 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
387 #main-window[sizemode="maximized"] #titlebar-max {
388 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
391 #main-window[sizemode="maximized"] #titlebar-max:hover {
392 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
396 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
399 #titlebar-close:hover {
400 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
403 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
404 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
405 #titlebar-fullscreen-button {
406 -moz-appearance: none;
407 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
408 -moz-image-region: rect(0px, 16px, 16px, 0px);
411 #titlebar-fullscreen-button:hover {
412 -moz-image-region: rect(0px, 32px, 16px, 16px);
415 @media (min-resolution: 2dppx) {
416 #titlebar-fullscreen-button {
417 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
418 -moz-image-region: rect(0px, 32px, 32px, 0px);
421 #titlebar-fullscreen-button:hover {
422 -moz-image-region: rect(0px, 64px, 32px, 32px);
428 /* ::::: bookmark buttons ::::: */
430 toolbarbutton.bookmark-item:not(.subviewbutton),
431 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
434 -moz-appearance: none;
435 border: 1px solid transparent;*/
438 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
439 /* border-color: var(--toolbarbutton-hover-bordercolor);
440 background: var(--toolbarbutton-hover-background);*/
443 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
444 /* border-color: var(--toolbarbutton-active-bordercolor);
445 box-shadow: var(--toolbarbutton-active-boxshadow);
446 background: var(--toolbarbutton-active-background);*/
449 .bookmark-item > .toolbarbutton-icon,
450 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
453 margin-inline-start: 1px;
454 margin-inline-end: 2px;
459 /* Force the display of the label for bookmarks */
460 .bookmark-item > .toolbarbutton-text,
461 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
462 display: -moz-box !important;
465 .bookmark-item > .toolbarbutton-menu-dropmarker {
469 #bookmarks-toolbar-placeholder {
470 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
471 -moz-box-orient: horizontal;
474 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
475 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
476 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
479 /* ----- BOOKMARK STAR ANIMATION ----- */
481 @keyframes animation-bookmarkAdded {
482 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
483 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
485 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
488 @keyframes animation-bookmarkPulse {
489 from { transform: scale(1); }
490 50% { transform: scale(1.3); }
491 to { transform: scale(1); }
494 #bookmarked-notification-container {
503 #bookmarked-notification {
504 background-size: 16px;
505 background-position: center;
506 background-repeat: no-repeat;
512 #bookmarked-notification-dropmarker-anchor {
517 #bookmarked-notification-dropmarker-icon {
523 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
524 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
525 animation: animation-bookmarkAdded 800ms;
526 animation-timing-function: ease, ease, ease;
529 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
530 list-style-image: none !important;
533 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
535 animation: animation-bookmarkPulse 300ms;
536 animation-delay: 600ms;
537 animation-timing-function: ease-out;
540 /* ::::: bookmark menus ::::: */
543 menuitem.bookmark-item {
548 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
553 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
554 padding-inline-start: 0px;
557 /* ::::: bookmark items ::::: */
560 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
561 -moz-image-region: auto;
564 .bookmark-item[container] {
565 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
566 -moz-image-region: auto;
569 .bookmark-item[container][open] {
570 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
571 -moz-image-region: auto;
574 .bookmark-item[container][livemark] {
575 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
576 -moz-image-region: auto;
579 .bookmark-item[container][livemark] .bookmark-item {
580 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
581 -moz-image-region: rect(0px, 16px, 16px, 0px);
584 .bookmark-item[container][livemark] .bookmark-item[visited] {
585 -moz-image-region: rect(0px, 32px, 16px, 16px);
588 .bookmark-item[container][query] {
589 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
590 -moz-image-region: auto;
593 .bookmark-item[query][tagContainer] {
594 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
595 -moz-image-region: auto;
598 .bookmark-item[query][dayContainer] {
599 list-style-image: url("chrome://communicator/skin/history/calendar.png");
600 -moz-image-region: auto;
603 .bookmark-item[query][hostContainer] {
604 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
605 -moz-image-region: auto;
608 .bookmark-item[query][hostContainer][open] {
609 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
610 -moz-image-region: auto;
613 .bookmark-item[cutting] > .toolbarbutton-icon,
614 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
618 .bookmark-item[cutting] > .toolbarbutton-text,
619 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
623 /* ::::: primary toolbar buttons ::::: */
625 /* === BEGIN toolbarbuttons.inc.css === */
627 /* Whole section of this included file: */
628 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
629 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
630 #social-share-button, #open-file-button, #find-button, #developer-button,
631 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
632 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
633 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
634 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
635 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
636 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
640 -moz-image-region: rect(0, 36px, 18px, 18px);
643 #back-button:hover:not([disabled="true"]) {
644 -moz-image-region: rect(18px, 36px, 36px, 18px);
647 #back-button[disabled="true"] {
648 -moz-image-region: rect(36px, 36px, 54px, 18px);
652 -moz-image-region: rect(0, 72px, 18px, 54px);
655 #forward-button:hover:not([disabled="true"]) {
656 -moz-image-region: rect(18px, 72px, 36px, 54px);
659 #forward-button[disabled="true"] {
660 -moz-image-region: rect(36px, 72px, 54px, 54px);
663 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
664 #forward-button:-moz-locale-dir(rtl) {
665 transform: scaleX(-1);
668 #home-button[cui-areatype="toolbar"] {
669 -moz-image-region: rect(0, 126px, 18px, 108px);
672 #home-button[cui-areatype="toolbar"]:hover {
673 -moz-image-region: rect(18px, 126px, 36px, 108px);
676 #bookmarks-menu-button[cui-areatype="toolbar"] {
677 -moz-image-region: rect(0, 144px, 18px, 126px);
680 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
681 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
682 -moz-image-region: rect(18px, 144px, 36px, 126px);
685 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
686 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
687 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
688 background-color: transparent !important;
691 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
692 -moz-image-region: rect(0, 162px, 18px, 144px);
695 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
696 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
697 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
698 /* When starred and clicked (for edit/delete dialog),
699 * then only the menubutton-button itself is open, but not the whole menubutton. */
700 -moz-image-region: rect(18px, 162px, 36px, 144px);
703 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
704 -moz-image-region: rect(0, 630px, 18px, 612px);
707 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
709 -moz-box-align: center;
712 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
713 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
714 -moz-image-region: rect(18px, 630px, 36px, 612px);
717 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
718 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
721 padding-inline-start: 2px;
722 padding-inline-end: 0px;
725 #history-panelmenu[cui-areatype="toolbar"] {
726 -moz-image-region: rect(0, 180px, 18px, 162px);
729 #history-panelmenu[cui-areatype="toolbar"]:hover,
730 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
731 -moz-image-region: rect(18px, 180px, 36px, 162px);
734 #downloads-button[cui-areatype="toolbar"] {
735 -moz-image-region: rect(0, 198px, 18px, 180px);
738 #downloads-button[cui-areatype="toolbar"]:hover,
739 #downloads-button[cui-areatype="toolbar"][open="true"] {
740 -moz-image-region: rect(18px, 198px, 36px, 180px);
743 #add-ons-button[cui-areatype="toolbar"] {
744 -moz-image-region: rect(0, 216px, 18px, 198px);
747 #add-ons-button[cui-areatype="toolbar"]:hover {
748 -moz-image-region: rect(18px, 216px, 36px, 198px);
751 #open-file-button[cui-areatype="toolbar"] {
752 -moz-image-region: rect(0, 234px, 18px, 216px);
755 #open-file-button[cui-areatype="toolbar"]:hover {
756 -moz-image-region: rect(18px, 234px, 36px, 216px);
759 #save-page-button[cui-areatype="toolbar"] {
760 -moz-image-region: rect(0, 252px, 18px, 234px);
763 #save-page-button[cui-areatype="toolbar"]:hover {
764 -moz-image-region: rect(18px, 252px, 36px, 234px);
767 #sync-button[cui-areatype="toolbar"] {
768 -moz-image-region: rect(0, 792px, 18px, 774px);
771 #sync-button[cui-areatype="toolbar"]:hover {
772 -moz-image-region: rect(18px, 792px, 36px, 774px);
775 #containers-panelmenu[cui-areatype="toolbar"] {
776 -moz-image-region: rect(0, 810px, 18px, 792px);
779 #containers-panelmenu[cui-areatype="toolbar"]:hover {
780 -moz-image-region: rect(18px, 810px, 36px, 792px);
783 #feed-button[cui-areatype="toolbar"] {
784 -moz-image-region: rect(0, 288px, 18px, 270px);
787 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
788 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
789 -moz-image-region: rect(18px, 288px, 36px, 270px);
792 #feed-button[cui-areatype="toolbar"][disabled="true"] {
793 -moz-image-region: rect(36px, 288px, 54px, 270px);
796 #social-share-button[cui-areatype="toolbar"] {
797 -moz-image-region: rect(0px, 306px, 18px, 288px);
800 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
801 #social-share-button[cui-areatype="toolbar"][open="true"] {
802 -moz-image-region: rect(18px, 306px, 36px, 288px);
805 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
806 -moz-image-region: rect(36px, 306px, 54px, 288px);
809 #characterencoding-button[cui-areatype="toolbar"] {
810 -moz-image-region: rect(0, 324px, 18px, 306px);
813 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
814 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
815 -moz-image-region: rect(18px, 324px, 36px, 306px);
818 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
819 -moz-image-region: rect(36px, 324px, 54px, 306px);
822 #new-window-button[cui-areatype="toolbar"] {
823 -moz-image-region: rect(0, 342px, 18px, 324px);
826 #new-window-button[cui-areatype="toolbar"]:hover {
827 -moz-image-region: rect(18px, 342px, 36px, 324px);
830 #e10s-button[cui-areatype="toolbar"] {
831 -moz-image-region: rect(0, 342px, 18px, 324px);
834 #e10s-button[cui-areatype="toolbar"]:hover {
835 -moz-image-region: rect(18px, 342px, 36px, 324px);
838 #e10s-button > .toolbarbutton-icon {
839 transform: scaleY(-1);
842 #new-tab-button[cui-areatype="toolbar"] {
843 -moz-image-region: rect(0, 360px, 18px, 342px);
846 #new-tab-button[cui-areatype="toolbar"]:hover {
847 -moz-image-region: rect(18px, 360px, 36px, 342px);
850 #privatebrowsing-button[cui-areatype="toolbar"] {
851 -moz-image-region: rect(0, 378px, 18px, 360px);
854 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
855 -moz-image-region: rect(18px, 378px, 36px, 360px);
858 #find-button[cui-areatype="toolbar"] {
859 -moz-image-region: rect(0, 396px, 18px, 378px);
862 #find-button[cui-areatype="toolbar"]:hover {
863 -moz-image-region: rect(18px, 396px, 36px, 378px);
866 #print-button[cui-areatype="toolbar"] {
867 -moz-image-region: rect(0, 414px, 18px, 396px);
870 #print-button[cui-areatype="toolbar"]:hover {
871 -moz-image-region: rect(18px, 414px, 36px, 396px);
874 #fullscreen-button[cui-areatype="toolbar"] {
875 -moz-image-region: rect(0, 432px, 18px, 414px);
878 #fullscreen-button[cui-areatype="toolbar"]:hover {
879 -moz-image-region: rect(18px, 432px, 36px, 414px);
882 #developer-button[cui-areatype="toolbar"] {
883 -moz-image-region: rect(0, 450px, 18px, 432px);
886 #developer-button[cui-areatype="toolbar"]:hover,
887 #developer-button[cui-areatype="toolbar"][open="true"] {
888 -moz-image-region: rect(18px, 450px, 36px, 432px);
891 #preferences-button[cui-areatype="toolbar"] {
892 -moz-image-region: rect(0, 468px, 18px, 450px);
895 #preferences-button[cui-areatype="toolbar"]:hover {
896 -moz-image-region: rect(18px, 468px, 36px, 450px);
899 #PanelUI-menu-button {
900 -moz-image-region: rect(0, 486px, 18px, 468px);
903 #PanelUI-menu-button:hover,
904 #PanelUI-menu-button[open="true"] {
905 -moz-image-region: rect(18px, 486px, 36px, 468px);
908 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
909 -moz-image-region: rect(0, 504px, 18px, 486px);
912 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
913 -moz-image-region: rect(18px, 504px, 36px, 486px);
916 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
917 -moz-image-region: rect(36px, 504px, 54px, 486px);
920 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
921 -moz-image-region: rect(0, 522px, 18px, 504px);
924 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
925 -moz-image-region: rect(18px, 522px, 36px, 504px);
928 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
929 -moz-image-region: rect(36px, 522px, 54px, 504px);
932 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
933 -moz-image-region: rect(0, 540px, 18px, 522px);
936 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
937 -moz-image-region: rect(18px, 540px, 36px, 522px);
940 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
941 -moz-image-region: rect(36px, 540px, 54px, 522px);
944 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
945 -moz-image-region: rect(0, 558px, 18px, 540px);
948 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
949 -moz-image-region: rect(18px, 558px, 36px, 540px);
952 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
953 -moz-image-region: rect(36px, 558px, 54px, 540px);
956 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
957 -moz-image-region: rect(0, 576px, 18px, 558px);
960 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
961 -moz-image-region: rect(18px, 576px, 36px, 558px);
964 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
965 -moz-image-region: rect(36px, 576px, 54px, 558px);
968 #nav-bar-overflow-button {
969 -moz-image-region: rect(0, 612px, 18px, 594px);
972 #nav-bar-overflow-button:hover,
973 #nav-bar-overflow-button[open="true"] {
974 -moz-image-region: rect(18px, 612px, 36px, 594px);
977 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
978 transform: scaleX(-1);
982 -moz-image-region: rect(0, 648px, 18px, 630px);
985 #tabview-button:hover {
986 -moz-image-region: rect(18px, 648px, 36px, 630px);
989 #email-link-button[cui-areatype="toolbar"] {
990 -moz-image-region: rect(0, 666px, 18px, 648px);
993 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
994 -moz-image-region: rect(18px, 666px, 36px, 648px);
997 #email-button[cui-areatype="toolbar"][disabled="true"] {
998 -moz-image-region: rect(36px, 666px, 54px, 648px);
1001 #sidebar-button[cui-areatype="toolbar"] {
1002 -moz-image-region: rect(0, 684px, 18px, 666px);
1005 #sidebar-button[cui-areatype="toolbar"]:hover {
1006 -moz-image-region: rect(18px, 684px, 36px, 666px);
1009 #panic-button[cui-areatype="toolbar"] {
1010 -moz-image-region: rect(0, 702px, 18px, 684px);
1013 #panic-button[cui-areatype="toolbar"]:hover,
1014 #panic-button[cui-areatype="toolbar"][open] {
1015 -moz-image-region: rect(18px, 702px, 36px, 684px);
1018 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1019 transform: scaleX(-1);
1022 #webide-button[cui-areatype="toolbar"] {
1023 -moz-image-region: rect(0, 738px, 18px, 720px);
1026 #webide-button[cui-areatype="toolbar"]:hover {
1027 -moz-image-region: rect(18px, 738px, 36px, 720px);
1031 fill: currentColor !important;
1034 /* === END toolbarbuttons.inc.css === */
1036 /* === BEGIN menupanel.inc.css === */
1038 /* Menu panel and palette styles */
1040 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1041 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1042 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1043 #social-share-button, #open-file-button, #find-button, #developer-button,
1044 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1045 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1046 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1047 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1048 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1049 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1050 #social-share-button, #open-file-button, #find-button, #developer-button,
1051 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1052 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1053 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1054 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1055 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1058 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1059 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1060 #social-share-button, #open-file-button, #find-button, #developer-button,
1061 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1062 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1063 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1064 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1065 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1066 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1067 #social-share-button, #open-file-button, #find-button, #developer-button,
1068 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1069 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1070 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1071 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1072 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1073 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1074 #social-share-button, #open-file-button, #find-button, #developer-button,
1075 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1076 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1077 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1078 #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,
1079 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1080 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1081 #social-share-button, #open-file-button, #find-button, #developer-button,
1082 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1083 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1084 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1085 #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 {
1086 filter: url(chrome://global/skin/filters.svg#fill);
1090 #home-button[cui-areatype="menu-panel"],
1091 toolbarpaletteitem[place="palette"] > #home-button {
1092 -moz-image-region: rect(0px, 128px, 32px, 96px);
1095 #bookmarks-menu-button[cui-areatype="menu-panel"],
1096 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1097 -moz-image-region: rect(0px, 192px, 32px, 160px);
1100 #history-panelmenu[cui-areatype="menu-panel"],
1101 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1102 -moz-image-region: rect(0px, 224px, 32px, 192px);
1105 #downloads-button[cui-areatype="menu-panel"],
1106 toolbarpaletteitem[place="palette"] > #downloads-button {
1107 -moz-image-region: rect(0px, 256px, 32px, 224px);
1110 #add-ons-button[cui-areatype="menu-panel"],
1111 toolbarpaletteitem[place="palette"] > #add-ons-button {
1112 -moz-image-region: rect(0px, 288px, 32px, 256px);
1115 #open-file-button[cui-areatype="menu-panel"],
1116 toolbarpaletteitem[place="palette"] > #open-file-button {
1117 -moz-image-region: rect(0px, 320px, 32px, 288px);
1120 #save-page-button[cui-areatype="menu-panel"],
1121 toolbarpaletteitem[place="palette"] > #save-page-button {
1122 -moz-image-region: rect(0px, 352px, 32px, 320px);
1125 #sync-button[cui-areatype="menu-panel"],
1126 toolbarpaletteitem[place="palette"] > #sync-button {
1127 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1130 #containers-panelmenu[cui-areatype="menu-panel"],
1131 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1132 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1135 #feed-button[cui-areatype="menu-panel"],
1136 toolbarpaletteitem[place="palette"] > #feed-button {
1137 -moz-image-region: rect(0px, 416px, 32px, 384px);
1140 #social-share-button[cui-areatype="menu-panel"],
1141 toolbarpaletteitem[place="palette"] > #social-share-button {
1142 -moz-image-region: rect(0px, 448px, 32px, 416px);
1145 #characterencoding-button[cui-areatype="menu-panel"],
1146 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1147 -moz-image-region: rect(0px, 480px, 32px, 448px);
1150 #new-window-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #new-window-button {
1152 -moz-image-region: rect(0px, 512px, 32px, 480px);
1155 #e10s-button[cui-areatype="menu-panel"],
1156 toolbarpaletteitem[place="palette"] > #e10s-button {
1157 -moz-image-region: rect(0px, 512px, 32px, 480px);
1160 #new-tab-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #new-tab-button {
1162 -moz-image-region: rect(0px, 544px, 32px, 512px);
1165 #privatebrowsing-button[cui-areatype="menu-panel"],
1166 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1167 -moz-image-region: rect(0px, 576px, 32px, 544px);
1170 #tabview-button[cui-areatype="menu-panel"],
1171 toolbarpaletteitem[place="palette"] > #tabview-button {
1172 -moz-image-region: rect(0px, 608px, 32px, 576px);
1175 #find-button[cui-areatype="menu-panel"],
1176 toolbarpaletteitem[place="palette"] > #find-button {
1177 -moz-image-region: rect(0px, 640px, 32px, 608px);
1180 #print-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #print-button {
1182 -moz-image-region: rect(0px, 672px, 32px, 640px);
1185 #fullscreen-button[cui-areatype="menu-panel"],
1186 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1187 -moz-image-region: rect(0px, 704px, 32px, 672px);
1190 #developer-button[cui-areatype="menu-panel"],
1191 toolbarpaletteitem[place="palette"] > #developer-button {
1192 -moz-image-region: rect(0px, 736px, 32px, 704px);
1195 #preferences-button[cui-areatype="menu-panel"],
1196 toolbarpaletteitem[place="palette"] > #preferences-button {
1197 -moz-image-region: rect(0px, 768px, 32px, 736px);
1200 #email-link-button[cui-areatype="menu-panel"],
1201 toolbarpaletteitem[place="palette"] > #email-link-button {
1202 -moz-image-region: rect(0, 800px, 32px, 768px);
1205 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1206 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1207 -moz-image-region: rect(64px, 800px, 96px, 768px);
1210 #sidebar-button[cui-areatype="menu-panel"],
1211 toolbarpaletteitem[place="palette"] > #sidebar-button {
1212 -moz-image-region: rect(0, 864px, 32px, 832px);
1215 #panic-button[cui-areatype="menu-panel"],
1216 toolbarpaletteitem[place="palette"] > #panic-button {
1217 -moz-image-region: rect(0, 896px, 32px, 864px);
1220 #webide-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #webide-button {
1222 -moz-image-region: rect(0px, 960px, 32px, 928px);
1225 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1226 -moz-image-region: rect(0, 832px, 32px, 800px);
1229 /* Wide panel control icons */
1231 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1232 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1233 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1234 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1235 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1238 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1239 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1240 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1241 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1242 filter: url(chrome://global/skin/filters.svg#fill);
1246 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1247 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1248 -moz-image-region: rect(0px, 32px, 16px, 16px);
1251 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1252 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1253 -moz-image-region: rect(0px, 48px, 16px, 32px);
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1258 -moz-image-region: rect(0px, 64px, 16px, 48px);
1261 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1262 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1263 -moz-image-region: rect(0px, 80px, 16px, 64px);
1266 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1267 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1268 -moz-image-region: rect(0px, 96px, 16px, 80px);
1271 #add-share-provider {
1272 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1273 -moz-image-region: rect(0px, 96px, 16px, 80px);
1276 /* === END menupanel.inc.css === */
1278 .toolbarbutton-1:not([type="menu-button"]) {
1279 -moz-box-orient: vertical;
1283 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1289 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1290 .toolbarbutton-1[disabled="true"]:hover:active,
1291 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1295 .toolbarbutton-1:hover:active,
1296 .toolbarbutton-1[open="true"],
1297 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1299 padding-bottom: 0px;
1300 padding-inline-start: 3px;
1301 padding-inline-end: 1px;
1304 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1305 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1306 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1307 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1308 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1311 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1312 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1315 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1316 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1319 .toolbarbutton-1 > .toolbarbutton-icon,
1320 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1324 #nav-bar .toolbarbutton-1,
1325 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1328 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1329 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1330 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1333 #nav-bar #PanelUI-menu-button {
1334 /* padding-inline-start: 7px;
1335 padding-inline-end: 5px;*/
1338 #nav-bar .toolbarbutton-1[type=panel],
1339 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1340 /* padding-left: 5px;
1341 padding-right: 5px;*/
1344 #nav-bar .toolbarbutton-1 > menupopup {
1345 /* margin-top: -3px;*/
1348 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1352 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1353 /* padding-inline-end: 0;*/
1356 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1357 /* padding-inline-start: 0;
1358 -moz-box-align: center;*/
1361 .findbar-button > .toolbarbutton-text,
1362 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1363 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1364 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1365 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1366 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1367 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1368 /* padding: 2px 6px;
1370 border-color: transparent;
1371 transition-property: background-color, border-color;
1372 transition-duration: 150ms;*/
1375 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1376 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1377 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1378 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1382 /* Help SDK icons fit: */
1383 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1384 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1388 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1389 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1393 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1394 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1395 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
1396 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1397 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1398 /* padding-inline-end: 17px;*/
1401 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1402 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
1403 /* horizontal padding + border + icon width */
1404 /* max-width: 43px;*/
1407 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1410 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1413 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1416 #nav-bar .toolbaritem-combined-buttons {
1417 /* margin-left: 2px;
1418 margin-right: 2px;*/
1421 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1426 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1427 #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 {
1433 margin-inline-end: -1px;
1437 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1440 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1441 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1442 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1443 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1444 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1445 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1446 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1447 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1448 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1451 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1452 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1453 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1454 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1455 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1456 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1459 #TabsToolbar .toolbarbutton-1,
1460 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1461 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1462 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1465 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1466 #TabsToolbar .toolbarbutton-1[open],
1467 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1468 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1469 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1472 /* unified back/forward button */
1475 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1478 #forward-button > menupopup {
1479 margin-top: 1px !important;
1482 #forward-button > .toolbarbutton-icon {
1483 background-clip: padding-box !important;
1484 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1485 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1489 margin-inline-start: -4px !important;
1494 border-radius: 0 10000px 10000px 0;
1495 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1498 #forward-button:-moz-locale-dir(rtl) {
1499 border-radius: 10000px 0 0 10000px;
1502 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1503 transition: margin-left 150ms ease-out;
1506 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1507 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1510 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1511 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1512 transition-delay: 100s;
1515 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1516 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1517 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1521 /* padding-top: 3px !important;
1522 padding-bottom: 3px !important;
1523 padding-inline-start: 5px !important;
1524 padding-inline-end: 0 !important;*/
1527 border-radius: 10000px;
1531 margin-bottom: -2px;
1534 #back-button:-moz-locale-dir(rtl) {
1537 #back-button > menupopup {
1538 margin-top: -1px !important;
1541 #back-button > .toolbarbutton-icon {
1542 border-radius: 10000px !important;
1543 background-clip: padding-box !important;
1544 /* background-color: hsla(210,25%,98%,.08) !important;
1545 padding: 6px !important;
1546 border-style: none !important;
1547 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1548 0 0 0 1px hsla(210,4%,10%,.25);*/
1549 transition-property: background-color, box-shadow !important;
1550 transition-duration: 250ms !important;
1553 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1554 /* background-color: hsla(210,4%,10%,.08) !important;*/
1557 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1558 #back-button[open="true"] > .toolbarbutton-icon {
1559 /* background-color: hsla(210,4%,10%,.12) !important;
1560 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1561 0 0 0 1px hsla(210,4%,10%,.25),
1562 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1565 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1566 transform: scaleX(-1);
1569 #forward-button > .toolbarbutton-menu-dropmarker,
1570 #back-button > .toolbarbutton-menu-dropmarker {
1575 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1576 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1577 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1580 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1581 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1582 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1585 #home-button.bookmark-item {
1586 list-style-image: url("chrome://browser/skin/Toolbar.png");
1589 #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),
1590 #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),
1591 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1592 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1593 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1594 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1595 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1598 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1601 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1602 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1603 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1607 #downloads-button > .toolbarbutton-icon {
1611 /* tabview menu item */
1614 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1615 -moz-image-region: rect(1px, 89px, 17px, 73px);
1618 #menu_tabview[groups="0"] {
1619 -moz-image-region: rect(1px, 17px, 17px, 1px);
1622 #menu_tabview[groups="1"] {
1623 -moz-image-region: rect(1px, 35px, 17px, 19px);
1626 #menu_tabview[groups="2"] {
1627 -moz-image-region: rect(1px, 53px, 17px, 37px);
1630 #menu_tabview[groups="3"] {
1631 -moz-image-region: rect(1px, 71px, 17px, 55px);
1634 /* undo close tab menu item */
1635 #alltabs_undoCloseTab {
1636 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1639 @media (min-resolution: 1.1dppx) {
1640 #alltabs_undoCloseTab {
1641 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1643 #alltabs_undoCloseTab > .toolbarbutton-icon {
1648 /* zoom control text (reset) button special case: */
1650 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1651 /* To make this line up with the icons, it needs the same height (18px) +
1652 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1653 * increase in text sizes would break things...
1658 /* ::::: fullscreen window controls ::::: */
1663 -moz-appearance: none;
1665 /* margin: 0 !important;
1666 padding: 6px 12px;*/
1670 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1673 #minimize-button:hover {
1674 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1678 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1681 #restore-button:hover {
1682 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1685 #minimize-button:hover,
1686 #restore-button:hover {
1687 /* background-color: hsla(0, 0%, 0%, .12);*/
1690 #minimize-button:hover:active,
1691 #restore-button:hover:active {
1692 /* background-color: hsla(0, 0%, 0%, .22);*/
1696 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1699 #close-button:hover {
1700 /* background-color: hsl(355, 86%, 49%);*/
1701 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1704 #close-button:hover:active {
1705 /* background-color: hsl(355, 82%, 69%);*/
1708 /* ::::: Location Bar ::::: */
1711 .searchbar-textbox {
1714 margin-inline-start: 3px;
1718 /* make color as light as possible to deal with dark non-domain parts */
1722 #urlbar:-moz-lwtheme,
1723 .searchbar-textbox:-moz-lwtheme {
1724 /* background-color: rgba(255,255,255,.8);
1725 @navbarTextboxCustomBorder@
1729 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1730 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1731 /* background-color: rgba(255,255,255,.9);*/
1734 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1735 .searchbar-textbox:-moz-lwtheme[focused] {
1736 /* background-color: white;*/
1739 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1740 /* border-inline-start: none;
1744 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1745 /* border-top-left-radius: 0;
1746 border-bottom-left-radius: 0; */
1749 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1750 /* border-top-right-radius: 0;
1751 border-bottom-right-radius: 0; */
1754 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1755 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1756 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1759 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1760 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1761 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1762 transform: scaleX(-1);
1765 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1766 -moz-box-direction: reverse;
1769 html|*.urlbar-input:-moz-lwtheme::placeholder,
1770 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1775 -moz-box-orient: horizontal;
1776 -moz-box-align: stretch;
1779 .urlbar-textbox-container {
1780 -moz-box-align: stretch;
1784 margin-inline-start: 0;
1788 #urlbar-display-box {
1789 padding-inline-start: 4px;
1790 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1791 border-inline-end: 1px solid var(--urlbar-separator-color);
1792 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1793 border-image-slice: 1; */
1797 -moz-box-align: center;
1802 /* 16x16 icon with border-box sizing */
1807 /* ::::: URL Bar Zoom Reset Button ::::: */
1809 @keyframes urlbar-zoom-reset-pulse {
1811 transform: scale(0);
1814 transform: scale(1.5);
1817 transform: scale(1.0);
1821 #urlbar-zoom-button {
1822 /* -moz-appearance: none;*/
1823 /* color: inherit;*/
1826 .search-go-container {
1830 .search-go-container > .search-go-button {
1834 #urlbar-search-footer {
1835 border-top: 1px solid var(--panel-separator-color);
1838 #urlbar-search-settings {
1841 #urlbar-search-settings:hover {
1844 #urlbar-search-settings:hover:active {
1847 #urlbar-search-splitter {
1848 /* The splitter width should equal the location and search bars' combined
1849 neighboring margin and border width. */
1854 background: transparent;
1858 border-inline-end: 1px solid #9C9CFF;
1859 margin-inline-end: 3px;
1862 margin-inline-start: 0;
1866 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1868 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1869 border-bottom: 1px solid var(--panel-separator-color);
1870 background-color: #000000;
1872 padding-inline-start: 44px;
1873 padding-inline-end: 6px;
1874 background-image: url("chrome://browser/skin/info.svg");
1875 background-clip: padding-box;
1876 background-position: 20px center;
1877 background-repeat: no-repeat;
1878 background-size: 16px 16px;
1881 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1882 background-position: right 20px center;
1885 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1890 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1891 margin-inline-start: 0;
1894 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1895 -moz-appearance: none;
1900 margin-inline-start: 10px;
1903 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1906 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1909 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1912 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1915 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1918 min-width: calc(54px + 11ch);
1923 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1924 background-color: var(--identity-box-verified-background-color);
1927 #identity-box:-moz-focusring {
1928 outline: 1px dotted;
1929 outline-offset: -1px;
1932 #identity-box.verifiedDomain:-moz-focusring,
1933 #identity-box.verifiedIdentity:-moz-focusring {
1934 outline-color: #000000;
1937 /* Location bar dropmarker */
1939 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1940 background-color: transparent;
1943 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1944 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1945 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1948 transition: opacity 0.15s ease;
1951 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1955 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1959 .urlbar-history-dropmarker:hover {
1962 .urlbar-history-dropmarker:hover:active,
1963 .urlbar-history-dropmarker[open="true"] {
1966 /* page proxy icon */
1967 /* === BEGIN identity-block.inc.css === */
1969 /* === BEGIN identity-block/icons.inc.css === */
1972 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1975 #identity-box:hover > #identity-icon:not(.no-hover),
1976 #identity-box[open=true] > #identity-icon {
1977 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1980 #identity-box.grantedPermissions > #identity-icon {
1981 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1984 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1985 #identity-box.grantedPermissions[open=true] > #identity-icon {
1986 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1989 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1990 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1993 #tracking-protection-icon {
1994 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1997 #tracking-protection-icon[state="loaded-tracking-content"] {
1998 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2002 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2003 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2004 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2005 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2006 visibility: visible;
2009 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2010 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2011 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2012 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2013 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2014 visibility: visible;
2017 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2018 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2019 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2020 visibility: visible;
2023 /* === END identity-block/icons.inc.css === */
2030 /* The padding-left and padding-right transitions handle the delayed hiding of
2031 the forward button when hovered. */
2032 transition: background-color 150ms ease, padding-left, padding-right;
2035 #identity-box:-moz-locale-dir(ltr) {
2036 border-top-right-radius: 0;
2037 border-bottom-right-radius: 0;
2040 #identity-box:-moz-locale-dir(rtl) {
2041 border-top-left-radius: 0;
2042 border-bottom-left-radius: 0;
2045 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2046 border-inline-end: 1px solid #008484;
2049 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2053 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2054 border-inline-end: 1px solid #9C9CFF;
2057 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2062 #identity-icon-labels:-moz-locale-dir(ltr) {
2066 #identity-icon-labels:-moz-locale-dir(rtl) {
2070 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2071 /* border-radius: 0;
2072 padding-inline-start: 2px; */
2073 padding-inline-end: 2px;
2074 margin-inline-end: 1px;
2077 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2078 padding-inline-start: 2px;
2081 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2082 /* Forward button hiding is delayed when hovered, so we should use the same
2083 delay for the identity box. We handle both horizontal paddings (for LTR and
2084 RTL), the latter two delays here are for padding-left and padding-right. */
2085 transition-delay: 0s, 100s, 100s;
2088 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2089 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2090 padding-inline-start: 2.01px;
2093 /* MAIN IDENTITY ICON */
2100 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2104 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2105 -moz-image-region: inherit;
2106 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2111 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2112 -moz-image-region: inherit;
2113 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2123 margin-inline-start: -16px;
2128 #identity-box[sharing="camera"] > #sharing-icon {
2129 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2132 #identity-box[sharing="microphone"] > #sharing-icon {
2133 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2136 #identity-box[sharing="screen"] > #sharing-icon {
2137 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2141 #identity-box[sharing] > #sharing-icon {
2143 animation-delay: -1.5s;
2146 #identity-box[sharing] > #identity-icon,
2148 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2151 @keyframes identity-box-sharing-icon-pulse {
2152 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2153 0%, 16.66%, 83.33%, 100% {
2161 /* TRACKING PROTECTION ICON */
2163 #tracking-protection-icon {
2166 margin-inline-start: 2px;
2167 margin-inline-end: 0;
2170 #tracking-protection-icon[animate] {
2171 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2174 #tracking-protection-icon:not([state]) {
2175 margin-inline-end: -18px;
2176 pointer-events: none;
2178 /* Only animate the shield in, when it disappears hide it immediately. */
2182 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2183 visibility: collapse;
2186 /* CONNECTION ICON */
2191 margin-inline-start: 2px;
2192 visibility: collapse;
2195 /* === END identity-block.inc.css === */
2197 #page-proxy-favicon {
2198 -moz-image-region: rect(0, 16px, 16px, 0);
2201 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2202 /* margin-inline-end: 1px;*/
2205 #identity-box:hover > #page-proxy-favicon {
2206 -moz-image-region: rect(0, 32px, 16px, 16px);
2209 #identity-box:hover:active > #page-proxy-favicon,
2210 #identity-box[open=true] > #page-proxy-favicon {
2211 -moz-image-region: rect(0, 48px, 16px, 32px);
2214 #identity-box:hover {
2215 background-color: #FFCF00;
2219 #identity-box:hover:active,
2220 #identity-box[open=true] {
2221 background-color: #FF9F00;
2225 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2226 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2227 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2228 background-color: #A09090;
2232 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2233 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2234 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2238 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2239 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2240 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2241 background-color: #008484;
2245 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2246 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2247 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2251 #identity-box:hover > image,
2252 #identity-box:hover:active > image,
2253 #identity-box[open=true] > image {
2254 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2259 /* === BEGIN autocomplete.inc.css === */
2261 #PopupAutoComplete > richlistbox > richlistitem {
2266 padding: 0px 1px 0px 1px;
2269 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2270 margin-inline-start: 4px;
2271 margin-inline-end: 0;
2274 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2276 margin-inline-start: 4px;
2279 #PopupAutoComplete > richlistbox {
2283 /* Login form autocompletion */
2284 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2286 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2289 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2290 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2293 /* Insecure field warning */
2294 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2295 background-color: var(--arrowpanel-dimmed);
2296 border-bottom: 1px solid var(--panel-separator-color);
2297 padding-bottom: 4px;
2301 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2302 background-color: var(--arrowpanel-dimmed-further);
2306 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2311 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2315 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2316 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2319 /* === END autocomplete.inc.css === */
2321 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2322 border-top: 1px solid #A09090;
2325 #treecolAutoCompleteImage {
2330 .autocomplete-richlistbox {
2334 .autocomplete-richlistitem {
2339 border: 1px solid transparent;
2352 border: 1px solid transparent;
2363 html|span.ac-emphasize-text-title,
2364 html|span.ac-emphasize-text-tag,
2365 html|span.ac-emphasize-text-url {
2369 .ac-type-icon[type=bookmark] {
2370 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2373 .ac-type-icon[type=bookmark][selected][current] {
2374 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2377 .ac-result-type-bookmark {
2378 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2379 -moz-image-region: rect(0px 16px 16px 0px);
2384 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2385 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2388 .ac-type-icon[type=keyword],
2389 .ac-site-icon[type=searchengine] {
2390 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2393 .ac-type-icon[type=keyword][selected],
2394 .ac-site-icon[type=searchengine][selected] {
2395 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2398 .ac-result-type-tag {
2399 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2404 .ac-type-icon[type=switchtab],
2405 .ac-type-icon[type=remotetab] {
2406 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2409 .ac-type-icon[type=switchtab][selected],
2410 .ac-type-icon[type=remotetab][selected] {
2411 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2414 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2415 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2421 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2422 border-top: 1px solid #9C9CFF;
2425 /* combined go/reload/stop button in location bar */
2428 #urlbar-reload-button,
2429 #urlbar-stop-button {
2431 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2432 /* margin: 0 9px; */
2433 margin-inline-start: 0px;
2434 border-inline-start: 1px solid var(--urlbar-separator-color);
2435 border-image: linear-gradient(transparent 15%,
2436 var(--urlbar-separator-color) 15%,
2437 var(--urlbar-separator-color) 85%,
2439 border-image-slice: 1;
2442 /* XXX: temporary for Photon preview changes */
2445 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2448 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2449 border-top-left-radius: 0px;
2450 border-bottom-left-radius: 0px;
2453 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2454 border-top-right-radius: 0px;
2455 border-bottom-right-radius: 0px;
2458 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2459 #urlbar-reload-button:not(:hover) {
2460 border-inline-start-style: none;
2461 padding-inline-start: 3px;
2465 #urlbar-reload-button {
2466 -moz-image-region: rect(0px, 14px, 14px, 0px);
2469 #reload-button[disabled=true],
2470 #urlbar-reload-button[disabled=true] {
2471 -moz-image-region: rect(28px, 14px, 42px, 0px);
2474 #reload-button:not([disabled=true]):hover,
2475 #urlbar-reload-button:not([disabled=true]):hover {
2476 -moz-image-region: rect(14px, 14px, 28px, 0px);
2479 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2480 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2481 transform: scaleX(-1);
2485 -moz-image-region: rect(0, 42px, 14px, 28px);
2488 #urlbar-go-button:hover {
2489 -moz-image-region: rect(14px, 42px, 28px, 28px);
2492 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2493 transform: scaleX(-1);
2497 #urlbar-stop-button {
2498 -moz-image-region: rect(0px, 28px, 14px, 14px);
2502 #urlbar-stop-button:hover {
2503 -moz-image-region: rect(14px, 28px, 28px, 14px);
2506 @media (min-resolution: 1.1dppx) {
2510 #urlbar-reload-button,
2511 #urlbar-stop-button {
2512 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2515 #reload-button > .toolbarbutton-icon,
2516 #stop-button > .toolbarbutton-icon,
2517 #urlbar-go-button > .toolbarbutton-icon,
2518 #urlbar-reload-button > .toolbarbutton-icon,
2519 #urlbar-stop-button > .toolbarbutton-icon {
2524 -moz-image-region: rect(0, 84px, 28px, 56px);
2527 #urlbar-go-button:hover {
2528 -moz-image-region: rect(28px, 84px, 56px, 56px);
2531 #urlbar-go-button:hover:active {
2532 -moz-image-region: rect(56px, 84px, 84px, 56px);
2536 #urlbar-reload-button {
2537 -moz-image-region: rect(0, 28px, 28px, 0);
2540 #reload-button:not([disabled]):hover,
2541 #urlbar-reload-button:not([disabled]):hover {
2542 -moz-image-region: rect(28px, 28px, 56px, 0);
2545 #reload-button:not([disabled]):hover:active,
2546 #urlbar-reload-button:not([disabled]):hover:active {
2547 -moz-image-region: rect(56px, 28px, 84px, 0);
2551 #urlbar-stop-button {
2552 -moz-image-region: rect(0, 56px, 28px, 28px);
2555 #stop-button:not([disabled]):hover,
2556 #urlbar-stop-button:not([disabled]):hover {
2557 -moz-image-region: rect(28px, 56px, 56px, 28px);
2560 #stop-button:hover:active,
2561 #urlbar-stop-button:hover:active {
2562 -moz-image-region: rect(56px, 56px, 84px, 28px);
2566 /* popup blocker button */
2568 #page-report-button {
2569 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2570 -moz-image-region: rect(0, 16px, 16px, 0);
2573 #page-report-button:hover ,
2574 #page-report-button:hover:active,
2575 #page-report-button[open="true"] {
2576 -moz-image-region: rect(0, 32px, 16px, 16px);
2579 /* Reader mode button */
2581 #reader-mode-button {
2582 list-style-image: url("chrome://browser/skin/readerMode.svg");
2583 -moz-image-region: rect(0, 16px, 16px, 0);
2586 #reader-mode-button:hover,
2587 #reader-mode-button[readeractive]:hover {
2588 -moz-image-region: rect(0, 32px, 16px, 16px);
2591 #reader-mode-button:hover:active,
2592 #reader-mode-button[readeractive] {
2593 -moz-image-region: rect(0, 48px, 16px, 32px);
2596 /* social share panel */
2598 /* === BEGIN social.inc.css === */
2600 #manage-share-providers {
2601 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2602 -moz-image-region: rect(0, 468px, 18px, 450px);
2605 #manage-share-providers > .toolbarbutton-icon {
2610 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2613 /* fixup corners for share panel */
2614 .social-panel > .social-panel-frame {
2615 border-radius: inherit;
2618 /* === END social.inc.css === */
2620 .social-panel-frame {
2621 border-radius: inherit;
2624 .social-share-frame {
2631 background-color: white;
2632 background-repeat: no-repeat;
2633 background-position: center center;
2635 #share-container[loading] {
2636 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2638 #share-container > browser {
2639 transition: opacity 150ms ease-in-out;
2642 #share-container[loading] > browser {
2646 .social-share-toolbar {
2647 border-bottom: 1px solid #9C9CFF;
2651 #social-share-provider-buttons {
2656 .share-provider-button {
2661 .share-provider-button > .toolbarbutton-text {
2664 .share-provider-button > .toolbarbutton-icon {
2670 #social-share-panel {
2676 .social-share-frame {
2677 border-top-left-radius: 0;
2678 border-bottom-left-radius: inherit;
2679 border-top-right-radius: 0;
2680 border-bottom-right-radius: inherit;
2683 #social-share-panel > .social-share-toolbar {
2684 border-top-left-radius: inherit;
2685 border-top-right-radius: inherit;
2688 #social-share-provider-buttons {
2689 border-top-left-radius: inherit;
2690 border-top-right-radius: inherit;
2693 /* bookmarks menu-button */
2695 #bookmarks-menu-button.bookmark-item {
2696 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2697 -moz-image-region: rect(0px 16px 16px 0px);
2700 #bookmarks-menu-button.bookmark-item[starred] {
2701 -moz-image-region: rect(0px 32px 16px 16px);
2704 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2706 padding-bottom: 2px;
2709 #BMB_bookmarksPopup[side="top"],
2710 #BMB_bookmarksPopup[side="bottom"] {
2712 margin-right: -20px;
2715 #BMB_bookmarksPopup[side="left"],
2716 #BMB_bookmarksPopup[side="right"] {
2718 margin-bottom: -20px;
2721 /* bookmarking panel */
2723 #editBookmarkPanelStarIcon {
2724 list-style-image: url("chrome://browser/skin/places/starred48.png");
2729 #editBookmarkPanelStarIcon[unstarred] {
2730 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2733 #editBookmarkPanelTitle {
2737 #editBookmarkPanelHeader,
2738 #editBookmarkPanelContent {
2739 margin-bottom: .5em;
2742 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2743 #editBMPanel_folderTree {
2747 /* ::::: content area ::::: */
2750 background-color: #9C9CFF;
2755 background-color: #000000;
2759 margin-inline-start: 0;
2768 padding-inline-start: 0px;
2771 #sidebar-header > .close-icon {
2772 /* padding: 4px 2px;
2775 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2778 #sidebar-header > .close-icon:hover,
2779 #sidebar-header > .close-icon:hover:active {
2780 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2783 #sidebar-splitter:-moz-locale-dir(ltr),
2784 #sidebar:-moz-locale-dir(ltr) {
2785 border-radius: 0 5px 0 0;
2788 #sidebar-splitter:-moz-locale-dir(rtl),
2789 #sidebar:-moz-locale-dir(rtl) {
2790 border-radius: 5px 0 0 0;
2793 .browserContainer > findbar {
2795 background-color: -moz-dialog;
2796 color: -moz-DialogText;
2805 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2808 #TabsToolbar .toolbar-holder {
2809 background-color: #000000; /* correct effect of being an actual toolbar */
2812 #main-window[disablechrome] #TabsToolbar,
2813 #TabsToolbar[tabsontop="false"] {
2814 border-bottom: 1px solid #008484;
2817 /* === BEGIN tabs.inc.css === */
2820 /* --tab-toolbar-navbar-overlap: 1px; */
2821 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2822 /* --tab-min-height: 31px; */
2825 /* --tab-stroke-background-size: auto 100%; */
2829 .tabs-newtab-button,
2830 #TabsToolbar > #new-tab-button {
2835 padding: 1px 4px 2px;
2838 .tabbrowser-tab:first-of-type {
2839 margin-inline-start: 2px;
2842 .tabs-newtab-button,
2843 #TabsToolbar > #new-tab-button,
2844 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2845 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2846 border-radius: 8px 8px 0px 0px;
2847 margin-inline-start: 0;
2850 .tabs-newtab-button:not(:hover),
2851 #TabsToolbar > #new-tab-button:not(:hover),
2852 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2853 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2854 background-color: #C09070;
2857 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2858 .tabbrowser-tab[visuallyselected=true] {
2859 /* position: relative;
2863 .tab-background-middle {
2869 .tab-content[pinned] {
2874 .tab-sharing-icon-overlay,
2880 .tab-sharing-icon-overlay,
2884 margin-inline-end: 3px;
2888 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2891 .tab-icon-image[sharing]:not([selected]),
2892 .tab-sharing-icon-overlay {
2893 animation: 3s linear tab-sharing-icon-pulse infinite;
2896 @keyframes tab-sharing-icon-pulse {
2897 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2898 0%, 16.66%, 83.33%, 100% {
2906 .tab-icon-image[sharing]:not([selected]) {
2907 animation-delay: -1.5s;
2910 .tab-sharing-icon-overlay {
2911 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2912 margin-inline-start: -22px;
2916 .tab-sharing-icon-overlay[sharing="camera"] {
2917 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2920 .tab-sharing-icon-overlay[sharing="microphone"] {
2921 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2924 .tab-sharing-icon-overlay[sharing="screen"] {
2925 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2932 margin-inline-start: -15px;
2933 margin-inline-end: -1px;
2937 .tab-icon-overlay[crashed] {
2938 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2941 .tab-icon-overlay[soundplaying],
2942 .tab-icon-overlay[muted]:not([crashed]),
2943 .tab-icon-overlay[blocked]:not([crashed]) {
2944 border-radius: 10px;
2947 .tab-icon-overlay[soundplaying]:hover,
2948 .tab-icon-overlay[muted]:hover,
2949 .tab-icon-overlay[blocked]:not([crashed]):hover {
2950 background-color: #FFCF00;
2953 .tab-icon-overlay[soundplaying] {
2954 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2957 .tab-icon-overlay[muted]:not([crashed]) {
2958 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2961 .tab-icon-overlay[blocked]:not([crashed]) {
2962 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2965 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2966 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2967 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2970 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2971 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2972 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2975 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2976 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2977 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2980 .tab-throbber[busy] {
2981 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2984 .tab-throbber[progress] {
2985 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2988 @media (min-resolution: 1.1dppx) {
2989 .tab-throbber[busy] {
2990 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2993 .tab-throbber[progress] {
2994 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2998 .tab-throbber[pinned],
2999 .tab-icon-image[pinned] {
3000 margin-inline-start: 2px;
3001 margin-inline-end: 2px;
3005 /* this needs to add up to the 16px of the icon image */
3007 margin-top: 2px !important;
3008 margin-bottom: 2px !important;
3012 margin-inline-start: 4px;
3018 .tab-icon-sound[soundplaying],
3019 .tab-icon-sound[muted],
3020 .tab-icon-sound[blocked] {
3021 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3022 filter: url(chrome://global/skin/filters.svg#fill);
3026 .tab-icon-sound[muted] {
3027 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3030 .tab-icon-sound[blocked] {
3031 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3039 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3040 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3041 transition: opacity .3s linear var(--soundplaying-removal-delay);
3046 .tabs-newtab-button {
3047 /* overlap the tab curves */
3050 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3054 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3055 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3058 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3059 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3062 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3065 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3068 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3069 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3072 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3073 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3076 .tab-background-start[selected=true]::after,
3077 .tab-background-start[selected=true]::before,
3078 .tab-background-start,
3079 .tab-background-end,
3080 .tab-background-end[selected=true]::after,
3081 .tab-background-end[selected=true]::before {
3084 .tabbrowser-tab:not([visuallyselected=true]),
3085 .tabbrowser-tab:-moz-lwtheme {
3088 /* tabbrowser-tab focus ring */
3089 .tabbrowser-tab:focus {
3090 outline: 1px dotted;
3095 .tabbrowser-tab[visuallyselected="true"] {
3098 /* End selected tab */
3100 /* Tab pointer-events */
3103 pointer-events: none;
3106 .tab-background-middle,
3107 .tabs-newtab-button,
3108 .tab-icon-overlay[soundplaying],
3109 .tab-icon-overlay[muted]:not([crashed]),
3110 .tab-icon-overlay[blocked]:not([crashed]),
3113 pointer-events: auto;
3119 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3120 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3122 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3123 background-color: #E7ADE7;
3126 .tab-label[attention]:not([selected="true"]) {
3130 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3131 background-color: #3333FF;
3135 /* Tab separators */
3137 .tabbrowser-tab::after,
3138 .tabbrowser-tab::before {
3140 margin-inline-start: -1px;
3141 background-image: linear-gradient(transparent 5px,
3143 currentColor calc(100% - 4px),
3144 transparent calc(100% - 4px));
3148 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3149 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3153 /* Also show separators beside the selected tab when dragging it. */
3155 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3156 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3157 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3162 /* New tab button */
3164 .tabs-newtab-button {
3166 /* width: calc(36px + var(--tab-curve-width)); */
3168 @media (min-resolution: 1.1dppx) {
3169 /* image preloading hack from like lowdpi styles */
3170 #tabbrowser-tabs::before {
3173 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3174 .tabs-newtab-button:hover {
3177 .tab-background-middle[selected=true] {
3180 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3181 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3184 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3185 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3189 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3193 /* All tabs menupopup */
3195 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3196 background-color: #402800;
3199 .alltabs-endimage[soundplaying],
3200 .alltabs-endimage[muted],
3201 .alltabs-endimage[blocked] {
3202 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3203 filter: url(chrome://global/skin/filters.svg#fill);
3207 .alltabs-endimage[muted] {
3208 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3211 .alltabs-endimage[blocked] {
3212 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3215 /* === END tabs.inc.css === */
3217 /* Tab DnD indicator */
3218 .tab-drop-indicator {
3219 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3220 margin-bottom: -11px;
3223 /* Tab close button */
3225 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3226 -moz-image-region: auto !important;
3229 .tab-close-button:hover,
3230 .tab-close-button:hover[selected="true"] {
3231 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3232 -moz-image-region: auto !important;
3235 .tab-close-button:hover:active,
3236 .tab-close-button:hover:active[selected="true"] {
3237 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3238 -moz-image-region: auto !important;
3241 .tab-close-button > .button-icon,
3242 .tab-close-button > .button-box > .button-icon,
3243 .tab-close-button > .toolbarbutton-icon {
3244 width: auto !important;
3248 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3250 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3251 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3255 background-origin: border-box;
3258 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3259 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3260 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3261 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3264 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3265 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3268 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3269 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3270 /* transform: scaleX(-1);*/
3273 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3274 transition: 1s background-color ease-out;
3277 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3278 background-color: #008484;
3281 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3282 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3283 /* border-width: 0 2px 0 0;
3284 border-style: solid;
3285 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3288 .tabs-newtab-button > .toolbarbutton-icon {
3290 margin-bottom: -1px;
3293 .tabs-newtab-button,
3294 #TabsToolbar > #new-tab-button,
3295 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3296 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3297 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3298 -moz-image-region: auto;
3301 .tabs-newtab-button,
3302 .tabs-newtab-button:hover,
3303 #TabsToolbar > #new-tab-button,
3304 #TabsToolbar > #new-tab-button:hover {
3307 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3308 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3309 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3310 .tabs-newtab-button:-moz-lwtheme-brighttext,
3311 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3312 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3315 #TabsToolbar > #new-tab-button {
3320 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3323 #alltabs-button:hover,
3324 #alltabs-button:hover:active,
3325 #alltabs-button[open="true"] {
3326 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3329 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3330 #alltabs-button:-moz-lwtheme-brighttext {
3333 #alltabs-button > .toolbarbutton-icon {
3337 #alltabs-button > .toolbarbutton-menu-dropmarker {
3341 /* All tabs menupopup */
3342 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3343 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3344 -moz-image-region: auto;
3347 .alltabs-item[selected="true"] {
3351 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3352 list-style-image: url("chrome://global/skin/icons/loading.png");
3355 @media (min-resolution: 1.1dppx) {
3356 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3357 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3361 toolbarbutton.chevron {
3362 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3365 toolbarbutton.chevron:hover {
3366 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3369 toolbar[brighttext] toolbarbutton.chevron {
3370 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3373 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3374 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3375 transform: scaleX(-1);
3378 toolbarbutton.chevron > .toolbarbutton-text,
3379 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3383 toolbarbutton.chevron > .toolbarbutton-icon {
3387 #sidebar-throbber[loading="true"] {
3388 list-style-image: url("chrome://global/skin/icons/loading.png");
3389 margin-inline-end: 4px;
3392 @media (min-resolution: 1.1dppx) {
3393 #sidebar-throbber[loading="true"] {
3394 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3399 /* Bookmarks toolbar */
3400 #PlacesToolbarDropIndicator {
3401 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3404 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3405 background-color: #008484 !important;
3406 color: #FFCF00 !important;
3409 /* rules for menupopup drop indicators */
3410 .menupopup-drop-indicator-bar {
3412 /* these two margins must together compensate the indicator's height */
3414 margin-bottom: -1px;
3417 .menupopup-drop-indicator {
3418 list-style-image: none;
3420 margin-inline-end: -4em;
3421 background-color: #008484;
3424 /* === BEGIN notification-icons.inc.css === */
3426 #notification-popup-box {
3427 border-radius: 3px 0 0 3px;
3430 margin-inline-end: -5px;
3431 padding-inline-end: 5px;
3434 .notification-anchor-icon,
3435 #blocked-permissions-container > .blocked-permission-icon {
3438 margin-inline-start: 2px;
3441 /* This class can be used alone or in combination with the class defining the
3442 type of icon displayed. This rule must be defined before the others in order
3443 for its list-style-image to be overridden. */
3444 .notification-anchor-icon {
3445 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3448 .notification-anchor-icon:-moz-focusring {
3449 outline: 1px dotted #008484;
3452 @media (min-resolution: 1.1dppx) {
3453 .notification-anchor-icon {
3454 list-style-image: url(chrome://global/skin/icons/information-32.png);
3458 .notification-anchor-icon:not(.plugin-blocked),
3459 #blocked-permissions-container > .blocked-permission-icon {
3460 filter: url(chrome://global/skin/filters.svg#fill);
3464 /* INDIVIDUAL NOTIFICATIONS */
3466 .popup-notification-icon[popupid="web-notifications"],
3467 .desktop-notification-icon {
3468 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3471 .desktop-notification-icon.blocked-permission-icon {
3472 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3476 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3479 .geo-icon.blocked-permission-icon {
3480 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3483 .popup-notification-icon[popupid="geolocation"] {
3484 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3487 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3489 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3492 .indexedDB-icon.blocked-permission-icon {
3493 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3497 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3500 .popup-notification-icon[popupid="password"] {
3501 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3505 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3508 .camera-icon.in-use {
3509 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3512 .camera-icon.blocked-permission-icon {
3513 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3517 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3520 .microphone-icon.in-use {
3521 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3524 .microphone-icon.blocked-permission-icon {
3525 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3528 .popup-notification-icon.microphone-icon {
3529 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3533 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3536 .screen-icon.in-use {
3537 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3540 .screen-icon.blocked-permission-icon {
3541 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3544 #webRTC-preview:not([hidden]) {
3545 display: -moz-stack;
3547 border: 1px solid #A09090;
3553 html|*#webRTC-previewVideo {
3555 /* If we don't set the min-width, width is ignored. */
3560 #webRTC-previewWarning {
3561 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3564 padding-inline-start: calc(1.5em + 16px);
3565 border-top: 1px solid #A09090;
3568 #webRTC-previewWarning > .text-link {
3569 margin-inline-start: 0;
3572 /* This icon has a block sign in it, so we don't need a blocked version. */
3574 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3579 .popup-notification-icon[popupid="drmContentPlaying"],
3581 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3584 .drm-icon:hover:active {
3585 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3588 #eme-notification-icon[firstplay=true] {
3589 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3592 @keyframes emeTeachingMoment {
3593 0% {transform: translateX(0); }
3594 25% {transform: translateX(3px) }
3595 75% {transform: translateX(-3px) }
3596 100% { transform: translateX(0); }
3599 /* INSTALL ADDONS */
3602 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3605 .popup-notification-icon[popupid="xpinstall-disabled"],
3606 .popup-notification-icon[popupid="addon-install-blocked"],
3607 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3608 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3611 .popup-notification-icon[popupid="addon-progress"] {
3612 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3615 .popup-notification-icon[popupid="addon-install-failed"] {
3616 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3619 .popup-notification-icon[popupid="addon-install-confirmation"] {
3620 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3623 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3624 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3627 .popup-notification-icon[popupid="addon-install-complete"] {
3628 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3631 .popup-notification-icon[popupid="addon-install-restart"] {
3632 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3635 .popup-notification-icon[popupid="click-to-play-plugins"] {
3636 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3641 .popup-notification-icon[popupid*="offline-app-requested"],
3642 .popup-notification-icon[popupid="offline-app-usage"] {
3643 list-style-image: url(chrome://global/skin/icons/question-64.png);
3649 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3652 .plugin-icon.plugin-blocked {
3653 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3656 #notification-popup-box[hidden] {
3657 /* Override display:none to make the pluginBlockedNotification animation work
3658 when showing the notification repeatedly. */
3660 visibility: collapse;
3663 #plugins-notification-icon.plugin-blocked[showing] {
3664 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3667 @keyframes pluginBlockedNotification {
3678 .popup-notification-icon[popupid="servicesInstall"] {
3679 list-style-image: url(chrome://browser/skin/social/services-64.png);
3683 list-style-image: url(chrome://browser/skin/social/services-16.png);
3689 list-style-image: url(chrome://browser/skin/translation-16.png);
3690 -moz-image-region: rect(0px, 16px, 16px, 0px);
3693 .translation-icon.in-use {
3694 -moz-image-region: rect(0px, 32px, 16px, 16px);
3697 /* === END notification-icons.inc.css === */
3699 .popup-notification-body[popupid="addon-progress"],
3700 .popup-notification-body[popupid="addon-install-confirmation"] {
3705 .addon-install-confirmation-name {
3709 .addon-webext-perm-header {
3713 .addon-webext-name {
3722 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3723 -moz-image-region: rect(0px, 288px, 32px, 256px);
3726 .addon-toolbar-icon {
3729 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
3730 -moz-image-region: rect(0, 486px, 18px, 468px);
3733 /* Notification icon box */
3735 .notification-anchor-icon:-moz-focusring {
3736 /* outline: 1px dotted -moz-DialogText;*/
3739 /* Translation infobar */
3741 /* === BEGIN infobar.inc.css === */
3743 notification[value="translation"] .messageImage {
3744 list-style-image: url("chrome://browser/skin/translation-16.png");
3745 -moz-image-region: rect(0, 32px, 16px, 16px);
3748 @media (min-resolution: 1.25dppx) {
3749 notification[value="translation"] .messageImage {
3750 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3751 -moz-image-region: rect(0, 64px, 32px, 32px);
3755 notification[value="translation"][state="translating"] .messageImage {
3756 list-style-image: url("chrome://browser/skin/translating-16.png");
3757 -moz-image-region: auto;
3760 @media (min-resolution: 1.25dppx) {
3761 notification[value="translation"][state="translating"] .messageImage {
3762 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3766 notification[value="translation"] hbox[anonid="details"] {
3770 notification[value="translation"] button,
3771 notification[value="translation"] menulist {
3775 notification[value="translation"] menulist > .menulist-dropmarker {
3778 .translation-menupopup arrowscrollbox {
3782 .translation-attribution {
3784 -moz-box-align: end;
3788 .translation-attribution > label {
3792 .translation-attribution > image {
3796 .translation-welcome-panel {
3800 .translation-welcome-logo {
3803 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3804 -moz-image-region: rect(0, 64px, 32px, 32px);
3807 .translation-welcome-content {
3808 margin-inline-start: 16px;
3811 .translation-welcome-headline {
3816 .translation-welcome-body {
3821 /* === END infobar.inc.css === */
3823 notification[value="translation"] {
3827 .translation-menupopup {
3828 -moz-appearance: none;
3831 /* Bookmarks roots menu-items */
3832 #subscribeToPageMenuitem:not([disabled]),
3833 #subscribeToPageMenupopup {
3834 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3837 #bookmarksToolbarFolderMenu,
3838 #BMB_bookmarksToolbar,
3839 #panelMenu_bookmarksToolbar {
3840 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3841 -moz-image-region: auto;
3844 #BMB_unsortedBookmarks,
3845 #panelMenu_unsortedBookmarks {
3846 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3847 -moz-image-region: auto;
3852 .statuspanel-label {
3855 background: #404000;
3856 border: 1px none #9C9CFF;
3857 border-top-style: solid;
3862 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3863 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3864 border-right-style: solid;
3865 border-top-right-radius: .3em;
3869 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3870 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3871 border-left-style: solid;
3872 border-top-left-radius: .3em;
3876 /* HACK to abolish devily color on main content */
3879 background-color: transparent !important;
3882 /* === BEGIN fullscreen/warning.inc.css === */
3884 html|*.pointerlockfswarning {
3885 align-items: center;
3886 background: rgba(0, 0, 0, 0.9);
3887 border: 2px solid #A09090;
3888 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3891 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3894 html|*.pointerlockfswarning::before {
3896 width: 24px; height: 24px;
3899 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3900 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3901 content: url("chrome://browser/skin/fullscreen/secure.svg");
3904 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3905 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3907 html|*.pointerlockfswarning-domain-text,
3908 html|*.pointerlockfswarning-generic-text {
3910 font-weight: lighter;
3915 html|*.pointerlockfswarning-domain {
3920 html|*#fullscreen-exit-button,
3921 html|*.pointerlockfswarning-exit-button {
3924 border-radius: 300px;
3926 background-color: #C09070;
3930 /* === END fullscreen/warning.inc.css === */
3932 /* === BEGIN ctrlTab.inc.css === */
3937 -moz-appearance: none;
3938 background: rgba(0%,0%,0%,.7);
3941 padding: 20px 10px 10px;
3945 .ctrlTab-favicon[src] {
3946 background-color: #000000;
3952 .ctrlTab-preview-inner > .tabPreview-canvas {
3953 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3956 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3960 .ctrlTab-preview-inner {
3962 border: 2px solid transparent;
3963 border-radius: .5em;
3966 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3967 margin: -10px -10px 0;
3970 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3971 background-color: #000000;
3974 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3976 background-color: #000000;
3978 border-color: #9C9CFF;
3985 /* === END ctrlTab.inc.css === */
3987 /* === BEGIN commandline.inc.css === */
3989 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3990 We are copy/pasting variables from light-theme and dark-theme,
3991 since they aren't loaded in this context (within browser.css). */
3992 :root #developer-toolbar {
3993 --gcli-background-color: #000000; /* --theme-toolbar-background */
3994 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3995 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3996 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3997 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3998 --selection-background: #008484; /* --theme-selection-background */
3999 --selection-color: #000000; /* --theme-selection-color */
4000 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
4001 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
4004 /* Developer toolbar */
4006 #developer-toolbar {
4007 border-top: 3px solid var(--gcli-background-color);
4008 border-bottom: none;
4011 #developer-toolbar .toolbar-holder {
4012 background-color: #8050B0;
4016 #developer-toolbar .toolbar-holder {
4017 background-color: #8050B0;
4021 #developer-toolbar .toolbar-startcap,
4022 #developer-toolbar .toolbar-endcap{
4023 background-color: #6000CF;
4026 #developer-toolbar {
4028 min-height: 32px; */
4031 #developer-toolbar > toolbarbutton {
4033 background-color: transparent;
4039 .developer-toolbar-button > image {
4040 /* margin: auto 10px; */
4043 #developer-toolbar-toolbox-button > label {
4047 .developer-toolbar-button > .toolbarbutton-icon {
4052 #developer-toolbar-toolbox-button {
4053 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4054 -moz-image-region: rect(0px, 16px, 16px, 0px);
4057 #developer-toolbar-toolbox-button > label {
4061 #developer-toolbar-toolbox-button:hover,
4062 #developer-toolbar-toolbox-button:hover:active,
4063 #developer-toolbar-toolbox-button[checked=true] {
4064 -moz-image-region: rect(0px, 32px, 16px, 16px);
4067 @media (min-resolution: 2dppx) {
4068 #developer-toolbar-toolbox-button {
4069 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4070 -moz-image-region: rect(0px, 32px, 32px, 0px);
4073 #developer-toolbar-toolbox-button:hover,
4074 #developer-toolbar-toolbox-button:hover:active,
4075 #developer-toolbar-toolbox-button[checked=true] {
4076 -moz-image-region: rect(0px, 64px, 32px, 32px);
4082 html|*#gcli-tooltip-frame,
4083 html|*#gcli-output-frame {
4086 background-color: transparent;
4092 background-color: transparent;
4095 .gclitoolbar-input-node,
4096 .gclitoolbar-complete-node {
4098 -moz-box-align: center;
4102 background-color: transparent;
4105 .gclitoolbar-input-node {
4106 /* line-height: 32px;
4107 outline-style: none; */
4108 background-repeat: no-repeat;
4109 background-color: var(--gcli-input-background);
4112 .gclitoolbar-input-node[focused="true"] {
4113 background-color: var(--gcli-input-focused-background);
4116 .gclitoolbar-input-node::before {
4118 display: inline-block;
4119 -moz-box-ordinal-group: 0;
4123 background-image: var(--command-line-image);
4126 .gclitoolbar-input-node[focused="true"]::before {
4127 background-image: var(--command-line-image-focus);
4130 .gclitoolbar-input-node:not([focused="true"]) {
4131 border-color: transparent;
4134 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4135 background-color: var(--selection-background);
4136 color: var(--selection-color);
4139 .gclitoolbar-complete-node {
4141 background-color: transparent;
4144 pointer-events: none;
4147 .gcli-in-incomplete,
4151 .gcli-in-closebrace,
4158 .gcli-in-incomplete {
4159 border-bottom: 2px dotted #8050B0;
4163 border-bottom: 2px dotted #FF0000;
4174 .gcli-in-closebrace {
4178 /* === END commandline.inc.css === */
4180 /* === BEGIN responsivedesign.inc.css === */
4182 /* Responsive Mode */
4184 .browserContainer[responsivemode] {
4185 background-color: #221500;
4186 padding: 0 20px 20px 20px;
4189 .browserStack[responsivemode] {
4190 box-shadow: 0 0 7px #9C9CFF;
4193 .devtools-responsiveui-toolbar {
4194 background: transparent;
4195 /* text color is textColor from dark theme, since no theme is applied to
4196 * the responsive toolbar.
4202 border-bottom-width: 0;
4205 .devtools-responsiveui-textinput {
4206 /* -moz-appearance: none;
4209 border: 1px solid #111;
4216 .devtools-responsiveui-textinput[attention] {
4217 /* border-color: #38ace6;
4218 background: rgba(56,172,230,0.4);*/
4221 .devtools-responsiveui-menulist,
4222 .devtools-responsiveui-toolbarbutton {
4223 -moz-box-align: center;
4225 /* min-height: 22px;*/
4226 /* margin: 0 3px; */
4229 .devtools-responsiveui-menulist .menulist-editable-box {
4230 background-color: transparent;
4233 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4238 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4239 /* background: hsla(212,7%,57%,.35);*/
4242 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4247 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4248 -moz-box-orient: horizontal;
4251 .devtools-responsiveui-menulist:-moz-focusring,
4252 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4253 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4254 outline-offset: -4px;*/
4257 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4261 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4262 /* border-color: hsla(210,8%,5%,.6);
4263 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4264 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); */
4267 .devtools-responsiveui-menulist[open=true],
4268 .devtools-responsiveui-toolbarbutton[open=true],
4269 .devtools-responsiveui-toolbarbutton[checked=true] {
4270 /* border-color: hsla(210,8%,5%,.6) !important;
4271 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4272 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); */
4275 .devtools-responsiveui-toolbarbutton[checked=true] {
4276 /* color: hsl(208,100%,60%); */
4279 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4280 /* background-color: transparent !important;*/
4283 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4284 /* background-color: hsla(210,8%,5%,.2) !important;*/
4287 .devtools-responsiveui-menulist > .menulist-label-box {
4291 .devtools-responsiveui-menulist > .menulist-dropmarker {
4292 /* display: -moz-box;
4293 background-color: transparent;
4294 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4295 -moz-box-align: center;
4300 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4303 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4304 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4307 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4308 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4311 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4312 /* padding: 0 1px;*/
4313 -moz-box-align: stretch;
4316 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4317 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4318 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4319 -moz-box-align: center;
4323 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4324 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4328 .devtools-responsiveui-close {
4329 list-style-image: url("chrome://devtools/skin/close.svg");
4332 .devtools-responsiveui-close:hover {
4333 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4336 .devtools-responsiveui-close > image {
4340 .devtools-responsiveui-rotate {
4341 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4342 -moz-image-region: rect(0px,16px,16px,0px);
4345 .devtools-responsiveui-rotate:hover {
4346 -moz-image-region: rect(0px,32px,16px,16px);
4349 @media (min-resolution: 2dppx) {
4350 .devtools-responsiveui-rotate {
4351 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4354 .devtools-responsiveui-rotate:hover {
4355 -moz-image-region: rect(0px,64px,32px,32px);
4359 .devtools-responsiveui-touch {
4360 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4361 -moz-image-region: rect(0px,16px,16px,0px);
4364 .devtools-responsiveui-touch:hover,
4365 .devtools-responsiveui-touch[checked],
4366 .devtools-responsiveui-touch[checked]:hover {
4367 -moz-image-region: rect(0px,32px,16px,16px);
4370 @media (min-resolution: 2dppx) {
4371 .devtools-responsiveui-touch {
4372 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4373 -moz-image-region: rect(0px,32px,32px,0px);
4376 .devtools-responsiveui-touch:hover,
4377 .devtools-responsiveui-touch[checked],
4378 .devtools-responsiveui-touch[checked]:hover {
4379 -moz-image-region: rect(0px,64px,32px,32px);
4383 .devtools-responsiveui-screenshot {
4384 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4385 -moz-image-region: rect(0px,16px,16px,0px);
4388 .devtools-responsiveui-screenshot:hover {
4389 -moz-image-region: rect(0px,32px,16px,16px);
4392 @media (min-resolution: 2dppx) {
4393 .devtools-responsiveui-screenshot {
4394 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4397 .devtools-responsiveui-screenshot:hover {
4398 -moz-image-region: rect(0px,64px,32px,32px);
4402 .devtools-responsiveui-resizebarV {
4406 transform: translate(12px, -12px);
4407 background-size: cover;
4408 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4411 .devtools-responsiveui-resizebarH {
4415 transform: translate(-12px, 12px);
4416 background-size: cover;
4417 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4420 .devtools-responsiveui-resizehandle {
4424 transform: translate(12px, 12px);
4425 background-size: cover;
4426 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4429 /* FxOS custom mode with additional buttons and phone look'n feel */
4431 /* Hide devtools manual resizer */
4432 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4433 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4434 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4438 /* Gives responsive mode a phone look'n feel */
4439 .browserStack[responsivemode].fxos-mode {
4440 padding: 60px 15px 0;
4442 border-radius: 25px / 20px;
4443 border-bottom-left-radius: 0;
4444 border-bottom-right-radius: 0;
4445 border: 1px solid #FFFFFF;
4446 border-bottom-width: 0;
4448 background-color: #353535;
4450 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4452 background-image: linear-gradient(to right, #111 11%, #333 56%);
4456 .devtools-responsiveui-hardware-buttons {
4457 -moz-appearance: none;
4460 border: 1px solid #FFFFFF;
4461 border-bottom-left-radius: 25px;
4462 border-bottom-right-radius: 25px;
4463 border-top-width: 0;
4465 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4467 background-image: linear-gradient(to right, #111 11%, #333 56%);
4470 .devtools-responsiveui-home-button {
4471 -moz-user-focus: ignore;
4474 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4477 .devtools-responsiveui-sleep-button {
4478 -moz-user-focus: ignore;
4479 -moz-appearance: none;
4480 /* compensate browserStack top padding */
4488 border: 1px solid #444;
4489 border-top-right-radius: 12px;
4490 border-top-left-radius: 12px;
4491 border-bottom-color: transparent;
4493 background-image: linear-gradient(to top, #111 11%, #333 56%);
4496 .devtools-responsiveui-sleep-button:hover:active {
4497 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4500 .devtools-responsiveui-volume-buttons {
4504 .devtools-responsiveui-volume-up-button,
4505 .devtools-responsiveui-volume-down-button {
4506 -moz-user-focus: ignore;
4507 -moz-appearance: none;
4508 border: 1px solid red;
4512 border: 1px solid #444;
4513 border-right-color: transparent;
4515 background-image: linear-gradient(to right, #111 11%, #333 56%);
4518 .devtools-responsiveui-volume-up-button:hover:active,
4519 .devtools-responsiveui-volume-down-button:hover:active {
4520 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4523 .devtools-responsiveui-volume-up-button {
4524 border-top-left-radius: 12px;
4527 .devtools-responsiveui-volume-down-button {
4528 border-bottom-left-radius: 12px;
4531 @media (min-resolution: 2dppx) {
4532 .devtools-responsiveui-resizebarV {
4533 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4536 .devtools-responsiveui-resizebarH {
4537 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4540 .devtools-responsiveui-resizehandle {
4541 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4545 /* === END responsivedesign.inc.css === */
4547 /* === including indicator.css is done at the start of the file === */
4551 #developer-toolbar-toolbox-button[error-count]:before {
4555 background-color: #FF0000;
4557 margin-inline-end: 5px;
4560 /* === BEGIN plugin-doorhanger.inc.css === */
4563 * Plugin Doorhanger Styles
4566 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4567 padding: 6px 1px 2px;
4570 .click-to-play-plugins-notification-center-box {
4573 .plugin-popupnotification-centeritem:nth-child(odd) {
4574 /* background-color: rgba(0,0,0,0.1);*/
4577 .center-item-label {
4579 text-overflow: ellipsis;
4582 .center-item-warning-icon {
4583 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4584 background-repeat: no-repeat;
4587 margin-inline-start: 6px;
4590 .click-to-play-plugins-notification-button-container {
4593 .click-to-play-popup-button {
4597 .click-to-play-plugins-notification-description-box {
4601 padding-bottom: 3px;
4604 .click-to-play-plugins-outer-description {
4608 .click-to-play-plugins-notification-link,
4613 .messageImage[value="plugin-hidden"] {
4614 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4617 /* Keep any changes to this style in sync with pluginProblem.css */
4618 notification.pluginVulnerable {
4621 notification.pluginVulnerable .messageImage {
4622 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4625 /* === END plugin-doorhanger.inc.css === */
4627 /* === BEGIN customizeMode.inc.css === */
4629 /* Customization mode */
4632 --drag-drop-transition-duration: .3s;
4635 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4636 background-repeat: no-repeat;
4637 background-position: right top;
4638 background-attachment: fixed;
4639 background-color: transparent;
4640 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4641 var(--toolbox-rect-height), 0),
4642 linear-gradient(to bottom,
4643 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4644 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4645 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4646 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4647 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4648 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4651 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4655 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4656 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4657 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4662 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4663 pointer-events: none;
4666 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4667 #PanelUI-contents > .panel-customization-placeholder {
4668 -moz-outline-radius: 2.5px;
4669 outline: 1px dashed transparent;
4672 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4673 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4674 -moz-box-ordinal-group: 0;
4679 outline-offset: -2px;
4680 pointer-events: none;
4686 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4687 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4688 offset from the bottom effectively the same as other targets (-2px). */
4689 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4693 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4694 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4695 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4696 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4700 /* Most target outlines are shown on hover and drag over but the panel menu uses
4701 placeholders instead. */
4702 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4703 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4704 /* nav-bar and panel outlines are always shown */
4705 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4706 outline-color: currentColor;
4709 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4710 transition: outline-color 250ms linear;
4713 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4714 transition: outline-color 250ms linear;
4715 outline-color: var(--panel-separator-color);
4718 #PanelUI-contents > .panel-customization-placeholder {
4720 outline-offset: -5px;
4723 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4725 /* padding-left: 10px;
4726 padding-right: 10px;*/
4729 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4733 #customization-container {
4734 background-color: #000000;
4738 #customization-palette,
4739 #customization-empty {
4740 padding: 0 15px 15px;
4743 #customization-header {
4745 line-height: 1.75em;
4748 margin: 25px 25px 12px;
4749 padding-bottom: 12px;
4750 border-bottom: 1px solid #A09090;
4753 #customization-panel-container {
4754 padding: 10px 10px 0px;
4757 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4758 #customization-footer {
4759 /*background-color: rgb(236,236,236);*/
4762 #customization-footer {
4763 border-top: 1px solid #9C9CFF;
4767 .customizationmode-button {
4771 .customizationmode-button:hover {
4774 .customizationmode-button > .box-inherit {
4777 .customizationmode-button > .button-icon {
4780 .customizationmode-button:not([type=menu]) > .button-text {
4783 .customizationmode-button > .button-menu-dropmarker {
4788 .customizationmode-button[checked] {
4789 background-color: #008484;
4792 .customizationmode-button[checked]:hover:not([disabled]),
4793 .customizationmode-button:hover:not([disabled]) {
4794 background-color: #FFCF00;
4797 .customizationmode-button[checked]:hover:active:not([disabled]),
4798 .customizationmode-button:hover:active:not([disabled]),
4799 .customizationmode-button[open] {
4800 background-color: #FF9F00;
4803 .customizationmode-button[disabled="true"] {
4806 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4807 .customizationmode-button > .button-box > .button-icon {
4811 #customization-titlebar-visibility-button {
4812 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4813 -moz-image-region: rect(0, 16px, 16px, 0);
4816 #customization-titlebar-visibility-button:hover {
4817 -moz-image-region: rect(16px, 16px, 32px, 0);
4820 #customization-titlebar-visibility-button > .button-box {
4822 padding-bottom: 1px;
4825 #customization-titlebar-visibility-button:hover:active > .button-box {
4830 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4831 #customization-titlebar-visibility-button > .button-box > .button-text {
4832 /* Sadly, button.css thinks its margins are perfect for everyone. */
4833 margin-inline-start: 5px !important;
4836 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4840 background-image: url("chrome://browser/content/default-theme-icon.svg");
4841 background-size: contain;
4844 #customization-titlebar-visibility-button > .button-box > .button-icon {
4845 vertical-align: middle;
4848 #customization-titlebar-visibility-button[checked] {
4849 -moz-image-region: rect(0, 32px, 16px, 16px);
4850 background-color: #008484;
4853 #customization-titlebar-visibility-button[checked]:hover {
4854 -moz-image-region: rect(16px, 32px, 32px, 16px);
4855 background-color: #FFCF00;
4858 #customization-titlebar-visibility-button[checked]:hover:active {
4859 background-color: #FF9F00;
4862 @media (min-resolution: 1.1dppx) {
4863 #customization-titlebar-visibility-button {
4864 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4865 -moz-image-region: rect(0, 48px, 48px, 0);
4868 #customization-titlebar-visibility-button:hover {
4869 -moz-image-region: rect(48px, 48px, 96px, 0);
4872 #customization-titlebar-visibility-button[checked] {
4873 -moz-image-region: rect(0, 96px, 48px, 48px);
4876 #customization-titlebar-visibility-button[checked]:hover {
4877 -moz-image-region: rect(48px, 96px, 96px, 48px);
4881 #main-window[customize-entered] #customization-panel-container {
4882 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4883 background-position: left top;
4884 background-repeat: repeat;
4885 background-size: auto;
4886 background-attachment: fixed;
4889 toolbarpaletteitem[place="toolbar"] {
4890 transition: border-width 250ms ease-in-out;
4893 toolbarpaletteitem[mousedown] {
4894 outline: 1px solid #008484;
4895 cursor: -moz-grabbing;
4899 .panel-customization-placeholder,
4900 toolbarpaletteitem[place="palette"],
4901 toolbarpaletteitem[place="panel"] {
4902 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4905 #customization-palette {
4906 transition: opacity .3s ease-in-out;
4910 #customization-palette[showing="true"] {
4914 toolbarpaletteitem toolbarbutton[disabled] {
4915 /* color: inherit !important;*/
4918 toolbarpaletteitem[notransition].panel-customization-placeholder,
4919 toolbarpaletteitem[notransition][place="toolbar"],
4920 toolbarpaletteitem[notransition][place="palette"],
4921 toolbarpaletteitem[notransition][place="panel"] {
4925 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4926 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4927 toolbarpaletteitem > toolbaritem.panel-wide-item,
4928 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4929 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4932 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4933 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4934 transform: scale(1.3);
4937 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4938 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4939 transform: scale(1.1);
4942 /* Override the toolkit styling for items being dragged over. */
4943 toolbarpaletteitem[place="toolbar"] {
4944 border-left-width: 0;
4945 border-right-width: 0;
4950 #customization-palette:not([hidden]) {
4951 margin-bottom: 25px;
4954 toolbarpaletteitem[place="palette"]:-moz-focusring,
4955 toolbarpaletteitem[place="panel"]:-moz-focusring,
4956 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4960 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4961 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4962 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4963 /* Delay adding the focusring back until after the transform transition completes. */
4964 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4965 outline: 1px dotted;
4966 -moz-outline-radius: 2.5px;
4969 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4970 outline-offset: -5px;
4973 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4974 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4975 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4976 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4980 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4981 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4991 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4992 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4996 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4997 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5000 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5001 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5005 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5006 -moz-box-pack: center;
5010 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5011 margin-inline-end: 5px;
5014 #customization-palette > toolbarpaletteitem > label {
5020 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5021 -moz-box-orient: vertical;
5022 /* Make the panel padding uniform across all platforms due to the
5023 styling of the section headers and footer. */
5027 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5032 .customization-lwtheme-menu-theme {
5033 -moz-appearance: none;
5036 padding-inline-end: 5px;
5038 padding-inline-start: 0;
5041 .customization-lwtheme-menu-theme[defaulttheme] {
5042 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
5045 .customization-lwtheme-menu-theme[active="true"] {
5046 background-color: #008484;
5049 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5053 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5057 #customization-lwtheme-menu-header,
5058 #customization-lwtheme-menu-recommended {
5063 #customization-lwtheme-menu-header,
5064 #customization-lwtheme-menu-recommended,
5065 #customization-lwtheme-menu-footer {
5066 background-color: #A09090;
5068 margin-right: -10px;
5072 #customization-lwtheme-menu-header {
5074 border-top-right-radius: 3px;
5075 border-top-left-radius: 3px;
5078 #customization-lwtheme-menu-recommended {
5081 #customization-lwtheme-menu-footer {
5082 margin-bottom: -10px;
5083 border-bottom-right-radius: 3px;
5084 border-bottom-left-radius: 3px;
5087 .customization-lwtheme-menu-footeritem {
5088 -moz-appearance: none;
5090 background-color: #C09070;
5092 border: 1px solid transparent;
5098 .customization-lwtheme-menu-footeritem:hover {
5099 background-color: #FFCF00;
5102 .customization-lwtheme-menu-footeritem:first-child {
5105 /* === END customizeMode.inc.css === */
5107 /* === BEGIN customizeTip.inc.css === */
5109 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5116 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5117 border: 1px solid #9C9CFF;
5121 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5122 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5125 .customization-tipPanel-infoBox {
5126 margin: 20px 25px 25px;
5128 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5129 background-repeat: no-repeat;
5132 .customization-tipPanel-content {
5138 .customization-tipPanel-em {
5143 .customization-tipPanel-contentImage {
5145 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5153 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5154 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5157 .customization-tipPanel-link {
5158 -moz-appearance: none;
5159 background: transparent;
5167 .customization-tipPanel-link > .button-box > .button-text {
5168 margin: 0 !important;
5171 .customization-tipPanel-closeBox > .close-icon {
5172 -moz-appearance: none;
5174 margin-inline-end: -25px;
5177 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5178 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5179 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5182 /* === END customizeTip.inc.css === */
5185 * This next rule is a hack to disable subpixel anti-aliasing on all
5186 * labels during the customize mode transition. Subpixel anti-aliasing
5187 * on Windows with Direct2D layers acceleration is particularly slow to
5188 * paint, so this hack is how we sidestep that performance bottleneck.
5190 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5191 transform: perspective(0.01px);
5194 #main-window[customize-entered] > #tab-view-deck {
5195 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5196 background-attachment: fixed;
5199 #main-window[customization-lwtheme]:-moz-lwtheme {
5200 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5201 background-repeat: repeat;
5202 background-attachment: fixed;
5203 background-position: left top;
5206 #main-window[customize-entered] #browser-bottombox,
5207 #main-window[customize-entered] #customization-container {
5208 border-left: 1px solid #9C9CFF;
5209 border-right: 1px solid #9C9CFF;
5210 background-clip: padding-box;
5213 #main-window[customize-entered] #browser-bottombox {
5214 border-bottom: 1px solid #9C9CFF;
5217 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5221 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5225 /* End customization mode */
5227 /* Private browsing indicators */
5230 * Currently, we have two places where we put private browsing indicators on
5231 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5232 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5233 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5234 * want the bottom border of the image to line up with the bottom of the window
5235 * caption buttons. That's why there's so much special-casing going on in here.
5237 .private-browsing-indicator {
5239 pointer-events: none;
5242 #private-browsing-indicator-titlebar {
5247 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5251 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5255 #TabsToolbar > .private-browsing-indicator {
5256 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5257 margin-inline-start: 4px;
5261 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5262 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5263 * min/max/close window buttons.
5265 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5266 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5267 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5268 margin-inline-end: 4px;
5274 /* This one is for Linux */
5275 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5276 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5280 /* End private browsing indicators */
5282 /* === BEGIN UITour.inc.css === */
5286 #UITourHighlightContainer {
5287 -moz-appearance: none;
5289 background-color: transparent;
5290 /* This is a buffer to compensate for the movement in the "wobble" effect,
5291 and for the box-shadow of #UITourHighlight. */
5296 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5297 border-radius: 40px;
5298 border: 1px solid #9C9CFF;
5299 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5300 on Linux without an X compositor where opacity is either 0 or 1. */
5301 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5306 #UITourTooltipBody {
5307 -moz-box-align: start;
5310 #UITourTooltipTitleContainer {
5311 -moz-box-align: start;
5312 margin-bottom: 10px;
5315 #UITourTooltipIcon {
5318 margin-inline-end: 10px;
5321 #UITourTooltipTitle,
5322 #UITourTooltipDescription {
5326 #UITourTooltipTitle {
5332 #UITourTooltipDescription {
5333 margin-inline-start: 0;
5334 margin-inline-end: 0;
5336 line-height: 1.8rem;
5337 margin-bottom: 0; /* Override global.css */
5340 #UITourTooltipClose {
5342 -moz-appearance: none;
5344 background-color: transparent;
5346 margin-inline-start: 4px;
5350 #UITourTooltipClose > .toolbarbutton-text {
5354 #UITourTooltipButtons {
5356 background-color: rgba(0,0,0,.2);
5357 border-top: 1px solid rgba(0,0,0,.4);
5358 margin: 10px -16px -16px;
5362 #UITourTooltipButtons > label,
5363 #UITourTooltipButtons > button {
5367 #UITourTooltipButtons > label:first-child,
5368 #UITourTooltipButtons > button:first-child {
5369 margin-inline-start: 0;
5372 #UITourTooltipButtons > label:last-child,
5373 #UITourTooltipButtons > button:last-child {
5374 margin-inline-end: 0;
5377 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5380 margin-inline-end: 5px;
5383 #UITourTooltipButtons > label,
5384 #UITourTooltipButtons > button .button-text {
5388 #UITourTooltipButtons > button:not(.button-link) {
5389 -moz-appearance: none;
5390 background-color: #C09070;
5391 border-radius: 3000px;
5395 transition-property: background-color, color;
5396 transition-duration: 150ms;
5399 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5400 background-color: #FFCF00;
5404 #UITourTooltipButtons > label,
5405 #UITourTooltipButtons > button.button-link {
5406 -moz-appearance: none;
5407 background: transparent;
5410 color: rgba(0,0,0,0.35);
5412 padding-right: 10px;
5415 #UITourTooltipButtons > button.button-link:hover {
5419 /* The primary button gets the same color as the customize button. */
5420 #UITourTooltipButtons > button.button-primary {
5421 background-color: #A06060; /* LCARS default button background color */
5424 padding-right: 30px;
5427 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5428 background-color: #FFCF00;
5432 /* Notification overrides for Heartbeat UI */
5434 notification.heartbeat {
5435 background-color: #A09090;
5439 @keyframes pulse-onshow {
5442 transform: scale(1.0);
5446 transform: scale(1.1);
5449 transform: scale(1.0);
5452 transform: scale(1.1);
5455 transform: scale(1.0);
5459 @keyframes pulse-twice {
5461 transform: scale(1.1);
5464 transform: scale(0.8);
5467 transform: scale(1);
5471 .messageText.heartbeat {
5473 /* text-shadow: none; */
5474 margin-inline-start: 0px;
5477 .messageImage.heartbeat {
5480 margin-inline-start: 8px;
5481 margin-inline-end: 8px;
5484 .messageImage.heartbeat.pulse-onshow {
5485 animation-name: pulse-onshow;
5486 animation-duration: 1.5s;
5487 animation-iteration-count: 1;
5488 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5491 .messageImage.heartbeat.pulse-twice {
5492 animation-name: pulse-twice;
5493 animation-duration: 1s;
5494 animation-iteration-count: 2;
5495 animation-timing-function: linear;
5498 /* Learn More link styles */
5499 .heartbeat > .text-link {
5501 margin-inline-start: 0px;
5504 .heartbeat > .text-link:hover {
5506 text-decoration: none;
5509 .heartbeat > .text-link:hover:active {
5513 /* Heartbeat UI Rating Star Classes */
5514 .heartbeat > #star-rating-container {
5516 /* margin-bottom: 4px;*/
5519 .heartbeat > #star-rating-container > #star5 {
5520 -moz-box-ordinal-group: 5;
5523 .heartbeat > #star-rating-container > #star4 {
5524 -moz-box-ordinal-group: 4;
5527 .heartbeat > #star-rating-container > #star3 {
5528 -moz-box-ordinal-group: 3;
5531 .heartbeat > #star-rating-container > #star2 {
5532 -moz-box-ordinal-group: 2;
5535 .heartbeat > #star-rating-container > .star-x {
5536 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5538 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5539 margin-inline-end: 4px !important;
5544 .heartbeat > #star-rating-container > .star-x:hover,
5545 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5546 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5549 /* === END UITour.inc.css === */
5551 #UITourTooltipButtons {
5553 * Override the --arrowpanel-padding so the background extends
5554 * to the sides and bottom of the panel.
5557 margin-right: -10px;
5558 margin-bottom: -10px;
5561 /* === BEGIN contextmenu.inc.css === */
5563 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5566 #context-navigation > .menuitem-iconic {
5568 -moz-box-pack: center;
5569 -moz-box-align: center;
5572 #context-navigation > .menuitem-iconic[disabled="true"] {
5573 background-color: transparent;
5576 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5577 -moz-appearance: none;
5580 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5584 filter: url(chrome://global/skin/filters.svg#fill);
5589 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5593 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5597 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5601 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5604 #context-bookmarkpage {
5605 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5608 #context-bookmarkpage[starred=true] {
5609 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5612 #context-back:-moz-locale-dir(rtl),
5613 #context-forward:-moz-locale-dir(rtl),
5614 #context-reload:-moz-locale-dir(rtl) {
5615 transform: scaleX(-1);
5618 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5619 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5625 #context-media-eme-learnmore {
5626 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5629 #context-media-eme-learnmore {
5630 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5633 /* === END contextmenu.inc.css === */
5635 #context-navigation {
5638 #context-sep-navigation {
5639 /* margin-top: -4px; */
5642 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5647 .webextension-popup-browser {
5648 border-radius: inherit;
5651 .contentSelectDropdown-ingroup > .menu-iconic-text {
5652 padding-inline-start: 20px;
5655 #ContentSelectDropdown > menupopup {
5656 background-color: #000000;
5657 -moz-border-top-colors: #A09090;
5658 -moz-border-right-colors: #A09090;
5659 -moz-border-bottom-colors: #A09090;
5660 -moz-border-left-colors: #A09090;
5663 #ContentSelectDropdown > menupopup > menucaption,
5664 #ContentSelectDropdown > menupopup > menuitem {
5667 /* font: -moz-list;*/
5670 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5671 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5672 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5673 with 4px being the preferred padding size. */
5674 padding-top: .3333em;
5675 padding-bottom: .3333em;
5678 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5682 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5684 background-color: unset;
5687 #ContentSelectDropdown > menupopup > menucaption {
5688 background-color: buttonface;
5691 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5695 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5696 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5697 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5698 font-size with 11px being the preferred padding size. */
5699 padding-top: .9167em;
5700 padding-bottom: .9167em;