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.svg");
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);
981 #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
986 -moz-image-region: rect(0, 648px, 18px, 630px);
989 #tabview-button:hover {
990 -moz-image-region: rect(18px, 648px, 36px, 630px);
993 #email-link-button[cui-areatype="toolbar"] {
994 -moz-image-region: rect(0, 666px, 18px, 648px);
997 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
998 -moz-image-region: rect(18px, 666px, 36px, 648px);
1001 #email-button[cui-areatype="toolbar"][disabled="true"] {
1002 -moz-image-region: rect(36px, 666px, 54px, 648px);
1005 #sidebar-button[cui-areatype="toolbar"] {
1006 -moz-image-region: rect(0, 684px, 18px, 666px);
1009 #sidebar-button[cui-areatype="toolbar"]:hover {
1010 -moz-image-region: rect(18px, 684px, 36px, 666px);
1013 #panic-button[cui-areatype="toolbar"] {
1014 -moz-image-region: rect(0, 702px, 18px, 684px);
1017 #panic-button[cui-areatype="toolbar"]:hover,
1018 #panic-button[cui-areatype="toolbar"][open] {
1019 -moz-image-region: rect(18px, 702px, 36px, 684px);
1022 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1023 transform: scaleX(-1);
1026 #webide-button[cui-areatype="toolbar"] {
1027 -moz-image-region: rect(0, 738px, 18px, 720px);
1030 #webide-button[cui-areatype="toolbar"]:hover {
1031 -moz-image-region: rect(18px, 738px, 36px, 720px);
1035 fill: currentColor !important;
1038 /* === END toolbarbuttons.inc.css === */
1040 /* === BEGIN menupanel.inc.css === */
1042 /* Menu panel and palette styles */
1044 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1045 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1046 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1047 #social-share-button, #open-file-button, #find-button, #developer-button,
1048 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1049 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1050 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1051 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1052 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1053 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1054 #social-share-button, #open-file-button, #find-button, #developer-button,
1055 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1056 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1057 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1058 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1059 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1062 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1063 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1064 #social-share-button, #open-file-button, #find-button, #developer-button,
1065 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1066 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1067 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1068 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1069 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1070 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1071 #social-share-button, #open-file-button, #find-button, #developer-button,
1072 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1073 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1074 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1075 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1076 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1077 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1078 #social-share-button, #open-file-button, #find-button, #developer-button,
1079 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1080 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1081 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1082 #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,
1083 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1084 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1085 #social-share-button, #open-file-button, #find-button, #developer-button,
1086 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1087 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1088 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1089 #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 {
1090 filter: url(chrome://global/skin/filters.svg#fill);
1094 #home-button[cui-areatype="menu-panel"],
1095 toolbarpaletteitem[place="palette"] > #home-button {
1096 -moz-image-region: rect(0px, 128px, 32px, 96px);
1099 #bookmarks-menu-button[cui-areatype="menu-panel"],
1100 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1101 -moz-image-region: rect(0px, 192px, 32px, 160px);
1104 #history-panelmenu[cui-areatype="menu-panel"],
1105 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1106 -moz-image-region: rect(0px, 224px, 32px, 192px);
1109 #downloads-button[cui-areatype="menu-panel"],
1110 toolbarpaletteitem[place="palette"] > #downloads-button {
1111 -moz-image-region: rect(0px, 256px, 32px, 224px);
1114 #add-ons-button[cui-areatype="menu-panel"],
1115 toolbarpaletteitem[place="palette"] > #add-ons-button {
1116 -moz-image-region: rect(0px, 288px, 32px, 256px);
1119 #open-file-button[cui-areatype="menu-panel"],
1120 toolbarpaletteitem[place="palette"] > #open-file-button {
1121 -moz-image-region: rect(0px, 320px, 32px, 288px);
1124 #save-page-button[cui-areatype="menu-panel"],
1125 toolbarpaletteitem[place="palette"] > #save-page-button {
1126 -moz-image-region: rect(0px, 352px, 32px, 320px);
1129 #sync-button[cui-areatype="menu-panel"],
1130 toolbarpaletteitem[place="palette"] > #sync-button {
1131 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1134 #containers-panelmenu[cui-areatype="menu-panel"],
1135 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1136 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1139 #feed-button[cui-areatype="menu-panel"],
1140 toolbarpaletteitem[place="palette"] > #feed-button {
1141 -moz-image-region: rect(0px, 416px, 32px, 384px);
1144 #social-share-button[cui-areatype="menu-panel"],
1145 toolbarpaletteitem[place="palette"] > #social-share-button {
1146 -moz-image-region: rect(0px, 448px, 32px, 416px);
1149 #characterencoding-button[cui-areatype="menu-panel"],
1150 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1151 -moz-image-region: rect(0px, 480px, 32px, 448px);
1154 #new-window-button[cui-areatype="menu-panel"],
1155 toolbarpaletteitem[place="palette"] > #new-window-button {
1156 -moz-image-region: rect(0px, 512px, 32px, 480px);
1159 #e10s-button[cui-areatype="menu-panel"],
1160 toolbarpaletteitem[place="palette"] > #e10s-button {
1161 -moz-image-region: rect(0px, 512px, 32px, 480px);
1164 #new-tab-button[cui-areatype="menu-panel"],
1165 toolbarpaletteitem[place="palette"] > #new-tab-button {
1166 -moz-image-region: rect(0px, 544px, 32px, 512px);
1169 #privatebrowsing-button[cui-areatype="menu-panel"],
1170 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1171 -moz-image-region: rect(0px, 576px, 32px, 544px);
1174 #tabview-button[cui-areatype="menu-panel"],
1175 toolbarpaletteitem[place="palette"] > #tabview-button {
1176 -moz-image-region: rect(0px, 608px, 32px, 576px);
1179 #find-button[cui-areatype="menu-panel"],
1180 toolbarpaletteitem[place="palette"] > #find-button {
1181 -moz-image-region: rect(0px, 640px, 32px, 608px);
1184 #print-button[cui-areatype="menu-panel"],
1185 toolbarpaletteitem[place="palette"] > #print-button {
1186 -moz-image-region: rect(0px, 672px, 32px, 640px);
1189 #fullscreen-button[cui-areatype="menu-panel"],
1190 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1191 -moz-image-region: rect(0px, 704px, 32px, 672px);
1194 #developer-button[cui-areatype="menu-panel"],
1195 toolbarpaletteitem[place="palette"] > #developer-button {
1196 -moz-image-region: rect(0px, 736px, 32px, 704px);
1199 #preferences-button[cui-areatype="menu-panel"],
1200 toolbarpaletteitem[place="palette"] > #preferences-button {
1201 -moz-image-region: rect(0px, 768px, 32px, 736px);
1204 #email-link-button[cui-areatype="menu-panel"],
1205 toolbarpaletteitem[place="palette"] > #email-link-button {
1206 -moz-image-region: rect(0, 800px, 32px, 768px);
1209 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1210 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1211 -moz-image-region: rect(64px, 800px, 96px, 768px);
1214 #sidebar-button[cui-areatype="menu-panel"],
1215 toolbarpaletteitem[place="palette"] > #sidebar-button {
1216 -moz-image-region: rect(0, 864px, 32px, 832px);
1219 #panic-button[cui-areatype="menu-panel"],
1220 toolbarpaletteitem[place="palette"] > #panic-button {
1221 -moz-image-region: rect(0, 896px, 32px, 864px);
1224 #webide-button[cui-areatype="menu-panel"],
1225 toolbarpaletteitem[place="palette"] > #webide-button {
1226 -moz-image-region: rect(0px, 960px, 32px, 928px);
1229 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1230 -moz-image-region: rect(0, 832px, 32px, 800px);
1233 /* Wide panel control icons */
1235 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1236 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1237 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1238 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1239 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1242 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1243 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1244 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1245 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1246 filter: url(chrome://global/skin/filters.svg#fill);
1250 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1251 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1252 -moz-image-region: rect(0px, 32px, 16px, 16px);
1255 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1256 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1257 -moz-image-region: rect(0px, 48px, 16px, 32px);
1260 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1261 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1262 -moz-image-region: rect(0px, 64px, 16px, 48px);
1265 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1266 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1267 -moz-image-region: rect(0px, 80px, 16px, 64px);
1270 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1271 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1272 -moz-image-region: rect(0px, 96px, 16px, 80px);
1275 #add-share-provider {
1276 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1277 -moz-image-region: rect(0px, 96px, 16px, 80px);
1280 /* === END menupanel.inc.css === */
1282 .toolbarbutton-1:not([type="menu-button"]) {
1283 -moz-box-orient: vertical;
1287 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1293 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1294 .toolbarbutton-1[disabled="true"]:hover:active,
1295 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1299 .toolbarbutton-1:hover:active,
1300 .toolbarbutton-1[open="true"],
1301 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1303 padding-bottom: 0px;
1304 padding-inline-start: 3px;
1305 padding-inline-end: 1px;
1308 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1309 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1310 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1311 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1312 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1315 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1316 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1319 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1320 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1323 .toolbarbutton-1 > .toolbarbutton-icon,
1324 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1328 #nav-bar .toolbarbutton-1,
1329 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1332 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1333 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1334 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1337 #nav-bar #PanelUI-menu-button {
1338 /* padding-inline-start: 7px;
1339 padding-inline-end: 5px;*/
1342 #nav-bar .toolbarbutton-1[type=panel],
1343 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1344 /* padding-left: 5px;
1345 padding-right: 5px;*/
1348 #nav-bar .toolbarbutton-1 > menupopup {
1349 /* margin-top: -3px;*/
1352 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1356 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1357 /* padding-inline-end: 0;*/
1360 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1361 /* padding-inline-start: 0;
1362 -moz-box-align: center;*/
1365 .findbar-button > .toolbarbutton-text,
1366 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1367 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1368 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1369 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1370 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1371 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1372 /* padding: 2px 6px;
1374 border-color: transparent;
1375 transition-property: background-color, border-color;
1376 transition-duration: 150ms;*/
1379 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1380 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1381 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1382 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1386 /* Help SDK icons fit: */
1387 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1388 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1392 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1393 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1397 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1398 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1399 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
1400 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1401 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1402 /* padding-inline-end: 17px;*/
1405 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1406 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
1407 /* horizontal padding + border + icon width */
1408 /* max-width: 43px;*/
1411 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1414 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1417 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1420 #nav-bar .toolbaritem-combined-buttons {
1421 /* margin-left: 2px;
1422 margin-right: 2px;*/
1425 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1430 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1431 #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 {
1437 margin-inline-end: -1px;
1441 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1444 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1445 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1446 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1447 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1448 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1449 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1450 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1451 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1452 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1455 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1456 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1457 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1458 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1459 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1460 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1463 #TabsToolbar .toolbarbutton-1,
1464 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1465 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1466 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1469 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1470 #TabsToolbar .toolbarbutton-1[open],
1471 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1472 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1473 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1476 /* unified back/forward button */
1479 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1482 #forward-button > menupopup {
1483 margin-top: 1px !important;
1486 #forward-button > .toolbarbutton-icon {
1487 background-clip: padding-box !important;
1488 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1489 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1493 margin-inline-start: -4px !important;
1498 border-radius: 0 10000px 10000px 0;
1499 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1502 #forward-button:-moz-locale-dir(rtl) {
1503 border-radius: 10000px 0 0 10000px;
1506 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1507 transition: margin-left 150ms ease-out;
1510 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1511 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1514 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1515 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1516 transition-delay: 100s;
1519 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1520 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1521 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1525 /* padding-top: 3px !important;
1526 padding-bottom: 3px !important;
1527 padding-inline-start: 5px !important;
1528 padding-inline-end: 0 !important;*/
1531 border-radius: 10000px;
1535 margin-bottom: -2px;
1538 #back-button:-moz-locale-dir(rtl) {
1541 #back-button > menupopup {
1542 margin-top: -1px !important;
1545 #back-button > .toolbarbutton-icon {
1546 border-radius: 10000px !important;
1547 background-clip: padding-box !important;
1548 /* background-color: hsla(210,25%,98%,.08) !important;
1549 padding: 6px !important;
1550 border-style: none !important;
1551 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1552 0 0 0 1px hsla(210,4%,10%,.25);*/
1553 transition-property: background-color, box-shadow !important;
1554 transition-duration: 250ms !important;
1557 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1558 /* background-color: hsla(210,4%,10%,.08) !important;*/
1561 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1562 #back-button[open="true"] > .toolbarbutton-icon {
1563 /* background-color: hsla(210,4%,10%,.12) !important;
1564 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1565 0 0 0 1px hsla(210,4%,10%,.25),
1566 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1569 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1570 transform: scaleX(-1);
1573 #forward-button > .toolbarbutton-menu-dropmarker,
1574 #back-button > .toolbarbutton-menu-dropmarker {
1579 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1580 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1581 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1584 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1585 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1586 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1589 #home-button.bookmark-item {
1590 list-style-image: url("chrome://browser/skin/Toolbar.png");
1593 #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),
1594 #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),
1595 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1596 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1597 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1598 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1599 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1602 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1605 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1606 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1607 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1611 #downloads-button > .toolbarbutton-icon {
1615 /* tabview menu item */
1618 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1619 -moz-image-region: rect(1px, 89px, 17px, 73px);
1622 #menu_tabview[groups="0"] {
1623 -moz-image-region: rect(1px, 17px, 17px, 1px);
1626 #menu_tabview[groups="1"] {
1627 -moz-image-region: rect(1px, 35px, 17px, 19px);
1630 #menu_tabview[groups="2"] {
1631 -moz-image-region: rect(1px, 53px, 17px, 37px);
1634 #menu_tabview[groups="3"] {
1635 -moz-image-region: rect(1px, 71px, 17px, 55px);
1638 /* undo close tab menu item */
1639 #alltabs_undoCloseTab {
1640 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1643 @media (min-resolution: 1.1dppx) {
1644 #alltabs_undoCloseTab {
1645 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1647 #alltabs_undoCloseTab > .toolbarbutton-icon {
1652 /* zoom control text (reset) button special case: */
1654 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1655 /* To make this line up with the icons, it needs the same height (18px) +
1656 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1657 * increase in text sizes would break things...
1662 /* ::::: fullscreen window controls ::::: */
1667 -moz-appearance: none;
1669 /* margin: 0 !important;
1670 padding: 6px 12px;*/
1674 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1677 #minimize-button:hover {
1678 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1682 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1685 #restore-button:hover {
1686 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1689 #minimize-button:hover,
1690 #restore-button:hover {
1691 /* background-color: hsla(0, 0%, 0%, .12);*/
1694 #minimize-button:hover:active,
1695 #restore-button:hover:active {
1696 /* background-color: hsla(0, 0%, 0%, .22);*/
1700 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1703 #close-button:hover {
1704 /* background-color: hsl(355, 86%, 49%);*/
1705 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1708 #close-button:hover:active {
1709 /* background-color: hsl(355, 82%, 69%);*/
1712 /* ::::: Location Bar ::::: */
1715 .searchbar-textbox {
1718 margin-inline-start: 3px;
1722 /* make color as light as possible to deal with dark non-domain parts */
1726 #urlbar:-moz-lwtheme,
1727 .searchbar-textbox:-moz-lwtheme {
1728 /* background-color: rgba(255,255,255,.8);
1729 @navbarTextboxCustomBorder@
1733 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1734 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1735 /* background-color: rgba(255,255,255,.9);*/
1738 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1739 .searchbar-textbox:-moz-lwtheme[focused] {
1740 /* background-color: white;*/
1743 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1744 /* border-inline-start: none;
1748 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1749 /* border-top-left-radius: 0;
1750 border-bottom-left-radius: 0; */
1753 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1754 /* border-top-right-radius: 0;
1755 border-bottom-right-radius: 0; */
1758 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1759 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1760 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1763 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1764 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1765 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1766 transform: scaleX(-1);
1769 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1770 -moz-box-direction: reverse;
1773 html|*.urlbar-input:-moz-lwtheme::placeholder,
1774 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1779 -moz-box-orient: horizontal;
1780 -moz-box-align: stretch;
1783 .urlbar-textbox-container {
1784 -moz-box-align: stretch;
1788 margin-inline-start: 0;
1792 #urlbar-display-box {
1793 padding-inline-start: 4px;
1794 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1795 border-inline-end: 1px solid var(--urlbar-separator-color);
1796 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1797 border-image-slice: 1; */
1801 -moz-box-align: center;
1806 /* 16x16 icon with border-box sizing */
1811 /* ::::: URL Bar Zoom Reset Button ::::: */
1813 @keyframes urlbar-zoom-reset-pulse {
1815 transform: scale(0);
1818 transform: scale(1.5);
1821 transform: scale(1.0);
1825 #urlbar-zoom-button {
1826 /* -moz-appearance: none;*/
1827 /* color: inherit;*/
1830 .search-go-container {
1834 .search-go-container > .search-go-button {
1838 #urlbar-search-footer {
1839 border-top: 1px solid var(--panel-separator-color);
1842 #urlbar-search-settings {
1845 #urlbar-search-settings:hover {
1848 #urlbar-search-settings:hover:active {
1851 #urlbar-search-splitter {
1852 /* The splitter width should equal the location and search bars' combined
1853 neighboring margin and border width. */
1858 background: transparent;
1862 border-inline-end: 1px solid #9C9CFF;
1863 margin-inline-end: 3px;
1866 margin-inline-start: 0;
1870 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1872 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1873 border-bottom: 1px solid var(--panel-separator-color);
1874 background-color: #000000;
1876 padding-inline-start: 44px;
1877 padding-inline-end: 6px;
1878 background-image: url("chrome://browser/skin/info.svg");
1879 background-clip: padding-box;
1880 background-position: 20px center;
1881 background-repeat: no-repeat;
1882 background-size: 16px 16px;
1885 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1886 background-position: right 20px center;
1889 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1894 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1895 margin-inline-start: 0;
1898 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1899 -moz-appearance: none;
1904 margin-inline-start: 10px;
1907 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1910 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1913 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1916 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1919 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1922 min-width: calc(54px + 11ch);
1927 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1928 background-color: var(--identity-box-verified-background-color);
1931 #identity-box:-moz-focusring {
1932 outline: 1px dotted;
1933 outline-offset: -1px;
1936 #identity-box.verifiedDomain:-moz-focusring,
1937 #identity-box.verifiedIdentity:-moz-focusring {
1938 outline-color: #000000;
1941 /* Location bar dropmarker */
1943 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1944 background-color: transparent;
1947 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1948 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1949 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1952 transition: opacity 0.15s ease;
1955 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1959 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1963 .urlbar-history-dropmarker:hover {
1966 .urlbar-history-dropmarker:hover:active,
1967 .urlbar-history-dropmarker[open="true"] {
1970 /* page proxy icon */
1971 /* === BEGIN identity-block.inc.css === */
1973 /* === BEGIN identity-block/icons.inc.css === */
1976 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1979 #identity-box:hover > #identity-icon:not(.no-hover),
1980 #identity-box[open=true] > #identity-icon {
1981 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1984 #identity-box.grantedPermissions > #identity-icon {
1985 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1988 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1989 #identity-box.grantedPermissions[open=true] > #identity-icon {
1990 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1993 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1994 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1997 #tracking-protection-icon {
1998 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
2001 #tracking-protection-icon[state="loaded-tracking-content"] {
2002 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2006 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2007 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2008 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2009 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2010 visibility: visible;
2013 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2014 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2015 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2016 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2017 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2018 visibility: visible;
2021 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2022 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2023 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2024 visibility: visible;
2027 /* === END identity-block/icons.inc.css === */
2034 /* The padding-left and padding-right transitions handle the delayed hiding of
2035 the forward button when hovered. */
2036 transition: background-color 150ms ease, padding-left, padding-right;
2039 #identity-box:-moz-locale-dir(ltr) {
2040 border-top-right-radius: 0;
2041 border-bottom-right-radius: 0;
2044 #identity-box:-moz-locale-dir(rtl) {
2045 border-top-left-radius: 0;
2046 border-bottom-left-radius: 0;
2049 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2050 border-inline-end: 1px solid #008484;
2053 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2057 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2058 border-inline-end: 1px solid #9C9CFF;
2061 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2066 #identity-icon-labels:-moz-locale-dir(ltr) {
2070 #identity-icon-labels:-moz-locale-dir(rtl) {
2074 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2075 /* border-radius: 0;
2076 padding-inline-start: 2px; */
2077 padding-inline-end: 2px;
2078 margin-inline-end: 1px;
2081 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2082 padding-inline-start: 2px;
2085 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2086 /* Forward button hiding is delayed when hovered, so we should use the same
2087 delay for the identity box. We handle both horizontal paddings (for LTR and
2088 RTL), the latter two delays here are for padding-left and padding-right. */
2089 transition-delay: 0s, 100s, 100s;
2092 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2093 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2094 padding-inline-start: 2.01px;
2097 /* MAIN IDENTITY ICON */
2104 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2108 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2109 -moz-image-region: inherit;
2110 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2115 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2116 -moz-image-region: inherit;
2117 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2127 margin-inline-start: -16px;
2132 #identity-box[sharing="camera"] > #sharing-icon {
2133 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2136 #identity-box[sharing="microphone"] > #sharing-icon {
2137 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2140 #identity-box[sharing="screen"] > #sharing-icon {
2141 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2145 #identity-box[sharing] > #sharing-icon {
2147 animation-delay: -1.5s;
2150 #identity-box[sharing] > #identity-icon,
2152 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2155 @keyframes identity-box-sharing-icon-pulse {
2156 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2157 0%, 16.66%, 83.33%, 100% {
2165 /* TRACKING PROTECTION ICON */
2167 #tracking-protection-icon {
2170 margin-inline-start: 2px;
2171 margin-inline-end: 0;
2174 #tracking-protection-icon[animate] {
2175 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2178 #tracking-protection-icon:not([state]) {
2179 margin-inline-end: -18px;
2180 pointer-events: none;
2182 /* Only animate the shield in, when it disappears hide it immediately. */
2186 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2187 visibility: collapse;
2190 /* CONNECTION ICON */
2195 margin-inline-start: 2px;
2196 visibility: collapse;
2199 /* === END identity-block.inc.css === */
2201 #page-proxy-favicon {
2202 -moz-image-region: rect(0, 16px, 16px, 0);
2205 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2206 /* margin-inline-end: 1px;*/
2209 #identity-box:hover > #page-proxy-favicon {
2210 -moz-image-region: rect(0, 32px, 16px, 16px);
2213 #identity-box:hover:active > #page-proxy-favicon,
2214 #identity-box[open=true] > #page-proxy-favicon {
2215 -moz-image-region: rect(0, 48px, 16px, 32px);
2218 #identity-box:hover {
2219 background-color: #FFCF00;
2223 #identity-box:hover:active,
2224 #identity-box[open=true] {
2225 background-color: #FF9F00;
2229 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2230 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2231 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2232 background-color: #A09090;
2236 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2237 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2238 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2242 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2243 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2244 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2245 background-color: #008484;
2249 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2250 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2251 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2255 #identity-box:hover > image,
2256 #identity-box:hover:active > image,
2257 #identity-box[open=true] > image {
2258 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2263 /* === BEGIN autocomplete.inc.css === */
2265 #PopupAutoComplete > richlistbox > richlistitem {
2270 padding: 0px 1px 0px 1px;
2273 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2274 margin-inline-start: 4px;
2275 margin-inline-end: 0;
2278 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2280 margin-inline-start: 4px;
2283 #PopupAutoComplete > richlistbox {
2287 /* Login form autocompletion */
2288 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2290 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2293 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2294 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2297 /* Insecure field warning */
2298 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2299 background-color: var(--arrowpanel-dimmed);
2300 border-bottom: 1px solid var(--panel-separator-color);
2301 padding-bottom: 4px;
2305 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2306 background-color: var(--arrowpanel-dimmed-further);
2310 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2315 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2319 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2320 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2323 /* === END autocomplete.inc.css === */
2325 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2326 border-top: 1px solid #A09090;
2329 #treecolAutoCompleteImage {
2334 .autocomplete-richlistbox {
2338 .autocomplete-richlistitem {
2343 border: 1px solid transparent;
2356 border: 1px solid transparent;
2367 html|span.ac-emphasize-text-title,
2368 html|span.ac-emphasize-text-tag,
2369 html|span.ac-emphasize-text-url {
2373 .ac-type-icon[type=bookmark] {
2374 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2377 .ac-type-icon[type=bookmark][selected][current] {
2378 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2381 .ac-result-type-bookmark {
2382 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2383 -moz-image-region: rect(0px 16px 16px 0px);
2388 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2389 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2392 .ac-type-icon[type=keyword],
2393 .ac-site-icon[type=searchengine] {
2394 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2397 .ac-type-icon[type=keyword][selected],
2398 .ac-site-icon[type=searchengine][selected] {
2399 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2402 .ac-result-type-tag {
2403 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2408 .ac-type-icon[type=switchtab],
2409 .ac-type-icon[type=remotetab] {
2410 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2413 .ac-type-icon[type=switchtab][selected],
2414 .ac-type-icon[type=remotetab][selected] {
2415 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2418 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2419 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2425 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2426 border-top: 1px solid #9C9CFF;
2429 /* combined go/reload/stop button in location bar */
2432 #urlbar-reload-button,
2433 #urlbar-stop-button {
2435 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2436 /* margin: 0 9px; */
2437 margin-inline-start: 0px;
2438 border-inline-start: 1px solid var(--urlbar-separator-color);
2439 border-image: linear-gradient(transparent 15%,
2440 var(--urlbar-separator-color) 15%,
2441 var(--urlbar-separator-color) 85%,
2443 border-image-slice: 1;
2446 /* XXX: temporary for Photon preview changes */
2449 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2452 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2453 border-top-left-radius: 0px;
2454 border-bottom-left-radius: 0px;
2457 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2458 border-top-right-radius: 0px;
2459 border-bottom-right-radius: 0px;
2462 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2463 #urlbar-reload-button:not(:hover) {
2464 border-inline-start-style: none;
2465 padding-inline-start: 3px;
2469 #urlbar-reload-button {
2470 -moz-image-region: rect(0px, 14px, 14px, 0px);
2473 #reload-button[disabled=true],
2474 #urlbar-reload-button[disabled=true] {
2475 -moz-image-region: rect(28px, 14px, 42px, 0px);
2478 #reload-button:not([disabled=true]):hover,
2479 #urlbar-reload-button:not([disabled=true]):hover {
2480 -moz-image-region: rect(14px, 14px, 28px, 0px);
2483 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2484 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2485 transform: scaleX(-1);
2489 -moz-image-region: rect(0, 42px, 14px, 28px);
2492 #urlbar-go-button:hover {
2493 -moz-image-region: rect(14px, 42px, 28px, 28px);
2496 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2497 transform: scaleX(-1);
2501 #urlbar-stop-button {
2502 -moz-image-region: rect(0px, 28px, 14px, 14px);
2506 #urlbar-stop-button:hover {
2507 -moz-image-region: rect(14px, 28px, 28px, 14px);
2510 @media (min-resolution: 1.1dppx) {
2514 #urlbar-reload-button,
2515 #urlbar-stop-button {
2516 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2519 #reload-button > .toolbarbutton-icon,
2520 #stop-button > .toolbarbutton-icon,
2521 #urlbar-go-button > .toolbarbutton-icon,
2522 #urlbar-reload-button > .toolbarbutton-icon,
2523 #urlbar-stop-button > .toolbarbutton-icon {
2528 -moz-image-region: rect(0, 84px, 28px, 56px);
2531 #urlbar-go-button:hover {
2532 -moz-image-region: rect(28px, 84px, 56px, 56px);
2535 #urlbar-go-button:hover:active {
2536 -moz-image-region: rect(56px, 84px, 84px, 56px);
2540 #urlbar-reload-button {
2541 -moz-image-region: rect(0, 28px, 28px, 0);
2544 #reload-button:not([disabled]):hover,
2545 #urlbar-reload-button:not([disabled]):hover {
2546 -moz-image-region: rect(28px, 28px, 56px, 0);
2549 #reload-button:not([disabled]):hover:active,
2550 #urlbar-reload-button:not([disabled]):hover:active {
2551 -moz-image-region: rect(56px, 28px, 84px, 0);
2555 #urlbar-stop-button {
2556 -moz-image-region: rect(0, 56px, 28px, 28px);
2559 #stop-button:not([disabled]):hover,
2560 #urlbar-stop-button:not([disabled]):hover {
2561 -moz-image-region: rect(28px, 56px, 56px, 28px);
2564 #stop-button:hover:active,
2565 #urlbar-stop-button:hover:active {
2566 -moz-image-region: rect(56px, 56px, 84px, 28px);
2570 /* popup blocker button */
2572 #page-report-button {
2573 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2574 -moz-image-region: rect(0, 16px, 16px, 0);
2577 #page-report-button:hover ,
2578 #page-report-button:hover:active,
2579 #page-report-button[open="true"] {
2580 -moz-image-region: rect(0, 32px, 16px, 16px);
2583 /* Reader mode button */
2585 #reader-mode-button {
2586 list-style-image: url("chrome://browser/skin/readerMode.svg");
2587 -moz-image-region: rect(0, 16px, 16px, 0);
2590 #reader-mode-button:hover,
2591 #reader-mode-button[readeractive]:hover {
2592 -moz-image-region: rect(0, 32px, 16px, 16px);
2595 #reader-mode-button:hover:active,
2596 #reader-mode-button[readeractive] {
2597 -moz-image-region: rect(0, 48px, 16px, 32px);
2600 /* social share panel */
2602 /* === BEGIN social.inc.css === */
2604 #manage-share-providers {
2605 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2606 -moz-image-region: rect(0, 468px, 18px, 450px);
2609 #manage-share-providers > .toolbarbutton-icon {
2614 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2617 /* fixup corners for share panel */
2618 .social-panel > .social-panel-frame {
2619 border-radius: inherit;
2622 /* === END social.inc.css === */
2624 .social-panel-frame {
2625 border-radius: inherit;
2628 .social-share-frame {
2635 background-color: white;
2636 background-repeat: no-repeat;
2637 background-position: center center;
2639 #share-container[loading] {
2640 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2642 #share-container > browser {
2643 transition: opacity 150ms ease-in-out;
2646 #share-container[loading] > browser {
2650 .social-share-toolbar {
2651 border-bottom: 1px solid #9C9CFF;
2655 #social-share-provider-buttons {
2660 .share-provider-button {
2665 .share-provider-button > .toolbarbutton-text {
2668 .share-provider-button > .toolbarbutton-icon {
2674 #social-share-panel {
2680 .social-share-frame {
2681 border-top-left-radius: 0;
2682 border-bottom-left-radius: inherit;
2683 border-top-right-radius: 0;
2684 border-bottom-right-radius: inherit;
2687 #social-share-panel > .social-share-toolbar {
2688 border-top-left-radius: inherit;
2689 border-top-right-radius: inherit;
2692 #social-share-provider-buttons {
2693 border-top-left-radius: inherit;
2694 border-top-right-radius: inherit;
2697 /* bookmarks menu-button */
2699 #bookmarks-menu-button.bookmark-item {
2700 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2701 -moz-image-region: rect(0px 16px 16px 0px);
2704 #bookmarks-menu-button.bookmark-item[starred] {
2705 -moz-image-region: rect(0px 32px 16px 16px);
2708 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2710 padding-bottom: 2px;
2713 #BMB_bookmarksPopup[side="top"],
2714 #BMB_bookmarksPopup[side="bottom"] {
2716 margin-right: -20px;
2719 #BMB_bookmarksPopup[side="left"],
2720 #BMB_bookmarksPopup[side="right"] {
2722 margin-bottom: -20px;
2725 /* bookmarking panel */
2727 #editBookmarkPanelStarIcon {
2728 list-style-image: url("chrome://browser/skin/places/starred48.png");
2733 #editBookmarkPanelStarIcon[unstarred] {
2734 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2737 #editBookmarkPanelTitle {
2741 #editBookmarkPanelHeader,
2742 #editBookmarkPanelContent {
2743 margin-bottom: .5em;
2746 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2747 #editBMPanel_folderTree {
2751 /* ::::: content area ::::: */
2754 background-color: #9C9CFF;
2759 background-color: #000000;
2763 margin-inline-start: 0;
2772 padding-inline-start: 0px;
2775 #sidebar-header > .close-icon {
2776 /* padding: 4px 2px;
2779 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2782 #sidebar-header > .close-icon:hover,
2783 #sidebar-header > .close-icon:hover:active {
2784 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2787 #sidebar-splitter:-moz-locale-dir(ltr),
2788 #sidebar:-moz-locale-dir(ltr) {
2789 border-radius: 0 5px 0 0;
2792 #sidebar-splitter:-moz-locale-dir(rtl),
2793 #sidebar:-moz-locale-dir(rtl) {
2794 border-radius: 5px 0 0 0;
2797 .browserContainer > findbar {
2799 background-color: -moz-dialog;
2800 color: -moz-DialogText;
2809 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2812 #TabsToolbar .toolbar-holder {
2813 background-color: #000000; /* correct effect of being an actual toolbar */
2816 #main-window[disablechrome] #TabsToolbar,
2817 #TabsToolbar[tabsontop="false"] {
2818 border-bottom: 1px solid #008484;
2821 /* === BEGIN tabs.inc.css === */
2824 /* --tab-toolbar-navbar-overlap: 1px; */
2825 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2826 /* --tab-min-height: 31px; */
2829 /* --tab-stroke-background-size: auto 100%; */
2833 .tabs-newtab-button,
2834 #TabsToolbar > #new-tab-button {
2839 padding: 1px 4px 2px;
2842 .tabbrowser-tab:first-of-type {
2843 margin-inline-start: 2px;
2846 .tabs-newtab-button,
2847 #TabsToolbar > #new-tab-button,
2848 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2849 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2850 border-radius: 8px 8px 0px 0px;
2851 margin-inline-start: 0;
2854 .tabs-newtab-button:not(:hover),
2855 #TabsToolbar > #new-tab-button:not(:hover),
2856 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2857 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2858 background-color: #C09070;
2861 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2862 .tabbrowser-tab[visuallyselected=true] {
2863 /* position: relative;
2867 .tab-background-middle {
2873 .tab-content[pinned] {
2878 .tab-sharing-icon-overlay,
2884 .tab-sharing-icon-overlay,
2888 margin-inline-end: 3px;
2892 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
2895 .tab-icon-image[sharing]:not([selected]),
2896 .tab-sharing-icon-overlay {
2897 animation: 3s linear tab-sharing-icon-pulse infinite;
2900 @keyframes tab-sharing-icon-pulse {
2901 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2902 0%, 16.66%, 83.33%, 100% {
2910 .tab-icon-image[sharing]:not([selected]) {
2911 animation-delay: -1.5s;
2914 .tab-sharing-icon-overlay {
2915 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2916 margin-inline-start: -22px;
2920 .tab-sharing-icon-overlay[sharing="camera"] {
2921 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2924 .tab-sharing-icon-overlay[sharing="microphone"] {
2925 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2928 .tab-sharing-icon-overlay[sharing="screen"] {
2929 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2936 margin-inline-start: -15px;
2937 margin-inline-end: -1px;
2941 .tab-icon-overlay[crashed] {
2942 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2945 .tab-icon-overlay[soundplaying],
2946 .tab-icon-overlay[muted]:not([crashed]),
2947 .tab-icon-overlay[blocked]:not([crashed]) {
2948 border-radius: 10px;
2951 .tab-icon-overlay[soundplaying]:hover,
2952 .tab-icon-overlay[muted]:hover,
2953 .tab-icon-overlay[blocked]:not([crashed]):hover {
2954 background-color: #FFCF00;
2957 .tab-icon-overlay[soundplaying] {
2958 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2961 .tab-icon-overlay[muted]:not([crashed]) {
2962 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2965 .tab-icon-overlay[blocked]:not([crashed]) {
2966 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2969 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2970 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2971 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2974 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2975 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2976 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2979 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2980 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2981 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2984 .tab-throbber[busy] {
2985 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2988 .tab-throbber[progress] {
2989 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2992 @media (min-resolution: 1.1dppx) {
2993 .tab-throbber[busy] {
2994 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2997 .tab-throbber[progress] {
2998 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3002 .tab-throbber[pinned],
3003 .tab-icon-image[pinned] {
3004 margin-inline-start: 2px;
3005 margin-inline-end: 2px;
3009 /* this needs to add up to the 16px of the icon image */
3011 margin-top: 2px !important;
3012 margin-bottom: 2px !important;
3016 margin-inline-start: 4px;
3022 .tab-icon-sound[soundplaying],
3023 .tab-icon-sound[muted],
3024 .tab-icon-sound[blocked] {
3025 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3026 filter: url(chrome://global/skin/filters.svg#fill);
3030 .tab-icon-sound[muted] {
3031 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3034 .tab-icon-sound[blocked] {
3035 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3043 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3044 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3045 transition: opacity .3s linear var(--soundplaying-removal-delay);
3050 .tabs-newtab-button {
3051 /* overlap the tab curves */
3054 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3058 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3059 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3062 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3063 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3066 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3069 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3072 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3073 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3076 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3077 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3080 .tab-background-start[selected=true]::after,
3081 .tab-background-start[selected=true]::before,
3082 .tab-background-start,
3083 .tab-background-end,
3084 .tab-background-end[selected=true]::after,
3085 .tab-background-end[selected=true]::before {
3088 .tabbrowser-tab:not([visuallyselected=true]),
3089 .tabbrowser-tab:-moz-lwtheme {
3092 /* tabbrowser-tab focus ring */
3093 .tabbrowser-tab:focus {
3094 outline: 1px dotted;
3099 .tabbrowser-tab[visuallyselected="true"] {
3102 /* End selected tab */
3104 /* Tab pointer-events */
3107 pointer-events: none;
3110 .tab-background-middle,
3111 .tabs-newtab-button,
3112 .tab-icon-overlay[soundplaying],
3113 .tab-icon-overlay[muted]:not([crashed]),
3114 .tab-icon-overlay[blocked]:not([crashed]),
3117 pointer-events: auto;
3123 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3124 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3126 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3127 background-color: #E7ADE7;
3130 .tab-label[attention]:not([selected="true"]) {
3134 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3135 background-color: #3333FF;
3139 /* Tab separators */
3141 .tabbrowser-tab::after,
3142 .tabbrowser-tab::before {
3144 margin-inline-start: -1px;
3145 background-image: linear-gradient(transparent 5px,
3147 currentColor calc(100% - 4px),
3148 transparent calc(100% - 4px));
3152 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3153 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3157 /* Also show separators beside the selected tab when dragging it. */
3159 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3160 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3161 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3166 /* New tab button */
3168 .tabs-newtab-button {
3170 /* width: calc(36px + var(--tab-curve-width)); */
3172 @media (min-resolution: 1.1dppx) {
3173 /* image preloading hack from like lowdpi styles */
3174 #tabbrowser-tabs::before {
3177 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3178 .tabs-newtab-button:hover {
3181 .tab-background-middle[selected=true] {
3184 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3185 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3188 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3189 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
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 {
3317 -moz-box-orient: horizontal;
3321 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3324 #alltabs-button:hover,
3325 #alltabs-button:hover:active,
3326 #alltabs-button[open="true"] {
3327 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3330 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3331 #alltabs-button:-moz-lwtheme-brighttext {
3334 #alltabs-button > .toolbarbutton-icon {
3338 #alltabs-button > .toolbarbutton-menu-dropmarker {
3342 /* All tabs menupopup */
3343 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3344 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3345 -moz-image-region: auto;
3348 .alltabs-item[selected="true"] {
3352 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3353 list-style-image: url("chrome://global/skin/icons/loading.png");
3356 @media (min-resolution: 1.1dppx) {
3357 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3358 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3362 toolbarbutton.chevron {
3363 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3366 toolbarbutton.chevron:hover {
3367 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3370 toolbar[brighttext] toolbarbutton.chevron {
3371 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3374 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3375 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3376 transform: scaleX(-1);
3379 toolbarbutton.chevron > .toolbarbutton-text,
3380 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3384 toolbarbutton.chevron > .toolbarbutton-icon {
3388 #sidebar-throbber[loading="true"] {
3389 list-style-image: url("chrome://global/skin/icons/loading.png");
3390 margin-inline-end: 4px;
3393 @media (min-resolution: 1.1dppx) {
3394 #sidebar-throbber[loading="true"] {
3395 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3400 /* Bookmarks toolbar */
3401 #PlacesToolbarDropIndicator {
3402 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3405 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3406 background-color: #008484 !important;
3407 color: #FFCF00 !important;
3410 /* rules for menupopup drop indicators */
3411 .menupopup-drop-indicator-bar {
3413 /* these two margins must together compensate the indicator's height */
3415 margin-bottom: -1px;
3418 .menupopup-drop-indicator {
3419 list-style-image: none;
3421 margin-inline-end: -4em;
3422 background-color: #008484;
3425 /* === BEGIN notification-icons.inc.css === */
3427 #notification-popup-box {
3428 border-radius: 3px 0 0 3px;
3431 margin-inline-end: -5px;
3432 padding-inline-end: 5px;
3435 .notification-anchor-icon,
3436 #blocked-permissions-container > .blocked-permission-icon {
3439 margin-inline-start: 2px;
3442 /* This class can be used alone or in combination with the class defining the
3443 type of icon displayed. This rule must be defined before the others in order
3444 for its list-style-image to be overridden. */
3445 .notification-anchor-icon {
3446 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3449 .notification-anchor-icon:-moz-focusring {
3450 outline: 1px dotted #008484;
3453 @media (min-resolution: 1.1dppx) {
3454 .notification-anchor-icon {
3455 list-style-image: url(chrome://global/skin/icons/info.svg);
3459 .notification-anchor-icon:not(.plugin-blocked),
3460 #blocked-permissions-container > .blocked-permission-icon {
3461 filter: url(chrome://global/skin/filters.svg#fill);
3465 /* INDIVIDUAL NOTIFICATIONS */
3467 .popup-notification-icon[popupid="web-notifications"],
3468 .desktop-notification-icon {
3469 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3472 .desktop-notification-icon.blocked-permission-icon {
3473 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3477 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3480 .geo-icon.blocked-permission-icon {
3481 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3484 .popup-notification-icon[popupid="geolocation"] {
3485 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3488 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3490 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3493 .indexedDB-icon.blocked-permission-icon {
3494 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3498 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3501 .popup-notification-icon[popupid="password"] {
3502 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3506 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3509 .camera-icon.in-use {
3510 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3513 .camera-icon.blocked-permission-icon {
3514 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3518 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3521 .microphone-icon.in-use {
3522 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3525 .microphone-icon.blocked-permission-icon {
3526 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3529 .popup-notification-icon.microphone-icon {
3530 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3534 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3537 .screen-icon.in-use {
3538 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3541 .screen-icon.blocked-permission-icon {
3542 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3545 #webRTC-preview:not([hidden]) {
3546 display: -moz-stack;
3548 border: 1px solid #A09090;
3554 html|*#webRTC-previewVideo {
3556 /* If we don't set the min-width, width is ignored. */
3561 #webRTC-previewWarning {
3562 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3565 padding-inline-start: calc(1.5em + 16px);
3566 border-top: 1px solid #A09090;
3569 #webRTC-previewWarning > .text-link {
3570 margin-inline-start: 0;
3573 /* This icon has a block sign in it, so we don't need a blocked version. */
3575 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3580 .popup-notification-icon[popupid="drmContentPlaying"],
3582 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3585 .drm-icon:hover:active {
3586 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3589 #eme-notification-icon[firstplay=true] {
3590 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3593 @keyframes emeTeachingMoment {
3594 0% {transform: translateX(0); }
3595 25% {transform: translateX(3px) }
3596 75% {transform: translateX(-3px) }
3597 100% { transform: translateX(0); }
3600 /* INSTALL ADDONS */
3603 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3606 .popup-notification-icon[popupid="xpinstall-disabled"],
3607 .popup-notification-icon[popupid="addon-install-blocked"],
3608 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3609 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3612 .popup-notification-icon[popupid="addon-progress"] {
3613 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3616 .popup-notification-icon[popupid="addon-install-failed"] {
3617 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3620 .popup-notification-icon[popupid="addon-install-confirmation"] {
3621 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3624 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3625 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3628 .popup-notification-icon[popupid="addon-install-complete"] {
3629 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3632 .popup-notification-icon[popupid="addon-install-restart"] {
3633 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3636 .popup-notification-icon[popupid="click-to-play-plugins"] {
3637 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3642 .popup-notification-icon[popupid*="offline-app-requested"],
3643 .popup-notification-icon[popupid="offline-app-usage"] {
3644 list-style-image: url(chrome://global/skin/icons/question-64.png);
3650 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3653 .plugin-icon.plugin-blocked {
3654 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3657 #notification-popup-box[hidden] {
3658 /* Override display:none to make the pluginBlockedNotification animation work
3659 when showing the notification repeatedly. */
3661 visibility: collapse;
3664 #plugins-notification-icon.plugin-blocked[showing] {
3665 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3668 @keyframes pluginBlockedNotification {
3679 .popup-notification-icon[popupid="servicesInstall"] {
3680 list-style-image: url(chrome://browser/skin/social/services-64.png);
3684 list-style-image: url(chrome://browser/skin/social/services-16.png);
3690 list-style-image: url(chrome://browser/skin/translation-16.png);
3691 -moz-image-region: rect(0px, 16px, 16px, 0px);
3694 .translation-icon.in-use {
3695 -moz-image-region: rect(0px, 32px, 16px, 16px);
3698 /* === END notification-icons.inc.css === */
3700 .popup-notification-body[popupid="addon-progress"],
3701 .popup-notification-body[popupid="addon-install-confirmation"] {
3706 .addon-install-confirmation-name {
3710 .addon-webext-perm-header {
3714 .addon-webext-name {
3723 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3724 -moz-image-region: rect(0px, 288px, 32px, 256px);
3727 .addon-toolbar-icon {
3730 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
3731 -moz-image-region: rect(0, 486px, 18px, 468px);
3734 /* Notification icon box */
3736 .notification-anchor-icon:-moz-focusring {
3737 /* outline: 1px dotted -moz-DialogText;*/
3740 /* Translation infobar */
3742 /* === BEGIN infobar.inc.css === */
3744 notification[value="translation"] .messageImage {
3745 list-style-image: url("chrome://browser/skin/translation-16.png");
3746 -moz-image-region: rect(0, 32px, 16px, 16px);
3749 @media (min-resolution: 1.25dppx) {
3750 notification[value="translation"] .messageImage {
3751 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3752 -moz-image-region: rect(0, 64px, 32px, 32px);
3756 notification[value="translation"][state="translating"] .messageImage {
3757 list-style-image: url("chrome://browser/skin/translating-16.png");
3758 -moz-image-region: auto;
3761 @media (min-resolution: 1.25dppx) {
3762 notification[value="translation"][state="translating"] .messageImage {
3763 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3767 notification[value="translation"] hbox[anonid="details"] {
3771 notification[value="translation"] button,
3772 notification[value="translation"] menulist {
3776 notification[value="translation"] menulist > .menulist-dropmarker {
3779 .translation-menupopup arrowscrollbox {
3783 .translation-attribution {
3785 -moz-box-align: end;
3789 .translation-attribution > label {
3793 .translation-attribution > image {
3797 .translation-welcome-panel {
3801 .translation-welcome-logo {
3804 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3805 -moz-image-region: rect(0, 64px, 32px, 32px);
3808 .translation-welcome-content {
3809 margin-inline-start: 16px;
3812 .translation-welcome-headline {
3817 .translation-welcome-body {
3822 /* === END infobar.inc.css === */
3824 notification[value="translation"] {
3828 .translation-menupopup {
3829 -moz-appearance: none;
3832 /* Bookmarks roots menu-items */
3833 #subscribeToPageMenuitem:not([disabled]),
3834 #subscribeToPageMenupopup {
3835 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3838 #bookmarksToolbarFolderMenu,
3839 #BMB_bookmarksToolbar,
3840 #panelMenu_bookmarksToolbar {
3841 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3842 -moz-image-region: auto;
3845 #BMB_unsortedBookmarks,
3846 #panelMenu_unsortedBookmarks {
3847 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3848 -moz-image-region: auto;
3853 .statuspanel-label {
3856 background: #404000;
3857 border: 1px none #9C9CFF;
3858 border-top-style: solid;
3863 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3864 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3865 border-right-style: solid;
3866 border-top-right-radius: .3em;
3870 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3871 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3872 border-left-style: solid;
3873 border-top-left-radius: .3em;
3877 /* HACK to abolish devily color on main content */
3880 background-color: transparent !important;
3883 /* === BEGIN fullscreen/warning.inc.css === */
3885 html|*.pointerlockfswarning {
3886 align-items: center;
3887 background: rgba(0, 0, 0, 0.9);
3888 border: 2px solid #A09090;
3889 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3892 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3895 html|*.pointerlockfswarning::before {
3897 width: 24px; height: 24px;
3900 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3901 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3902 content: url("chrome://browser/skin/fullscreen/secure.svg");
3905 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3906 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3908 html|*.pointerlockfswarning-domain-text,
3909 html|*.pointerlockfswarning-generic-text {
3911 font-weight: lighter;
3916 html|*.pointerlockfswarning-domain {
3921 html|*#fullscreen-exit-button,
3922 html|*.pointerlockfswarning-exit-button {
3925 border-radius: 300px;
3927 background-color: #C09070;
3931 /* === END fullscreen/warning.inc.css === */
3933 /* === BEGIN ctrlTab.inc.css === */
3938 -moz-appearance: none;
3939 background: rgba(0%,0%,0%,.7);
3942 padding: 20px 10px 10px;
3946 .ctrlTab-favicon[src] {
3947 background-color: #000000;
3953 .ctrlTab-preview-inner > .tabPreview-canvas {
3954 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3957 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3961 .ctrlTab-preview-inner {
3963 border: 2px solid transparent;
3964 border-radius: .5em;
3967 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3968 margin: -10px -10px 0;
3971 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3972 background-color: #000000;
3975 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3977 background-color: #000000;
3979 border-color: #9C9CFF;
3986 /* === END ctrlTab.inc.css === */
3988 /* === BEGIN commandline.inc.css === */
3990 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3991 We are copy/pasting variables from light-theme and dark-theme,
3992 since they aren't loaded in this context (within browser.css). */
3993 :root #developer-toolbar {
3994 --gcli-background-color: #000000; /* --theme-toolbar-background */
3995 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3996 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3997 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3998 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3999 --selection-background: #008484; /* --theme-selection-background */
4000 --selection-color: #000000; /* --theme-selection-color */
4001 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
4002 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
4005 /* Developer toolbar */
4007 #developer-toolbar {
4008 border-top: 3px solid var(--gcli-background-color);
4009 border-bottom: none;
4012 #developer-toolbar .toolbar-holder {
4013 background-color: #8050B0;
4017 #developer-toolbar .toolbar-holder {
4018 background-color: #8050B0;
4022 #developer-toolbar .toolbar-startcap,
4023 #developer-toolbar .toolbar-endcap{
4024 background-color: #6000CF;
4027 #developer-toolbar {
4029 min-height: 32px; */
4032 #developer-toolbar > toolbarbutton {
4034 background-color: transparent;
4040 .developer-toolbar-button > image {
4041 /* margin: auto 10px; */
4044 #developer-toolbar-toolbox-button > label {
4048 .developer-toolbar-button > .toolbarbutton-icon {
4053 #developer-toolbar-toolbox-button {
4054 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4055 -moz-image-region: rect(0px, 16px, 16px, 0px);
4058 #developer-toolbar-toolbox-button > label {
4062 #developer-toolbar-toolbox-button:hover,
4063 #developer-toolbar-toolbox-button:hover:active,
4064 #developer-toolbar-toolbox-button[checked=true] {
4065 -moz-image-region: rect(0px, 32px, 16px, 16px);
4068 @media (min-resolution: 2dppx) {
4069 #developer-toolbar-toolbox-button {
4070 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4071 -moz-image-region: rect(0px, 32px, 32px, 0px);
4074 #developer-toolbar-toolbox-button:hover,
4075 #developer-toolbar-toolbox-button:hover:active,
4076 #developer-toolbar-toolbox-button[checked=true] {
4077 -moz-image-region: rect(0px, 64px, 32px, 32px);
4083 html|*#gcli-tooltip-frame,
4084 html|*#gcli-output-frame {
4087 background-color: transparent;
4093 background-color: transparent;
4096 .gclitoolbar-input-node,
4097 .gclitoolbar-complete-node {
4099 -moz-box-align: center;
4103 background-color: transparent;
4106 .gclitoolbar-input-node {
4107 /* line-height: 32px;
4108 outline-style: none; */
4109 background-repeat: no-repeat;
4110 background-color: var(--gcli-input-background);
4113 .gclitoolbar-input-node[focused="true"] {
4114 background-color: var(--gcli-input-focused-background);
4117 .gclitoolbar-input-node::before {
4119 display: inline-block;
4120 -moz-box-ordinal-group: 0;
4124 background-image: var(--command-line-image);
4127 .gclitoolbar-input-node[focused="true"]::before {
4128 background-image: var(--command-line-image-focus);
4131 .gclitoolbar-input-node:not([focused="true"]) {
4132 border-color: transparent;
4135 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4136 background-color: var(--selection-background);
4137 color: var(--selection-color);
4140 .gclitoolbar-complete-node {
4142 background-color: transparent;
4145 pointer-events: none;
4148 .gcli-in-incomplete,
4152 .gcli-in-closebrace,
4159 .gcli-in-incomplete {
4160 border-bottom: 2px dotted #8050B0;
4164 border-bottom: 2px dotted #FF0000;
4175 .gcli-in-closebrace {
4179 /* === END commandline.inc.css === */
4181 /* === BEGIN responsivedesign.inc.css === */
4183 /* Responsive Mode */
4185 .browserContainer[responsivemode] {
4186 background-color: #221500;
4187 padding: 0 20px 20px 20px;
4190 .browserStack[responsivemode] {
4191 box-shadow: 0 0 7px #9C9CFF;
4194 .devtools-responsiveui-toolbar {
4195 background: transparent;
4196 /* text color is textColor from dark theme, since no theme is applied to
4197 * the responsive toolbar.
4203 border-bottom-width: 0;
4206 .devtools-responsiveui-textinput {
4207 /* -moz-appearance: none;
4210 border: 1px solid #111;
4217 .devtools-responsiveui-textinput[attention] {
4218 /* border-color: #38ace6;
4219 background: rgba(56,172,230,0.4);*/
4222 .devtools-responsiveui-menulist,
4223 .devtools-responsiveui-toolbarbutton {
4224 -moz-box-align: center;
4226 /* min-height: 22px;*/
4227 /* margin: 0 3px; */
4230 .devtools-responsiveui-menulist .menulist-editable-box {
4231 background-color: transparent;
4234 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4239 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4240 /* background: hsla(212,7%,57%,.35);*/
4243 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4248 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4249 -moz-box-orient: horizontal;
4252 .devtools-responsiveui-menulist:-moz-focusring,
4253 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4254 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4255 outline-offset: -4px;*/
4258 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4262 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4263 /* border-color: hsla(210,8%,5%,.6);
4264 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4265 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); */
4268 .devtools-responsiveui-menulist[open=true],
4269 .devtools-responsiveui-toolbarbutton[open=true],
4270 .devtools-responsiveui-toolbarbutton[checked=true] {
4271 /* border-color: hsla(210,8%,5%,.6) !important;
4272 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4273 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); */
4276 .devtools-responsiveui-toolbarbutton[checked=true] {
4277 /* color: hsl(208,100%,60%); */
4280 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4281 /* background-color: transparent !important;*/
4284 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4285 /* background-color: hsla(210,8%,5%,.2) !important;*/
4288 .devtools-responsiveui-menulist > .menulist-label-box {
4292 .devtools-responsiveui-menulist > .menulist-dropmarker {
4293 /* display: -moz-box;
4294 background-color: transparent;
4295 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4296 -moz-box-align: center;
4301 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4304 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4305 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4308 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4309 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4312 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4313 /* padding: 0 1px;*/
4314 -moz-box-align: stretch;
4317 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4318 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4319 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4320 -moz-box-align: center;
4324 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4325 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4329 .devtools-responsiveui-close {
4330 list-style-image: url("chrome://devtools/skin/close.svg");
4333 .devtools-responsiveui-close:hover {
4334 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4337 .devtools-responsiveui-close > image {
4341 .devtools-responsiveui-rotate {
4342 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4343 -moz-image-region: rect(0px,16px,16px,0px);
4346 .devtools-responsiveui-rotate:hover {
4347 -moz-image-region: rect(0px,32px,16px,16px);
4350 @media (min-resolution: 2dppx) {
4351 .devtools-responsiveui-rotate {
4352 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4355 .devtools-responsiveui-rotate:hover {
4356 -moz-image-region: rect(0px,64px,32px,32px);
4360 .devtools-responsiveui-touch {
4361 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4362 -moz-image-region: rect(0px,16px,16px,0px);
4365 .devtools-responsiveui-touch:hover,
4366 .devtools-responsiveui-touch[checked],
4367 .devtools-responsiveui-touch[checked]:hover {
4368 -moz-image-region: rect(0px,32px,16px,16px);
4371 @media (min-resolution: 2dppx) {
4372 .devtools-responsiveui-touch {
4373 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4374 -moz-image-region: rect(0px,32px,32px,0px);
4377 .devtools-responsiveui-touch:hover,
4378 .devtools-responsiveui-touch[checked],
4379 .devtools-responsiveui-touch[checked]:hover {
4380 -moz-image-region: rect(0px,64px,32px,32px);
4384 .devtools-responsiveui-screenshot {
4385 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4386 -moz-image-region: rect(0px,16px,16px,0px);
4389 .devtools-responsiveui-screenshot:hover {
4390 -moz-image-region: rect(0px,32px,16px,16px);
4393 @media (min-resolution: 2dppx) {
4394 .devtools-responsiveui-screenshot {
4395 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4398 .devtools-responsiveui-screenshot:hover {
4399 -moz-image-region: rect(0px,64px,32px,32px);
4403 .devtools-responsiveui-resizebarV {
4407 transform: translate(12px, -12px);
4408 background-size: cover;
4409 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4412 .devtools-responsiveui-resizebarH {
4416 transform: translate(-12px, 12px);
4417 background-size: cover;
4418 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4421 .devtools-responsiveui-resizehandle {
4425 transform: translate(12px, 12px);
4426 background-size: cover;
4427 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4430 /* FxOS custom mode with additional buttons and phone look'n feel */
4432 /* Hide devtools manual resizer */
4433 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4434 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4435 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4439 /* Gives responsive mode a phone look'n feel */
4440 .browserStack[responsivemode].fxos-mode {
4441 padding: 60px 15px 0;
4443 border-radius: 25px / 20px;
4444 border-bottom-left-radius: 0;
4445 border-bottom-right-radius: 0;
4446 border: 1px solid #FFFFFF;
4447 border-bottom-width: 0;
4449 background-color: #353535;
4451 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4453 background-image: linear-gradient(to right, #111 11%, #333 56%);
4457 .devtools-responsiveui-hardware-buttons {
4458 -moz-appearance: none;
4461 border: 1px solid #FFFFFF;
4462 border-bottom-left-radius: 25px;
4463 border-bottom-right-radius: 25px;
4464 border-top-width: 0;
4466 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4468 background-image: linear-gradient(to right, #111 11%, #333 56%);
4471 .devtools-responsiveui-home-button {
4472 -moz-user-focus: ignore;
4475 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4478 .devtools-responsiveui-sleep-button {
4479 -moz-user-focus: ignore;
4480 -moz-appearance: none;
4481 /* compensate browserStack top padding */
4489 border: 1px solid #444;
4490 border-top-right-radius: 12px;
4491 border-top-left-radius: 12px;
4492 border-bottom-color: transparent;
4494 background-image: linear-gradient(to top, #111 11%, #333 56%);
4497 .devtools-responsiveui-sleep-button:hover:active {
4498 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4501 .devtools-responsiveui-volume-buttons {
4505 .devtools-responsiveui-volume-up-button,
4506 .devtools-responsiveui-volume-down-button {
4507 -moz-user-focus: ignore;
4508 -moz-appearance: none;
4509 border: 1px solid red;
4513 border: 1px solid #444;
4514 border-right-color: transparent;
4516 background-image: linear-gradient(to right, #111 11%, #333 56%);
4519 .devtools-responsiveui-volume-up-button:hover:active,
4520 .devtools-responsiveui-volume-down-button:hover:active {
4521 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4524 .devtools-responsiveui-volume-up-button {
4525 border-top-left-radius: 12px;
4528 .devtools-responsiveui-volume-down-button {
4529 border-bottom-left-radius: 12px;
4532 @media (min-resolution: 2dppx) {
4533 .devtools-responsiveui-resizebarV {
4534 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4537 .devtools-responsiveui-resizebarH {
4538 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4541 .devtools-responsiveui-resizehandle {
4542 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4546 /* === END responsivedesign.inc.css === */
4548 /* === including indicator.css is done at the start of the file === */
4552 #developer-toolbar-toolbox-button[error-count]:before {
4556 background-color: #FF0000;
4558 margin-inline-end: 5px;
4561 /* === BEGIN plugin-doorhanger.inc.css === */
4564 * Plugin Doorhanger Styles
4567 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4568 padding: 6px 1px 2px;
4571 .click-to-play-plugins-notification-center-box {
4574 .plugin-popupnotification-centeritem:nth-child(odd) {
4575 /* background-color: rgba(0,0,0,0.1);*/
4578 .center-item-label {
4580 text-overflow: ellipsis;
4583 .center-item-warning-icon {
4584 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4585 background-repeat: no-repeat;
4588 margin-inline-start: 6px;
4591 .click-to-play-plugins-notification-button-container {
4594 .click-to-play-popup-button {
4598 .click-to-play-plugins-notification-description-box {
4602 padding-bottom: 3px;
4605 .click-to-play-plugins-outer-description {
4609 .click-to-play-plugins-notification-link,
4614 .messageImage[value="plugin-hidden"] {
4615 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4618 /* Keep any changes to this style in sync with pluginProblem.css */
4619 notification.pluginVulnerable {
4622 notification.pluginVulnerable .messageImage {
4623 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4626 /* === END plugin-doorhanger.inc.css === */
4628 /* === BEGIN customizeMode.inc.css === */
4630 /* Customization mode */
4633 --drag-drop-transition-duration: .3s;
4636 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4637 background-repeat: no-repeat;
4638 background-position: right top;
4639 background-attachment: fixed;
4640 background-color: transparent;
4641 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4642 var(--toolbox-rect-height), 0),
4643 linear-gradient(to bottom,
4644 var(--lwt-accent-color) 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(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4647 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4648 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4649 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4652 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4656 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4657 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4658 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4663 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4664 pointer-events: none;
4667 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4668 #PanelUI-contents > .panel-customization-placeholder {
4669 -moz-outline-radius: 2.5px;
4670 outline: 1px dashed transparent;
4673 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4674 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4675 -moz-box-ordinal-group: 0;
4680 outline-offset: -2px;
4681 pointer-events: none;
4687 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4688 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4689 offset from the bottom effectively the same as other targets (-2px). */
4690 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4694 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4695 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4696 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4697 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4701 /* Most target outlines are shown on hover and drag over but the panel menu uses
4702 placeholders instead. */
4703 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4704 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4705 /* nav-bar and panel outlines are always shown */
4706 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4707 outline-color: currentColor;
4710 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4711 transition: outline-color 250ms linear;
4714 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4715 transition: outline-color 250ms linear;
4716 outline-color: var(--panel-separator-color);
4719 #PanelUI-contents > .panel-customization-placeholder {
4721 outline-offset: -5px;
4724 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4726 /* padding-left: 10px;
4727 padding-right: 10px;*/
4730 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4734 #customization-container {
4735 background-color: #000000;
4739 #customization-palette,
4740 #customization-empty {
4741 padding: 0 15px 15px;
4744 #customization-header {
4746 line-height: 1.75em;
4749 margin: 25px 25px 12px;
4750 padding-bottom: 12px;
4751 border-bottom: 1px solid #A09090;
4754 #customization-panel-container {
4755 padding: 10px 10px 0px;
4758 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4759 #customization-footer {
4760 /*background-color: rgb(236,236,236);*/
4763 #customization-footer {
4764 border-top: 1px solid #9C9CFF;
4768 .customizationmode-button {
4772 .customizationmode-button:hover {
4775 .customizationmode-button > .box-inherit {
4778 .customizationmode-button > .button-icon {
4781 .customizationmode-button:not([type=menu]) > .button-text {
4784 .customizationmode-button > .button-menu-dropmarker {
4789 .customizationmode-button[checked] {
4790 background-color: #008484;
4793 .customizationmode-button[checked]:hover:not([disabled]),
4794 .customizationmode-button:hover:not([disabled]) {
4795 background-color: #FFCF00;
4798 .customizationmode-button[checked]:hover:active:not([disabled]),
4799 .customizationmode-button:hover:active:not([disabled]),
4800 .customizationmode-button[open] {
4801 background-color: #FF9F00;
4804 .customizationmode-button[disabled="true"] {
4807 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4808 .customizationmode-button > .button-box > .button-icon {
4812 #customization-titlebar-visibility-button {
4813 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4814 -moz-image-region: rect(0, 16px, 16px, 0);
4817 #customization-titlebar-visibility-button:hover {
4818 -moz-image-region: rect(16px, 16px, 32px, 0);
4821 #customization-titlebar-visibility-button > .button-box {
4823 padding-bottom: 1px;
4826 #customization-titlebar-visibility-button:hover:active > .button-box {
4831 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4832 #customization-titlebar-visibility-button > .button-box > .button-text {
4833 /* Sadly, button.css thinks its margins are perfect for everyone. */
4834 margin-inline-start: 5px !important;
4837 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4841 background-image: url("chrome://browser/content/default-theme-icon.svg");
4842 background-size: contain;
4845 #customization-titlebar-visibility-button > .button-box > .button-icon {
4846 vertical-align: middle;
4849 #customization-titlebar-visibility-button[checked] {
4850 -moz-image-region: rect(0, 32px, 16px, 16px);
4851 background-color: #008484;
4854 #customization-titlebar-visibility-button[checked]:hover {
4855 -moz-image-region: rect(16px, 32px, 32px, 16px);
4856 background-color: #FFCF00;
4859 #customization-titlebar-visibility-button[checked]:hover:active {
4860 background-color: #FF9F00;
4863 @media (min-resolution: 1.1dppx) {
4864 #customization-titlebar-visibility-button {
4865 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4866 -moz-image-region: rect(0, 48px, 48px, 0);
4869 #customization-titlebar-visibility-button:hover {
4870 -moz-image-region: rect(48px, 48px, 96px, 0);
4873 #customization-titlebar-visibility-button[checked] {
4874 -moz-image-region: rect(0, 96px, 48px, 48px);
4877 #customization-titlebar-visibility-button[checked]:hover {
4878 -moz-image-region: rect(48px, 96px, 96px, 48px);
4882 #main-window[customize-entered] #customization-panel-container {
4883 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4884 background-position: left top;
4885 background-repeat: repeat;
4886 background-size: auto;
4887 background-attachment: fixed;
4890 toolbarpaletteitem[place="toolbar"] {
4891 transition: border-width 250ms ease-in-out;
4894 toolbarpaletteitem[mousedown] {
4895 outline: 1px solid #008484;
4896 cursor: -moz-grabbing;
4900 .panel-customization-placeholder,
4901 toolbarpaletteitem[place="palette"],
4902 toolbarpaletteitem[place="panel"] {
4903 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4906 #customization-palette {
4907 transition: opacity .3s ease-in-out;
4911 #customization-palette[showing="true"] {
4915 toolbarpaletteitem toolbarbutton[disabled] {
4916 /* color: inherit !important;*/
4919 toolbarpaletteitem[notransition].panel-customization-placeholder,
4920 toolbarpaletteitem[notransition][place="toolbar"],
4921 toolbarpaletteitem[notransition][place="palette"],
4922 toolbarpaletteitem[notransition][place="panel"] {
4926 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4927 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4928 toolbarpaletteitem > toolbaritem.panel-wide-item,
4929 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4930 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4933 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4934 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4935 transform: scale(1.3);
4938 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4939 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4940 transform: scale(1.1);
4943 /* Override the toolkit styling for items being dragged over. */
4944 toolbarpaletteitem[place="toolbar"] {
4945 border-left-width: 0;
4946 border-right-width: 0;
4951 #customization-palette:not([hidden]) {
4952 margin-bottom: 25px;
4955 toolbarpaletteitem[place="palette"]:-moz-focusring,
4956 toolbarpaletteitem[place="panel"]:-moz-focusring,
4957 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4961 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4962 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4963 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4964 /* Delay adding the focusring back until after the transform transition completes. */
4965 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4966 outline: 1px dotted;
4967 -moz-outline-radius: 2.5px;
4970 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4971 outline-offset: -5px;
4974 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4975 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4976 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4977 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4981 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4982 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4992 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4993 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4997 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4998 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5001 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5002 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5006 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5007 -moz-box-pack: center;
5011 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5012 margin-inline-end: 5px;
5015 #customization-palette > toolbarpaletteitem > label {
5021 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5022 -moz-box-orient: vertical;
5023 /* Make the panel padding uniform across all platforms due to the
5024 styling of the section headers and footer. */
5028 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5033 .customization-lwtheme-menu-theme {
5034 -moz-appearance: none;
5037 padding-inline-end: 5px;
5039 padding-inline-start: 0;
5042 .customization-lwtheme-menu-theme[defaulttheme] {
5043 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
5046 .customization-lwtheme-menu-theme[active="true"] {
5047 background-color: #008484;
5050 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5054 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5058 #customization-lwtheme-menu-header,
5059 #customization-lwtheme-menu-recommended {
5064 #customization-lwtheme-menu-header,
5065 #customization-lwtheme-menu-recommended,
5066 #customization-lwtheme-menu-footer {
5067 background-color: #A09090;
5069 margin-right: -10px;
5073 #customization-lwtheme-menu-header {
5075 border-top-right-radius: 3px;
5076 border-top-left-radius: 3px;
5079 #customization-lwtheme-menu-recommended {
5082 #customization-lwtheme-menu-footer {
5083 margin-bottom: -10px;
5084 border-bottom-right-radius: 3px;
5085 border-bottom-left-radius: 3px;
5088 .customization-lwtheme-menu-footeritem {
5089 -moz-appearance: none;
5091 background-color: #C09070;
5093 border: 1px solid transparent;
5099 .customization-lwtheme-menu-footeritem:hover {
5100 background-color: #FFCF00;
5103 .customization-lwtheme-menu-footeritem:first-child {
5106 /* === END customizeMode.inc.css === */
5108 /* === BEGIN customizeTip.inc.css === */
5110 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5117 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5118 border: 1px solid #9C9CFF;
5122 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5123 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5126 .customization-tipPanel-infoBox {
5127 margin: 20px 25px 25px;
5129 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5130 background-repeat: no-repeat;
5133 .customization-tipPanel-content {
5139 .customization-tipPanel-em {
5144 .customization-tipPanel-contentImage {
5146 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5154 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5155 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5158 .customization-tipPanel-link {
5159 -moz-appearance: none;
5160 background: transparent;
5168 .customization-tipPanel-link > .button-box > .button-text {
5169 margin: 0 !important;
5172 .customization-tipPanel-closeBox > .close-icon {
5173 -moz-appearance: none;
5175 margin-inline-end: -25px;
5178 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5179 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5180 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5183 /* === END customizeTip.inc.css === */
5186 * This next rule is a hack to disable subpixel anti-aliasing on all
5187 * labels during the customize mode transition. Subpixel anti-aliasing
5188 * on Windows with Direct2D layers acceleration is particularly slow to
5189 * paint, so this hack is how we sidestep that performance bottleneck.
5191 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5192 transform: perspective(0.01px);
5195 #main-window[customize-entered] > #tab-view-deck {
5196 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5197 background-attachment: fixed;
5200 #main-window[customization-lwtheme]:-moz-lwtheme {
5201 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5202 background-repeat: repeat;
5203 background-attachment: fixed;
5204 background-position: left top;
5207 #main-window[customize-entered] #browser-bottombox,
5208 #main-window[customize-entered] #customization-container {
5209 border-left: 1px solid #9C9CFF;
5210 border-right: 1px solid #9C9CFF;
5211 background-clip: padding-box;
5214 #main-window[customize-entered] #browser-bottombox {
5215 border-bottom: 1px solid #9C9CFF;
5218 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5222 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5226 /* End customization mode */
5228 /* Private browsing indicators */
5231 * Currently, we have two places where we put private browsing indicators on
5232 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5233 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5234 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5235 * want the bottom border of the image to line up with the bottom of the window
5236 * caption buttons. That's why there's so much special-casing going on in here.
5238 .private-browsing-indicator {
5240 pointer-events: none;
5243 #private-browsing-indicator-titlebar {
5248 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5252 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5256 #TabsToolbar > .private-browsing-indicator {
5257 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5258 margin-inline-start: 4px;
5262 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5263 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5264 * min/max/close window buttons.
5266 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5267 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5268 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5269 margin-inline-end: 4px;
5275 /* This one is for Linux */
5276 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5277 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5281 /* End private browsing indicators */
5283 /* === BEGIN UITour.inc.css === */
5287 #UITourHighlightContainer {
5288 -moz-appearance: none;
5290 background-color: transparent;
5291 /* This is a buffer to compensate for the movement in the "wobble" effect,
5292 and for the box-shadow of #UITourHighlight. */
5297 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5298 border-radius: 40px;
5299 border: 1px solid #9C9CFF;
5300 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5301 on Linux without an X compositor where opacity is either 0 or 1. */
5302 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5307 #UITourTooltipBody {
5308 -moz-box-align: start;
5311 #UITourTooltipTitleContainer {
5312 -moz-box-align: start;
5313 margin-bottom: 10px;
5316 #UITourTooltipIcon {
5319 margin-inline-end: 10px;
5322 #UITourTooltipTitle,
5323 #UITourTooltipDescription {
5327 #UITourTooltipTitle {
5333 #UITourTooltipDescription {
5334 margin-inline-start: 0;
5335 margin-inline-end: 0;
5337 line-height: 1.8rem;
5338 margin-bottom: 0; /* Override global.css */
5341 #UITourTooltipClose {
5343 -moz-appearance: none;
5345 background-color: transparent;
5347 margin-inline-start: 4px;
5351 #UITourTooltipClose > .toolbarbutton-text {
5355 #UITourTooltipButtons {
5357 background-color: rgba(0,0,0,.2);
5358 border-top: 1px solid rgba(0,0,0,.4);
5359 margin: 10px -16px -16px;
5363 #UITourTooltipButtons > label,
5364 #UITourTooltipButtons > button {
5368 #UITourTooltipButtons > label:first-child,
5369 #UITourTooltipButtons > button:first-child {
5370 margin-inline-start: 0;
5373 #UITourTooltipButtons > label:last-child,
5374 #UITourTooltipButtons > button:last-child {
5375 margin-inline-end: 0;
5378 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5381 margin-inline-end: 5px;
5384 #UITourTooltipButtons > label,
5385 #UITourTooltipButtons > button .button-text {
5389 #UITourTooltipButtons > button:not(.button-link) {
5390 -moz-appearance: none;
5391 background-color: #C09070;
5392 border-radius: 3000px;
5396 transition-property: background-color, color;
5397 transition-duration: 150ms;
5400 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5401 background-color: #FFCF00;
5405 #UITourTooltipButtons > label,
5406 #UITourTooltipButtons > button.button-link {
5407 -moz-appearance: none;
5408 background: transparent;
5411 color: rgba(0,0,0,0.35);
5413 padding-right: 10px;
5416 #UITourTooltipButtons > button.button-link:hover {
5420 /* The primary button gets the same color as the customize button. */
5421 #UITourTooltipButtons > button.button-primary {
5422 background-color: #A06060; /* LCARS default button background color */
5425 padding-right: 30px;
5428 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5429 background-color: #FFCF00;
5433 /* Notification overrides for Heartbeat UI */
5435 notification.heartbeat {
5436 background-color: #A09090;
5440 @keyframes pulse-onshow {
5443 transform: scale(1.0);
5447 transform: scale(1.1);
5450 transform: scale(1.0);
5453 transform: scale(1.1);
5456 transform: scale(1.0);
5460 @keyframes pulse-twice {
5462 transform: scale(1.1);
5465 transform: scale(0.8);
5468 transform: scale(1);
5472 .messageText.heartbeat {
5474 /* text-shadow: none; */
5475 margin-inline-start: 0px;
5478 .messageImage.heartbeat {
5481 margin-inline-start: 8px;
5482 margin-inline-end: 8px;
5485 .messageImage.heartbeat.pulse-onshow {
5486 animation-name: pulse-onshow;
5487 animation-duration: 1.5s;
5488 animation-iteration-count: 1;
5489 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5492 .messageImage.heartbeat.pulse-twice {
5493 animation-name: pulse-twice;
5494 animation-duration: 1s;
5495 animation-iteration-count: 2;
5496 animation-timing-function: linear;
5499 /* Learn More link styles */
5500 .heartbeat > .text-link {
5502 margin-inline-start: 0px;
5505 .heartbeat > .text-link:hover {
5507 text-decoration: none;
5510 .heartbeat > .text-link:hover:active {
5514 /* Heartbeat UI Rating Star Classes */
5515 .heartbeat > #star-rating-container {
5517 /* margin-bottom: 4px;*/
5520 .heartbeat > #star-rating-container > #star5 {
5521 -moz-box-ordinal-group: 5;
5524 .heartbeat > #star-rating-container > #star4 {
5525 -moz-box-ordinal-group: 4;
5528 .heartbeat > #star-rating-container > #star3 {
5529 -moz-box-ordinal-group: 3;
5532 .heartbeat > #star-rating-container > #star2 {
5533 -moz-box-ordinal-group: 2;
5536 .heartbeat > #star-rating-container > .star-x {
5537 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5539 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5540 margin-inline-end: 4px !important;
5545 .heartbeat > #star-rating-container > .star-x:hover,
5546 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5547 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5550 /* === END UITour.inc.css === */
5552 #UITourTooltipButtons {
5554 * Override the --arrowpanel-padding so the background extends
5555 * to the sides and bottom of the panel.
5558 margin-right: -10px;
5559 margin-bottom: -10px;
5562 /* === BEGIN contextmenu.inc.css === */
5564 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5567 #context-navigation > .menuitem-iconic {
5569 -moz-box-pack: center;
5570 -moz-box-align: center;
5573 #context-navigation > .menuitem-iconic[disabled="true"] {
5574 background-color: transparent;
5577 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5578 -moz-appearance: none;
5581 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5585 filter: url(chrome://global/skin/filters.svg#fill);
5590 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5594 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5598 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5602 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5605 #context-bookmarkpage {
5606 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5609 #context-bookmarkpage[starred=true] {
5610 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5613 #context-back:-moz-locale-dir(rtl),
5614 #context-forward:-moz-locale-dir(rtl),
5615 #context-reload:-moz-locale-dir(rtl) {
5616 transform: scaleX(-1);
5619 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5620 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5626 #context-media-eme-learnmore {
5627 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5630 #context-media-eme-learnmore {
5631 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5634 /* === END contextmenu.inc.css === */
5636 #context-navigation {
5639 #context-sep-navigation {
5640 /* margin-top: -4px; */
5643 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5648 .webextension-popup-browser {
5649 border-radius: inherit;
5652 .contentSelectDropdown-ingroup > .menu-iconic-text {
5653 padding-inline-start: 20px;
5656 #ContentSelectDropdown > menupopup {
5657 background-color: #000000;
5658 -moz-border-top-colors: #A09090;
5659 -moz-border-right-colors: #A09090;
5660 -moz-border-bottom-colors: #A09090;
5661 -moz-border-left-colors: #A09090;
5664 #ContentSelectDropdown > menupopup > menucaption,
5665 #ContentSelectDropdown > menupopup > menuitem {
5668 /* font: -moz-list;*/
5671 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5672 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5673 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5674 with 4px being the preferred padding size. */
5675 padding-top: .3333em;
5676 padding-bottom: .3333em;
5679 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5683 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5685 background-color: unset;
5688 #ContentSelectDropdown > menupopup > menucaption {
5689 background-color: buttonface;
5692 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5696 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5697 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5698 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5699 font-size with 11px being the preferred padding size. */
5700 padding-top: .9167em;
5701 padding-bottom: .9167em;