1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
39 /* === BEGIN browser.inc.css === */
44 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
48 -moz-image-region: rect(0, 42px, 14px, 28px);
51 .urlbar-go-button:hover {
52 -moz-image-region: rect(14px, 42px, 28px, 28px);
55 .urlbar-go-button:-moz-locale-dir(rtl) {
56 transform: scaleX(-1);
59 @media (min-resolution: 1.1dppx) {
61 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
62 -moz-image-region: rect(0, 84px, 28px, 56px);
66 .urlbar-go-button:hover {
67 -moz-image-region: rect(28px, 84px, 56px, 56px);
70 .urlbar-go-button:hover:active {
71 -moz-image-region: rect(56px, 84px, 84px, 56px);
81 /* background-color: hsla(0,0%,0%,.05);
82 border: 1px solid ThreeDLightShadow;*/
85 #urlbar-zoom-button[animate="true"] {
86 animation-name: urlbar-zoom-reset-pulse;
87 animation-duration: 250ms;
90 #urlbar-zoom-button:hover {
91 /* background-color: hsla(0,0%,0%,.1);*/
94 #urlbar-zoom-button:hover:active {
95 /* background-color: hsla(0,0%,0%,.15);*/
98 #urlbar-zoom-button > .toolbarbutton-text {
102 #urlbar-zoom-button > .toolbarbutton-icon {
106 /* Page action button */
107 #urlbar-page-action-button {
108 list-style-image: url("chrome://browser/skin/page-action.svg");
109 -moz-context-properties: fill;
115 #urlbar-page-action-button > .toolbarbutton-icon {
119 #page-action-copy-url-button {
120 list-style-image: url("chrome://browser/skin/copy-url.svg");
121 -moz-context-properties: fill;
125 #page-action-email-link-button {
126 list-style-image: url("chrome://browser/skin/email-link.svg");
127 -moz-context-properties: fill;
131 #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 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon,
625 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .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 > deck[anonid="search-suggestions-notification"] {
1877 border-bottom: 1px solid var(--panel-separator-color);
1878 padding-inline-start: 0;
1879 padding-inline-end: 6px;
1883 /* Limit the size of the hidden description, since a deck takes the size of the biggest child */
1885 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="0"] #search-suggestions-hint,
1886 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="1"] #search-suggestions-question {
1890 /* Opt-in notification */
1892 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
1894 padding-inline-start: 44px;
1895 background-color: #000000;
1896 background-image: url("chrome://browser/skin/info.svg");
1897 background-clip: padding-box;
1898 background-position: 20px center;
1899 background-repeat: no-repeat;
1900 background-size: 16px 16px;
1903 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1904 background-position: right 20px center;
1907 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
1912 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1913 margin-inline-start: 0;
1916 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
1917 -moz-appearance: none;
1922 margin-inline-start: 10px;
1925 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
1928 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
1931 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
1934 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
1939 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
1940 /* font: message-box;*/
1942 flex-direction: row;
1943 align-items: center;
1947 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] {
1951 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
1954 background-color: #000000;
1955 border: 1px solid #FFCF00;
1960 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
1961 unicode-bidi: embed;
1964 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
1968 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
1969 transform: scale(0);
1970 animation-name: search-suggestions-hint-grow;
1971 animation-duration: 500ms;
1972 animation-delay: 500ms;
1973 animation-iteration-count: 1;
1974 animation-timing-function: ease-in-out;
1975 animation-fill-mode: forwards;
1979 @keyframes search-suggestions-hint-grow {
1980 0% { transform: scale(0); }
1981 40% { transform: scale(1.5); }
1982 60% { transform: scale(1); }
1983 80% { transform: scale(1.25); }
1984 100% { transform: scale(1); }
1987 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
1988 text-overflow: clip;
1991 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
1995 animation-name: search-suggestions-hint-typing;
1996 animation-duration: 500ms;
1997 animation-delay: 750ms;
1998 animation-iteration-count: 1;
1999 animation-fill-mode: forwards;
2002 @media all and (max-width: 800px) {
2003 /* Hide the typing animation block */
2004 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-typing"] {
2009 @keyframes search-suggestions-hint-typing {
2014 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
2016 animation-duration: 250ms;
2017 animation-delay: 1500ms;
2018 animation-iteration-count: 1;
2019 animation-fill-mode: forwards;
2022 /* Margin-inline-start can't be animated yet */
2023 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
2025 animation-name: search-suggestions-hint-buildin-ltr;
2028 @keyframes search-suggestions-hint-buildin-ltr {
2029 from { margin-left: 160px; opacity: 0; }
2030 to { margin-left: 0; opacity: 1; }
2033 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
2034 /* Should be margin-inline-start but that can't be animated yet */
2035 margin-right: 160px;
2036 animation-name: search-suggestions-hint-buildin-rtl;
2039 @keyframes search-suggestions-hint-buildin-rtl {
2040 from { margin-right: 160px; opacity: 0; }
2041 to { margin-right: 0; opacity: 1; }
2044 #search-suggestions-change-settings {
2046 animation-name: search-suggestions-hint-fadein;
2047 animation-duration: 500ms;
2048 animation-delay: 1800ms;
2049 animation-iteration-count: 1;
2050 animation-fill-mode: forwards;
2053 @keyframes search-suggestions-hint-fadein {
2058 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2061 min-width: calc(54px + 11ch);
2066 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2067 background-color: var(--identity-box-verified-background-color);
2070 #identity-box:-moz-focusring {
2071 outline: 1px dotted;
2072 outline-offset: -1px;
2075 #identity-box.verifiedDomain:-moz-focusring,
2076 #identity-box.verifiedIdentity:-moz-focusring {
2077 outline-color: #000000;
2080 /* Location bar dropmarker */
2082 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2083 background-color: transparent;
2086 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2087 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2088 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2091 transition: opacity 0.15s ease;
2094 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2098 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
2102 .urlbar-history-dropmarker:hover {
2105 .urlbar-history-dropmarker:hover:active,
2106 .urlbar-history-dropmarker[open="true"] {
2109 /* page proxy icon */
2110 /* === BEGIN identity-block.inc.css === */
2117 /* The padding-left and padding-right transitions handle the delayed hiding of
2118 the forward button when hovered. */
2119 transition: background-color 150ms ease, padding-left, padding-right;
2122 #identity-box:-moz-locale-dir(ltr) {
2123 border-top-right-radius: 0;
2124 border-bottom-right-radius: 0;
2127 #identity-box:-moz-locale-dir(rtl) {
2128 border-top-left-radius: 0;
2129 border-bottom-left-radius: 0;
2132 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2133 border-inline-end: 1px solid #008484;
2136 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2141 border-inline-end: 1px solid #9C9CFF;
2144 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2149 #identity-icon-labels:-moz-locale-dir(ltr) {
2153 #identity-icon-labels:-moz-locale-dir(rtl) {
2157 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2158 /* border-radius: 0;
2159 padding-inline-start: 2px; */
2160 padding-inline-end: 2px;
2161 margin-inline-end: 1px;
2164 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2165 padding-inline-start: 2px;
2168 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2169 /* Forward button hiding is delayed when hovered, so we should use the same
2170 delay for the identity box. We handle both horizontal paddings (for LTR and
2171 RTL), the latter two delays here are for padding-left and padding-right. */
2172 transition-delay: 0s, 100s, 100s;
2175 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2176 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2177 padding-inline-start: 2.01px;
2181 #tracking-protection-icon,
2183 .notification-anchor-icon,
2184 #blocked-permissions-container > .blocked-permission-icon,
2188 margin-inline-start: 2px;
2189 -moz-context-properties: fill;
2193 #identity-icon:-moz-lwtheme,
2194 #tracking-protection-icon:-moz-lwtheme,
2195 #connection-icon:-moz-lwtheme,
2196 .notification-anchor-icon:-moz-lwtheme,
2197 #blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme,
2198 #extension-icon:-moz-lwtheme {
2199 /* fill: rgba(0,0,0,.6);*/
2202 /* MAIN IDENTITY ICON */
2205 margin-inline-start: 0;
2208 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2211 #identity-box:hover > #identity-icon:not(.no-hover),
2212 #identity-box[open=true] > #identity-icon {
2213 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2216 #identity-box.grantedPermissions > #identity-icon {
2217 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2220 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2221 #identity-box.grantedPermissions[open=true] > #identity-icon {
2222 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2225 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2226 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2229 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2233 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2234 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
2237 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2238 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2246 margin-inline-start: -16px;
2248 -moz-context-properties: fill;
2253 #identity-box[sharing="camera"] > #sharing-icon {
2254 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2257 #identity-box[sharing="microphone"] > #sharing-icon {
2258 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2261 #identity-box[sharing="screen"] > #sharing-icon {
2262 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2266 #identity-box[sharing] > #sharing-icon {
2268 animation-delay: -1.5s;
2271 #identity-box[sharing] > #identity-icon,
2273 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2276 @keyframes identity-box-sharing-icon-pulse {
2277 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2278 0%, 16.66%, 83.33%, 100% {
2286 /* TRACKING PROTECTION ICON */
2288 #tracking-protection-icon {
2289 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
2290 margin-inline-end: 0;
2293 #tracking-protection-icon[state="loaded-tracking-content"] {
2294 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2297 #tracking-protection-icon[animate] {
2298 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2301 #tracking-protection-icon:not([state]) {
2302 margin-inline-end: -18px;
2303 pointer-events: none;
2305 /* Only animate the shield in, when it disappears hide it immediately. */
2309 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
2310 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2311 visibility: collapse;
2314 /* CONNECTION ICON, EXTENSION ICON */
2320 visibility: collapse;
2323 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2324 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2325 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2326 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2327 visibility: visible;
2330 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2331 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2332 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2333 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2334 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2335 visibility: visible;
2338 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2339 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2340 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2341 visibility: visible;
2344 #identity-box.extensionPage > #extension-icon {
2345 list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
2346 visibility: visible;
2349 /* REMOTE CONTROL ICON */
2351 #main-window[remotecontrol] #remote-control-icon {
2352 list-style-image: url(chrome://browser/content/static-robot.png);
2353 visibility: visible;
2356 margin-inline-start: 2px;
2359 /* === END identity-block.inc.css === */
2361 #page-proxy-favicon {
2362 -moz-image-region: rect(0, 16px, 16px, 0);
2365 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2366 /* margin-inline-end: 1px;*/
2369 #identity-box:hover > #page-proxy-favicon {
2370 -moz-image-region: rect(0, 32px, 16px, 16px);
2373 #identity-box:hover:active > #page-proxy-favicon,
2374 #identity-box[open=true] > #page-proxy-favicon {
2375 -moz-image-region: rect(0, 48px, 16px, 32px);
2378 #identity-box:hover {
2379 background-color: #FFCF00;
2383 #identity-box:hover:active,
2384 #identity-box[open=true] {
2385 background-color: #FF9F00;
2389 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2390 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2391 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2392 background-color: #A09090;
2396 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2397 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2398 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2402 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2403 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2404 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2405 background-color: #008484;
2409 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2410 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2411 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2415 #identity-box:hover > image,
2416 #identity-box:hover:active > image,
2417 #identity-box[open=true] > image {
2418 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2423 /* === BEGIN autocomplete.inc.css === */
2425 #PopupAutoComplete > richlistbox > richlistitem {
2430 padding: 0px 1px 0px 1px;
2433 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2434 margin-inline-start: 4px;
2435 margin-inline-end: 0;
2438 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2440 margin-inline-start: 4px;
2443 #PopupAutoComplete > richlistbox {
2447 /* Login form autocompletion */
2448 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2450 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2451 -moz-context-properties: fill;
2455 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2459 /* Insecure field warning */
2460 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2461 background-color: var(--arrowpanel-dimmed);
2462 border-bottom: 1px solid var(--panel-separator-color);
2463 padding-bottom: 4px;
2467 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2468 background-color: var(--arrowpanel-dimmed-further);
2472 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2477 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2481 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2482 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2485 /* === END autocomplete.inc.css === */
2487 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2488 border-top: 1px solid #A09090;
2491 #treecolAutoCompleteImage {
2496 .autocomplete-richlistbox {
2500 .autocomplete-richlistitem {
2505 border: 1px solid transparent;
2518 border: 1px solid transparent;
2529 html|span.ac-emphasize-text-title,
2530 html|span.ac-emphasize-text-tag,
2531 html|span.ac-emphasize-text-url {
2535 .ac-type-icon[type=bookmark] {
2536 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2539 .ac-type-icon[type=bookmark][selected][current] {
2540 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2543 .ac-result-type-bookmark {
2544 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2545 -moz-image-region: rect(0px 16px 16px 0px);
2550 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2551 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2554 .ac-type-icon[type=keyword],
2555 .ac-site-icon[type=searchengine] {
2556 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2557 context-properties: fill;
2561 .ac-type-icon[type=keyword][selected],
2562 .ac-site-icon[type=searchengine][selected] {
2563 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2564 context-properties: fill;
2568 .ac-result-type-tag {
2569 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2574 .ac-type-icon[type=switchtab],
2575 .ac-type-icon[type=remotetab] {
2576 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2579 .ac-type-icon[type=switchtab][selected],
2580 .ac-type-icon[type=remotetab][selected] {
2581 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2584 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2585 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2591 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2592 border-top: 1px solid #9C9CFF;
2595 /* combined go/reload/stop button in location bar */
2601 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2602 /* margin: 0 9px; */
2603 margin-inline-start: 0px;
2604 border-inline-start: 1px solid var(--urlbar-separator-color);
2605 border-image: linear-gradient(transparent 15%,
2606 var(--urlbar-separator-color) 15%,
2607 var(--urlbar-separator-color) 85%,
2609 border-image-slice: 1;
2612 /* XXX: temporary for Photon preview changes */
2615 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2618 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2619 border-top-left-radius: 0px;
2620 border-bottom-left-radius: 0px;
2623 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2624 border-top-right-radius: 0px;
2625 border-bottom-right-radius: 0px;
2628 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2629 #reload-button:not(:hover) {
2630 border-inline-start-style: none;
2631 padding-inline-start: 3px;
2636 -moz-image-region: rect(0px, 14px, 14px, 0px);
2639 #reload-button[disabled=true],
2640 #reload-button[disabled=true] {
2641 -moz-image-region: rect(28px, 14px, 42px, 0px);
2644 #reload-button:not([disabled=true]):hover,
2645 #reload-button:not([disabled=true]):hover {
2646 -moz-image-region: rect(14px, 14px, 28px, 0px);
2649 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2650 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2651 transform: scaleX(-1);
2655 -moz-image-region: rect(0, 42px, 14px, 28px);
2658 #urlbar-go-button:hover {
2659 -moz-image-region: rect(14px, 42px, 28px, 28px);
2662 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2663 transform: scaleX(-1);
2668 -moz-image-region: rect(0px, 28px, 14px, 14px);
2672 #stop-button:hover {
2673 -moz-image-region: rect(14px, 28px, 28px, 14px);
2676 @media (min-resolution: 1.1dppx) {
2682 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2685 #reload-button > .toolbarbutton-icon,
2686 #stop-button > .toolbarbutton-icon,
2687 #urlbar-go-button > .toolbarbutton-icon,
2688 #reload-button > .toolbarbutton-icon,
2689 #stop-button > .toolbarbutton-icon {
2694 -moz-image-region: rect(0, 84px, 28px, 56px);
2697 #urlbar-go-button:hover {
2698 -moz-image-region: rect(28px, 84px, 56px, 56px);
2701 #urlbar-go-button:hover:active {
2702 -moz-image-region: rect(56px, 84px, 84px, 56px);
2707 -moz-image-region: rect(0, 28px, 28px, 0);
2710 #reload-button:not([disabled]):hover,
2711 #reload-button:not([disabled]):hover {
2712 -moz-image-region: rect(28px, 28px, 56px, 0);
2715 #reload-button:not([disabled]):hover:active,
2716 #reload-button:not([disabled]):hover:active {
2717 -moz-image-region: rect(56px, 28px, 84px, 0);
2722 -moz-image-region: rect(0, 56px, 28px, 28px);
2725 #stop-button:not([disabled]):hover,
2726 #stop-button:not([disabled]):hover {
2727 -moz-image-region: rect(28px, 56px, 56px, 28px);
2730 #stop-button:hover:active,
2731 #stop-button:hover:active {
2732 -moz-image-region: rect(56px, 56px, 84px, 28px);
2736 /* popup blocker button */
2738 #page-report-button {
2739 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2740 -moz-image-region: rect(0, 16px, 16px, 0);
2743 #page-report-button:hover ,
2744 #page-report-button:hover:active,
2745 #page-report-button[open="true"] {
2746 -moz-image-region: rect(0, 32px, 16px, 16px);
2749 /* Reader mode button */
2751 #reader-mode-button {
2752 list-style-image: url("chrome://browser/skin/readerMode.svg");
2753 -moz-image-region: rect(0, 16px, 16px, 0);
2756 #reader-mode-button:hover,
2757 #reader-mode-button[readeractive]:hover {
2758 -moz-image-region: rect(0, 32px, 16px, 16px);
2761 #reader-mode-button:hover:active,
2762 #reader-mode-button[readeractive] {
2763 -moz-image-region: rect(0, 48px, 16px, 32px);
2766 /* social share panel */
2768 /* === BEGIN social.inc.css === */
2770 #manage-share-providers {
2771 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2772 -moz-image-region: rect(0, 468px, 18px, 450px);
2775 #manage-share-providers > .toolbarbutton-icon {
2780 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2783 /* fixup corners for share panel */
2784 .social-panel > .social-panel-frame {
2785 border-radius: inherit;
2788 /* === END social.inc.css === */
2790 .social-panel-frame {
2791 border-radius: inherit;
2794 .social-share-frame {
2801 background-color: white;
2802 background-repeat: no-repeat;
2803 background-position: center center;
2805 #share-container[loading] {
2806 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2808 #share-container > browser {
2809 transition: opacity 150ms ease-in-out;
2812 #share-container[loading] > browser {
2816 .social-share-toolbar {
2817 border-bottom: 1px solid #9C9CFF;
2821 #social-share-provider-buttons {
2826 .share-provider-button {
2831 .share-provider-button > .toolbarbutton-text {
2834 .share-provider-button > .toolbarbutton-icon {
2840 #social-share-panel {
2846 .social-share-frame {
2847 border-top-left-radius: 0;
2848 border-bottom-left-radius: inherit;
2849 border-top-right-radius: 0;
2850 border-bottom-right-radius: inherit;
2853 #social-share-panel > .social-share-toolbar {
2854 border-top-left-radius: inherit;
2855 border-top-right-radius: inherit;
2858 #social-share-provider-buttons {
2859 border-top-left-radius: inherit;
2860 border-top-right-radius: inherit;
2863 /* bookmarks menu-button */
2865 #bookmarks-menu-button.bookmark-item {
2866 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2867 -moz-image-region: rect(0px 16px 16px 0px);
2870 #bookmarks-menu-button.bookmark-item[starred] {
2871 -moz-image-region: rect(0px 32px 16px 16px);
2874 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2876 padding-bottom: 2px;
2879 #BMB_bookmarksPopup[side="top"],
2880 #BMB_bookmarksPopup[side="bottom"] {
2882 margin-right: -20px;
2885 #BMB_bookmarksPopup[side="left"],
2886 #BMB_bookmarksPopup[side="right"] {
2888 margin-bottom: -20px;
2891 /* bookmarking panel */
2893 #editBookmarkPanelStarIcon {
2894 list-style-image: url("chrome://browser/skin/places/starred48.png");
2899 #editBookmarkPanelStarIcon[unstarred] {
2900 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2903 #editBookmarkPanelTitle {
2907 #editBookmarkPanelHeader,
2908 #editBookmarkPanelContent {
2909 margin-bottom: .5em;
2912 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2913 #editBMPanel_folderTree {
2917 /* ::::: content area ::::: */
2919 /* === BEGIN sidebar.inc.css === */
2922 --icon-fill: #FFCF00;
2923 --header-background-color: #9C9CFF;
2924 --header-background-color-hover: #FFCF00;
2925 --title-font-size: 13px;
2927 background-color: #9C9CFF;
2937 margin-inline-start: 0;
2940 #sidebar-splitter:-moz-locale-dir(ltr),
2941 #sidebar:-moz-locale-dir(ltr) {
2942 border-radius: 0 5px 0 0;
2945 #sidebar-splitter:-moz-locale-dir(rtl),
2946 #sidebar:-moz-locale-dir(rtl) {
2947 border-radius: 5px 0 0 0;
2950 #sidebar-throbber[loading="true"] {
2951 list-style-image: url("chrome://global/skin/icons/loading.png");
2954 @media (min-resolution: 2dppx) {
2955 .sidebar-throbber[loading="true"],
2956 #sidebar-throbber[loading="true"] {
2957 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2963 padding-inline-start: 0px;
2969 padding-inline-start: 8px;
2970 padding-inline-end: 4px;
2973 #sidebar-switcher-arrow,
2974 #sidebar-close > .toolbarbutton-icon {
2975 -moz-context-properties: fill;
2980 #sidebar-switcher-arrow {
2981 /* list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2982 list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2987 #sidebar-switcher-arrow:hover {
2988 list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
2991 #sidebar-header > .close-icon {
2992 /* padding: 4px 2px;
2995 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2998 #sidebar-header > .close-icon:hover,
2999 #sidebar-header > .close-icon:hover:active {
3000 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3004 -moz-appearance: none;
3005 list-style-image: url(chrome://browser/skin/sidebar/close.svg);
3011 #sidebar-switcher-target {
3012 -moz-appearance: none;
3014 margin-inline-end: 4px;
3016 border: 1px solid transparent;
3020 #sidebar-switcher-target:hover,
3021 #sidebar-close:hover {
3022 background: hsla(240, 5%, 5%, 0.05);
3025 #sidebar-switcher-target:hover {
3026 border-color: rgba(0, 0, 0, 0.2);
3029 #sidebar-close:hover:active,
3030 #sidebar-switcher-target:hover:active,
3031 #sidebar-switcher-target.active {
3032 background: hsla(240, 5%, 5%, 0.1);
3035 #sidebar-switcher-target:hover:active,
3036 #sidebar-switcher-target.active {
3037 border-color: rgba(0, 0, 0, 0.25);
3040 #sidebarMenu-popup .subviewbutton {
3044 #sidebar-extensions:empty + toolbarseparator {
3048 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
3049 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
3050 padding-inline-start: 16px;
3052 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
3053 padding-inline-start: 0;
3056 #sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3057 list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
3060 #sidebar-switcher-bookmarks > .toolbarbutton-icon,
3061 #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3062 /* list-style-image: url(chrome://browser/skin/bookmark.svg);
3063 -moz-context-properties: fill;
3066 list-style-image: url(chrome://browser/skin/places/bookmark.png);
3067 -moz-image-region: rect(0px 16px 16px 0px);
3070 #sidebar-switcher-history > .toolbarbutton-icon,
3071 #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3072 /* list-style-image: url(chrome://browser/skin/history.svg);
3073 -moz-context-properties: fill;
3076 list-style-image: url(chrome://browser/skin/places/history.png);
3079 #sidebar-switcher-tabs > .toolbarbutton-icon,
3080 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3081 list-style-image: url(chrome://browser/skin/synced-tabs.svg);
3082 -moz-context-properties: fill;
3087 /* === END sidebar.inc.css === */
3090 background-color: #000000;
3093 .browserContainer > findbar {
3095 background-color: -moz-dialog;
3096 color: -moz-DialogText;
3105 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
3108 #TabsToolbar .toolbar-holder {
3109 background-color: #000000; /* correct effect of being an actual toolbar */
3112 #main-window[disablechrome] #TabsToolbar,
3113 #TabsToolbar[tabsontop="false"] {
3114 border-bottom: 1px solid #008484;
3117 /* === BEGIN tabs.inc.css === */
3120 /* --tab-toolbar-navbar-overlap: 1px; */
3121 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
3122 /* --tab-min-height: 31px; */
3125 /* --tab-stroke-background-size: auto 100%; */
3129 .tabs-newtab-button,
3130 #TabsToolbar > #new-tab-button {
3135 padding: 1px 4px 2px;
3138 .tabbrowser-tab:first-of-type {
3139 margin-inline-start: 2px;
3142 .tabs-newtab-button,
3143 #TabsToolbar > #new-tab-button,
3144 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3145 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3146 border-radius: 8px 8px 0px 0px;
3147 margin-inline-start: 0;
3150 .tabs-newtab-button:not(:hover),
3151 #TabsToolbar > #new-tab-button:not(:hover),
3152 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3153 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3154 background-color: #C09070;
3157 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3158 .tabbrowser-tab[visuallyselected=true] {
3159 /* position: relative;
3163 .tab-background-middle {
3169 .tab-content[pinned] {
3174 .tab-sharing-icon-overlay,
3180 .tab-sharing-icon-overlay,
3184 margin-inline-end: 3px;
3188 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3191 .tab-icon-image[sharing]:not([selected]),
3192 .tab-sharing-icon-overlay {
3193 animation: 3s linear tab-sharing-icon-pulse infinite;
3196 @keyframes tab-sharing-icon-pulse {
3197 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3198 0%, 16.66%, 83.33%, 100% {
3206 .tab-icon-image[sharing]:not([selected]) {
3207 animation-delay: -1.5s;
3210 .tab-sharing-icon-overlay {
3211 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3212 margin-inline-start: -22px;
3214 -moz-context-properties: fill;
3218 .tab-sharing-icon-overlay[sharing="camera"] {
3219 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
3222 .tab-sharing-icon-overlay[sharing="microphone"] {
3223 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3226 .tab-sharing-icon-overlay[sharing="screen"] {
3227 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
3234 margin-inline-start: -15px;
3235 margin-inline-end: -1px;
3239 .tab-icon-overlay[crashed] {
3240 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
3243 .tab-icon-overlay[soundplaying],
3244 .tab-icon-overlay[muted]:not([crashed]),
3245 .tab-icon-overlay[blocked]:not([crashed]) {
3246 border-radius: 10px;
3249 .tab-icon-overlay[soundplaying]:hover,
3250 .tab-icon-overlay[muted]:hover,
3251 .tab-icon-overlay[blocked]:not([crashed]):hover {
3252 background-color: #FFCF00;
3255 .tab-icon-overlay[soundplaying] {
3256 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
3259 .tab-icon-overlay[muted]:not([crashed]) {
3260 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
3263 .tab-icon-overlay[blocked]:not([crashed]) {
3264 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
3267 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
3268 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
3269 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
3272 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
3273 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
3274 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
3277 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
3278 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
3279 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
3282 .tab-throbber[busy] {
3283 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
3286 .tab-throbber[progress] {
3287 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
3290 @media (min-resolution: 1.1dppx) {
3291 .tab-throbber[busy] {
3292 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
3295 .tab-throbber[progress] {
3296 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3300 .tab-throbber[pinned],
3301 .tab-icon-image[pinned] {
3302 margin-inline-start: 2px;
3303 margin-inline-end: 2px;
3307 /* this needs to add up to the 16px of the icon image */
3309 margin-top: 2px !important;
3310 margin-bottom: 2px !important;
3314 margin-inline-start: 4px;
3320 .tab-icon-sound[soundplaying],
3321 .tab-icon-sound[muted],
3322 .tab-icon-sound[blocked] {
3323 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
3324 -moz-context-properties: fill;
3328 .tab-icon-sound[muted] {
3329 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
3332 .tab-icon-sound[blocked] {
3333 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
3341 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3342 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3343 transition: opacity .3s linear var(--soundplaying-removal-delay);
3348 .tabs-newtab-button {
3349 /* overlap the tab curves */
3352 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3356 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3357 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3360 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3361 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3364 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3367 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3370 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3371 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3374 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3375 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3378 .tab-background-start[selected=true]::after,
3379 .tab-background-start[selected=true]::before,
3380 .tab-background-start,
3381 .tab-background-end,
3382 .tab-background-end[selected=true]::after,
3383 .tab-background-end[selected=true]::before {
3386 .tabbrowser-tab:not([visuallyselected=true]),
3387 .tabbrowser-tab:-moz-lwtheme {
3390 /* tabbrowser-tab focus ring */
3391 .tabbrowser-tab:focus {
3392 outline: 1px dotted;
3397 .tabbrowser-tab[visuallyselected="true"] {
3400 /* End selected tab */
3402 /* Tab pointer-events */
3405 pointer-events: none;
3408 .tab-background-middle,
3409 .tabs-newtab-button,
3410 .tab-icon-overlay[soundplaying],
3411 .tab-icon-overlay[muted]:not([crashed]),
3412 .tab-icon-overlay[blocked]:not([crashed]),
3415 pointer-events: auto;
3421 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3422 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3424 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3425 background-color: #E7ADE7;
3428 .tab-label[attention]:not([selected="true"]) {
3432 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3433 background-color: #3333FF;
3437 /* Tab separators */
3439 .tabbrowser-tab::after,
3440 .tabbrowser-tab::before {
3442 margin-inline-start: -1px;
3443 background-image: linear-gradient(transparent 5px,
3445 currentColor calc(100% - 4px),
3446 transparent calc(100% - 4px));
3450 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3451 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3455 /* Also show separators beside the selected tab when dragging it. */
3457 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3458 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3459 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3464 /* New tab button */
3466 .tabs-newtab-button {
3468 /* width: calc(36px + var(--tab-curve-width)); */
3471 .tabs-newtab-button > .toolbarbutton-menu-dropmarker {
3475 .tabs-newtab-button > .toolbarbutton-icon {
3476 /* override drop marker image padding */
3477 margin-inline-end: 0;
3480 @media (min-resolution: 1.1dppx) {
3481 /* image preloading hack from like lowdpi styles */
3482 #tabbrowser-tabs::before {
3485 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3486 .tabs-newtab-button:hover {
3489 .tab-background-middle[selected=true] {
3492 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3493 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3496 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3497 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3501 /* All tabs menupopup */
3503 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3504 background-color: #402800;
3507 .alltabs-endimage[soundplaying],
3508 .alltabs-endimage[muted],
3509 .alltabs-endimage[blocked] {
3510 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
3511 -moz-context-properties: fill;
3515 .alltabs-endimage[muted] {
3516 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
3519 .alltabs-endimage[blocked] {
3520 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
3523 /* === END tabs.inc.css === */
3525 /* Tab DnD indicator */
3526 .tab-drop-indicator {
3527 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3528 margin-bottom: -11px;
3531 /* Tab close button */
3533 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3534 -moz-image-region: auto !important;
3537 .tab-close-button:hover,
3538 .tab-close-button:hover[selected="true"] {
3539 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3540 -moz-image-region: auto !important;
3543 .tab-close-button:hover:active,
3544 .tab-close-button:hover:active[selected="true"] {
3545 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3546 -moz-image-region: auto !important;
3549 .tab-close-button > .button-icon,
3550 .tab-close-button > .button-box > .button-icon,
3551 .tab-close-button > .toolbarbutton-icon {
3552 width: auto !important;
3556 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3558 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3559 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3563 background-origin: border-box;
3566 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3567 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3568 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3569 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3572 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3573 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3576 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3577 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3578 /* transform: scaleX(-1);*/
3581 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3582 transition: 1s background-color ease-out;
3585 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3586 background-color: #008484;
3589 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3590 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3591 /* border-width: 0 2px 0 0;
3592 border-style: solid;
3593 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3596 .tabs-newtab-button > .toolbarbutton-icon {
3598 margin-bottom: -1px;
3601 .tabs-newtab-button,
3602 #TabsToolbar > #new-tab-button,
3603 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3604 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3605 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3606 -moz-image-region: auto;
3609 .tabs-newtab-button,
3610 .tabs-newtab-button:hover,
3611 #TabsToolbar > #new-tab-button,
3612 #TabsToolbar > #new-tab-button:hover {
3615 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3616 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3617 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3618 .tabs-newtab-button:-moz-lwtheme-brighttext,
3619 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3620 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3623 #TabsToolbar > #new-tab-button {
3625 -moz-box-orient: horizontal;
3629 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3632 #alltabs-button:hover,
3633 #alltabs-button:hover:active,
3634 #alltabs-button[open="true"] {
3635 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3638 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3639 #alltabs-button:-moz-lwtheme-brighttext {
3642 #alltabs-button > .toolbarbutton-icon {
3646 #alltabs-button > .toolbarbutton-menu-dropmarker {
3650 /* All tabs menupopup */
3651 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3652 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3653 -moz-image-region: auto;
3656 .alltabs-item[selected="true"] {
3660 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3661 list-style-image: url("chrome://global/skin/icons/loading.png");
3664 @media (min-resolution: 1.1dppx) {
3665 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3666 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3670 toolbarbutton.chevron {
3671 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3674 toolbarbutton.chevron:hover {
3675 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3678 toolbar[brighttext] toolbarbutton.chevron {
3679 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3682 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3683 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3684 transform: scaleX(-1);
3687 toolbarbutton.chevron > .toolbarbutton-text,
3688 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3692 toolbarbutton.chevron > .toolbarbutton-icon {
3696 #sidebar-throbber[loading="true"] {
3697 list-style-image: url("chrome://global/skin/icons/loading.png");
3698 margin-inline-end: 4px;
3701 @media (min-resolution: 1.1dppx) {
3702 #sidebar-throbber[loading="true"] {
3703 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3708 /* Bookmarks toolbar */
3709 #PlacesToolbarDropIndicator {
3710 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3713 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3714 background-color: #008484 !important;
3715 color: #FFCF00 !important;
3718 /* rules for menupopup drop indicators */
3719 .menupopup-drop-indicator-bar {
3721 /* these two margins must together compensate the indicator's height */
3723 margin-bottom: -1px;
3726 .menupopup-drop-indicator {
3727 list-style-image: none;
3729 margin-inline-end: -4em;
3730 background-color: #008484;
3733 /* === BEGIN notification-icons.inc.css === */
3735 .popup-notification-icon,
3736 .identity-popup-permission-icon {
3737 -moz-context-properties: fill;
3741 #notification-popup-box {
3742 border-radius: 3px 0 0 3px;
3745 margin-inline-end: -5px;
3746 padding-inline-end: 5px;
3749 /* This class can be used alone or in combination with the class defining the
3750 type of icon displayed. This rule must be defined before the others in order
3751 for its list-style-image to be overridden. */
3752 .notification-anchor-icon {
3753 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3756 .notification-anchor-icon:-moz-focusring {
3757 outline: 1px dotted #008484;
3760 @media (min-resolution: 1.1dppx) {
3761 .notification-anchor-icon {
3762 list-style-image: url(chrome://global/skin/icons/info.svg);
3766 /* INDIVIDUAL NOTIFICATIONS */
3768 .focus-tab-by-prompt-icon {
3769 list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
3772 .popup-notification-icon[popupid="persistent-storage"],
3773 .persistent-storage-icon {
3774 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
3777 .persistent-storage-icon.blocked-permission-icon {
3778 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
3781 .popup-notification-icon[popupid="web-notifications"],
3782 .desktop-notification-icon {
3783 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3786 .desktop-notification-icon.blocked-permission-icon {
3787 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3791 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3794 .geo-icon.blocked-permission-icon {
3795 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3798 .popup-notification-icon[popupid="geolocation"] {
3799 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3802 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3804 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3807 .indexedDB-icon.blocked-permission-icon {
3808 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3812 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3815 .popup-notification-icon[popupid="password"] {
3816 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3820 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3823 .camera-icon.in-use {
3824 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3827 .camera-icon.blocked-permission-icon {
3828 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3832 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3835 .microphone-icon.in-use {
3836 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3839 .microphone-icon.blocked-permission-icon {
3840 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3843 .popup-notification-icon.microphone-icon {
3844 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3848 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3851 .screen-icon.in-use {
3852 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3855 .screen-icon.blocked-permission-icon {
3856 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3859 #webRTC-preview:not([hidden]) {
3860 display: -moz-stack;
3862 border: 1px solid #A09090;
3868 html|*#webRTC-previewVideo {
3870 /* If we don't set the min-width, width is ignored. */
3875 #webRTC-previewWarning {
3876 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3879 padding-inline-start: calc(1.5em + 16px);
3880 border-top: 1px solid #A09090;
3883 #webRTC-previewWarning > .text-link {
3884 margin-inline-start: 0;
3887 /* This icon has a block sign in it, so we don't need a blocked version. */
3889 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3894 .popup-notification-icon[popupid="drmContentPlaying"],
3896 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3899 .drm-icon:hover:active {
3900 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3903 #eme-notification-icon[firstplay=true] {
3904 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3907 @keyframes emeTeachingMoment {
3908 0% {transform: translateX(0); }
3909 25% {transform: translateX(3px) }
3910 75% {transform: translateX(-3px) }
3911 100% { transform: translateX(0); }
3914 /* INSTALL ADDONS */
3917 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3920 .popup-notification-icon[popupid="xpinstall-disabled"],
3921 .popup-notification-icon[popupid="addon-install-blocked"],
3922 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3923 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3926 .popup-notification-icon[popupid="addon-progress"] {
3927 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3930 .popup-notification-icon[popupid="addon-install-failed"] {
3931 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3934 .popup-notification-icon[popupid="addon-install-confirmation"] {
3935 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3938 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3939 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3942 .popup-notification-icon[popupid="addon-install-complete"] {
3943 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3946 .popup-notification-icon[popupid="addon-install-restart"] {
3947 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3950 .popup-notification-icon[popupid="click-to-play-plugins"] {
3951 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3956 .popup-notification-icon[popupid*="offline-app-requested"],
3957 .popup-notification-icon[popupid="offline-app-usage"] {
3958 list-style-image: url(chrome://global/skin/icons/question-64.png);
3964 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3967 .plugin-icon.plugin-blocked {
3968 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3969 fill: #FF0000 !important;
3972 #notification-popup-box[hidden] {
3973 /* Override display:none to make the pluginBlockedNotification animation work
3974 when showing the notification repeatedly. */
3976 visibility: collapse;
3979 #plugins-notification-icon.plugin-blocked[showing] {
3980 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3983 @keyframes pluginBlockedNotification {
3994 .popup-notification-icon[popupid="servicesInstall"] {
3995 list-style-image: url(chrome://browser/skin/social/services-64.png);
3999 list-style-image: url(chrome://browser/skin/social/services-16.png);
4005 list-style-image: url(chrome://browser/skin/translation-16.png);
4006 -moz-image-region: rect(0px, 16px, 16px, 0px);
4009 .translation-icon.in-use {
4010 -moz-image-region: rect(0px, 32px, 16px, 16px);
4015 .popup-notification-icon[popupid="update-available"],
4016 .popup-notification-icon[popupid="update-manual"],
4017 .popup-notification-icon[popupid="update-restart"] {
4018 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
4022 /* === END notification-icons.inc.css === */
4024 .popup-notification-body[popupid="addon-progress"],
4025 .popup-notification-body[popupid="addon-install-confirmation"] {
4030 .addon-install-confirmation-name {
4034 html|*.addon-webext-perm-list {
4035 margin-block-end: 0;
4036 padding-inline-start: 10px;
4039 .addon-webext-perm-text {
4040 margin-inline-start: 0;
4043 .popup-notification-description[popupid="addon-webext-permissions"],
4044 .popup-notification-description[popupid="addon-installed"] {
4048 .addon-webext-perm-notification-content,
4049 .addon-installed-notification-content {
4053 #addon-webext-perm-header {
4054 /* Align the text more closely with the icon by clearing some top line height. */
4056 margin-inline-start: 0;
4059 #addon-installed-notification-header {
4060 /* Align the text more closely with the icon by clearing some top line height. */
4064 .addon-webext-name {
4071 .addon-toolbar-icon {
4074 vertical-align: bottom;
4079 list-style-image: url("chrome://browser/skin/menuPanel.svg");
4080 -moz-image-region: rect(0px, 288px, 32px, 256px);
4083 .addon-toolbar-icon {
4084 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4085 -moz-image-region: rect(0, 486px, 18px, 468px);
4088 /* Notification icon box */
4090 .notification-anchor-icon:-moz-focusring {
4091 /* outline: 1px dotted -moz-DialogText;*/
4094 /* Translation infobar */
4096 /* === BEGIN infobar.inc.css === */
4098 notification[value="translation"] .messageImage {
4099 list-style-image: url("chrome://browser/skin/translation-16.png");
4100 -moz-image-region: rect(0, 32px, 16px, 16px);
4103 @media (min-resolution: 1.25dppx) {
4104 notification[value="translation"] .messageImage {
4105 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4106 -moz-image-region: rect(0, 64px, 32px, 32px);
4110 notification[value="translation"][state="translating"] .messageImage {
4111 list-style-image: url("chrome://browser/skin/translating-16.png");
4112 -moz-image-region: auto;
4115 @media (min-resolution: 1.25dppx) {
4116 notification[value="translation"][state="translating"] .messageImage {
4117 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4121 notification[value="translation"] hbox[anonid="details"] {
4125 notification[value="translation"] button,
4126 notification[value="translation"] menulist {
4130 notification[value="translation"] menulist > .menulist-dropmarker {
4133 .translation-menupopup arrowscrollbox {
4137 .translation-attribution {
4139 -moz-box-align: end;
4143 .translation-attribution > label {
4147 .translation-attribution > image {
4151 .translation-welcome-panel {
4155 .translation-welcome-logo {
4158 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4159 -moz-image-region: rect(0, 64px, 32px, 32px);
4162 .translation-welcome-content {
4163 margin-inline-start: 16px;
4166 .translation-welcome-headline {
4171 .translation-welcome-body {
4176 /* === END infobar.inc.css === */
4178 notification[value="translation"] {
4182 .translation-menupopup {
4183 -moz-appearance: none;
4186 /* Bookmarks roots menu-items */
4187 #subscribeToPageMenuitem:not([disabled]),
4188 #subscribeToPageMenupopup {
4189 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4192 #bookmarksToolbarFolderMenu,
4193 #BMB_bookmarksToolbar,
4194 #panelMenu_bookmarksToolbar {
4195 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4196 -moz-image-region: auto;
4199 #BMB_unsortedBookmarks,
4200 #panelMenu_unsortedBookmarks {
4201 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4202 -moz-image-region: auto;
4207 .statuspanel-label {
4210 background: #404000;
4211 border: 1px none #9C9CFF;
4212 border-top-style: solid;
4217 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4218 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4219 border-right-style: solid;
4220 border-top-right-radius: .3em;
4224 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4225 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4226 border-left-style: solid;
4227 border-top-left-radius: .3em;
4231 /* HACK to abolish devily color on main content */
4234 background-color: transparent !important;
4237 /* === BEGIN fullscreen/warning.inc.css === */
4239 html|*.pointerlockfswarning {
4240 align-items: center;
4241 background: rgba(0, 0, 0, 0.9);
4242 border: 2px solid #A09090;
4243 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4246 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4249 html|*.pointerlockfswarning::before {
4251 width: 24px; height: 24px;
4254 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4255 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4256 content: url("chrome://browser/skin/fullscreen/secure.svg");
4259 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4260 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4262 html|*.pointerlockfswarning-domain-text,
4263 html|*.pointerlockfswarning-generic-text {
4265 font-weight: lighter;
4270 html|*.pointerlockfswarning-domain {
4275 html|*#fullscreen-exit-button,
4276 html|*.pointerlockfswarning-exit-button {
4279 border-radius: 300px;
4281 background-color: #C09070;
4285 /* === END fullscreen/warning.inc.css === */
4287 /* === BEGIN ctrlTab.inc.css === */
4292 -moz-appearance: none;
4293 background: rgba(0%,0%,0%,.7);
4296 padding: 20px 10px 10px;
4300 .ctrlTab-favicon[src] {
4301 background-color: #000000;
4307 .ctrlTab-preview-inner > .tabPreview-canvas {
4308 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4311 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4315 .ctrlTab-preview-inner {
4317 border: 2px solid transparent;
4318 border-radius: .5em;
4321 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4322 margin: -10px -10px 0;
4325 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4326 background-color: #000000;
4329 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4331 background-color: #000000;
4333 border-color: #9C9CFF;
4340 /* === END ctrlTab.inc.css === */
4342 /* === including indicator.css is done at the start of the file === */
4346 #developer-toolbar-toolbox-button[error-count]:before {
4350 background-color: #FF0000;
4352 margin-inline-end: 5px;
4355 /* === BEGIN plugin-doorhanger.inc.css === */
4358 * Plugin Doorhanger Styles
4361 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4362 padding: 6px 1px 2px;
4365 .click-to-play-plugins-notification-center-box {
4368 .plugin-popupnotification-centeritem:nth-child(odd) {
4369 /* background-color: rgba(0,0,0,0.1);*/
4372 .center-item-label {
4374 text-overflow: ellipsis;
4377 .center-item-warning-icon {
4378 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4379 background-repeat: no-repeat;
4382 margin-inline-start: 6px;
4385 .click-to-play-plugins-notification-button-container {
4388 .click-to-play-popup-button {
4392 .click-to-play-plugins-notification-description-box {
4396 padding-bottom: 3px;
4399 .click-to-play-plugins-outer-description {
4403 .click-to-play-plugins-notification-link,
4408 .messageImage[value="plugin-hidden"] {
4409 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4412 /* Keep any changes to this style in sync with pluginProblem.css */
4413 notification.pluginVulnerable {
4416 notification.pluginVulnerable .messageImage {
4417 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4420 /* === END plugin-doorhanger.inc.css === */
4422 /* === BEGIN customizeMode.inc.css === */
4424 /* Customization mode */
4427 --drag-drop-transition-duration: .3s;
4430 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4431 background-repeat: no-repeat;
4432 background-position: right top;
4433 background-attachment: fixed;
4434 background-color: transparent;
4435 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4436 var(--toolbox-rect-height), 0),
4437 linear-gradient(to bottom,
4438 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4439 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4440 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4441 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4442 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4443 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4446 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4450 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4451 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4452 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4457 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4458 pointer-events: none;
4461 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4462 #PanelUI-contents > .panel-customization-placeholder {
4463 -moz-outline-radius: 2.5px;
4464 outline: 1px dashed transparent;
4467 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4468 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4469 -moz-box-ordinal-group: 0;
4474 outline-offset: -2px;
4475 pointer-events: none;
4481 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4482 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4483 offset from the bottom effectively the same as other targets (-2px). */
4484 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4488 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4489 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4490 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4491 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4495 /* Most target outlines are shown on hover and drag over but the panel menu uses
4496 placeholders instead. */
4497 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4498 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4499 /* nav-bar and panel outlines are always shown */
4500 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4501 outline-color: currentColor;
4504 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4505 transition: outline-color 250ms linear;
4508 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4509 transition: outline-color 250ms linear;
4510 outline-color: var(--panel-separator-color);
4513 #PanelUI-contents > .panel-customization-placeholder {
4515 outline-offset: -5px;
4518 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4520 /* padding-left: 10px;
4521 padding-right: 10px;*/
4524 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4528 #customization-container {
4529 background-color: #000000;
4533 #customization-palette,
4534 #customization-empty {
4535 padding: 0 15px 15px;
4538 #customization-header {
4540 line-height: 1.75em;
4543 margin: 25px 25px 12px;
4544 padding-bottom: 12px;
4545 border-bottom: 1px solid #A09090;
4548 #customization-panel-container {
4549 padding: 10px 10px 0px;
4552 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4553 #customization-footer {
4554 /*background-color: rgb(236,236,236);*/
4557 #customization-footer {
4558 border-top: 1px solid #9C9CFF;
4562 .customizationmode-button {
4566 .customizationmode-checkbox {
4569 #customization-reset-button,
4570 #customization-undo-reset-button,
4571 #customization-done-button {
4574 #customization-done-button {
4577 .customizationmode-button > .box-inherit {
4580 /* We use a smaller padding to ensure images don't have padding.
4581 * We can't detect whether a button has an image. This button doesn't
4582 * so it needs more padding, so we unfortunately hardcode the extra
4585 #customization-toolbar-visibility-button {
4588 .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
4591 .customizationmode-button > .button-icon {
4594 .customizationmode-button:not([type=menu]) > .button-text {
4597 .customizationmode-button > .box-inherit > .button-menu-dropmarker {
4600 .customizationmode-button[checked] {
4601 background-color: #008484;
4604 .customizationmode-button[checked]:hover:not([disabled]),
4605 .customizationmode-button:hover:not([disabled]) {
4606 background-color: #FFCF00;
4609 .customizationmode-button[checked]:hover:active:not([disabled]),
4610 .customizationmode-button:hover:active:not([disabled]),
4611 .customizationmode-button[open] {
4612 background-color: #FF9F00;
4615 .customizationmode-button[disabled="true"] {
4618 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4619 .customizationmode-button > .button-box > .button-icon {
4623 #customization-titlebar-visibility-button {
4624 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4625 -moz-image-region: rect(0, 16px, 16px, 0);
4628 #customization-titlebar-visibility-button:hover {
4629 -moz-image-region: rect(16px, 16px, 32px, 0);
4632 #customization-titlebar-visibility-button > .button-box {
4634 padding-bottom: 1px;
4637 #customization-titlebar-visibility-button:hover:active > .button-box {
4642 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4643 #customization-titlebar-visibility-button > .button-box > .button-text {
4644 /* Sadly, button.css thinks its margins are perfect for everyone. */
4645 margin-inline-start: 5px !important;
4648 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4652 background-image: url("chrome://browser/content/default-theme-icon.svg");
4653 background-size: contain;
4656 #customization-titlebar-visibility-button > .button-box > .button-icon {
4657 vertical-align: middle;
4660 #customization-titlebar-visibility-button[checked] {
4661 -moz-image-region: rect(0, 32px, 16px, 16px);
4662 background-color: #008484;
4665 #customization-titlebar-visibility-button[checked]:hover {
4666 -moz-image-region: rect(16px, 32px, 32px, 16px);
4667 background-color: #FFCF00;
4670 #customization-titlebar-visibility-button[checked]:hover:active {
4671 background-color: #FF9F00;
4674 @media (min-resolution: 1.1dppx) {
4675 #customization-titlebar-visibility-button {
4676 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4677 -moz-image-region: rect(0, 48px, 48px, 0);
4680 #customization-titlebar-visibility-button:hover {
4681 -moz-image-region: rect(48px, 48px, 96px, 0);
4684 #customization-titlebar-visibility-button[checked] {
4685 -moz-image-region: rect(0, 96px, 48px, 48px);
4688 #customization-titlebar-visibility-button[checked]:hover {
4689 -moz-image-region: rect(48px, 96px, 96px, 48px);
4693 #main-window[customize-entered] #customization-panel-container {
4694 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4695 background-position: left top;
4696 background-repeat: repeat;
4697 background-size: auto;
4698 background-attachment: fixed;
4701 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4702 toolbarpaletteitem[place="toolbar"] {
4703 transition: border-width 250ms ease-in-out;
4706 toolbarpaletteitem[mousedown] {
4707 outline: 1px solid #008484;
4708 cursor: -moz-grabbing;
4712 .panel-customization-placeholder,
4713 toolbarpaletteitem[place="palette"],
4714 toolbarpaletteitem[place="panel"] {
4715 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4718 #customization-palette {
4719 transition: opacity .3s ease-in-out;
4723 #customization-palette[showing="true"] {
4727 toolbarpaletteitem toolbarbutton[disabled] {
4728 /* color: inherit !important;*/
4731 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4732 toolbarpaletteitem[notransition].panel-customization-placeholder,
4733 toolbarpaletteitem[notransition][place="toolbar"],
4734 toolbarpaletteitem[notransition][place="palette"],
4735 toolbarpaletteitem[notransition][place="panel"] {
4739 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4740 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4741 toolbarpaletteitem > toolbaritem.panel-wide-item,
4742 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4743 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4746 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4747 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4748 transform: scale(1.3);
4751 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4752 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4753 transform: scale(1.1);
4756 /* Override the toolkit styling for items being dragged over. */
4757 toolbarpaletteitem[place="toolbar"] {
4758 border-left-width: 0;
4759 border-right-width: 0;
4764 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4765 border-top: 0px solid transparent;
4766 border-bottom: 0px solid transparent;
4769 #customization-palette:not([hidden]) {
4770 margin-bottom: 25px;
4773 toolbarpaletteitem[place="palette"]:-moz-focusring,
4774 toolbarpaletteitem[place="panel"]:-moz-focusring,
4775 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4779 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4780 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4781 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4782 /* Delay adding the focusring back until after the transform transition completes. */
4783 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4784 outline: 1px dotted;
4785 -moz-outline-radius: 2.5px;
4788 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4789 outline-offset: -5px;
4792 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4793 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4794 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4795 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4799 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4800 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4810 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4811 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4815 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4816 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4819 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4820 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4824 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4825 -moz-box-pack: center;
4829 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4830 margin-inline-end: 5px;
4833 #customization-palette > toolbarpaletteitem > label {
4839 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4840 -moz-box-orient: vertical;
4841 /* Make the panel padding uniform across all platforms due to the
4842 styling of the section headers and footer. */
4846 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4851 .customization-lwtheme-menu-theme {
4852 -moz-appearance: none;
4855 padding-inline-end: 5px;
4857 padding-inline-start: 0;
4860 .customization-lwtheme-menu-theme[defaulttheme] {
4861 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4864 .customization-lwtheme-menu-theme[active="true"] {
4865 background-color: #008484;
4868 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4872 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4876 #customization-lwtheme-menu-header,
4877 #customization-lwtheme-menu-recommended {
4882 #customization-lwtheme-menu-header,
4883 #customization-lwtheme-menu-recommended,
4884 #customization-lwtheme-menu-footer {
4885 background-color: #A09090;
4887 margin-right: -10px;
4891 #customization-lwtheme-menu-header {
4893 border-top-right-radius: 3px;
4894 border-top-left-radius: 3px;
4897 #customization-lwtheme-menu-recommended {
4900 #customization-lwtheme-menu-footer {
4901 margin-bottom: -10px;
4902 border-bottom-right-radius: 3px;
4903 border-bottom-left-radius: 3px;
4906 .customization-lwtheme-menu-footeritem {
4907 -moz-appearance: none;
4909 background-color: #C09070;
4911 border: 1px solid transparent;
4917 .customization-lwtheme-menu-footeritem:hover {
4918 background-color: #FFCF00;
4921 .customization-lwtheme-menu-footeritem:first-child {
4924 /* === END customizeMode.inc.css === */
4926 /* === BEGIN customizeTip.inc.css === */
4928 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4935 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4936 border: 1px solid #9C9CFF;
4940 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4941 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4944 .customization-tipPanel-infoBox {
4945 margin: 20px 25px 25px;
4947 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4948 background-repeat: no-repeat;
4951 .customization-tipPanel-content {
4957 .customization-tipPanel-em {
4962 .customization-tipPanel-contentImage {
4964 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4972 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4973 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4976 .customization-tipPanel-link {
4977 -moz-appearance: none;
4978 background: transparent;
4986 .customization-tipPanel-link > .button-box > .button-text {
4987 margin: 0 !important;
4990 .customization-tipPanel-closeBox > .close-icon {
4991 -moz-appearance: none;
4993 margin-inline-end: -25px;
4996 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4997 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4998 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5001 /* === END customizeTip.inc.css === */
5004 * This next rule is a hack to disable subpixel anti-aliasing on all
5005 * labels during the customize mode transition. Subpixel anti-aliasing
5006 * on Windows with Direct2D layers acceleration is particularly slow to
5007 * paint, so this hack is how we sidestep that performance bottleneck.
5009 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5010 transform: perspective(0.01px);
5013 #main-window[customize-entered] > #tab-view-deck {
5014 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5015 background-attachment: fixed;
5018 #main-window[customization-lwtheme]:-moz-lwtheme {
5019 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5020 background-repeat: repeat;
5021 background-attachment: fixed;
5022 background-position: left top;
5025 #main-window[customize-entered] #browser-bottombox,
5026 #main-window[customize-entered] #customization-container {
5027 border-left: 1px solid #9C9CFF;
5028 border-right: 1px solid #9C9CFF;
5029 background-clip: padding-box;
5032 #main-window[customize-entered] #browser-bottombox {
5033 border-bottom: 1px solid #9C9CFF;
5036 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5040 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5044 /* End customization mode */
5046 /* Private browsing indicators */
5049 * Currently, we have two places where we put private browsing indicators on
5050 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5051 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5052 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5053 * want the bottom border of the image to line up with the bottom of the window
5054 * caption buttons. That's why there's so much special-casing going on in here.
5056 .private-browsing-indicator {
5058 pointer-events: none;
5061 #private-browsing-indicator-titlebar {
5066 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5070 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5074 #TabsToolbar > .private-browsing-indicator {
5075 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5076 margin-inline-start: 4px;
5080 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5081 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5082 * min/max/close window buttons.
5084 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5085 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5086 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5087 margin-inline-end: 4px;
5093 /* This one is for Linux */
5094 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5095 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5099 /* End private browsing indicators */
5101 /* === BEGIN UITour.inc.css === */
5105 #UITourHighlightContainer {
5106 -moz-appearance: none;
5108 background-color: transparent;
5109 /* This is a buffer to compensate for the movement in the "wobble" effect,
5110 and for the box-shadow of #UITourHighlight. */
5115 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5116 border-radius: 40px;
5117 border: 1px solid #9C9CFF;
5118 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5119 on Linux without an X compositor where opacity is either 0 or 1. */
5120 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5125 #UITourTooltipBody {
5126 -moz-box-align: start;
5129 #UITourTooltipTitleContainer {
5130 -moz-box-align: start;
5131 margin-bottom: 10px;
5134 #UITourTooltipIcon {
5137 margin-inline-end: 10px;
5140 #UITourTooltipTitle,
5141 #UITourTooltipDescription {
5145 #UITourTooltipTitle {
5151 #UITourTooltipDescription {
5152 margin-inline-start: 0;
5153 margin-inline-end: 0;
5155 line-height: 1.8rem;
5156 margin-bottom: 0; /* Override global.css */
5159 #UITourTooltipClose {
5161 -moz-appearance: none;
5163 background-color: transparent;
5165 margin-inline-start: 4px;
5169 #UITourTooltipClose > .toolbarbutton-text {
5173 #UITourTooltipButtons {
5175 background-color: rgba(0,0,0,.2);
5176 border-top: 1px solid rgba(0,0,0,.4);
5177 margin: 10px -16px -16px;
5181 #UITourTooltipButtons > label,
5182 #UITourTooltipButtons > button {
5186 #UITourTooltipButtons > label:first-child,
5187 #UITourTooltipButtons > button:first-child {
5188 margin-inline-start: 0;
5191 #UITourTooltipButtons > label:last-child,
5192 #UITourTooltipButtons > button:last-child {
5193 margin-inline-end: 0;
5196 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5199 margin-inline-end: 5px;
5202 #UITourTooltipButtons > label,
5203 #UITourTooltipButtons > button .button-text {
5207 #UITourTooltipButtons > button:not(.button-link) {
5208 -moz-appearance: none;
5209 background-color: #C09070;
5210 border-radius: 3000px;
5214 transition-property: background-color, color;
5215 transition-duration: 150ms;
5218 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5219 background-color: #FFCF00;
5223 #UITourTooltipButtons > label,
5224 #UITourTooltipButtons > button.button-link {
5225 -moz-appearance: none;
5226 background: transparent;
5229 color: rgba(0,0,0,0.35);
5231 padding-right: 10px;
5234 #UITourTooltipButtons > button.button-link:hover {
5238 /* The primary button gets the same color as the customize button. */
5239 #UITourTooltipButtons > button.button-primary {
5240 background-color: #A06060; /* LCARS default button background color */
5243 padding-right: 30px;
5246 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5247 background-color: #FFCF00;
5251 /* === END UITour.inc.css === */
5253 #UITourTooltipButtons {
5255 * Override the --arrowpanel-padding so the background extends
5256 * to the sides and bottom of the panel.
5259 margin-right: -10px;
5260 margin-bottom: -10px;
5263 /* === BEGIN contextmenu.inc.css === */
5265 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5268 #context-navigation > .menuitem-iconic {
5270 -moz-box-pack: center;
5271 -moz-box-align: center;
5274 #context-navigation > .menuitem-iconic[disabled="true"] {
5275 background-color: transparent;
5278 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5279 -moz-appearance: none;
5282 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5286 filter: url(chrome://global/skin/filters.svg#fill);
5291 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5295 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5299 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5303 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5306 #context-bookmarkpage {
5307 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5310 #context-bookmarkpage[starred=true] {
5311 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5314 #context-back:-moz-locale-dir(rtl),
5315 #context-forward:-moz-locale-dir(rtl),
5316 #context-reload:-moz-locale-dir(rtl) {
5317 transform: scaleX(-1);
5320 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5321 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5327 #context-media-eme-learnmore {
5328 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5331 #context-media-eme-learnmore {
5332 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5335 /* === END contextmenu.inc.css === */
5337 /* Make context menu items larger when opened through touch. */
5338 #contentAreaContextMenu[touchmode] menu,
5339 #contentAreaContextMenu[touchmode] menuitem {
5341 padding-bottom: 12px;
5344 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5346 padding-bottom: 7px;
5349 #context-navigation {
5352 #context-sep-navigation {
5353 /* margin-top: -4px; */
5356 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5361 .webextension-popup-browser {
5362 border-radius: inherit;
5365 .contentSelectDropdown-ingroup > .menu-iconic-text {
5366 padding-inline-start: 20px;
5369 #ContentSelectDropdown > menupopup {
5370 background-color: #000000;
5371 -moz-border-top-colors: #A09090;
5372 -moz-border-right-colors: #A09090;
5373 -moz-border-bottom-colors: #A09090;
5374 -moz-border-left-colors: #A09090;
5377 #ContentSelectDropdown > menupopup > menucaption,
5378 #ContentSelectDropdown > menupopup > menuitem {
5381 /* font: -moz-list;*/
5384 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5385 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5386 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5387 with 4px being the preferred padding size. */
5388 padding-top: .3333em;
5389 padding-bottom: .3333em;
5392 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5396 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5398 background-color: unset;
5401 #ContentSelectDropdown > menupopup > menucaption {
5402 background-color: buttonface;
5405 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5409 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5410 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5411 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5412 font-size with 11px being the preferred padding size. */
5413 padding-top: .9167em;
5414 padding-bottom: .9167em;