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 */
228 #navigator-toolbox > toolbar {
231 #navigator-toolbox::after {
234 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
235 /*border-bottom: 1px solid ThreeDShadow;*/
238 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
241 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
242 overflow: -moz-hidden-unscrollable;
244 transition: min-height 170ms ease-out, max-height 170ms ease-out;
247 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
250 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
253 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
254 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
255 /* Indent also due to non-applicable aero rule in original Windows theme. */
256 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
257 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
259 background-color: #6000CF;
263 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
264 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
265 background-color: #8050B0;
269 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
273 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
277 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
278 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
283 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
284 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
285 #titlebar-buttonbox > .titlebar-button {
291 /* Position the toolbar above the bottom of background tabs */
296 #personal-bookmarks {
297 /* min-height: 24px; */
300 #PersonalToolbar > #home-button {
301 -moz-box-orient: horizontal;
304 #PersonalToolbar > #home-button > .toolbarbutton-text {
308 #print-preview-toolbar:not(:-moz-lwtheme) {
309 /* -moz-appearance: toolbox; */
312 #browser-bottombox:not(:-moz-lwtheme) {
315 /* ::::: titlebar ::::: */
319 background-color: #6000CF;
322 #titlebar:-moz-window-inactive {
323 background-color: #8050B0;
327 #main-window[sizemode="normal"] > #titlebar {
332 #main-window[sizemode="maximized"] > #titlebar {
336 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
337 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
338 #main-window[sizemode="normal"] > #titlebar,
339 #main-window[sizemode="maximized"] > #titlebar {
341 /* There is a margin-bottom set to -23 by code. */
345 /* The button box must appear on top of the navigator-toolbox in order for
346 * click and hover mouse events to work properly for the button in the restored
347 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
348 * can swallow those events. It will also place the buttons above the fog on
349 * themes with Aero Glass.
352 #main-window[sizemode="maximized"] #titlebar-buttonbox {
353 -moz-appearance: none;
356 margin-inline-end: 3px;
360 .titlebar-placeholder[type="appmenu-button"] {
364 .titlebar-placeholder[type="caption-buttons"] {
368 /* titlebar command buttons */
370 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
373 #titlebar-min:hover {
374 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
378 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
381 #titlebar-max:hover {
382 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
385 #main-window[sizemode="maximized"] #titlebar-max {
386 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
389 #main-window[sizemode="maximized"] #titlebar-max:hover {
390 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
394 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
397 #titlebar-close:hover {
398 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
401 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
402 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
403 #titlebar-fullscreen-button {
404 -moz-appearance: none;
405 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
406 -moz-image-region: rect(0px, 16px, 16px, 0px);
409 #titlebar-fullscreen-button:hover {
410 -moz-image-region: rect(0px, 32px, 16px, 16px);
413 @media (min-resolution: 2dppx) {
414 #titlebar-fullscreen-button {
415 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
416 -moz-image-region: rect(0px, 32px, 32px, 0px);
419 #titlebar-fullscreen-button:hover {
420 -moz-image-region: rect(0px, 64px, 32px, 32px);
426 /* ::::: bookmark buttons ::::: */
428 .bookmark-item > .toolbarbutton-menu-dropmarker {
432 #bookmarks-toolbar-placeholder {
433 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
434 -moz-box-orient: horizontal;
437 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
438 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
439 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
442 /* === BEGIN bookmarked-notification.inc.css === */
444 /* ----- BOOKMARK STAR ANIMATION ----- */
446 @keyframes animation-bookmarkAdded {
447 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
448 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
450 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
453 @keyframes animation-bookmarkPulse {
454 from { transform: scale(1); }
455 50% { transform: scale(1.3); }
456 to { transform: scale(1); }
459 #bookmarked-notification-container {
468 #bookmarked-notification {
469 background-size: 16px;
470 background-position: center;
471 background-repeat: no-repeat;
477 #bookmarked-notification-dropmarker-anchor {
482 #bookmarked-notification-dropmarker-icon {
488 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
489 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
490 animation: animation-bookmarkAdded 800ms;
491 animation-timing-function: ease, ease, ease;
494 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
495 list-style-image: none !important;
496 /* fill: transparent;*/
499 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
501 animation: animation-bookmarkPulse 300ms;
502 animation-delay: 600ms;
503 animation-timing-function: ease-out;
506 /* === END bookmarked-notification.inc.css === */
508 /* ::::: bookmark menus ::::: */
511 menuitem.bookmark-item {
516 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
521 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
522 padding-inline-start: 0px;
525 /* ::::: bookmark items ::::: */
528 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
529 -moz-image-region: auto;
532 .bookmark-item[container] {
533 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
534 -moz-image-region: auto;
537 .bookmark-item[container][open] {
538 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
539 -moz-image-region: auto;
542 .bookmark-item[container][livemark] {
543 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
544 -moz-image-region: auto;
547 .bookmark-item[container][livemark] .bookmark-item {
548 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
549 -moz-image-region: rect(0px, 16px, 16px, 0px);
552 .bookmark-item[container][livemark] .bookmark-item[visited] {
553 -moz-image-region: rect(0px, 32px, 16px, 16px);
556 .bookmark-item[container][query] {
557 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
558 -moz-image-region: auto;
561 .bookmark-item[query][tagContainer] {
562 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
563 -moz-image-region: auto;
566 .bookmark-item[query][dayContainer] {
567 list-style-image: url("chrome://communicator/skin/history/calendar.png");
568 -moz-image-region: auto;
571 .bookmark-item[query][hostContainer] {
572 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
573 -moz-image-region: auto;
576 .bookmark-item[query][hostContainer][open] {
577 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
578 -moz-image-region: auto;
581 .bookmark-item[cutting] > .toolbarbutton-icon,
582 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
586 .bookmark-item[cutting] > .toolbarbutton-text,
587 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
591 /* === BEGIN toolbarbuttons.inc.css === */
593 /* ::::: primary toolbar buttons ::::: */
595 .toolbarbutton-1:not([type="menu-button"]) {
596 -moz-box-orient: vertical;
600 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
606 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
607 .toolbarbutton-1[disabled="true"]:hover:active,
608 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
612 .toolbarbutton-1:hover:active,
613 .toolbarbutton-1[open="true"],
614 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
617 padding-inline-start: 3px;
618 padding-inline-end: 1px;
621 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
622 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
623 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
624 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
625 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
628 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
629 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
632 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
633 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
636 .toolbarbutton-1 > .toolbarbutton-icon,
637 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
641 #nav-bar .toolbarbutton-1,
642 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
645 #nav-bar .toolbarbutton-1:not([type=menu-button]),
646 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
647 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
650 #nav-bar #PanelUI-menu-button {
651 /* padding-inline-start: 7px;
652 padding-inline-end: 5px;*/
655 #nav-bar .toolbarbutton-1[type=panel],
656 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
657 /* padding-left: 5px;
658 padding-right: 5px;*/
661 #nav-bar .toolbarbutton-1 > menupopup {
662 /* margin-top: -3px;*/
665 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
669 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
670 /* padding-inline-end: 0;*/
673 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
674 /* padding-inline-start: 0;
675 -moz-box-align: center;*/
678 .findbar-button > .toolbarbutton-text,
679 toolbarbutton.bookmark-item:not(.subviewbutton),
680 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
681 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
682 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
683 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
684 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
685 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
688 border-color: transparent;
689 transition-property: background-color, border-color;
690 transition-duration: 150ms;*/
693 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
694 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
695 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
696 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
700 /* Help SDK icons fit: */
701 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
702 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
706 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
707 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
711 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
712 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
713 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
714 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
715 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
716 /* padding-inline-end: 17px;*/
719 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
720 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
721 /* horizontal padding + border + icon width */
722 /* max-width: 43px;*/
725 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
728 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
731 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
734 #nav-bar .toolbaritem-combined-buttons {
739 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
744 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
745 #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 {
751 margin-inline-end: -1px;
755 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
758 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
759 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
760 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
761 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
762 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
763 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
764 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
765 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
766 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
767 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
770 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
771 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
772 toolbarbutton.bookmark-item[open="true"],
773 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
774 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
775 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
776 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
777 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
780 #TabsToolbar .toolbarbutton-1,
781 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
782 .tabbrowser-arrowscrollbox > .scrollbutton-up,
783 .tabbrowser-arrowscrollbox > .scrollbutton-down {
786 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
787 #TabsToolbar .toolbarbutton-1[open],
788 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
789 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
790 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
793 /* unified back/forward button */
796 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
799 #forward-button > menupopup {
800 margin-top: 1px !important;
803 #forward-button > .toolbarbutton-icon {
804 background-clip: padding-box !important;
805 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
806 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
810 margin-inline-start: -4px !important;
815 border-radius: 0 10000px 10000px 0;
816 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
819 #forward-button:-moz-locale-dir(rtl) {
820 border-radius: 10000px 0 0 10000px;
823 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
824 transition: margin-left 150ms ease-out;
827 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
828 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
831 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
832 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
833 transition-delay: 100s;
836 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
837 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
838 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
842 /* padding-top: 3px !important;
843 padding-bottom: 3px !important;
844 padding-inline-start: 5px !important;
845 padding-inline-end: 0 !important;*/
848 border-radius: 10000px;
855 #back-button:-moz-locale-dir(rtl) {
858 #back-button > menupopup {
859 margin-top: -1px !important;
862 #back-button > .toolbarbutton-icon {
863 border-radius: 10000px !important;
864 background-clip: padding-box !important;
865 /* background-color: hsla(210,25%,98%,.08) !important;
866 padding: 6px !important;
867 border-style: none !important;
868 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
869 0 0 0 1px hsla(210,4%,10%,.25);*/
870 transition-property: background-color, box-shadow !important;
871 transition-duration: 250ms !important;
874 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
875 /* background-color: hsla(210,4%,10%,.08) !important;*/
878 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
879 #back-button[open="true"] > .toolbarbutton-icon {
880 /* background-color: hsla(210,4%,10%,.12) !important;
881 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
882 0 0 0 1px hsla(210,4%,10%,.25),
883 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
886 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
887 transform: scaleX(-1);
890 #forward-button > .toolbarbutton-menu-dropmarker,
891 #back-button > .toolbarbutton-menu-dropmarker {
896 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
897 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
898 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
901 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
902 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
903 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
906 #home-button.bookmark-item {
907 list-style-image: url("chrome://browser/skin/Toolbar.png");
910 #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),
911 #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),
912 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
913 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
914 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
915 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
916 #home-button.bookmark-item:-moz-lwtheme-brighttext {
919 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
922 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
923 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
924 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
928 #downloads-button > .toolbarbutton-icon {
932 /* tabview menu item */
935 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
936 -moz-image-region: rect(1px, 89px, 17px, 73px);
939 #menu_tabview[groups="0"] {
940 -moz-image-region: rect(1px, 17px, 17px, 1px);
943 #menu_tabview[groups="1"] {
944 -moz-image-region: rect(1px, 35px, 17px, 19px);
947 #menu_tabview[groups="2"] {
948 -moz-image-region: rect(1px, 53px, 17px, 37px);
951 #menu_tabview[groups="3"] {
952 -moz-image-region: rect(1px, 71px, 17px, 55px);
955 /* zoom control text (reset) button special case: */
957 #nav-bar #zoom-reset-button > .toolbarbutton-text {
958 /* To make this line up with the icons, it needs the same height (18px) +
959 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
960 * increase in text sizes would break things...
965 toolbarbutton.bookmark-item:not(.subviewbutton),
966 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
969 -moz-appearance: none;
970 border: 1px solid transparent;*/
973 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
974 /* border-color: var(--toolbarbutton-hover-bordercolor);
975 background: var(--toolbarbutton-hover-background);*/
978 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
979 /* border-color: var(--toolbarbutton-active-bordercolor);
980 box-shadow: var(--toolbarbutton-active-boxshadow);
981 background: var(--toolbarbutton-active-background);*/
984 .bookmark-item > .toolbarbutton-icon,
985 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
988 margin-inline-start: 1px;
989 margin-inline-end: 2px;
994 /* Force the display of the label for bookmarks */
995 .bookmark-item > .toolbarbutton-text,
996 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
997 display: -moz-box !important;
1000 /* === END toolbarbuttons.inc.css === */
1002 /* === BEGIN toolbarbutton-icons.inc.css === */
1005 --toolbarbutton-icon-fill: #FFCF00;
1006 --toolbarbutton-icon-fill-inverted: #000000;
1007 --toolbarbutton-icon-fill-disabled: #8050B0;
1008 --toolbarbutton-icon-fill-attention: #008484;
1011 /* Whole section of this included file: */
1012 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1013 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1014 #social-share-button, #open-file-button, #find-button, #developer-button,
1015 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1016 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1017 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1018 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
1019 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1020 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
1024 -moz-image-region: rect(0, 36px, 18px, 18px);
1027 #back-button:hover:not([disabled="true"]) {
1028 -moz-image-region: rect(18px, 36px, 36px, 18px);
1031 #back-button[disabled="true"] {
1032 -moz-image-region: rect(36px, 36px, 54px, 18px);
1036 -moz-image-region: rect(0, 72px, 18px, 54px);
1039 #forward-button:hover:not([disabled="true"]) {
1040 -moz-image-region: rect(18px, 72px, 36px, 54px);
1043 #forward-button[disabled="true"] {
1044 -moz-image-region: rect(36px, 72px, 54px, 54px);
1047 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1048 #forward-button:-moz-locale-dir(rtl) {
1049 transform: scaleX(-1);
1052 #home-button[cui-areatype="toolbar"] {
1053 -moz-image-region: rect(0, 126px, 18px, 108px);
1056 #home-button[cui-areatype="toolbar"]:hover {
1057 -moz-image-region: rect(18px, 126px, 36px, 108px);
1060 #bookmarks-menu-button[cui-areatype="toolbar"] {
1061 -moz-image-region: rect(0, 144px, 18px, 126px);
1064 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
1065 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
1066 -moz-image-region: rect(18px, 144px, 36px, 126px);
1069 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
1070 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
1071 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
1072 background-color: transparent !important;
1075 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
1076 -moz-image-region: rect(0, 162px, 18px, 144px);
1079 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
1080 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
1081 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
1082 /* When starred and clicked (for edit/delete dialog),
1083 * then only the menubutton-button itself is open, but not the whole menubutton. */
1084 -moz-image-region: rect(18px, 162px, 36px, 144px);
1087 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1088 -moz-image-region: rect(0, 630px, 18px, 612px);
1091 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
1093 -moz-box-align: center;
1096 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1097 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1098 -moz-image-region: rect(18px, 630px, 36px, 612px);
1101 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
1102 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
1104 padding-bottom: 0px;
1105 padding-inline-start: 2px;
1106 padding-inline-end: 0px;
1109 #history-panelmenu[cui-areatype="toolbar"] {
1110 -moz-image-region: rect(0, 180px, 18px, 162px);
1113 #history-panelmenu[cui-areatype="toolbar"]:hover,
1114 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
1115 -moz-image-region: rect(18px, 180px, 36px, 162px);
1118 #downloads-button[cui-areatype="toolbar"] {
1119 -moz-image-region: rect(0, 198px, 18px, 180px);
1122 #downloads-button[cui-areatype="toolbar"]:hover,
1123 #downloads-button[cui-areatype="toolbar"][open="true"] {
1124 -moz-image-region: rect(18px, 198px, 36px, 180px);
1127 #add-ons-button[cui-areatype="toolbar"] {
1128 -moz-image-region: rect(0, 216px, 18px, 198px);
1131 #add-ons-button[cui-areatype="toolbar"]:hover {
1132 -moz-image-region: rect(18px, 216px, 36px, 198px);
1135 #open-file-button[cui-areatype="toolbar"] {
1136 -moz-image-region: rect(0, 234px, 18px, 216px);
1139 #open-file-button[cui-areatype="toolbar"]:hover {
1140 -moz-image-region: rect(18px, 234px, 36px, 216px);
1143 #save-page-button[cui-areatype="toolbar"] {
1144 -moz-image-region: rect(0, 252px, 18px, 234px);
1147 #save-page-button[cui-areatype="toolbar"]:hover {
1148 -moz-image-region: rect(18px, 252px, 36px, 234px);
1151 #sync-button[cui-areatype="toolbar"] {
1152 -moz-image-region: rect(0, 792px, 18px, 774px);
1155 #sync-button[cui-areatype="toolbar"]:hover {
1156 -moz-image-region: rect(18px, 792px, 36px, 774px);
1159 #containers-panelmenu[cui-areatype="toolbar"] {
1160 -moz-image-region: rect(0, 810px, 18px, 792px);
1163 #containers-panelmenu[cui-areatype="toolbar"]:hover {
1164 -moz-image-region: rect(18px, 810px, 36px, 792px);
1167 #feed-button[cui-areatype="toolbar"] {
1168 -moz-image-region: rect(0, 288px, 18px, 270px);
1171 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
1172 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
1173 -moz-image-region: rect(18px, 288px, 36px, 270px);
1176 #feed-button[cui-areatype="toolbar"][disabled="true"] {
1177 -moz-image-region: rect(36px, 288px, 54px, 270px);
1180 #social-share-button[cui-areatype="toolbar"] {
1181 -moz-image-region: rect(0px, 306px, 18px, 288px);
1184 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
1185 #social-share-button[cui-areatype="toolbar"][open="true"] {
1186 -moz-image-region: rect(18px, 306px, 36px, 288px);
1189 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
1190 -moz-image-region: rect(36px, 306px, 54px, 288px);
1193 #characterencoding-button[cui-areatype="toolbar"] {
1194 -moz-image-region: rect(0, 324px, 18px, 306px);
1197 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
1198 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
1199 -moz-image-region: rect(18px, 324px, 36px, 306px);
1202 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
1203 -moz-image-region: rect(36px, 324px, 54px, 306px);
1206 #new-window-button[cui-areatype="toolbar"] {
1207 -moz-image-region: rect(0, 342px, 18px, 324px);
1210 #new-window-button[cui-areatype="toolbar"]:hover {
1211 -moz-image-region: rect(18px, 342px, 36px, 324px);
1214 #e10s-button[cui-areatype="toolbar"] {
1215 -moz-image-region: rect(0, 342px, 18px, 324px);
1218 #e10s-button[cui-areatype="toolbar"]:hover {
1219 -moz-image-region: rect(18px, 342px, 36px, 324px);
1222 #e10s-button > .toolbarbutton-icon {
1223 transform: scaleY(-1);
1226 #new-tab-button[cui-areatype="toolbar"] {
1227 -moz-image-region: rect(0, 360px, 18px, 342px);
1230 #new-tab-button[cui-areatype="toolbar"]:hover {
1231 -moz-image-region: rect(18px, 360px, 36px, 342px);
1234 #privatebrowsing-button[cui-areatype="toolbar"] {
1235 -moz-image-region: rect(0, 378px, 18px, 360px);
1238 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
1239 -moz-image-region: rect(18px, 378px, 36px, 360px);
1242 #find-button[cui-areatype="toolbar"] {
1243 -moz-image-region: rect(0, 396px, 18px, 378px);
1246 #find-button[cui-areatype="toolbar"]:hover {
1247 -moz-image-region: rect(18px, 396px, 36px, 378px);
1250 #print-button[cui-areatype="toolbar"] {
1251 -moz-image-region: rect(0, 414px, 18px, 396px);
1254 #print-button[cui-areatype="toolbar"]:hover {
1255 -moz-image-region: rect(18px, 414px, 36px, 396px);
1258 #fullscreen-button[cui-areatype="toolbar"] {
1259 -moz-image-region: rect(0, 432px, 18px, 414px);
1262 #fullscreen-button[cui-areatype="toolbar"]:hover {
1263 -moz-image-region: rect(18px, 432px, 36px, 414px);
1266 #developer-button[cui-areatype="toolbar"] {
1267 -moz-image-region: rect(0, 450px, 18px, 432px);
1270 #developer-button[cui-areatype="toolbar"]:hover,
1271 #developer-button[cui-areatype="toolbar"][open="true"] {
1272 -moz-image-region: rect(18px, 450px, 36px, 432px);
1275 #preferences-button[cui-areatype="toolbar"] {
1276 -moz-image-region: rect(0, 468px, 18px, 450px);
1279 #preferences-button[cui-areatype="toolbar"]:hover {
1280 -moz-image-region: rect(18px, 468px, 36px, 450px);
1283 #PanelUI-menu-button {
1284 -moz-image-region: rect(0, 486px, 18px, 468px);
1287 #PanelUI-menu-button:hover,
1288 #PanelUI-menu-button[open="true"] {
1289 -moz-image-region: rect(18px, 486px, 36px, 468px);
1292 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
1293 -moz-image-region: rect(0, 504px, 18px, 486px);
1296 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
1297 -moz-image-region: rect(18px, 504px, 36px, 486px);
1300 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
1301 -moz-image-region: rect(36px, 504px, 54px, 486px);
1304 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
1305 -moz-image-region: rect(0, 522px, 18px, 504px);
1308 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
1309 -moz-image-region: rect(18px, 522px, 36px, 504px);
1312 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
1313 -moz-image-region: rect(36px, 522px, 54px, 504px);
1316 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
1317 -moz-image-region: rect(0, 540px, 18px, 522px);
1320 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
1321 -moz-image-region: rect(18px, 540px, 36px, 522px);
1324 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
1325 -moz-image-region: rect(36px, 540px, 54px, 522px);
1328 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
1329 -moz-image-region: rect(0, 558px, 18px, 540px);
1332 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
1333 -moz-image-region: rect(18px, 558px, 36px, 540px);
1336 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
1337 -moz-image-region: rect(36px, 558px, 54px, 540px);
1340 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
1341 -moz-image-region: rect(0, 576px, 18px, 558px);
1344 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
1345 -moz-image-region: rect(18px, 576px, 36px, 558px);
1348 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
1349 -moz-image-region: rect(36px, 576px, 54px, 558px);
1352 #nav-bar-overflow-button {
1353 -moz-image-region: rect(0, 612px, 18px, 594px);
1356 #nav-bar-overflow-button:hover,
1357 #nav-bar-overflow-button[open="true"] {
1358 -moz-image-region: rect(18px, 612px, 36px, 594px);
1361 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1362 transform: scaleX(-1);
1365 #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
1370 -moz-image-region: rect(0, 648px, 18px, 630px);
1373 #tabview-button:hover {
1374 -moz-image-region: rect(18px, 648px, 36px, 630px);
1377 #email-link-button[cui-areatype="toolbar"] {
1378 -moz-image-region: rect(0, 666px, 18px, 648px);
1381 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
1382 -moz-image-region: rect(18px, 666px, 36px, 648px);
1385 #email-button[cui-areatype="toolbar"][disabled="true"] {
1386 -moz-image-region: rect(36px, 666px, 54px, 648px);
1389 #sidebar-button[cui-areatype="toolbar"] {
1390 -moz-image-region: rect(0, 684px, 18px, 666px);
1393 #sidebar-button[cui-areatype="toolbar"]:hover {
1394 -moz-image-region: rect(18px, 684px, 36px, 666px);
1397 #panic-button[cui-areatype="toolbar"] {
1398 -moz-image-region: rect(0, 702px, 18px, 684px);
1401 #panic-button[cui-areatype="toolbar"]:hover,
1402 #panic-button[cui-areatype="toolbar"][open] {
1403 -moz-image-region: rect(18px, 702px, 36px, 684px);
1406 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1407 transform: scaleX(-1);
1410 #webide-button[cui-areatype="toolbar"] {
1411 -moz-image-region: rect(0, 738px, 18px, 720px);
1414 #webide-button[cui-areatype="toolbar"]:hover {
1415 -moz-image-region: rect(18px, 738px, 36px, 720px);
1419 fill: currentColor !important;
1422 /* === END toolbarbutton-icons.inc.css === */
1424 /* === BEGIN menupanel.inc.css === */
1426 /* Menu panel and palette styles */
1428 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1429 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1430 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1431 #social-share-button, #open-file-button, #find-button, #developer-button,
1432 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1433 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1434 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1435 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1436 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1437 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1438 #social-share-button, #open-file-button, #find-button, #developer-button,
1439 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1440 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1441 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1442 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1443 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1446 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1447 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1448 #social-share-button, #open-file-button, #find-button, #developer-button,
1449 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1450 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1451 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1452 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1453 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1454 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1455 #social-share-button, #open-file-button, #find-button, #developer-button,
1456 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1457 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1458 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1459 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1460 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1461 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1462 #social-share-button, #open-file-button, #find-button, #developer-button,
1463 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1464 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1465 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1466 #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,
1467 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1468 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1469 #social-share-button, #open-file-button, #find-button, #developer-button,
1470 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1471 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1472 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1473 #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 {
1474 filter: url(chrome://global/skin/filters.svg#fill);
1478 #home-button[cui-areatype="menu-panel"],
1479 toolbarpaletteitem[place="palette"] > #home-button {
1480 -moz-image-region: rect(0px, 128px, 32px, 96px);
1483 #bookmarks-menu-button[cui-areatype="menu-panel"],
1484 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1485 -moz-image-region: rect(0px, 192px, 32px, 160px);
1488 #history-panelmenu[cui-areatype="menu-panel"],
1489 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1490 -moz-image-region: rect(0px, 224px, 32px, 192px);
1493 #downloads-button[cui-areatype="menu-panel"],
1494 toolbarpaletteitem[place="palette"] > #downloads-button {
1495 -moz-image-region: rect(0px, 256px, 32px, 224px);
1498 #add-ons-button[cui-areatype="menu-panel"],
1499 toolbarpaletteitem[place="palette"] > #add-ons-button {
1500 -moz-image-region: rect(0px, 288px, 32px, 256px);
1503 #open-file-button[cui-areatype="menu-panel"],
1504 toolbarpaletteitem[place="palette"] > #open-file-button {
1505 -moz-image-region: rect(0px, 320px, 32px, 288px);
1508 #save-page-button[cui-areatype="menu-panel"],
1509 toolbarpaletteitem[place="palette"] > #save-page-button {
1510 -moz-image-region: rect(0px, 352px, 32px, 320px);
1513 #sync-button[cui-areatype="menu-panel"],
1514 toolbarpaletteitem[place="palette"] > #sync-button {
1515 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1518 #containers-panelmenu[cui-areatype="menu-panel"],
1519 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1520 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1523 #feed-button[cui-areatype="menu-panel"],
1524 toolbarpaletteitem[place="palette"] > #feed-button {
1525 -moz-image-region: rect(0px, 416px, 32px, 384px);
1528 #social-share-button[cui-areatype="menu-panel"],
1529 toolbarpaletteitem[place="palette"] > #social-share-button {
1530 -moz-image-region: rect(0px, 448px, 32px, 416px);
1533 #characterencoding-button[cui-areatype="menu-panel"],
1534 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1535 -moz-image-region: rect(0px, 480px, 32px, 448px);
1538 #new-window-button[cui-areatype="menu-panel"],
1539 toolbarpaletteitem[place="palette"] > #new-window-button {
1540 -moz-image-region: rect(0px, 512px, 32px, 480px);
1543 #e10s-button[cui-areatype="menu-panel"],
1544 toolbarpaletteitem[place="palette"] > #e10s-button {
1545 -moz-image-region: rect(0px, 512px, 32px, 480px);
1548 #new-tab-button[cui-areatype="menu-panel"],
1549 toolbarpaletteitem[place="palette"] > #new-tab-button {
1550 -moz-image-region: rect(0px, 544px, 32px, 512px);
1553 #privatebrowsing-button[cui-areatype="menu-panel"],
1554 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1555 -moz-image-region: rect(0px, 576px, 32px, 544px);
1558 #tabview-button[cui-areatype="menu-panel"],
1559 toolbarpaletteitem[place="palette"] > #tabview-button {
1560 -moz-image-region: rect(0px, 608px, 32px, 576px);
1563 #find-button[cui-areatype="menu-panel"],
1564 toolbarpaletteitem[place="palette"] > #find-button {
1565 -moz-image-region: rect(0px, 640px, 32px, 608px);
1568 #print-button[cui-areatype="menu-panel"],
1569 toolbarpaletteitem[place="palette"] > #print-button {
1570 -moz-image-region: rect(0px, 672px, 32px, 640px);
1573 #fullscreen-button[cui-areatype="menu-panel"],
1574 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1575 -moz-image-region: rect(0px, 704px, 32px, 672px);
1578 #developer-button[cui-areatype="menu-panel"],
1579 toolbarpaletteitem[place="palette"] > #developer-button {
1580 -moz-image-region: rect(0px, 736px, 32px, 704px);
1583 #preferences-button[cui-areatype="menu-panel"],
1584 toolbarpaletteitem[place="palette"] > #preferences-button {
1585 -moz-image-region: rect(0px, 768px, 32px, 736px);
1588 #email-link-button[cui-areatype="menu-panel"],
1589 toolbarpaletteitem[place="palette"] > #email-link-button {
1590 -moz-image-region: rect(0, 800px, 32px, 768px);
1593 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1594 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1595 -moz-image-region: rect(64px, 800px, 96px, 768px);
1598 #sidebar-button[cui-areatype="menu-panel"],
1599 toolbarpaletteitem[place="palette"] > #sidebar-button {
1600 -moz-image-region: rect(0, 864px, 32px, 832px);
1603 #panic-button[cui-areatype="menu-panel"],
1604 toolbarpaletteitem[place="palette"] > #panic-button {
1605 -moz-image-region: rect(0, 896px, 32px, 864px);
1608 #webide-button[cui-areatype="menu-panel"],
1609 toolbarpaletteitem[place="palette"] > #webide-button {
1610 -moz-image-region: rect(0px, 960px, 32px, 928px);
1613 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1614 -moz-image-region: rect(0, 832px, 32px, 800px);
1617 /* Wide panel control icons */
1619 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1620 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1621 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1622 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1623 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1626 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1627 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1628 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1629 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1630 filter: url(chrome://global/skin/filters.svg#fill);
1634 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1635 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1636 -moz-image-region: rect(0px, 32px, 16px, 16px);
1639 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1640 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1641 -moz-image-region: rect(0px, 48px, 16px, 32px);
1644 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1645 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1646 -moz-image-region: rect(0px, 64px, 16px, 48px);
1649 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1650 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1651 -moz-image-region: rect(0px, 80px, 16px, 64px);
1654 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1655 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1656 -moz-image-region: rect(0px, 96px, 16px, 80px);
1659 #add-share-provider {
1660 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1661 -moz-image-region: rect(0px, 96px, 16px, 80px);
1664 /* === END menupanel.inc.css === */
1666 /* ::::: fullscreen window controls ::::: */
1671 -moz-appearance: none;
1673 /* margin: 0 !important;
1674 padding: 6px 12px;*/
1678 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1681 #minimize-button:hover {
1682 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1686 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1689 #restore-button:hover {
1690 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1693 #minimize-button:hover,
1694 #restore-button:hover {
1695 /* background-color: hsla(0, 0%, 0%, .12);*/
1698 #minimize-button:hover:active,
1699 #restore-button:hover:active {
1700 /* background-color: hsla(0, 0%, 0%, .22);*/
1704 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1707 #close-button:hover {
1708 /* background-color: hsl(355, 86%, 49%);*/
1709 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1712 #close-button:hover:active {
1713 /* background-color: hsl(355, 82%, 69%);*/
1716 /* ::::: Location Bar ::::: */
1719 .searchbar-textbox {
1722 margin-inline-start: 3px;
1726 /* make color as light as possible to deal with dark non-domain parts */
1730 #urlbar:-moz-lwtheme,
1731 .searchbar-textbox:-moz-lwtheme {
1732 /* background-color: rgba(255,255,255,.8);
1733 @navbarTextboxCustomBorder@
1737 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1738 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1739 /* background-color: rgba(255,255,255,.9);*/
1742 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1743 .searchbar-textbox:-moz-lwtheme[focused] {
1744 /* background-color: white;*/
1747 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1748 /* border-inline-start: none;
1752 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1753 /* border-top-left-radius: 0;
1754 border-bottom-left-radius: 0; */
1757 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1758 /* border-top-right-radius: 0;
1759 border-bottom-right-radius: 0; */
1762 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1763 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1764 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1767 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1768 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1769 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1770 transform: scaleX(-1);
1773 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1774 -moz-box-direction: reverse;
1777 html|*.urlbar-input:-moz-lwtheme::placeholder,
1778 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1783 -moz-box-orient: horizontal;
1784 -moz-box-align: stretch;
1787 .urlbar-textbox-container {
1788 -moz-box-align: stretch;
1796 #urlbar-display-box {
1797 padding-inline-start: 4px;
1798 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1799 border-inline-end: 1px solid var(--urlbar-separator-color);
1800 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1801 border-image-slice: 1; */
1805 -moz-box-align: center;
1810 /* 16x16 icon with border-box sizing */
1815 /* ::::: URL Bar Zoom Reset Button ::::: */
1817 @keyframes urlbar-zoom-reset-pulse {
1819 transform: scale(0);
1822 transform: scale(1.5);
1825 transform: scale(1.0);
1829 #urlbar-zoom-button {
1830 /* -moz-appearance: none;*/
1831 /* color: inherit;*/
1834 .search-go-container {
1838 .search-go-container > .search-go-button {
1842 #urlbar-search-footer {
1843 border-top: 1px solid var(--panel-separator-color);
1846 #urlbar-search-settings {
1849 #urlbar-search-settings:hover {
1852 #urlbar-search-settings:hover:active {
1855 #urlbar-search-splitter {
1856 /* The splitter width should equal the location and search bars' combined
1857 neighboring margin and border width. */
1862 background: transparent;
1866 border-inline-end: 1px solid #9C9CFF;
1867 margin-inline-end: 3px;
1870 margin-inline-start: 0;
1874 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1876 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1877 border-bottom: 1px solid var(--panel-separator-color);
1878 background-color: #000000;
1880 padding-inline-start: 44px;
1881 padding-inline-end: 6px;
1882 background-image: url("chrome://browser/skin/info.svg");
1883 background-clip: padding-box;
1884 background-position: 20px center;
1885 background-repeat: no-repeat;
1886 background-size: 16px 16px;
1889 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1890 background-position: right 20px center;
1893 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1898 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1899 margin-inline-start: 0;
1902 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1903 -moz-appearance: none;
1908 margin-inline-start: 10px;
1911 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1914 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1917 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1920 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1923 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1926 min-width: calc(54px + 11ch);
1931 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1932 background-color: var(--identity-box-verified-background-color);
1935 #identity-box:-moz-focusring {
1936 outline: 1px dotted;
1937 outline-offset: -1px;
1940 #identity-box.verifiedDomain:-moz-focusring,
1941 #identity-box.verifiedIdentity:-moz-focusring {
1942 outline-color: #000000;
1945 /* Location bar dropmarker */
1947 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1948 background-color: transparent;
1951 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1952 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1953 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1956 transition: opacity 0.15s ease;
1959 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1963 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1967 .urlbar-history-dropmarker:hover {
1970 .urlbar-history-dropmarker:hover:active,
1971 .urlbar-history-dropmarker[open="true"] {
1974 /* page proxy icon */
1975 /* === BEGIN identity-block.inc.css === */
1977 /* === BEGIN identity-block/icons.inc.css === */
1980 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1983 #identity-box:hover > #identity-icon:not(.no-hover),
1984 #identity-box[open=true] > #identity-icon {
1985 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1988 #identity-box.grantedPermissions > #identity-icon {
1989 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1992 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1993 #identity-box.grantedPermissions[open=true] > #identity-icon {
1994 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1997 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1998 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2001 #tracking-protection-icon {
2002 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
2005 #tracking-protection-icon[state="loaded-tracking-content"] {
2006 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2010 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2011 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2012 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2013 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2014 visibility: visible;
2017 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2018 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2019 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2020 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2021 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2022 visibility: visible;
2025 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2026 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2027 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2028 visibility: visible;
2031 /* === END identity-block/icons.inc.css === */
2038 /* The padding-left and padding-right transitions handle the delayed hiding of
2039 the forward button when hovered. */
2040 transition: background-color 150ms ease, padding-left, padding-right;
2043 #identity-box:-moz-locale-dir(ltr) {
2044 border-top-right-radius: 0;
2045 border-bottom-right-radius: 0;
2048 #identity-box:-moz-locale-dir(rtl) {
2049 border-top-left-radius: 0;
2050 border-bottom-left-radius: 0;
2053 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2054 border-inline-end: 1px solid #008484;
2057 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2061 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2062 border-inline-end: 1px solid #9C9CFF;
2065 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2070 #identity-icon-labels:-moz-locale-dir(ltr) {
2074 #identity-icon-labels:-moz-locale-dir(rtl) {
2078 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2079 /* border-radius: 0;
2080 padding-inline-start: 2px; */
2081 padding-inline-end: 2px;
2082 margin-inline-end: 1px;
2085 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2086 padding-inline-start: 2px;
2089 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2090 /* Forward button hiding is delayed when hovered, so we should use the same
2091 delay for the identity box. We handle both horizontal paddings (for LTR and
2092 RTL), the latter two delays here are for padding-left and padding-right. */
2093 transition-delay: 0s, 100s, 100s;
2096 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2097 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2098 padding-inline-start: 2.01px;
2101 /* MAIN IDENTITY ICON */
2108 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2112 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2113 -moz-image-region: inherit;
2114 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
2115 context-properties: fill;
2122 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2123 -moz-image-region: inherit;
2124 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2134 margin-inline-start: -16px;
2139 #identity-box[sharing="camera"] > #sharing-icon {
2140 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2143 #identity-box[sharing="microphone"] > #sharing-icon {
2144 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2147 #identity-box[sharing="screen"] > #sharing-icon {
2148 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2152 #identity-box[sharing] > #sharing-icon {
2154 animation-delay: -1.5s;
2157 #identity-box[sharing] > #identity-icon,
2159 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2162 @keyframes identity-box-sharing-icon-pulse {
2163 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2164 0%, 16.66%, 83.33%, 100% {
2172 /* TRACKING PROTECTION ICON */
2174 #tracking-protection-icon {
2177 margin-inline-start: 2px;
2178 margin-inline-end: 0;
2181 #tracking-protection-icon[animate] {
2182 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2185 #tracking-protection-icon:not([state]) {
2186 margin-inline-end: -18px;
2187 pointer-events: none;
2189 /* Only animate the shield in, when it disappears hide it immediately. */
2193 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2194 visibility: collapse;
2197 /* CONNECTION ICON */
2202 margin-inline-start: 2px;
2203 visibility: collapse;
2206 /* REMOTE CONTROL ICON */
2208 #main-window[remotecontrol] #remote-control-icon {
2209 list-style-image: url(chrome://browser/content/robot.ico);
2210 visibility: visible;
2213 margin-inline-start: 2px;
2216 /* === END identity-block.inc.css === */
2218 #page-proxy-favicon {
2219 -moz-image-region: rect(0, 16px, 16px, 0);
2222 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2223 /* margin-inline-end: 1px;*/
2226 #identity-box:hover > #page-proxy-favicon {
2227 -moz-image-region: rect(0, 32px, 16px, 16px);
2230 #identity-box:hover:active > #page-proxy-favicon,
2231 #identity-box[open=true] > #page-proxy-favicon {
2232 -moz-image-region: rect(0, 48px, 16px, 32px);
2235 #identity-box:hover {
2236 background-color: #FFCF00;
2240 #identity-box:hover:active,
2241 #identity-box[open=true] {
2242 background-color: #FF9F00;
2246 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2247 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2248 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2249 background-color: #A09090;
2253 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2254 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2255 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2259 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2260 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2261 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2262 background-color: #008484;
2266 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2267 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2268 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2272 #identity-box:hover > image,
2273 #identity-box:hover:active > image,
2274 #identity-box[open=true] > image {
2275 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2280 /* === BEGIN autocomplete.inc.css === */
2282 #PopupAutoComplete > richlistbox > richlistitem {
2287 padding: 0px 1px 0px 1px;
2290 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2291 margin-inline-start: 4px;
2292 margin-inline-end: 0;
2295 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2297 margin-inline-start: 4px;
2300 #PopupAutoComplete > richlistbox {
2304 /* Login form autocompletion */
2305 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2307 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2310 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2311 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2314 /* Insecure field warning */
2315 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2316 background-color: var(--arrowpanel-dimmed);
2317 border-bottom: 1px solid var(--panel-separator-color);
2318 padding-bottom: 4px;
2322 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2323 background-color: var(--arrowpanel-dimmed-further);
2327 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2332 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2336 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2337 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2340 /* === END autocomplete.inc.css === */
2342 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2343 border-top: 1px solid #A09090;
2346 #treecolAutoCompleteImage {
2351 .autocomplete-richlistbox {
2355 .autocomplete-richlistitem {
2360 border: 1px solid transparent;
2373 border: 1px solid transparent;
2384 html|span.ac-emphasize-text-title,
2385 html|span.ac-emphasize-text-tag,
2386 html|span.ac-emphasize-text-url {
2390 .ac-type-icon[type=bookmark] {
2391 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2394 .ac-type-icon[type=bookmark][selected][current] {
2395 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2398 .ac-result-type-bookmark {
2399 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2400 -moz-image-region: rect(0px 16px 16px 0px);
2405 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2406 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2409 .ac-type-icon[type=keyword],
2410 .ac-site-icon[type=searchengine] {
2411 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2412 context-properties: fill;
2416 .ac-type-icon[type=keyword][selected],
2417 .ac-site-icon[type=searchengine][selected] {
2418 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2419 context-properties: fill;
2423 .ac-result-type-tag {
2424 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2429 .ac-type-icon[type=switchtab],
2430 .ac-type-icon[type=remotetab] {
2431 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2434 .ac-type-icon[type=switchtab][selected],
2435 .ac-type-icon[type=remotetab][selected] {
2436 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2439 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2440 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2446 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2447 border-top: 1px solid #9C9CFF;
2450 /* combined go/reload/stop button in location bar */
2456 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2457 /* margin: 0 9px; */
2458 margin-inline-start: 0px;
2459 border-inline-start: 1px solid var(--urlbar-separator-color);
2460 border-image: linear-gradient(transparent 15%,
2461 var(--urlbar-separator-color) 15%,
2462 var(--urlbar-separator-color) 85%,
2464 border-image-slice: 1;
2467 /* XXX: temporary for Photon preview changes */
2470 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2473 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2474 border-top-left-radius: 0px;
2475 border-bottom-left-radius: 0px;
2478 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2479 border-top-right-radius: 0px;
2480 border-bottom-right-radius: 0px;
2483 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2484 #reload-button:not(:hover) {
2485 border-inline-start-style: none;
2486 padding-inline-start: 3px;
2491 -moz-image-region: rect(0px, 14px, 14px, 0px);
2494 #reload-button[disabled=true],
2495 #reload-button[disabled=true] {
2496 -moz-image-region: rect(28px, 14px, 42px, 0px);
2499 #reload-button:not([disabled=true]):hover,
2500 #reload-button:not([disabled=true]):hover {
2501 -moz-image-region: rect(14px, 14px, 28px, 0px);
2504 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2505 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2506 transform: scaleX(-1);
2510 -moz-image-region: rect(0, 42px, 14px, 28px);
2513 #urlbar-go-button:hover {
2514 -moz-image-region: rect(14px, 42px, 28px, 28px);
2517 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2518 transform: scaleX(-1);
2523 -moz-image-region: rect(0px, 28px, 14px, 14px);
2527 #stop-button:hover {
2528 -moz-image-region: rect(14px, 28px, 28px, 14px);
2531 @media (min-resolution: 1.1dppx) {
2537 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2540 #reload-button > .toolbarbutton-icon,
2541 #stop-button > .toolbarbutton-icon,
2542 #urlbar-go-button > .toolbarbutton-icon,
2543 #reload-button > .toolbarbutton-icon,
2544 #stop-button > .toolbarbutton-icon {
2549 -moz-image-region: rect(0, 84px, 28px, 56px);
2552 #urlbar-go-button:hover {
2553 -moz-image-region: rect(28px, 84px, 56px, 56px);
2556 #urlbar-go-button:hover:active {
2557 -moz-image-region: rect(56px, 84px, 84px, 56px);
2562 -moz-image-region: rect(0, 28px, 28px, 0);
2565 #reload-button:not([disabled]):hover,
2566 #reload-button:not([disabled]):hover {
2567 -moz-image-region: rect(28px, 28px, 56px, 0);
2570 #reload-button:not([disabled]):hover:active,
2571 #reload-button:not([disabled]):hover:active {
2572 -moz-image-region: rect(56px, 28px, 84px, 0);
2577 -moz-image-region: rect(0, 56px, 28px, 28px);
2580 #stop-button:not([disabled]):hover,
2581 #stop-button:not([disabled]):hover {
2582 -moz-image-region: rect(28px, 56px, 56px, 28px);
2585 #stop-button:hover:active,
2586 #stop-button:hover:active {
2587 -moz-image-region: rect(56px, 56px, 84px, 28px);
2591 /* popup blocker button */
2593 #page-report-button {
2594 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2595 -moz-image-region: rect(0, 16px, 16px, 0);
2598 #page-report-button:hover ,
2599 #page-report-button:hover:active,
2600 #page-report-button[open="true"] {
2601 -moz-image-region: rect(0, 32px, 16px, 16px);
2604 /* Reader mode button */
2606 #reader-mode-button {
2607 list-style-image: url("chrome://browser/skin/readerMode.svg");
2608 -moz-image-region: rect(0, 16px, 16px, 0);
2611 #reader-mode-button:hover,
2612 #reader-mode-button[readeractive]:hover {
2613 -moz-image-region: rect(0, 32px, 16px, 16px);
2616 #reader-mode-button:hover:active,
2617 #reader-mode-button[readeractive] {
2618 -moz-image-region: rect(0, 48px, 16px, 32px);
2621 /* social share panel */
2623 /* === BEGIN social.inc.css === */
2625 #manage-share-providers {
2626 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2627 -moz-image-region: rect(0, 468px, 18px, 450px);
2630 #manage-share-providers > .toolbarbutton-icon {
2635 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2638 /* fixup corners for share panel */
2639 .social-panel > .social-panel-frame {
2640 border-radius: inherit;
2643 /* === END social.inc.css === */
2645 .social-panel-frame {
2646 border-radius: inherit;
2649 .social-share-frame {
2656 background-color: white;
2657 background-repeat: no-repeat;
2658 background-position: center center;
2660 #share-container[loading] {
2661 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2663 #share-container > browser {
2664 transition: opacity 150ms ease-in-out;
2667 #share-container[loading] > browser {
2671 .social-share-toolbar {
2672 border-bottom: 1px solid #9C9CFF;
2676 #social-share-provider-buttons {
2681 .share-provider-button {
2686 .share-provider-button > .toolbarbutton-text {
2689 .share-provider-button > .toolbarbutton-icon {
2695 #social-share-panel {
2701 .social-share-frame {
2702 border-top-left-radius: 0;
2703 border-bottom-left-radius: inherit;
2704 border-top-right-radius: 0;
2705 border-bottom-right-radius: inherit;
2708 #social-share-panel > .social-share-toolbar {
2709 border-top-left-radius: inherit;
2710 border-top-right-radius: inherit;
2713 #social-share-provider-buttons {
2714 border-top-left-radius: inherit;
2715 border-top-right-radius: inherit;
2718 /* bookmarks menu-button */
2720 #bookmarks-menu-button.bookmark-item {
2721 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2722 -moz-image-region: rect(0px 16px 16px 0px);
2725 #bookmarks-menu-button.bookmark-item[starred] {
2726 -moz-image-region: rect(0px 32px 16px 16px);
2729 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2731 padding-bottom: 2px;
2734 #BMB_bookmarksPopup[side="top"],
2735 #BMB_bookmarksPopup[side="bottom"] {
2737 margin-right: -20px;
2740 #BMB_bookmarksPopup[side="left"],
2741 #BMB_bookmarksPopup[side="right"] {
2743 margin-bottom: -20px;
2746 /* bookmarking panel */
2748 #editBookmarkPanelStarIcon {
2749 list-style-image: url("chrome://browser/skin/places/starred48.png");
2754 #editBookmarkPanelStarIcon[unstarred] {
2755 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2758 #editBookmarkPanelTitle {
2762 #editBookmarkPanelHeader,
2763 #editBookmarkPanelContent {
2764 margin-bottom: .5em;
2767 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2768 #editBMPanel_folderTree {
2772 /* ::::: content area ::::: */
2774 /* === BEGIN sidebar.inc.css === */
2777 --icon-fill: #FFCF00;
2778 --header-background-color: #9C9CFF;
2779 --header-background-color-hover: #FFCF00;
2780 --title-font-size: 13px;
2782 background-color: #9C9CFF;
2792 margin-inline-start: 0;
2795 #sidebar-splitter:-moz-locale-dir(ltr),
2796 #sidebar:-moz-locale-dir(ltr) {
2797 border-radius: 0 5px 0 0;
2800 #sidebar-splitter:-moz-locale-dir(rtl),
2801 #sidebar:-moz-locale-dir(rtl) {
2802 border-radius: 5px 0 0 0;
2805 #sidebar-throbber[loading="true"] {
2806 list-style-image: url("chrome://global/skin/icons/loading.png");
2809 @media (min-resolution: 2dppx) {
2810 .sidebar-throbber[loading="true"],
2811 #sidebar-throbber[loading="true"] {
2812 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2818 padding-inline-start: 0px;
2824 padding-inline-start: 8px;
2825 padding-inline-end: 4px;
2828 #sidebar-switcher-arrow,
2829 #sidebar-close > .toolbarbutton-icon {
2830 -moz-context-properties: fill;
2835 #sidebar-switcher-arrow {
2836 /* list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2837 list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2842 #sidebar-switcher-arrow:hover {
2843 list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
2846 #sidebar-header > .close-icon {
2847 /* padding: 4px 2px;
2850 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2853 #sidebar-header > .close-icon:hover,
2854 #sidebar-header > .close-icon:hover:active {
2855 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2859 -moz-appearance: none;
2860 list-style-image: url(chrome://browser/skin/sidebar/close.svg);
2866 #sidebar-switcher-target {
2867 -moz-appearance: none;
2869 margin-inline-end: 4px;
2871 border: 1px solid transparent;
2875 #sidebar-switcher-target:hover,
2876 #sidebar-close:hover {
2877 background: hsla(240, 5%, 5%, 0.05);
2880 #sidebar-switcher-target:hover {
2881 border-color: rgba(0, 0, 0, 0.2);
2884 #sidebar-close:hover:active,
2885 #sidebar-switcher-target:hover:active,
2886 #sidebar-switcher-target.active {
2887 background: hsla(240, 5%, 5%, 0.1);
2890 #sidebar-switcher-target:hover:active,
2891 #sidebar-switcher-target.active {
2892 border-color: rgba(0, 0, 0, 0.25);
2895 #sidebarMenu-popup .subviewbutton {
2899 #sidebar-extensions:empty + toolbarseparator {
2903 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
2904 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
2905 padding-inline-start: 16px;
2907 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
2908 padding-inline-start: 0;
2911 #sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
2912 list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
2915 #sidebar-switcher-bookmarks > .toolbarbutton-icon,
2916 #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
2917 /* list-style-image: url(chrome://browser/skin/bookmark.svg);
2918 -moz-context-properties: fill;
2921 list-style-image: url(chrome://browser/skin/places/bookmark.png);
2922 -moz-image-region: rect(0px 16px 16px 0px);
2925 #sidebar-switcher-history > .toolbarbutton-icon,
2926 #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
2927 /* list-style-image: url(chrome://browser/skin/history.svg);
2928 -moz-context-properties: fill;
2931 list-style-image: url(chrome://browser/skin/places/history.png);
2934 #sidebar-switcher-tabs > .toolbarbutton-icon,
2935 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
2936 /* list-style-image: url(chrome://browser/skin/synced-tabs.svg);
2937 -moz-context-properties: fill;
2940 list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
2943 /* === END sidebar.inc.css === */
2946 background-color: #000000;
2949 .browserContainer > findbar {
2951 background-color: -moz-dialog;
2952 color: -moz-DialogText;
2961 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2964 #TabsToolbar .toolbar-holder {
2965 background-color: #000000; /* correct effect of being an actual toolbar */
2968 #main-window[disablechrome] #TabsToolbar,
2969 #TabsToolbar[tabsontop="false"] {
2970 border-bottom: 1px solid #008484;
2973 /* === BEGIN tabs.inc.css === */
2976 /* --tab-toolbar-navbar-overlap: 1px; */
2977 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2978 /* --tab-min-height: 31px; */
2981 /* --tab-stroke-background-size: auto 100%; */
2985 .tabs-newtab-button,
2986 #TabsToolbar > #new-tab-button {
2991 padding: 1px 4px 2px;
2994 .tabbrowser-tab:first-of-type {
2995 margin-inline-start: 2px;
2998 .tabs-newtab-button,
2999 #TabsToolbar > #new-tab-button,
3000 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3001 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3002 border-radius: 8px 8px 0px 0px;
3003 margin-inline-start: 0;
3006 .tabs-newtab-button:not(:hover),
3007 #TabsToolbar > #new-tab-button:not(:hover),
3008 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3009 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3010 background-color: #C09070;
3013 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3014 .tabbrowser-tab[visuallyselected=true] {
3015 /* position: relative;
3019 .tab-background-middle {
3025 .tab-content[pinned] {
3030 .tab-sharing-icon-overlay,
3036 .tab-sharing-icon-overlay,
3040 margin-inline-end: 3px;
3044 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3047 .tab-icon-image[sharing]:not([selected]),
3048 .tab-sharing-icon-overlay {
3049 animation: 3s linear tab-sharing-icon-pulse infinite;
3052 @keyframes tab-sharing-icon-pulse {
3053 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3054 0%, 16.66%, 83.33%, 100% {
3062 .tab-icon-image[sharing]:not([selected]) {
3063 animation-delay: -1.5s;
3066 .tab-sharing-icon-overlay {
3067 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3068 margin-inline-start: -22px;
3072 .tab-sharing-icon-overlay[sharing="camera"] {
3073 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
3076 .tab-sharing-icon-overlay[sharing="microphone"] {
3077 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3080 .tab-sharing-icon-overlay[sharing="screen"] {
3081 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
3088 margin-inline-start: -15px;
3089 margin-inline-end: -1px;
3093 .tab-icon-overlay[crashed] {
3094 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
3097 .tab-icon-overlay[soundplaying],
3098 .tab-icon-overlay[muted]:not([crashed]),
3099 .tab-icon-overlay[blocked]:not([crashed]) {
3100 border-radius: 10px;
3103 .tab-icon-overlay[soundplaying]:hover,
3104 .tab-icon-overlay[muted]:hover,
3105 .tab-icon-overlay[blocked]:not([crashed]):hover {
3106 background-color: #FFCF00;
3109 .tab-icon-overlay[soundplaying] {
3110 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
3113 .tab-icon-overlay[muted]:not([crashed]) {
3114 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
3117 .tab-icon-overlay[blocked]:not([crashed]) {
3118 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
3121 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
3122 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
3123 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
3126 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
3127 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
3128 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
3131 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
3132 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
3133 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
3136 .tab-throbber[busy] {
3137 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
3140 .tab-throbber[progress] {
3141 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
3144 @media (min-resolution: 1.1dppx) {
3145 .tab-throbber[busy] {
3146 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
3149 .tab-throbber[progress] {
3150 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3154 .tab-throbber[pinned],
3155 .tab-icon-image[pinned] {
3156 margin-inline-start: 2px;
3157 margin-inline-end: 2px;
3161 /* this needs to add up to the 16px of the icon image */
3163 margin-top: 2px !important;
3164 margin-bottom: 2px !important;
3168 margin-inline-start: 4px;
3174 .tab-icon-sound[soundplaying],
3175 .tab-icon-sound[muted],
3176 .tab-icon-sound[blocked] {
3177 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3178 filter: url(chrome://global/skin/filters.svg#fill);
3182 .tab-icon-sound[muted] {
3183 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3186 .tab-icon-sound[blocked] {
3187 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3195 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3196 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3197 transition: opacity .3s linear var(--soundplaying-removal-delay);
3202 .tabs-newtab-button {
3203 /* overlap the tab curves */
3206 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3210 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3211 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3214 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3215 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3218 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3221 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3224 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3225 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3228 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3229 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3232 .tab-background-start[selected=true]::after,
3233 .tab-background-start[selected=true]::before,
3234 .tab-background-start,
3235 .tab-background-end,
3236 .tab-background-end[selected=true]::after,
3237 .tab-background-end[selected=true]::before {
3240 .tabbrowser-tab:not([visuallyselected=true]),
3241 .tabbrowser-tab:-moz-lwtheme {
3244 /* tabbrowser-tab focus ring */
3245 .tabbrowser-tab:focus {
3246 outline: 1px dotted;
3251 .tabbrowser-tab[visuallyselected="true"] {
3254 /* End selected tab */
3256 /* Tab pointer-events */
3259 pointer-events: none;
3262 .tab-background-middle,
3263 .tabs-newtab-button,
3264 .tab-icon-overlay[soundplaying],
3265 .tab-icon-overlay[muted]:not([crashed]),
3266 .tab-icon-overlay[blocked]:not([crashed]),
3269 pointer-events: auto;
3275 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3276 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3278 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3279 background-color: #E7ADE7;
3282 .tab-label[attention]:not([selected="true"]) {
3286 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3287 background-color: #3333FF;
3291 /* Tab separators */
3293 .tabbrowser-tab::after,
3294 .tabbrowser-tab::before {
3296 margin-inline-start: -1px;
3297 background-image: linear-gradient(transparent 5px,
3299 currentColor calc(100% - 4px),
3300 transparent calc(100% - 4px));
3304 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3305 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3309 /* Also show separators beside the selected tab when dragging it. */
3311 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3312 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3313 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3318 /* New tab button */
3320 .tabs-newtab-button {
3322 /* width: calc(36px + var(--tab-curve-width)); */
3324 @media (min-resolution: 1.1dppx) {
3325 /* image preloading hack from like lowdpi styles */
3326 #tabbrowser-tabs::before {
3329 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3330 .tabs-newtab-button:hover {
3333 .tab-background-middle[selected=true] {
3336 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3337 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3340 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3341 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3345 /* All tabs menupopup */
3347 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3348 background-color: #402800;
3351 .alltabs-endimage[soundplaying],
3352 .alltabs-endimage[muted],
3353 .alltabs-endimage[blocked] {
3354 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3355 filter: url(chrome://global/skin/filters.svg#fill);
3359 .alltabs-endimage[muted] {
3360 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3363 .alltabs-endimage[blocked] {
3364 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3367 /* === END tabs.inc.css === */
3369 /* Tab DnD indicator */
3370 .tab-drop-indicator {
3371 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3372 margin-bottom: -11px;
3375 /* Tab close button */
3377 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3378 -moz-image-region: auto !important;
3381 .tab-close-button:hover,
3382 .tab-close-button:hover[selected="true"] {
3383 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3384 -moz-image-region: auto !important;
3387 .tab-close-button:hover:active,
3388 .tab-close-button:hover:active[selected="true"] {
3389 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3390 -moz-image-region: auto !important;
3393 .tab-close-button > .button-icon,
3394 .tab-close-button > .button-box > .button-icon,
3395 .tab-close-button > .toolbarbutton-icon {
3396 width: auto !important;
3400 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3402 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3403 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3407 background-origin: border-box;
3410 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3411 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3412 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3413 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3416 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3417 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3420 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3421 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3422 /* transform: scaleX(-1);*/
3425 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3426 transition: 1s background-color ease-out;
3429 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3430 background-color: #008484;
3433 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3434 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3435 /* border-width: 0 2px 0 0;
3436 border-style: solid;
3437 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3440 .tabs-newtab-button > .toolbarbutton-icon {
3442 margin-bottom: -1px;
3445 .tabs-newtab-button,
3446 #TabsToolbar > #new-tab-button,
3447 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3448 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3449 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3450 -moz-image-region: auto;
3453 .tabs-newtab-button,
3454 .tabs-newtab-button:hover,
3455 #TabsToolbar > #new-tab-button,
3456 #TabsToolbar > #new-tab-button:hover {
3459 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3460 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3461 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3462 .tabs-newtab-button:-moz-lwtheme-brighttext,
3463 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3464 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3467 #TabsToolbar > #new-tab-button {
3469 -moz-box-orient: horizontal;
3473 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3476 #alltabs-button:hover,
3477 #alltabs-button:hover:active,
3478 #alltabs-button[open="true"] {
3479 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3482 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3483 #alltabs-button:-moz-lwtheme-brighttext {
3486 #alltabs-button > .toolbarbutton-icon {
3490 #alltabs-button > .toolbarbutton-menu-dropmarker {
3494 /* All tabs menupopup */
3495 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3496 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3497 -moz-image-region: auto;
3500 .alltabs-item[selected="true"] {
3504 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3505 list-style-image: url("chrome://global/skin/icons/loading.png");
3508 @media (min-resolution: 1.1dppx) {
3509 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3510 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3514 toolbarbutton.chevron {
3515 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3518 toolbarbutton.chevron:hover {
3519 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3522 toolbar[brighttext] toolbarbutton.chevron {
3523 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3526 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3527 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3528 transform: scaleX(-1);
3531 toolbarbutton.chevron > .toolbarbutton-text,
3532 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3536 toolbarbutton.chevron > .toolbarbutton-icon {
3540 #sidebar-throbber[loading="true"] {
3541 list-style-image: url("chrome://global/skin/icons/loading.png");
3542 margin-inline-end: 4px;
3545 @media (min-resolution: 1.1dppx) {
3546 #sidebar-throbber[loading="true"] {
3547 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3552 /* Bookmarks toolbar */
3553 #PlacesToolbarDropIndicator {
3554 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3557 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3558 background-color: #008484 !important;
3559 color: #FFCF00 !important;
3562 /* rules for menupopup drop indicators */
3563 .menupopup-drop-indicator-bar {
3565 /* these two margins must together compensate the indicator's height */
3567 margin-bottom: -1px;
3570 .menupopup-drop-indicator {
3571 list-style-image: none;
3573 margin-inline-end: -4em;
3574 background-color: #008484;
3577 /* === BEGIN notification-icons.inc.css === */
3579 #notification-popup-box {
3580 border-radius: 3px 0 0 3px;
3583 margin-inline-end: -5px;
3584 padding-inline-end: 5px;
3587 .notification-anchor-icon,
3588 #blocked-permissions-container > .blocked-permission-icon {
3591 margin-inline-start: 2px;
3594 /* This class can be used alone or in combination with the class defining the
3595 type of icon displayed. This rule must be defined before the others in order
3596 for its list-style-image to be overridden. */
3597 .notification-anchor-icon {
3598 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3601 .notification-anchor-icon:-moz-focusring {
3602 outline: 1px dotted #008484;
3605 @media (min-resolution: 1.1dppx) {
3606 .notification-anchor-icon {
3607 list-style-image: url(chrome://global/skin/icons/info.svg);
3611 .notification-anchor-icon:not(.plugin-blocked),
3612 #blocked-permissions-container > .blocked-permission-icon {
3613 filter: url(chrome://global/skin/filters.svg#fill);
3617 /* INDIVIDUAL NOTIFICATIONS */
3619 .focus-tab-by-prompt-icon {
3620 list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
3623 .popup-notification-icon[popupid="persistent-storage"],
3624 .persistent-storage-icon {
3625 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
3628 .persistent-storage-icon.blocked-permission-icon {
3629 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
3632 .popup-notification-icon[popupid="web-notifications"],
3633 .desktop-notification-icon {
3634 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3637 .desktop-notification-icon.blocked-permission-icon {
3638 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3642 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3645 .geo-icon.blocked-permission-icon {
3646 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3649 .popup-notification-icon[popupid="geolocation"] {
3650 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3653 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3655 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3658 .indexedDB-icon.blocked-permission-icon {
3659 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3663 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3666 .popup-notification-icon[popupid="password"] {
3667 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3671 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3674 .camera-icon.in-use {
3675 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3678 .camera-icon.blocked-permission-icon {
3679 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3683 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3686 .microphone-icon.in-use {
3687 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3690 .microphone-icon.blocked-permission-icon {
3691 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3694 .popup-notification-icon.microphone-icon {
3695 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3699 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3702 .screen-icon.in-use {
3703 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3706 .screen-icon.blocked-permission-icon {
3707 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3710 #webRTC-preview:not([hidden]) {
3711 display: -moz-stack;
3713 border: 1px solid #A09090;
3719 html|*#webRTC-previewVideo {
3721 /* If we don't set the min-width, width is ignored. */
3726 #webRTC-previewWarning {
3727 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3730 padding-inline-start: calc(1.5em + 16px);
3731 border-top: 1px solid #A09090;
3734 #webRTC-previewWarning > .text-link {
3735 margin-inline-start: 0;
3738 /* This icon has a block sign in it, so we don't need a blocked version. */
3740 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3745 .popup-notification-icon[popupid="drmContentPlaying"],
3747 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3750 .drm-icon:hover:active {
3751 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3754 #eme-notification-icon[firstplay=true] {
3755 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3758 @keyframes emeTeachingMoment {
3759 0% {transform: translateX(0); }
3760 25% {transform: translateX(3px) }
3761 75% {transform: translateX(-3px) }
3762 100% { transform: translateX(0); }
3765 /* INSTALL ADDONS */
3768 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3771 .popup-notification-icon[popupid="xpinstall-disabled"],
3772 .popup-notification-icon[popupid="addon-install-blocked"],
3773 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3774 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3777 .popup-notification-icon[popupid="addon-progress"] {
3778 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3781 .popup-notification-icon[popupid="addon-install-failed"] {
3782 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3785 .popup-notification-icon[popupid="addon-install-confirmation"] {
3786 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3789 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3790 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3793 .popup-notification-icon[popupid="addon-install-complete"] {
3794 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3797 .popup-notification-icon[popupid="addon-install-restart"] {
3798 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3801 .popup-notification-icon[popupid="click-to-play-plugins"] {
3802 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3807 .popup-notification-icon[popupid*="offline-app-requested"],
3808 .popup-notification-icon[popupid="offline-app-usage"] {
3809 list-style-image: url(chrome://global/skin/icons/question-64.png);
3815 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3818 .plugin-icon.plugin-blocked {
3819 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3822 #notification-popup-box[hidden] {
3823 /* Override display:none to make the pluginBlockedNotification animation work
3824 when showing the notification repeatedly. */
3826 visibility: collapse;
3829 #plugins-notification-icon.plugin-blocked[showing] {
3830 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3833 @keyframes pluginBlockedNotification {
3844 .popup-notification-icon[popupid="servicesInstall"] {
3845 list-style-image: url(chrome://browser/skin/social/services-64.png);
3849 list-style-image: url(chrome://browser/skin/social/services-16.png);
3855 list-style-image: url(chrome://browser/skin/translation-16.png);
3856 -moz-image-region: rect(0px, 16px, 16px, 0px);
3859 .translation-icon.in-use {
3860 -moz-image-region: rect(0px, 32px, 16px, 16px);
3865 .popup-notification-icon[popupid="update-available"],
3866 .popup-notification-icon[popupid="update-manual"],
3867 .popup-notification-icon[popupid="update-restart"] {
3868 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
3872 /* === END notification-icons.inc.css === */
3874 .popup-notification-body[popupid="addon-progress"],
3875 .popup-notification-body[popupid="addon-install-confirmation"] {
3880 .addon-install-confirmation-name {
3884 html|*.addon-webext-perm-list {
3885 margin-block-end: 0;
3886 padding-inline-start: 10px;
3889 .addon-webext-perm-text {
3890 margin-inline-start: 0;
3893 .popup-notification-description[popupid="addon-webext-permissions"] {
3898 .addon-webext-name {
3907 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3908 -moz-image-region: rect(0px, 288px, 32px, 256px);
3911 .addon-toolbar-icon {
3914 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
3915 -moz-image-region: rect(0, 486px, 18px, 468px);
3918 /* Notification icon box */
3920 .notification-anchor-icon:-moz-focusring {
3921 /* outline: 1px dotted -moz-DialogText;*/
3924 /* Translation infobar */
3926 /* === BEGIN infobar.inc.css === */
3928 notification[value="translation"] .messageImage {
3929 list-style-image: url("chrome://browser/skin/translation-16.png");
3930 -moz-image-region: rect(0, 32px, 16px, 16px);
3933 @media (min-resolution: 1.25dppx) {
3934 notification[value="translation"] .messageImage {
3935 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3936 -moz-image-region: rect(0, 64px, 32px, 32px);
3940 notification[value="translation"][state="translating"] .messageImage {
3941 list-style-image: url("chrome://browser/skin/translating-16.png");
3942 -moz-image-region: auto;
3945 @media (min-resolution: 1.25dppx) {
3946 notification[value="translation"][state="translating"] .messageImage {
3947 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3951 notification[value="translation"] hbox[anonid="details"] {
3955 notification[value="translation"] button,
3956 notification[value="translation"] menulist {
3960 notification[value="translation"] menulist > .menulist-dropmarker {
3963 .translation-menupopup arrowscrollbox {
3967 .translation-attribution {
3969 -moz-box-align: end;
3973 .translation-attribution > label {
3977 .translation-attribution > image {
3981 .translation-welcome-panel {
3985 .translation-welcome-logo {
3988 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3989 -moz-image-region: rect(0, 64px, 32px, 32px);
3992 .translation-welcome-content {
3993 margin-inline-start: 16px;
3996 .translation-welcome-headline {
4001 .translation-welcome-body {
4006 /* === END infobar.inc.css === */
4008 notification[value="translation"] {
4012 .translation-menupopup {
4013 -moz-appearance: none;
4016 /* Bookmarks roots menu-items */
4017 #subscribeToPageMenuitem:not([disabled]),
4018 #subscribeToPageMenupopup {
4019 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4022 #bookmarksToolbarFolderMenu,
4023 #BMB_bookmarksToolbar,
4024 #panelMenu_bookmarksToolbar {
4025 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4026 -moz-image-region: auto;
4029 #BMB_unsortedBookmarks,
4030 #panelMenu_unsortedBookmarks {
4031 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4032 -moz-image-region: auto;
4037 .statuspanel-label {
4040 background: #404000;
4041 border: 1px none #9C9CFF;
4042 border-top-style: solid;
4047 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4048 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4049 border-right-style: solid;
4050 border-top-right-radius: .3em;
4054 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4055 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4056 border-left-style: solid;
4057 border-top-left-radius: .3em;
4061 /* HACK to abolish devily color on main content */
4064 background-color: transparent !important;
4067 /* === BEGIN fullscreen/warning.inc.css === */
4069 html|*.pointerlockfswarning {
4070 align-items: center;
4071 background: rgba(0, 0, 0, 0.9);
4072 border: 2px solid #A09090;
4073 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4076 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4079 html|*.pointerlockfswarning::before {
4081 width: 24px; height: 24px;
4084 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4085 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4086 content: url("chrome://browser/skin/fullscreen/secure.svg");
4089 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4090 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4092 html|*.pointerlockfswarning-domain-text,
4093 html|*.pointerlockfswarning-generic-text {
4095 font-weight: lighter;
4100 html|*.pointerlockfswarning-domain {
4105 html|*#fullscreen-exit-button,
4106 html|*.pointerlockfswarning-exit-button {
4109 border-radius: 300px;
4111 background-color: #C09070;
4115 /* === END fullscreen/warning.inc.css === */
4117 /* === BEGIN ctrlTab.inc.css === */
4122 -moz-appearance: none;
4123 background: rgba(0%,0%,0%,.7);
4126 padding: 20px 10px 10px;
4130 .ctrlTab-favicon[src] {
4131 background-color: #000000;
4137 .ctrlTab-preview-inner > .tabPreview-canvas {
4138 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4141 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4145 .ctrlTab-preview-inner {
4147 border: 2px solid transparent;
4148 border-radius: .5em;
4151 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4152 margin: -10px -10px 0;
4155 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4156 background-color: #000000;
4159 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4161 background-color: #000000;
4163 border-color: #9C9CFF;
4170 /* === END ctrlTab.inc.css === */
4172 /* === including indicator.css is done at the start of the file === */
4176 #developer-toolbar-toolbox-button[error-count]:before {
4180 background-color: #FF0000;
4182 margin-inline-end: 5px;
4185 /* === BEGIN plugin-doorhanger.inc.css === */
4188 * Plugin Doorhanger Styles
4191 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4192 padding: 6px 1px 2px;
4195 .click-to-play-plugins-notification-center-box {
4198 .plugin-popupnotification-centeritem:nth-child(odd) {
4199 /* background-color: rgba(0,0,0,0.1);*/
4202 .center-item-label {
4204 text-overflow: ellipsis;
4207 .center-item-warning-icon {
4208 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4209 background-repeat: no-repeat;
4212 margin-inline-start: 6px;
4215 .click-to-play-plugins-notification-button-container {
4218 .click-to-play-popup-button {
4222 .click-to-play-plugins-notification-description-box {
4226 padding-bottom: 3px;
4229 .click-to-play-plugins-outer-description {
4233 .click-to-play-plugins-notification-link,
4238 .messageImage[value="plugin-hidden"] {
4239 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4242 /* Keep any changes to this style in sync with pluginProblem.css */
4243 notification.pluginVulnerable {
4246 notification.pluginVulnerable .messageImage {
4247 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4250 /* === END plugin-doorhanger.inc.css === */
4252 /* === BEGIN customizeMode.inc.css === */
4254 /* Customization mode */
4257 --drag-drop-transition-duration: .3s;
4260 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4261 background-repeat: no-repeat;
4262 background-position: right top;
4263 background-attachment: fixed;
4264 background-color: transparent;
4265 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4266 var(--toolbox-rect-height), 0),
4267 linear-gradient(to bottom,
4268 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4269 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4270 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4271 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4272 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4273 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4276 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4280 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4281 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4282 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4287 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4288 pointer-events: none;
4291 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4292 #PanelUI-contents > .panel-customization-placeholder {
4293 -moz-outline-radius: 2.5px;
4294 outline: 1px dashed transparent;
4297 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4298 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4299 -moz-box-ordinal-group: 0;
4304 outline-offset: -2px;
4305 pointer-events: none;
4311 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4312 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4313 offset from the bottom effectively the same as other targets (-2px). */
4314 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4318 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4319 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4320 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4321 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4325 /* Most target outlines are shown on hover and drag over but the panel menu uses
4326 placeholders instead. */
4327 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4328 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4329 /* nav-bar and panel outlines are always shown */
4330 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4331 outline-color: currentColor;
4334 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4335 transition: outline-color 250ms linear;
4338 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4339 transition: outline-color 250ms linear;
4340 outline-color: var(--panel-separator-color);
4343 #PanelUI-contents > .panel-customization-placeholder {
4345 outline-offset: -5px;
4348 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4350 /* padding-left: 10px;
4351 padding-right: 10px;*/
4354 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4358 #customization-container {
4359 background-color: #000000;
4363 #customization-palette,
4364 #customization-empty {
4365 padding: 0 15px 15px;
4368 #customization-header {
4370 line-height: 1.75em;
4373 margin: 25px 25px 12px;
4374 padding-bottom: 12px;
4375 border-bottom: 1px solid #A09090;
4378 #customization-panel-container {
4379 padding: 10px 10px 0px;
4382 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4383 #customization-footer {
4384 /*background-color: rgb(236,236,236);*/
4387 #customization-footer {
4388 border-top: 1px solid #9C9CFF;
4392 .customizationmode-button {
4396 .customizationmode-button:hover {
4399 .customizationmode-button > .box-inherit {
4402 .customizationmode-button > .button-icon {
4405 .customizationmode-button:not([type=menu]) > .button-text {
4408 .customizationmode-button > .button-menu-dropmarker {
4413 .customizationmode-button[checked] {
4414 background-color: #008484;
4417 .customizationmode-button[checked]:hover:not([disabled]),
4418 .customizationmode-button:hover:not([disabled]) {
4419 background-color: #FFCF00;
4422 .customizationmode-button[checked]:hover:active:not([disabled]),
4423 .customizationmode-button:hover:active:not([disabled]),
4424 .customizationmode-button[open] {
4425 background-color: #FF9F00;
4428 .customizationmode-button[disabled="true"] {
4431 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4432 .customizationmode-button > .button-box > .button-icon {
4436 #customization-titlebar-visibility-button {
4437 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4438 -moz-image-region: rect(0, 16px, 16px, 0);
4441 #customization-titlebar-visibility-button:hover {
4442 -moz-image-region: rect(16px, 16px, 32px, 0);
4445 #customization-titlebar-visibility-button > .button-box {
4447 padding-bottom: 1px;
4450 #customization-titlebar-visibility-button:hover:active > .button-box {
4455 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4456 #customization-titlebar-visibility-button > .button-box > .button-text {
4457 /* Sadly, button.css thinks its margins are perfect for everyone. */
4458 margin-inline-start: 5px !important;
4461 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4465 background-image: url("chrome://browser/content/default-theme-icon.svg");
4466 background-size: contain;
4469 #customization-titlebar-visibility-button > .button-box > .button-icon {
4470 vertical-align: middle;
4473 #customization-titlebar-visibility-button[checked] {
4474 -moz-image-region: rect(0, 32px, 16px, 16px);
4475 background-color: #008484;
4478 #customization-titlebar-visibility-button[checked]:hover {
4479 -moz-image-region: rect(16px, 32px, 32px, 16px);
4480 background-color: #FFCF00;
4483 #customization-titlebar-visibility-button[checked]:hover:active {
4484 background-color: #FF9F00;
4487 @media (min-resolution: 1.1dppx) {
4488 #customization-titlebar-visibility-button {
4489 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4490 -moz-image-region: rect(0, 48px, 48px, 0);
4493 #customization-titlebar-visibility-button:hover {
4494 -moz-image-region: rect(48px, 48px, 96px, 0);
4497 #customization-titlebar-visibility-button[checked] {
4498 -moz-image-region: rect(0, 96px, 48px, 48px);
4501 #customization-titlebar-visibility-button[checked]:hover {
4502 -moz-image-region: rect(48px, 96px, 96px, 48px);
4506 #main-window[customize-entered] #customization-panel-container {
4507 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4508 background-position: left top;
4509 background-repeat: repeat;
4510 background-size: auto;
4511 background-attachment: fixed;
4514 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4515 toolbarpaletteitem[place="toolbar"] {
4516 transition: border-width 250ms ease-in-out;
4519 toolbarpaletteitem[mousedown] {
4520 outline: 1px solid #008484;
4521 cursor: -moz-grabbing;
4525 .panel-customization-placeholder,
4526 toolbarpaletteitem[place="palette"],
4527 toolbarpaletteitem[place="panel"] {
4528 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4531 #customization-palette {
4532 transition: opacity .3s ease-in-out;
4536 #customization-palette[showing="true"] {
4540 toolbarpaletteitem toolbarbutton[disabled] {
4541 /* color: inherit !important;*/
4544 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4545 toolbarpaletteitem[notransition].panel-customization-placeholder,
4546 toolbarpaletteitem[notransition][place="toolbar"],
4547 toolbarpaletteitem[notransition][place="palette"],
4548 toolbarpaletteitem[notransition][place="panel"] {
4552 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4553 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4554 toolbarpaletteitem > toolbaritem.panel-wide-item,
4555 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4556 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4559 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4560 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4561 transform: scale(1.3);
4564 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4565 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4566 transform: scale(1.1);
4569 /* Override the toolkit styling for items being dragged over. */
4570 toolbarpaletteitem[place="toolbar"] {
4571 border-left-width: 0;
4572 border-right-width: 0;
4577 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4578 border-top: 0px solid transparent;
4579 border-bottom: 0px solid transparent;
4582 #customization-palette:not([hidden]) {
4583 margin-bottom: 25px;
4586 toolbarpaletteitem[place="palette"]:-moz-focusring,
4587 toolbarpaletteitem[place="panel"]:-moz-focusring,
4588 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4592 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4593 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4594 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4595 /* Delay adding the focusring back until after the transform transition completes. */
4596 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4597 outline: 1px dotted;
4598 -moz-outline-radius: 2.5px;
4601 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4602 outline-offset: -5px;
4605 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4606 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4607 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4608 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4612 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4613 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4623 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4624 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4628 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4629 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4632 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4633 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4637 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4638 -moz-box-pack: center;
4642 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4643 margin-inline-end: 5px;
4646 #customization-palette > toolbarpaletteitem > label {
4652 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4653 -moz-box-orient: vertical;
4654 /* Make the panel padding uniform across all platforms due to the
4655 styling of the section headers and footer. */
4659 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4664 .customization-lwtheme-menu-theme {
4665 -moz-appearance: none;
4668 padding-inline-end: 5px;
4670 padding-inline-start: 0;
4673 .customization-lwtheme-menu-theme[defaulttheme] {
4674 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4677 .customization-lwtheme-menu-theme[active="true"] {
4678 background-color: #008484;
4681 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4685 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4689 #customization-lwtheme-menu-header,
4690 #customization-lwtheme-menu-recommended {
4695 #customization-lwtheme-menu-header,
4696 #customization-lwtheme-menu-recommended,
4697 #customization-lwtheme-menu-footer {
4698 background-color: #A09090;
4700 margin-right: -10px;
4704 #customization-lwtheme-menu-header {
4706 border-top-right-radius: 3px;
4707 border-top-left-radius: 3px;
4710 #customization-lwtheme-menu-recommended {
4713 #customization-lwtheme-menu-footer {
4714 margin-bottom: -10px;
4715 border-bottom-right-radius: 3px;
4716 border-bottom-left-radius: 3px;
4719 .customization-lwtheme-menu-footeritem {
4720 -moz-appearance: none;
4722 background-color: #C09070;
4724 border: 1px solid transparent;
4730 .customization-lwtheme-menu-footeritem:hover {
4731 background-color: #FFCF00;
4734 .customization-lwtheme-menu-footeritem:first-child {
4737 /* === END customizeMode.inc.css === */
4739 /* === BEGIN customizeTip.inc.css === */
4741 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4748 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4749 border: 1px solid #9C9CFF;
4753 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4754 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4757 .customization-tipPanel-infoBox {
4758 margin: 20px 25px 25px;
4760 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4761 background-repeat: no-repeat;
4764 .customization-tipPanel-content {
4770 .customization-tipPanel-em {
4775 .customization-tipPanel-contentImage {
4777 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4785 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4786 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4789 .customization-tipPanel-link {
4790 -moz-appearance: none;
4791 background: transparent;
4799 .customization-tipPanel-link > .button-box > .button-text {
4800 margin: 0 !important;
4803 .customization-tipPanel-closeBox > .close-icon {
4804 -moz-appearance: none;
4806 margin-inline-end: -25px;
4809 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4810 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4811 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4814 /* === END customizeTip.inc.css === */
4817 * This next rule is a hack to disable subpixel anti-aliasing on all
4818 * labels during the customize mode transition. Subpixel anti-aliasing
4819 * on Windows with Direct2D layers acceleration is particularly slow to
4820 * paint, so this hack is how we sidestep that performance bottleneck.
4822 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4823 transform: perspective(0.01px);
4826 #main-window[customize-entered] > #tab-view-deck {
4827 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4828 background-attachment: fixed;
4831 #main-window[customization-lwtheme]:-moz-lwtheme {
4832 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4833 background-repeat: repeat;
4834 background-attachment: fixed;
4835 background-position: left top;
4838 #main-window[customize-entered] #browser-bottombox,
4839 #main-window[customize-entered] #customization-container {
4840 border-left: 1px solid #9C9CFF;
4841 border-right: 1px solid #9C9CFF;
4842 background-clip: padding-box;
4845 #main-window[customize-entered] #browser-bottombox {
4846 border-bottom: 1px solid #9C9CFF;
4849 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4853 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4857 /* End customization mode */
4859 /* Private browsing indicators */
4862 * Currently, we have two places where we put private browsing indicators on
4863 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4864 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4865 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4866 * want the bottom border of the image to line up with the bottom of the window
4867 * caption buttons. That's why there's so much special-casing going on in here.
4869 .private-browsing-indicator {
4871 pointer-events: none;
4874 #private-browsing-indicator-titlebar {
4879 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4883 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4887 #TabsToolbar > .private-browsing-indicator {
4888 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4889 margin-inline-start: 4px;
4893 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4894 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4895 * min/max/close window buttons.
4897 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4898 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4899 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4900 margin-inline-end: 4px;
4906 /* This one is for Linux */
4907 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4908 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4912 /* End private browsing indicators */
4914 /* === BEGIN UITour.inc.css === */
4918 #UITourHighlightContainer {
4919 -moz-appearance: none;
4921 background-color: transparent;
4922 /* This is a buffer to compensate for the movement in the "wobble" effect,
4923 and for the box-shadow of #UITourHighlight. */
4928 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4929 border-radius: 40px;
4930 border: 1px solid #9C9CFF;
4931 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4932 on Linux without an X compositor where opacity is either 0 or 1. */
4933 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4938 #UITourTooltipBody {
4939 -moz-box-align: start;
4942 #UITourTooltipTitleContainer {
4943 -moz-box-align: start;
4944 margin-bottom: 10px;
4947 #UITourTooltipIcon {
4950 margin-inline-end: 10px;
4953 #UITourTooltipTitle,
4954 #UITourTooltipDescription {
4958 #UITourTooltipTitle {
4964 #UITourTooltipDescription {
4965 margin-inline-start: 0;
4966 margin-inline-end: 0;
4968 line-height: 1.8rem;
4969 margin-bottom: 0; /* Override global.css */
4972 #UITourTooltipClose {
4974 -moz-appearance: none;
4976 background-color: transparent;
4978 margin-inline-start: 4px;
4982 #UITourTooltipClose > .toolbarbutton-text {
4986 #UITourTooltipButtons {
4988 background-color: rgba(0,0,0,.2);
4989 border-top: 1px solid rgba(0,0,0,.4);
4990 margin: 10px -16px -16px;
4994 #UITourTooltipButtons > label,
4995 #UITourTooltipButtons > button {
4999 #UITourTooltipButtons > label:first-child,
5000 #UITourTooltipButtons > button:first-child {
5001 margin-inline-start: 0;
5004 #UITourTooltipButtons > label:last-child,
5005 #UITourTooltipButtons > button:last-child {
5006 margin-inline-end: 0;
5009 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5012 margin-inline-end: 5px;
5015 #UITourTooltipButtons > label,
5016 #UITourTooltipButtons > button .button-text {
5020 #UITourTooltipButtons > button:not(.button-link) {
5021 -moz-appearance: none;
5022 background-color: #C09070;
5023 border-radius: 3000px;
5027 transition-property: background-color, color;
5028 transition-duration: 150ms;
5031 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5032 background-color: #FFCF00;
5036 #UITourTooltipButtons > label,
5037 #UITourTooltipButtons > button.button-link {
5038 -moz-appearance: none;
5039 background: transparent;
5042 color: rgba(0,0,0,0.35);
5044 padding-right: 10px;
5047 #UITourTooltipButtons > button.button-link:hover {
5051 /* The primary button gets the same color as the customize button. */
5052 #UITourTooltipButtons > button.button-primary {
5053 background-color: #A06060; /* LCARS default button background color */
5056 padding-right: 30px;
5059 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5060 background-color: #FFCF00;
5064 /* Notification overrides for Heartbeat UI */
5066 notification.heartbeat {
5067 background-color: #A09090;
5071 @keyframes pulse-onshow {
5074 transform: scale(1.0);
5078 transform: scale(1.1);
5081 transform: scale(1.0);
5084 transform: scale(1.1);
5087 transform: scale(1.0);
5091 @keyframes pulse-twice {
5093 transform: scale(1.1);
5096 transform: scale(0.8);
5099 transform: scale(1);
5103 .messageText.heartbeat {
5105 /* text-shadow: none; */
5106 margin-inline-start: 0px;
5109 .messageImage.heartbeat {
5112 margin-inline-start: 8px;
5113 margin-inline-end: 8px;
5116 .messageImage.heartbeat.pulse-onshow {
5117 animation-name: pulse-onshow;
5118 animation-duration: 1.5s;
5119 animation-iteration-count: 1;
5120 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5123 .messageImage.heartbeat.pulse-twice {
5124 animation-name: pulse-twice;
5125 animation-duration: 1s;
5126 animation-iteration-count: 2;
5127 animation-timing-function: linear;
5130 /* Learn More link styles */
5131 .heartbeat > .text-link {
5133 margin-inline-start: 0px;
5136 .heartbeat > .text-link:hover {
5138 text-decoration: none;
5141 .heartbeat > .text-link:hover:active {
5145 /* Heartbeat UI Rating Star Classes */
5146 .heartbeat > #star-rating-container {
5148 /* margin-bottom: 4px;*/
5151 .heartbeat > #star-rating-container > #star5 {
5152 -moz-box-ordinal-group: 5;
5155 .heartbeat > #star-rating-container > #star4 {
5156 -moz-box-ordinal-group: 4;
5159 .heartbeat > #star-rating-container > #star3 {
5160 -moz-box-ordinal-group: 3;
5163 .heartbeat > #star-rating-container > #star2 {
5164 -moz-box-ordinal-group: 2;
5167 .heartbeat > #star-rating-container > .star-x {
5168 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5170 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5171 margin-inline-end: 4px !important;
5176 .heartbeat > #star-rating-container > .star-x:hover,
5177 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5178 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5181 /* === END UITour.inc.css === */
5183 #UITourTooltipButtons {
5185 * Override the --arrowpanel-padding so the background extends
5186 * to the sides and bottom of the panel.
5189 margin-right: -10px;
5190 margin-bottom: -10px;
5193 /* === BEGIN contextmenu.inc.css === */
5195 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5198 #context-navigation > .menuitem-iconic {
5200 -moz-box-pack: center;
5201 -moz-box-align: center;
5204 #context-navigation > .menuitem-iconic[disabled="true"] {
5205 background-color: transparent;
5208 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5209 -moz-appearance: none;
5212 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5216 filter: url(chrome://global/skin/filters.svg#fill);
5221 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5225 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5229 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5233 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5236 #context-bookmarkpage {
5237 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5240 #context-bookmarkpage[starred=true] {
5241 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5244 #context-back:-moz-locale-dir(rtl),
5245 #context-forward:-moz-locale-dir(rtl),
5246 #context-reload:-moz-locale-dir(rtl) {
5247 transform: scaleX(-1);
5250 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5251 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5257 #context-media-eme-learnmore {
5258 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5261 #context-media-eme-learnmore {
5262 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5265 /* === END contextmenu.inc.css === */
5267 /* Make context menu items larger when opened through touch. */
5268 #contentAreaContextMenu[touchmode] menu,
5269 #contentAreaContextMenu[touchmode] menuitem {
5271 padding-bottom: 12px;
5274 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5276 padding-bottom: 7px;
5279 #context-navigation {
5282 #context-sep-navigation {
5283 /* margin-top: -4px; */
5286 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5291 .webextension-popup-browser {
5292 border-radius: inherit;
5295 .contentSelectDropdown-ingroup > .menu-iconic-text {
5296 padding-inline-start: 20px;
5299 #ContentSelectDropdown > menupopup {
5300 background-color: #000000;
5301 -moz-border-top-colors: #A09090;
5302 -moz-border-right-colors: #A09090;
5303 -moz-border-bottom-colors: #A09090;
5304 -moz-border-left-colors: #A09090;
5307 #ContentSelectDropdown > menupopup > menucaption,
5308 #ContentSelectDropdown > menupopup > menuitem {
5311 /* font: -moz-list;*/
5314 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5315 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5316 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5317 with 4px being the preferred padding size. */
5318 padding-top: .3333em;
5319 padding-bottom: .3333em;
5322 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5326 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5328 background-color: unset;
5331 #ContentSelectDropdown > menupopup > menucaption {
5332 background-color: buttonface;
5335 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5339 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5340 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5341 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5342 font-size with 11px being the preferred padding size. */
5343 padding-top: .9167em;
5344 padding-bottom: .9167em;