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-badge {
3968 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-badge);
3970 transition: opacity 1.5s;
3973 #plugins-notification-icon[extraAttr="inactive"] > .plugin-icon {
3977 #plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
3981 #plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
3982 animation: blink-badge 1000ms ease 0s 5 alternate both;
3985 @keyframes blink-badge {
3994 .plugin-icon.plugin-blocked {
3995 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3996 fill: #FF0000 !important;
3999 #notification-popup-box[hidden] {
4000 /* Override display:none to make the pluginBlockedNotification animation work
4001 when showing the notification repeatedly. */
4003 visibility: collapse;
4006 #plugins-notification-icon.plugin-blocked[showing] {
4007 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
4010 @keyframes pluginBlockedNotification {
4021 .popup-notification-icon[popupid="servicesInstall"] {
4022 list-style-image: url(chrome://browser/skin/social/services-64.png);
4026 list-style-image: url(chrome://browser/skin/social/services-16.png);
4032 list-style-image: url(chrome://browser/skin/translation-16.png);
4033 -moz-image-region: rect(0px, 16px, 16px, 0px);
4036 .translation-icon.in-use {
4037 -moz-image-region: rect(0px, 32px, 16px, 16px);
4042 .popup-notification-icon[popupid="update-available"],
4043 .popup-notification-icon[popupid="update-manual"],
4044 .popup-notification-icon[popupid="update-restart"] {
4045 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
4049 /* === END notification-icons.inc.css === */
4051 .popup-notification-body[popupid="addon-progress"],
4052 .popup-notification-body[popupid="addon-install-confirmation"] {
4057 .addon-install-confirmation-name {
4061 html|*.addon-webext-perm-list {
4062 margin-block-end: 0;
4063 padding-inline-start: 10px;
4066 .addon-webext-perm-text {
4067 margin-inline-start: 0;
4070 .popup-notification-description[popupid="addon-webext-permissions"],
4071 .popup-notification-description[popupid="addon-installed"] {
4075 .addon-webext-perm-notification-content,
4076 .addon-installed-notification-content {
4080 #addon-webext-perm-header {
4081 /* Align the text more closely with the icon by clearing some top line height. */
4083 margin-inline-start: 0;
4086 #addon-installed-notification-header {
4087 /* Align the text more closely with the icon by clearing some top line height. */
4091 .addon-webext-name {
4098 .addon-toolbar-icon {
4101 vertical-align: bottom;
4106 list-style-image: url("chrome://browser/skin/menuPanel.svg");
4107 -moz-image-region: rect(0px, 288px, 32px, 256px);
4110 .addon-toolbar-icon {
4111 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4112 -moz-image-region: rect(0, 486px, 18px, 468px);
4115 /* Notification icon box */
4117 .notification-anchor-icon:-moz-focusring {
4118 /* outline: 1px dotted -moz-DialogText;*/
4121 /* Translation infobar */
4123 /* === BEGIN infobar.inc.css === */
4125 notification[value="translation"] .messageImage {
4126 list-style-image: url("chrome://browser/skin/translation-16.png");
4127 -moz-image-region: rect(0, 32px, 16px, 16px);
4130 @media (min-resolution: 1.25dppx) {
4131 notification[value="translation"] .messageImage {
4132 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4133 -moz-image-region: rect(0, 64px, 32px, 32px);
4137 notification[value="translation"][state="translating"] .messageImage {
4138 list-style-image: url("chrome://browser/skin/translating-16.png");
4139 -moz-image-region: auto;
4142 @media (min-resolution: 1.25dppx) {
4143 notification[value="translation"][state="translating"] .messageImage {
4144 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4148 notification[value="translation"] hbox[anonid="details"] {
4152 notification[value="translation"] button,
4153 notification[value="translation"] menulist {
4157 notification[value="translation"] menulist > .menulist-dropmarker {
4160 .translation-menupopup arrowscrollbox {
4164 .translation-attribution {
4166 -moz-box-align: end;
4170 .translation-attribution > label {
4174 .translation-attribution > image {
4178 .translation-welcome-panel {
4182 .translation-welcome-logo {
4185 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4186 -moz-image-region: rect(0, 64px, 32px, 32px);
4189 .translation-welcome-content {
4190 margin-inline-start: 16px;
4193 .translation-welcome-headline {
4198 .translation-welcome-body {
4203 /* === END infobar.inc.css === */
4205 notification[value="translation"] {
4209 .translation-menupopup {
4210 -moz-appearance: none;
4213 /* Bookmarks roots menu-items */
4214 #subscribeToPageMenuitem:not([disabled]),
4215 #subscribeToPageMenupopup {
4216 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4219 #bookmarksToolbarFolderMenu,
4220 #BMB_bookmarksToolbar,
4221 #panelMenu_bookmarksToolbar {
4222 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4223 -moz-image-region: auto;
4226 #BMB_unsortedBookmarks,
4227 #panelMenu_unsortedBookmarks {
4228 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4229 -moz-image-region: auto;
4234 .statuspanel-label {
4237 background: #404000;
4238 border: 1px none #9C9CFF;
4239 border-top-style: solid;
4244 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4245 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4246 border-right-style: solid;
4247 border-top-right-radius: .3em;
4251 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4252 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4253 border-left-style: solid;
4254 border-top-left-radius: .3em;
4258 /* HACK to abolish devily color on main content */
4261 background-color: transparent !important;
4264 /* === BEGIN fullscreen/warning.inc.css === */
4266 html|*.pointerlockfswarning {
4267 align-items: center;
4268 background: rgba(0, 0, 0, 0.9);
4269 border: 2px solid #A09090;
4270 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4273 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4276 html|*.pointerlockfswarning::before {
4278 width: 24px; height: 24px;
4281 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4282 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4283 content: url("chrome://browser/skin/fullscreen/secure.svg");
4286 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4287 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4289 html|*.pointerlockfswarning-domain-text,
4290 html|*.pointerlockfswarning-generic-text {
4292 font-weight: lighter;
4297 html|*.pointerlockfswarning-domain {
4302 html|*#fullscreen-exit-button,
4303 html|*.pointerlockfswarning-exit-button {
4306 border-radius: 300px;
4308 background-color: #C09070;
4312 /* === END fullscreen/warning.inc.css === */
4314 /* === BEGIN ctrlTab.inc.css === */
4319 -moz-appearance: none;
4320 background: rgba(0%,0%,0%,.7);
4323 padding: 20px 10px 10px;
4327 .ctrlTab-favicon[src] {
4328 background-color: #000000;
4334 .ctrlTab-preview-inner > .tabPreview-canvas {
4335 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4338 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4342 .ctrlTab-preview-inner {
4344 border: 2px solid transparent;
4345 border-radius: .5em;
4348 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4349 margin: -10px -10px 0;
4352 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4353 background-color: #000000;
4356 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4358 background-color: #000000;
4360 border-color: #9C9CFF;
4367 /* === END ctrlTab.inc.css === */
4369 /* === including indicator.css is done at the start of the file === */
4373 #developer-toolbar-toolbox-button[error-count]:before {
4377 background-color: #FF0000;
4379 margin-inline-end: 5px;
4382 /* === BEGIN plugin-doorhanger.inc.css === */
4385 * Plugin Doorhanger Styles
4388 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4389 padding: 6px 1px 2px;
4392 .click-to-play-plugins-notification-center-box {
4395 .plugin-popupnotification-centeritem:nth-child(odd) {
4396 /* background-color: rgba(0,0,0,0.1);*/
4399 .center-item-label {
4401 text-overflow: ellipsis;
4404 .center-item-warning-icon {
4405 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4406 background-repeat: no-repeat;
4409 margin-inline-start: 6px;
4412 .click-to-play-plugins-notification-button-container {
4415 .click-to-play-popup-button {
4419 .click-to-play-plugins-notification-description-box {
4423 padding-bottom: 3px;
4426 .click-to-play-plugins-outer-description {
4430 .click-to-play-plugins-notification-link,
4435 .messageImage[value="plugin-hidden"] {
4436 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4439 /* Keep any changes to this style in sync with pluginProblem.css */
4440 notification.pluginVulnerable {
4443 notification.pluginVulnerable .messageImage {
4444 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4447 /* === END plugin-doorhanger.inc.css === */
4449 /* === BEGIN customizeMode.inc.css === */
4451 /* Customization mode */
4454 --drag-drop-transition-duration: .3s;
4457 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4458 background-repeat: no-repeat;
4459 background-position: right top;
4460 background-attachment: fixed;
4461 background-color: transparent;
4462 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4463 var(--toolbox-rect-height), 0),
4464 linear-gradient(to bottom,
4465 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4466 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4467 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4468 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4469 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4470 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4473 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4477 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4478 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4479 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4484 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4485 pointer-events: none;
4488 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4489 #PanelUI-contents > .panel-customization-placeholder {
4490 -moz-outline-radius: 2.5px;
4491 outline: 1px dashed transparent;
4494 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4495 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4496 -moz-box-ordinal-group: 0;
4501 outline-offset: -2px;
4502 pointer-events: none;
4508 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4509 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4510 offset from the bottom effectively the same as other targets (-2px). */
4511 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4515 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4516 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4517 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4518 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4522 /* Most target outlines are shown on hover and drag over but the panel menu uses
4523 placeholders instead. */
4524 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4525 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4526 /* nav-bar and panel outlines are always shown */
4527 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4528 outline-color: currentColor;
4531 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4532 transition: outline-color 250ms linear;
4535 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4536 transition: outline-color 250ms linear;
4537 outline-color: var(--panel-separator-color);
4540 #PanelUI-contents > .panel-customization-placeholder {
4542 outline-offset: -5px;
4545 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4547 /* padding-left: 10px;
4548 padding-right: 10px;*/
4551 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4555 #customization-container {
4556 background-color: #000000;
4560 #customization-palette,
4561 #customization-empty {
4562 padding: 0 15px 15px;
4565 #customization-header {
4567 line-height: 1.75em;
4570 margin: 25px 25px 12px;
4571 padding-bottom: 12px;
4572 border-bottom: 1px solid #A09090;
4575 #customization-panel-container {
4576 padding: 10px 10px 0px;
4579 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4580 #customization-footer {
4581 /*background-color: rgb(236,236,236);*/
4584 #customization-footer {
4585 border-top: 1px solid #9C9CFF;
4589 .customizationmode-button {
4593 .customizationmode-checkbox {
4596 #customization-reset-button,
4597 #customization-undo-reset-button,
4598 #customization-done-button {
4601 #customization-done-button {
4604 .customizationmode-button > .box-inherit {
4607 /* We use a smaller padding to ensure images don't have padding.
4608 * We can't detect whether a button has an image. This button doesn't
4609 * so it needs more padding, so we unfortunately hardcode the extra
4612 #customization-toolbar-visibility-button {
4615 .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
4618 .customizationmode-button > .button-icon {
4621 .customizationmode-button:not([type=menu]) > .button-text {
4624 .customizationmode-button > .box-inherit > .button-menu-dropmarker {
4627 .customizationmode-button[checked] {
4628 background-color: #008484;
4631 .customizationmode-button[checked]:hover:not([disabled]),
4632 .customizationmode-button:hover:not([disabled]) {
4633 background-color: #FFCF00;
4636 .customizationmode-button[checked]:hover:active:not([disabled]),
4637 .customizationmode-button:hover:active:not([disabled]),
4638 .customizationmode-button[open] {
4639 background-color: #FF9F00;
4642 .customizationmode-button[disabled="true"] {
4645 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4646 .customizationmode-button > .button-box > .button-icon {
4650 #customization-titlebar-visibility-button {
4651 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4652 -moz-image-region: rect(0, 16px, 16px, 0);
4655 #customization-titlebar-visibility-button:hover {
4656 -moz-image-region: rect(16px, 16px, 32px, 0);
4659 #customization-titlebar-visibility-button > .button-box {
4661 padding-bottom: 1px;
4664 #customization-titlebar-visibility-button:hover:active > .button-box {
4669 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4670 #customization-titlebar-visibility-button > .button-box > .button-text {
4671 /* Sadly, button.css thinks its margins are perfect for everyone. */
4672 margin-inline-start: 5px !important;
4675 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4679 background-image: url("chrome://browser/content/default-theme-icon.svg");
4680 background-size: contain;
4683 #customization-titlebar-visibility-button > .button-box > .button-icon {
4684 vertical-align: middle;
4687 #customization-titlebar-visibility-button[checked] {
4688 -moz-image-region: rect(0, 32px, 16px, 16px);
4689 background-color: #008484;
4692 #customization-titlebar-visibility-button[checked]:hover {
4693 -moz-image-region: rect(16px, 32px, 32px, 16px);
4694 background-color: #FFCF00;
4697 #customization-titlebar-visibility-button[checked]:hover:active {
4698 background-color: #FF9F00;
4701 @media (min-resolution: 1.1dppx) {
4702 #customization-titlebar-visibility-button {
4703 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4704 -moz-image-region: rect(0, 48px, 48px, 0);
4707 #customization-titlebar-visibility-button:hover {
4708 -moz-image-region: rect(48px, 48px, 96px, 0);
4711 #customization-titlebar-visibility-button[checked] {
4712 -moz-image-region: rect(0, 96px, 48px, 48px);
4715 #customization-titlebar-visibility-button[checked]:hover {
4716 -moz-image-region: rect(48px, 96px, 96px, 48px);
4720 #main-window[customize-entered] #customization-panel-container {
4721 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4722 background-position: left top;
4723 background-repeat: repeat;
4724 background-size: auto;
4725 background-attachment: fixed;
4728 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4729 toolbarpaletteitem[place="toolbar"] {
4730 transition: border-width 250ms ease-in-out;
4733 toolbarpaletteitem[mousedown] {
4734 outline: 1px solid #008484;
4735 cursor: -moz-grabbing;
4739 .panel-customization-placeholder,
4740 toolbarpaletteitem[place="palette"],
4741 toolbarpaletteitem[place="panel"] {
4742 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4745 #customization-palette {
4746 transition: opacity .3s ease-in-out;
4750 #customization-palette[showing="true"] {
4754 toolbarpaletteitem toolbarbutton[disabled] {
4755 /* color: inherit !important;*/
4758 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4759 toolbarpaletteitem[notransition].panel-customization-placeholder,
4760 toolbarpaletteitem[notransition][place="toolbar"],
4761 toolbarpaletteitem[notransition][place="palette"],
4762 toolbarpaletteitem[notransition][place="panel"] {
4766 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4767 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4768 toolbarpaletteitem > toolbaritem.panel-wide-item,
4769 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4770 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4773 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4774 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4775 transform: scale(1.3);
4778 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4779 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4780 transform: scale(1.1);
4783 /* Override the toolkit styling for items being dragged over. */
4784 toolbarpaletteitem[place="toolbar"] {
4785 border-left-width: 0;
4786 border-right-width: 0;
4791 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4792 border-top: 0px solid transparent;
4793 border-bottom: 0px solid transparent;
4796 #customization-palette:not([hidden]) {
4797 margin-bottom: 25px;
4800 toolbarpaletteitem[place="palette"]:-moz-focusring,
4801 toolbarpaletteitem[place="panel"]:-moz-focusring,
4802 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4806 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4807 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4808 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4809 /* Delay adding the focusring back until after the transform transition completes. */
4810 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4811 outline: 1px dotted;
4812 -moz-outline-radius: 2.5px;
4815 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4816 outline-offset: -5px;
4819 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4820 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4821 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4822 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4826 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4827 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4837 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4838 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4842 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4843 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4846 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4847 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4851 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4852 -moz-box-pack: center;
4856 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4857 margin-inline-end: 5px;
4860 #customization-palette > toolbarpaletteitem > label {
4866 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4867 -moz-box-orient: vertical;
4868 /* Make the panel padding uniform across all platforms due to the
4869 styling of the section headers and footer. */
4873 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4878 .customization-lwtheme-menu-theme {
4879 -moz-appearance: none;
4882 padding-inline-end: 5px;
4884 padding-inline-start: 0;
4887 .customization-lwtheme-menu-theme[defaulttheme] {
4888 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4891 .customization-lwtheme-menu-theme[active="true"] {
4892 background-color: #008484;
4895 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4899 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4903 #customization-lwtheme-menu-header,
4904 #customization-lwtheme-menu-recommended {
4909 #customization-lwtheme-menu-header,
4910 #customization-lwtheme-menu-recommended,
4911 #customization-lwtheme-menu-footer {
4912 background-color: #A09090;
4914 margin-right: -10px;
4918 #customization-lwtheme-menu-header {
4920 border-top-right-radius: 3px;
4921 border-top-left-radius: 3px;
4924 #customization-lwtheme-menu-recommended {
4927 #customization-lwtheme-menu-footer {
4928 margin-bottom: -10px;
4929 border-bottom-right-radius: 3px;
4930 border-bottom-left-radius: 3px;
4933 .customization-lwtheme-menu-footeritem {
4934 -moz-appearance: none;
4936 background-color: #C09070;
4938 border: 1px solid transparent;
4944 .customization-lwtheme-menu-footeritem:hover {
4945 background-color: #FFCF00;
4948 .customization-lwtheme-menu-footeritem:first-child {
4951 /* === END customizeMode.inc.css === */
4953 /* === BEGIN customizeTip.inc.css === */
4955 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4962 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4963 border: 1px solid #9C9CFF;
4967 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4968 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4971 .customization-tipPanel-infoBox {
4972 margin: 20px 25px 25px;
4974 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4975 background-repeat: no-repeat;
4978 .customization-tipPanel-content {
4984 .customization-tipPanel-em {
4989 .customization-tipPanel-contentImage {
4991 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4999 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5000 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5003 .customization-tipPanel-link {
5004 -moz-appearance: none;
5005 background: transparent;
5013 .customization-tipPanel-link > .button-box > .button-text {
5014 margin: 0 !important;
5017 .customization-tipPanel-closeBox > .close-icon {
5018 -moz-appearance: none;
5020 margin-inline-end: -25px;
5023 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5024 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5025 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5028 /* === END customizeTip.inc.css === */
5031 * This next rule is a hack to disable subpixel anti-aliasing on all
5032 * labels during the customize mode transition. Subpixel anti-aliasing
5033 * on Windows with Direct2D layers acceleration is particularly slow to
5034 * paint, so this hack is how we sidestep that performance bottleneck.
5036 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5037 transform: perspective(0.01px);
5040 #main-window[customize-entered] > #tab-view-deck {
5041 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5042 background-attachment: fixed;
5045 #main-window[customization-lwtheme]:-moz-lwtheme {
5046 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5047 background-repeat: repeat;
5048 background-attachment: fixed;
5049 background-position: left top;
5052 #main-window[customize-entered] #browser-bottombox,
5053 #main-window[customize-entered] #customization-container {
5054 border-left: 1px solid #9C9CFF;
5055 border-right: 1px solid #9C9CFF;
5056 background-clip: padding-box;
5059 #main-window[customize-entered] #browser-bottombox {
5060 border-bottom: 1px solid #9C9CFF;
5063 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5067 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5071 /* End customization mode */
5073 /* Private browsing indicators */
5076 * Currently, we have two places where we put private browsing indicators on
5077 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5078 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5079 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5080 * want the bottom border of the image to line up with the bottom of the window
5081 * caption buttons. That's why there's so much special-casing going on in here.
5083 .private-browsing-indicator {
5085 pointer-events: none;
5088 #private-browsing-indicator-titlebar {
5093 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5097 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5101 #TabsToolbar > .private-browsing-indicator {
5102 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5103 margin-inline-start: 4px;
5107 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5108 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5109 * min/max/close window buttons.
5111 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5112 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5113 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5114 margin-inline-end: 4px;
5120 /* This one is for Linux */
5121 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5122 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5126 /* End private browsing indicators */
5128 /* === BEGIN UITour.inc.css === */
5132 #UITourHighlightContainer {
5133 -moz-appearance: none;
5135 background-color: transparent;
5136 /* This is a buffer to compensate for the movement in the "wobble" effect,
5137 and for the box-shadow of #UITourHighlight. */
5142 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5143 border-radius: 40px;
5144 border: 1px solid #9C9CFF;
5145 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5146 on Linux without an X compositor where opacity is either 0 or 1. */
5147 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5152 #UITourTooltipBody {
5153 -moz-box-align: start;
5156 #UITourTooltipTitleContainer {
5157 -moz-box-align: start;
5158 margin-bottom: 10px;
5161 #UITourTooltipIcon {
5164 margin-inline-end: 10px;
5167 #UITourTooltipTitle,
5168 #UITourTooltipDescription {
5172 #UITourTooltipTitle {
5178 #UITourTooltipDescription {
5179 margin-inline-start: 0;
5180 margin-inline-end: 0;
5182 line-height: 1.8rem;
5183 margin-bottom: 0; /* Override global.css */
5186 #UITourTooltipClose {
5188 -moz-appearance: none;
5190 background-color: transparent;
5192 margin-inline-start: 4px;
5196 #UITourTooltipClose > .toolbarbutton-text {
5200 #UITourTooltipButtons {
5202 background-color: rgba(0,0,0,.2);
5203 border-top: 1px solid rgba(0,0,0,.4);
5204 margin: 10px -16px -16px;
5208 #UITourTooltipButtons > label,
5209 #UITourTooltipButtons > button {
5213 #UITourTooltipButtons > label:first-child,
5214 #UITourTooltipButtons > button:first-child {
5215 margin-inline-start: 0;
5218 #UITourTooltipButtons > label:last-child,
5219 #UITourTooltipButtons > button:last-child {
5220 margin-inline-end: 0;
5223 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5226 margin-inline-end: 5px;
5229 #UITourTooltipButtons > label,
5230 #UITourTooltipButtons > button .button-text {
5234 #UITourTooltipButtons > button:not(.button-link) {
5235 -moz-appearance: none;
5236 background-color: #C09070;
5237 border-radius: 3000px;
5241 transition-property: background-color, color;
5242 transition-duration: 150ms;
5245 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5246 background-color: #FFCF00;
5250 #UITourTooltipButtons > label,
5251 #UITourTooltipButtons > button.button-link {
5252 -moz-appearance: none;
5253 background: transparent;
5256 color: rgba(0,0,0,0.35);
5258 padding-right: 10px;
5261 #UITourTooltipButtons > button.button-link:hover {
5265 /* The primary button gets the same color as the customize button. */
5266 #UITourTooltipButtons > button.button-primary {
5267 background-color: #A06060; /* LCARS default button background color */
5270 padding-right: 30px;
5273 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5274 background-color: #FFCF00;
5278 /* === END UITour.inc.css === */
5280 #UITourTooltipButtons {
5282 * Override the --arrowpanel-padding so the background extends
5283 * to the sides and bottom of the panel.
5286 margin-right: -10px;
5287 margin-bottom: -10px;
5290 /* === BEGIN contextmenu.inc.css === */
5292 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5295 #context-navigation > .menuitem-iconic {
5297 -moz-box-pack: center;
5298 -moz-box-align: center;
5301 #context-navigation > .menuitem-iconic[disabled="true"] {
5302 background-color: transparent;
5305 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5306 -moz-appearance: none;
5309 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5313 filter: url(chrome://global/skin/filters.svg#fill);
5318 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5322 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5326 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5330 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5333 #context-bookmarkpage {
5334 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5337 #context-bookmarkpage[starred=true] {
5338 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5341 #context-back:-moz-locale-dir(rtl),
5342 #context-forward:-moz-locale-dir(rtl),
5343 #context-reload:-moz-locale-dir(rtl) {
5344 transform: scaleX(-1);
5347 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5348 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5354 #context-media-eme-learnmore {
5355 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5358 #context-media-eme-learnmore {
5359 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5362 /* === END contextmenu.inc.css === */
5364 /* Make context menu items larger when opened through touch. */
5365 #contentAreaContextMenu[touchmode] menu,
5366 #contentAreaContextMenu[touchmode] menuitem {
5368 padding-bottom: 12px;
5371 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5373 padding-bottom: 7px;
5376 #context-navigation {
5379 #context-sep-navigation {
5380 /* margin-top: -4px; */
5383 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5388 .webextension-popup-browser {
5389 border-radius: inherit;
5392 .contentSelectDropdown-ingroup > .menu-iconic-text {
5393 padding-inline-start: 20px;
5396 #ContentSelectDropdown > menupopup {
5397 background-color: #000000;
5398 -moz-border-top-colors: #A09090;
5399 -moz-border-right-colors: #A09090;
5400 -moz-border-bottom-colors: #A09090;
5401 -moz-border-left-colors: #A09090;
5404 #ContentSelectDropdown > menupopup > menucaption,
5405 #ContentSelectDropdown > menupopup > menuitem {
5408 /* font: -moz-list;*/
5411 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5412 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5413 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5414 with 4px being the preferred padding size. */
5415 padding-top: .3333em;
5416 padding-bottom: .3333em;
5419 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5423 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5425 background-color: unset;
5428 #ContentSelectDropdown > menupopup > menucaption {
5429 background-color: buttonface;
5432 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5436 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5437 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5438 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5439 font-size with 11px being the preferred padding size. */
5440 padding-top: .9167em;
5441 padding-bottom: .9167em;