1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
39 /* === BEGIN browser.inc.css === */
44 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
48 -moz-image-region: rect(0, 42px, 14px, 28px);
51 .urlbar-go-button:hover {
52 -moz-image-region: rect(14px, 42px, 28px, 28px);
55 .urlbar-go-button:-moz-locale-dir(rtl) {
56 transform: scaleX(-1);
59 @media (min-resolution: 1.1dppx) {
61 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
62 -moz-image-region: rect(0, 84px, 28px, 56px);
66 .urlbar-go-button:hover {
67 -moz-image-region: rect(28px, 84px, 56px, 56px);
70 .urlbar-go-button:hover:active {
71 -moz-image-region: rect(56px, 84px, 84px, 56px);
81 /* background-color: hsla(0,0%,0%,.05);
82 border: 1px solid ThreeDLightShadow;*/
85 #urlbar-zoom-button[animate="true"] {
86 animation-name: urlbar-zoom-reset-pulse;
87 animation-duration: 250ms;
90 #urlbar-zoom-button:hover {
91 /* background-color: hsla(0,0%,0%,.1);*/
94 #urlbar-zoom-button:hover:active {
95 /* background-color: hsla(0,0%,0%,.15);*/
98 #urlbar-zoom-button > .toolbarbutton-text {
102 #urlbar-zoom-button > .toolbarbutton-icon {
106 /* Page action button */
107 #urlbar-page-action-button {
108 list-style-image: url("chrome://browser/skin/page-action.svg");
111 -moz-context-properties: fill;
115 #urlbar-page-action-button > .toolbarbutton-icon {
119 #page-action-copy-url-button {
120 list-style-image: url("chrome://browser/skin/copy-url.svg");
121 -moz-context-properties: fill;
125 #page-action-email-link-button {
126 list-style-image: url("chrome://browser/skin/email-link.svg");
127 -moz-context-properties: fill;
131 #page-action-send-to-device-button {
132 list-style-image: url("chrome://browser/skin/device-mobile.svg");
133 -moz-context-properties: fill;
137 .page-action-sendToDevice-device[clientType=mobile] {
138 list-style-image: url("chrome://browser/skin/device-mobile.svg");
139 -moz-context-properties: fill;
143 .page-action-sendToDevice-device[clientType=desktop] {
144 list-style-image: url("chrome://browser/skin/device-desktop.svg");
145 -moz-context-properties: fill;
149 #page-action-sendToDevice-fxa-button {
150 list-style-image: url("chrome://browser/skin/sync.svg");
151 -moz-context-properties: fill;
155 /* === END browser.inc.css === */
158 /*--backbutton-urlbar-overlap: 5px;*/
160 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
161 --forwardbutton-width: 27px;
162 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
163 --forwardbutton-width: 25px;*/
165 --identity-box-verified-background-color: #000000;
167 --panel-separator-color: #A09090;
168 --arrowpanel-hover: #FFCF00;
169 --arrowpanel-active: #FF9F00;
170 --arrowpanel-dimmed: #402000;
171 --arrowpanel-dimmed-further: #794900;
172 --arrowpanel-dimmed-even-further: #603000;
174 --urlbar-separator-color: #9C9CFF;
178 -moz-box-orient: vertical; /* for flex hack */
182 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
185 /* ::::: primary toolbar ::::: */
187 .toolbar-primary > .toolbar-box > .toolbar-holder {
188 background-color: #A09090;
191 .toolbar-primary > .toolbar-box > .toolbar-startcap,
192 .toolbar-primary > .toolbar-box > .toolbar-endcap {
193 background-color: #9C9CFF;
196 /* Hides the titlebar-placeholder underneath the window caption buttons when we
197 are not autohiding the menubar. */
198 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
202 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
203 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
204 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
205 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
206 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
207 /* margin-top: 3px;*/
210 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
211 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
212 /* margin-top: var(--space-above-tabbar);*/
215 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
216 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
217 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
222 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
223 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
228 #navigator-toolbox > toolbar {
231 #navigator-toolbox::after {
234 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
235 /*border-bottom: 1px solid ThreeDShadow;*/
238 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
241 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
242 overflow: -moz-hidden-unscrollable;
244 transition: min-height 170ms ease-out, max-height 170ms ease-out;
247 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
250 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
253 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
254 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
255 /* Indent also due to non-applicable aero rule in original Windows theme. */
256 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
257 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
259 background-color: #6000CF;
263 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
264 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
265 background-color: #8050B0;
269 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
273 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
277 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
278 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
283 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
284 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
285 #titlebar-buttonbox > .titlebar-button {
291 /* Position the toolbar above the bottom of background tabs */
296 #personal-bookmarks {
297 /* min-height: 24px; */
300 #PersonalToolbar > #home-button {
301 -moz-box-orient: horizontal;
304 #PersonalToolbar > #home-button > .toolbarbutton-text {
308 #print-preview-toolbar:not(:-moz-lwtheme) {
309 /* -moz-appearance: toolbox; */
312 #browser-bottombox:not(:-moz-lwtheme) {
315 /* ::::: titlebar ::::: */
319 background-color: #6000CF;
322 #titlebar:-moz-window-inactive {
323 background-color: #8050B0;
327 #main-window[sizemode="normal"] > #titlebar {
332 #main-window[sizemode="maximized"] > #titlebar {
336 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
337 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
338 #main-window[sizemode="normal"] > #titlebar,
339 #main-window[sizemode="maximized"] > #titlebar {
341 /* There is a margin-bottom set to -23 by code. */
345 /* The button box must appear on top of the navigator-toolbox in order for
346 * click and hover mouse events to work properly for the button in the restored
347 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
348 * can swallow those events. It will also place the buttons above the fog on
349 * themes with Aero Glass.
352 #main-window[sizemode="maximized"] #titlebar-buttonbox {
353 -moz-appearance: none;
356 margin-inline-end: 3px;
360 .titlebar-placeholder[type="appmenu-button"] {
364 .titlebar-placeholder[type="caption-buttons"] {
368 /* titlebar command buttons */
370 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
373 #titlebar-min:hover {
374 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
378 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
381 #titlebar-max:hover {
382 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
385 #main-window[sizemode="maximized"] #titlebar-max {
386 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
389 #main-window[sizemode="maximized"] #titlebar-max:hover {
390 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
394 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
397 #titlebar-close:hover {
398 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
401 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
402 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
403 #titlebar-fullscreen-button {
404 -moz-appearance: none;
405 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
406 -moz-image-region: rect(0px, 16px, 16px, 0px);
409 #titlebar-fullscreen-button:hover {
410 -moz-image-region: rect(0px, 32px, 16px, 16px);
413 @media (min-resolution: 2dppx) {
414 #titlebar-fullscreen-button {
415 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
416 -moz-image-region: rect(0px, 32px, 32px, 0px);
419 #titlebar-fullscreen-button:hover {
420 -moz-image-region: rect(0px, 64px, 32px, 32px);
426 /* ::::: bookmark buttons ::::: */
428 .bookmark-item > .toolbarbutton-menu-dropmarker {
432 #bookmarks-toolbar-placeholder {
433 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
434 -moz-box-orient: horizontal;
437 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
438 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
439 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
442 /* === BEGIN bookmarked-notification.inc.css === */
444 /* ----- BOOKMARK STAR ANIMATION ----- */
446 @keyframes animation-bookmarkAdded {
447 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
448 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
450 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
453 @keyframes animation-bookmarkPulse {
454 from { transform: scale(1); }
455 50% { transform: scale(1.3); }
456 to { transform: scale(1); }
459 #bookmarked-notification-container {
468 #bookmarked-notification {
469 background-size: 16px;
470 background-position: center;
471 background-repeat: no-repeat;
477 #bookmarked-notification-dropmarker-anchor {
482 #bookmarked-notification-dropmarker-icon {
488 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
489 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
490 animation: animation-bookmarkAdded 800ms;
491 animation-timing-function: ease, ease, ease;
494 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
495 list-style-image: none !important;
496 /* fill: transparent;*/
499 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
501 animation: animation-bookmarkPulse 300ms;
502 animation-delay: 600ms;
503 animation-timing-function: ease-out;
506 /* === END bookmarked-notification.inc.css === */
508 /* ::::: bookmark menus ::::: */
511 menuitem.bookmark-item {
516 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
521 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
522 padding-inline-start: 0px;
525 /* ::::: bookmark items ::::: */
528 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
529 -moz-image-region: auto;
532 .bookmark-item[container] {
533 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
534 -moz-image-region: auto;
537 .bookmark-item[container][open] {
538 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
539 -moz-image-region: auto;
542 .bookmark-item[container][livemark] {
543 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
544 -moz-image-region: auto;
547 .bookmark-item[container][livemark] .bookmark-item {
548 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
549 -moz-image-region: rect(0px, 16px, 16px, 0px);
552 .bookmark-item[container][livemark] .bookmark-item[visited] {
553 -moz-image-region: rect(0px, 32px, 16px, 16px);
556 .bookmark-item[container][query] {
557 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
558 -moz-image-region: auto;
561 .bookmark-item[query][tagContainer] {
562 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
563 -moz-image-region: auto;
566 .bookmark-item[query][dayContainer] {
567 list-style-image: url("chrome://communicator/skin/history/calendar.png");
568 -moz-image-region: auto;
571 .bookmark-item[query][hostContainer] {
572 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
573 -moz-image-region: auto;
576 .bookmark-item[query][hostContainer][open] {
577 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
578 -moz-image-region: auto;
581 .bookmark-item[cutting] > .toolbarbutton-icon,
582 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
586 .bookmark-item[cutting] > .toolbarbutton-text,
587 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
591 /* === BEGIN toolbarbuttons.inc.css === */
593 /* ::::: primary toolbar buttons ::::: */
595 .toolbarbutton-1:not([type="menu-button"]) {
596 -moz-box-orient: vertical;
600 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
606 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
607 .toolbarbutton-1[disabled="true"]:hover:active,
608 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
612 .toolbarbutton-1:hover:active,
613 .toolbarbutton-1[open="true"],
614 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
617 padding-inline-start: 3px;
618 padding-inline-end: 1px;
621 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
622 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
623 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
624 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
625 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
628 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
629 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
632 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
633 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
636 .toolbarbutton-1 > .toolbarbutton-icon,
637 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
641 #nav-bar .toolbarbutton-1,
642 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
645 #nav-bar .toolbarbutton-1:not([type=menu-button]),
646 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
647 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
650 #nav-bar #PanelUI-menu-button {
651 /* padding-inline-start: 7px;
652 padding-inline-end: 5px;*/
655 #nav-bar .toolbarbutton-1[type=panel],
656 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
657 /* padding-left: 5px;
658 padding-right: 5px;*/
661 #nav-bar .toolbarbutton-1 > menupopup {
662 /* margin-top: -3px;*/
665 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
669 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
670 /* padding-inline-end: 0;*/
673 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
674 /* padding-inline-start: 0;
675 -moz-box-align: center;*/
678 .findbar-button > .toolbarbutton-text,
679 toolbarbutton.bookmark-item:not(.subviewbutton),
680 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
681 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
682 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
683 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
684 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
685 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
688 border-color: transparent;
689 transition-property: background-color, border-color;
690 transition-duration: 150ms;*/
693 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
694 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
695 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
696 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
700 /* Help SDK icons fit: */
701 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
702 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
706 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
707 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
711 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
712 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
713 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
714 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
715 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
716 /* padding-inline-end: 17px;*/
719 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
720 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
721 /* horizontal padding + border + icon width */
722 /* max-width: 43px;*/
725 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
728 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
731 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
734 #nav-bar .toolbaritem-combined-buttons {
739 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
744 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
745 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
751 margin-inline-end: -1px;
755 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
758 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
759 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
760 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
761 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
762 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
763 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
764 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
765 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
766 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
767 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
770 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
771 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
772 toolbarbutton.bookmark-item[open="true"],
773 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
774 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
775 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
776 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
777 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
780 #TabsToolbar .toolbarbutton-1,
781 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
782 .tabbrowser-arrowscrollbox > .scrollbutton-up,
783 .tabbrowser-arrowscrollbox > .scrollbutton-down {
786 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
787 #TabsToolbar .toolbarbutton-1[open],
788 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
789 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
790 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
793 /* unified back/forward button */
796 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
799 #forward-button > menupopup {
800 margin-top: 1px !important;
803 #forward-button > .toolbarbutton-icon {
804 background-clip: padding-box !important;
805 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
806 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
810 margin-inline-start: -4px !important;
815 border-radius: 0 10000px 10000px 0;
816 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
819 #forward-button:-moz-locale-dir(rtl) {
820 border-radius: 10000px 0 0 10000px;
823 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
824 transition: margin-left 150ms ease-out;
827 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
828 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
831 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
832 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
833 transition-delay: 100s;
836 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
837 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
838 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
842 /* padding-top: 3px !important;
843 padding-bottom: 3px !important;
844 padding-inline-start: 5px !important;
845 padding-inline-end: 0 !important;*/
848 border-radius: 10000px;
855 #back-button:-moz-locale-dir(rtl) {
858 #back-button > menupopup {
859 margin-top: -1px !important;
862 #back-button > .toolbarbutton-icon {
863 border-radius: 10000px !important;
864 background-clip: padding-box !important;
865 /* background-color: hsla(210,25%,98%,.08) !important;
866 padding: 6px !important;
867 border-style: none !important;
868 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
869 0 0 0 1px hsla(210,4%,10%,.25);*/
870 transition-property: background-color, box-shadow !important;
871 transition-duration: 250ms !important;
874 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
875 /* background-color: hsla(210,4%,10%,.08) !important;*/
878 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
879 #back-button[open="true"] > .toolbarbutton-icon {
880 /* background-color: hsla(210,4%,10%,.12) !important;
881 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
882 0 0 0 1px hsla(210,4%,10%,.25),
883 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
886 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
887 transform: scaleX(-1);
890 #forward-button > .toolbarbutton-menu-dropmarker,
891 #back-button > .toolbarbutton-menu-dropmarker {
896 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
897 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
898 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
901 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
902 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
903 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
906 #home-button.bookmark-item {
907 list-style-image: url("chrome://browser/skin/Toolbar.png");
910 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
911 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
912 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
913 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
914 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
915 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
916 #home-button.bookmark-item:-moz-lwtheme-brighttext {
919 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
922 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
923 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
924 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
928 #downloads-button > .toolbarbutton-icon {
932 /* tabview menu item */
935 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
936 -moz-image-region: rect(1px, 89px, 17px, 73px);
939 #menu_tabview[groups="0"] {
940 -moz-image-region: rect(1px, 17px, 17px, 1px);
943 #menu_tabview[groups="1"] {
944 -moz-image-region: rect(1px, 35px, 17px, 19px);
947 #menu_tabview[groups="2"] {
948 -moz-image-region: rect(1px, 53px, 17px, 37px);
951 #menu_tabview[groups="3"] {
952 -moz-image-region: rect(1px, 71px, 17px, 55px);
955 /* zoom control text (reset) button special case: */
957 #nav-bar #zoom-reset-button > .toolbarbutton-text {
958 /* To make this line up with the icons, it needs the same height (18px) +
959 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
960 * increase in text sizes would break things...
965 toolbarbutton.bookmark-item:not(.subviewbutton),
966 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
969 -moz-appearance: none;
970 border: 1px solid transparent;*/
973 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
974 /* border-color: var(--toolbarbutton-hover-bordercolor);
975 background: var(--toolbarbutton-hover-background);*/
978 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
979 /* border-color: var(--toolbarbutton-active-bordercolor);
980 box-shadow: var(--toolbarbutton-active-boxshadow);
981 background: var(--toolbarbutton-active-background);*/
984 .bookmark-item > .toolbarbutton-icon,
985 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
988 margin-inline-start: 1px;
989 margin-inline-end: 2px;
994 /* Force the display of the label for bookmarks */
995 .bookmark-item > .toolbarbutton-text,
996 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
997 display: -moz-box !important;
1000 /* === END toolbarbuttons.inc.css === */
1002 /* === BEGIN toolbarbutton-icons.inc.css === */
1005 --toolbarbutton-icon-fill: #FFCF00;
1006 --toolbarbutton-icon-fill-inverted: #000000;
1007 --toolbarbutton-icon-fill-disabled: #8050B0;
1008 --toolbarbutton-icon-fill-attention: #008484;
1011 /* Whole section of this included file: */
1012 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1013 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1014 #social-share-button, #open-file-button, #find-button, #developer-button,
1015 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1016 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1017 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1018 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
1019 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1020 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
1024 -moz-image-region: rect(0, 36px, 18px, 18px);
1027 #back-button:hover:not([disabled="true"]) {
1028 -moz-image-region: rect(18px, 36px, 36px, 18px);
1031 #back-button[disabled="true"] {
1032 -moz-image-region: rect(36px, 36px, 54px, 18px);
1036 -moz-image-region: rect(0, 72px, 18px, 54px);
1039 #forward-button:hover:not([disabled="true"]) {
1040 -moz-image-region: rect(18px, 72px, 36px, 54px);
1043 #forward-button[disabled="true"] {
1044 -moz-image-region: rect(36px, 72px, 54px, 54px);
1047 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1048 #forward-button:-moz-locale-dir(rtl) {
1049 transform: scaleX(-1);
1052 #home-button[cui-areatype="toolbar"] {
1053 -moz-image-region: rect(0, 126px, 18px, 108px);
1056 #home-button[cui-areatype="toolbar"]:hover {
1057 -moz-image-region: rect(18px, 126px, 36px, 108px);
1060 #bookmarks-menu-button[cui-areatype="toolbar"] {
1061 -moz-image-region: rect(0, 144px, 18px, 126px);
1064 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
1065 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
1066 -moz-image-region: rect(18px, 144px, 36px, 126px);
1069 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
1070 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
1071 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
1072 background-color: transparent !important;
1075 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
1076 -moz-image-region: rect(0, 162px, 18px, 144px);
1079 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
1080 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
1081 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
1082 /* When starred and clicked (for edit/delete dialog),
1083 * then only the menubutton-button itself is open, but not the whole menubutton. */
1084 -moz-image-region: rect(18px, 162px, 36px, 144px);
1087 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1088 -moz-image-region: rect(0, 630px, 18px, 612px);
1091 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
1093 -moz-box-align: center;
1096 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1097 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1098 -moz-image-region: rect(18px, 630px, 36px, 612px);
1101 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
1102 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
1104 padding-bottom: 0px;
1105 padding-inline-start: 2px;
1106 padding-inline-end: 0px;
1109 #history-panelmenu[cui-areatype="toolbar"] {
1110 -moz-image-region: rect(0, 180px, 18px, 162px);
1113 #history-panelmenu[cui-areatype="toolbar"]:hover,
1114 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
1115 -moz-image-region: rect(18px, 180px, 36px, 162px);
1118 #downloads-button[cui-areatype="toolbar"] {
1119 -moz-image-region: rect(0, 198px, 18px, 180px);
1122 #downloads-button[cui-areatype="toolbar"]:hover,
1123 #downloads-button[cui-areatype="toolbar"][open="true"] {
1124 -moz-image-region: rect(18px, 198px, 36px, 180px);
1127 #add-ons-button[cui-areatype="toolbar"] {
1128 -moz-image-region: rect(0, 216px, 18px, 198px);
1131 #add-ons-button[cui-areatype="toolbar"]:hover {
1132 -moz-image-region: rect(18px, 216px, 36px, 198px);
1135 #open-file-button[cui-areatype="toolbar"] {
1136 -moz-image-region: rect(0, 234px, 18px, 216px);
1139 #open-file-button[cui-areatype="toolbar"]:hover {
1140 -moz-image-region: rect(18px, 234px, 36px, 216px);
1143 #save-page-button[cui-areatype="toolbar"] {
1144 -moz-image-region: rect(0, 252px, 18px, 234px);
1147 #save-page-button[cui-areatype="toolbar"]:hover {
1148 -moz-image-region: rect(18px, 252px, 36px, 234px);
1151 #sync-button[cui-areatype="toolbar"] {
1152 -moz-image-region: rect(0, 792px, 18px, 774px);
1155 #sync-button[cui-areatype="toolbar"]:hover {
1156 -moz-image-region: rect(18px, 792px, 36px, 774px);
1159 #containers-panelmenu[cui-areatype="toolbar"] {
1160 -moz-image-region: rect(0, 810px, 18px, 792px);
1163 #containers-panelmenu[cui-areatype="toolbar"]:hover {
1164 -moz-image-region: rect(18px, 810px, 36px, 792px);
1167 #feed-button[cui-areatype="toolbar"] {
1168 -moz-image-region: rect(0, 288px, 18px, 270px);
1171 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
1172 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
1173 -moz-image-region: rect(18px, 288px, 36px, 270px);
1176 #feed-button[cui-areatype="toolbar"][disabled="true"] {
1177 -moz-image-region: rect(36px, 288px, 54px, 270px);
1180 #social-share-button[cui-areatype="toolbar"] {
1181 -moz-image-region: rect(0px, 306px, 18px, 288px);
1184 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
1185 #social-share-button[cui-areatype="toolbar"][open="true"] {
1186 -moz-image-region: rect(18px, 306px, 36px, 288px);
1189 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
1190 -moz-image-region: rect(36px, 306px, 54px, 288px);
1193 #characterencoding-button[cui-areatype="toolbar"] {
1194 -moz-image-region: rect(0, 324px, 18px, 306px);
1197 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
1198 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
1199 -moz-image-region: rect(18px, 324px, 36px, 306px);
1202 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
1203 -moz-image-region: rect(36px, 324px, 54px, 306px);
1206 #new-window-button[cui-areatype="toolbar"] {
1207 -moz-image-region: rect(0, 342px, 18px, 324px);
1210 #new-window-button[cui-areatype="toolbar"]:hover {
1211 -moz-image-region: rect(18px, 342px, 36px, 324px);
1214 #e10s-button[cui-areatype="toolbar"] {
1215 -moz-image-region: rect(0, 342px, 18px, 324px);
1218 #e10s-button[cui-areatype="toolbar"]:hover {
1219 -moz-image-region: rect(18px, 342px, 36px, 324px);
1222 #e10s-button > .toolbarbutton-icon {
1223 transform: scaleY(-1);
1226 #new-tab-button[cui-areatype="toolbar"] {
1227 -moz-image-region: rect(0, 360px, 18px, 342px);
1230 #new-tab-button[cui-areatype="toolbar"]:hover {
1231 -moz-image-region: rect(18px, 360px, 36px, 342px);
1234 #privatebrowsing-button[cui-areatype="toolbar"] {
1235 -moz-image-region: rect(0, 378px, 18px, 360px);
1238 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
1239 -moz-image-region: rect(18px, 378px, 36px, 360px);
1242 #find-button[cui-areatype="toolbar"] {
1243 -moz-image-region: rect(0, 396px, 18px, 378px);
1246 #find-button[cui-areatype="toolbar"]:hover {
1247 -moz-image-region: rect(18px, 396px, 36px, 378px);
1250 #print-button[cui-areatype="toolbar"] {
1251 -moz-image-region: rect(0, 414px, 18px, 396px);
1254 #print-button[cui-areatype="toolbar"]:hover {
1255 -moz-image-region: rect(18px, 414px, 36px, 396px);
1258 #fullscreen-button[cui-areatype="toolbar"] {
1259 -moz-image-region: rect(0, 432px, 18px, 414px);
1262 #fullscreen-button[cui-areatype="toolbar"]:hover {
1263 -moz-image-region: rect(18px, 432px, 36px, 414px);
1266 #developer-button[cui-areatype="toolbar"] {
1267 -moz-image-region: rect(0, 450px, 18px, 432px);
1270 #developer-button[cui-areatype="toolbar"]:hover,
1271 #developer-button[cui-areatype="toolbar"][open="true"] {
1272 -moz-image-region: rect(18px, 450px, 36px, 432px);
1275 #preferences-button[cui-areatype="toolbar"] {
1276 -moz-image-region: rect(0, 468px, 18px, 450px);
1279 #preferences-button[cui-areatype="toolbar"]:hover {
1280 -moz-image-region: rect(18px, 468px, 36px, 450px);
1283 #PanelUI-menu-button {
1284 -moz-image-region: rect(0, 486px, 18px, 468px);
1287 #PanelUI-menu-button:hover,
1288 #PanelUI-menu-button[open="true"] {
1289 -moz-image-region: rect(18px, 486px, 36px, 468px);
1292 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
1293 -moz-image-region: rect(0, 504px, 18px, 486px);
1296 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
1297 -moz-image-region: rect(18px, 504px, 36px, 486px);
1300 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
1301 -moz-image-region: rect(36px, 504px, 54px, 486px);
1304 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
1305 -moz-image-region: rect(0, 522px, 18px, 504px);
1308 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
1309 -moz-image-region: rect(18px, 522px, 36px, 504px);
1312 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
1313 -moz-image-region: rect(36px, 522px, 54px, 504px);
1316 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
1317 -moz-image-region: rect(0, 540px, 18px, 522px);
1320 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
1321 -moz-image-region: rect(18px, 540px, 36px, 522px);
1324 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
1325 -moz-image-region: rect(36px, 540px, 54px, 522px);
1328 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
1329 -moz-image-region: rect(0, 558px, 18px, 540px);
1332 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
1333 -moz-image-region: rect(18px, 558px, 36px, 540px);
1336 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
1337 -moz-image-region: rect(36px, 558px, 54px, 540px);
1340 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
1341 -moz-image-region: rect(0, 576px, 18px, 558px);
1344 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
1345 -moz-image-region: rect(18px, 576px, 36px, 558px);
1348 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
1349 -moz-image-region: rect(36px, 576px, 54px, 558px);
1352 #nav-bar-overflow-button {
1353 -moz-image-region: rect(0, 612px, 18px, 594px);
1356 #nav-bar-overflow-button:hover,
1357 #nav-bar-overflow-button[open="true"] {
1358 -moz-image-region: rect(18px, 612px, 36px, 594px);
1361 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1362 transform: scaleX(-1);
1365 #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
1370 -moz-image-region: rect(0, 648px, 18px, 630px);
1373 #tabview-button:hover {
1374 -moz-image-region: rect(18px, 648px, 36px, 630px);
1377 #email-link-button[cui-areatype="toolbar"] {
1378 -moz-image-region: rect(0, 666px, 18px, 648px);
1381 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
1382 -moz-image-region: rect(18px, 666px, 36px, 648px);
1385 #email-button[cui-areatype="toolbar"][disabled="true"] {
1386 -moz-image-region: rect(36px, 666px, 54px, 648px);
1389 #sidebar-button[cui-areatype="toolbar"] {
1390 -moz-image-region: rect(0, 684px, 18px, 666px);
1393 #sidebar-button[cui-areatype="toolbar"]:hover {
1394 -moz-image-region: rect(18px, 684px, 36px, 666px);
1397 #panic-button[cui-areatype="toolbar"] {
1398 -moz-image-region: rect(0, 702px, 18px, 684px);
1401 #panic-button[cui-areatype="toolbar"]:hover,
1402 #panic-button[cui-areatype="toolbar"][open] {
1403 -moz-image-region: rect(18px, 702px, 36px, 684px);
1406 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1407 transform: scaleX(-1);
1410 #webide-button[cui-areatype="toolbar"] {
1411 -moz-image-region: rect(0, 738px, 18px, 720px);
1414 #webide-button[cui-areatype="toolbar"]:hover {
1415 -moz-image-region: rect(18px, 738px, 36px, 720px);
1419 fill: currentColor !important;
1422 /* === END toolbarbutton-icons.inc.css === */
1424 /* === BEGIN menupanel.inc.css === */
1426 /* Menu panel and palette styles */
1428 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1429 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1430 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1431 #social-share-button, #open-file-button, #find-button, #developer-button,
1432 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1433 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1434 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1435 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1436 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1437 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1438 #social-share-button, #open-file-button, #find-button, #developer-button,
1439 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1440 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1441 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1442 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1443 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1446 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1447 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1448 #social-share-button, #open-file-button, #find-button, #developer-button,
1449 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1450 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1451 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1452 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1453 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1454 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1455 #social-share-button, #open-file-button, #find-button, #developer-button,
1456 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1457 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1458 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1459 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1460 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1461 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1462 #social-share-button, #open-file-button, #find-button, #developer-button,
1463 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1464 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1465 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1466 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
1467 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1468 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1469 #social-share-button, #open-file-button, #find-button, #developer-button,
1470 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1471 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1472 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1473 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1474 filter: url(chrome://global/skin/filters.svg#fill);
1478 #home-button[cui-areatype="menu-panel"],
1479 toolbarpaletteitem[place="palette"] > #home-button {
1480 -moz-image-region: rect(0px, 128px, 32px, 96px);
1483 #bookmarks-menu-button[cui-areatype="menu-panel"],
1484 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1485 -moz-image-region: rect(0px, 192px, 32px, 160px);
1488 #history-panelmenu[cui-areatype="menu-panel"],
1489 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1490 -moz-image-region: rect(0px, 224px, 32px, 192px);
1493 #downloads-button[cui-areatype="menu-panel"],
1494 toolbarpaletteitem[place="palette"] > #downloads-button {
1495 -moz-image-region: rect(0px, 256px, 32px, 224px);
1498 #add-ons-button[cui-areatype="menu-panel"],
1499 toolbarpaletteitem[place="palette"] > #add-ons-button {
1500 -moz-image-region: rect(0px, 288px, 32px, 256px);
1503 #open-file-button[cui-areatype="menu-panel"],
1504 toolbarpaletteitem[place="palette"] > #open-file-button {
1505 -moz-image-region: rect(0px, 320px, 32px, 288px);
1508 #save-page-button[cui-areatype="menu-panel"],
1509 toolbarpaletteitem[place="palette"] > #save-page-button {
1510 -moz-image-region: rect(0px, 352px, 32px, 320px);
1513 #sync-button[cui-areatype="menu-panel"],
1514 toolbarpaletteitem[place="palette"] > #sync-button {
1515 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1518 #containers-panelmenu[cui-areatype="menu-panel"],
1519 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1520 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1523 #feed-button[cui-areatype="menu-panel"],
1524 toolbarpaletteitem[place="palette"] > #feed-button {
1525 -moz-image-region: rect(0px, 416px, 32px, 384px);
1528 #social-share-button[cui-areatype="menu-panel"],
1529 toolbarpaletteitem[place="palette"] > #social-share-button {
1530 -moz-image-region: rect(0px, 448px, 32px, 416px);
1533 #characterencoding-button[cui-areatype="menu-panel"],
1534 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1535 -moz-image-region: rect(0px, 480px, 32px, 448px);
1538 #new-window-button[cui-areatype="menu-panel"],
1539 toolbarpaletteitem[place="palette"] > #new-window-button {
1540 -moz-image-region: rect(0px, 512px, 32px, 480px);
1543 #e10s-button[cui-areatype="menu-panel"],
1544 toolbarpaletteitem[place="palette"] > #e10s-button {
1545 -moz-image-region: rect(0px, 512px, 32px, 480px);
1548 #new-tab-button[cui-areatype="menu-panel"],
1549 toolbarpaletteitem[place="palette"] > #new-tab-button {
1550 -moz-image-region: rect(0px, 544px, 32px, 512px);
1553 #privatebrowsing-button[cui-areatype="menu-panel"],
1554 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1555 -moz-image-region: rect(0px, 576px, 32px, 544px);
1558 #tabview-button[cui-areatype="menu-panel"],
1559 toolbarpaletteitem[place="palette"] > #tabview-button {
1560 -moz-image-region: rect(0px, 608px, 32px, 576px);
1563 #find-button[cui-areatype="menu-panel"],
1564 toolbarpaletteitem[place="palette"] > #find-button {
1565 -moz-image-region: rect(0px, 640px, 32px, 608px);
1568 #print-button[cui-areatype="menu-panel"],
1569 toolbarpaletteitem[place="palette"] > #print-button {
1570 -moz-image-region: rect(0px, 672px, 32px, 640px);
1573 #fullscreen-button[cui-areatype="menu-panel"],
1574 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1575 -moz-image-region: rect(0px, 704px, 32px, 672px);
1578 #developer-button[cui-areatype="menu-panel"],
1579 toolbarpaletteitem[place="palette"] > #developer-button {
1580 -moz-image-region: rect(0px, 736px, 32px, 704px);
1583 #preferences-button[cui-areatype="menu-panel"],
1584 toolbarpaletteitem[place="palette"] > #preferences-button {
1585 -moz-image-region: rect(0px, 768px, 32px, 736px);
1588 #email-link-button[cui-areatype="menu-panel"],
1589 toolbarpaletteitem[place="palette"] > #email-link-button {
1590 -moz-image-region: rect(0, 800px, 32px, 768px);
1593 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1594 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1595 -moz-image-region: rect(64px, 800px, 96px, 768px);
1598 #sidebar-button[cui-areatype="menu-panel"],
1599 toolbarpaletteitem[place="palette"] > #sidebar-button {
1600 -moz-image-region: rect(0, 864px, 32px, 832px);
1603 #panic-button[cui-areatype="menu-panel"],
1604 toolbarpaletteitem[place="palette"] > #panic-button {
1605 -moz-image-region: rect(0, 896px, 32px, 864px);
1608 #webide-button[cui-areatype="menu-panel"],
1609 toolbarpaletteitem[place="palette"] > #webide-button {
1610 -moz-image-region: rect(0px, 960px, 32px, 928px);
1613 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1614 -moz-image-region: rect(0, 832px, 32px, 800px);
1617 /* Wide panel control icons */
1619 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1620 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1621 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1622 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1623 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1626 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1627 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1628 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1629 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1630 filter: url(chrome://global/skin/filters.svg#fill);
1634 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1635 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1636 -moz-image-region: rect(0px, 32px, 16px, 16px);
1639 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1640 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1641 -moz-image-region: rect(0px, 48px, 16px, 32px);
1644 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1645 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1646 -moz-image-region: rect(0px, 64px, 16px, 48px);
1649 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1650 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1651 -moz-image-region: rect(0px, 80px, 16px, 64px);
1654 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1655 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1656 -moz-image-region: rect(0px, 96px, 16px, 80px);
1659 #add-share-provider {
1660 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1661 -moz-image-region: rect(0px, 96px, 16px, 80px);
1664 /* === END menupanel.inc.css === */
1666 /* ::::: fullscreen window controls ::::: */
1671 -moz-appearance: none;
1673 /* margin: 0 !important;
1674 padding: 6px 12px;*/
1678 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1681 #minimize-button:hover {
1682 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1686 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1689 #restore-button:hover {
1690 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1693 #minimize-button:hover,
1694 #restore-button:hover {
1695 /* background-color: hsla(0, 0%, 0%, .12);*/
1698 #minimize-button:hover:active,
1699 #restore-button:hover:active {
1700 /* background-color: hsla(0, 0%, 0%, .22);*/
1704 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1707 #close-button:hover {
1708 /* background-color: hsl(355, 86%, 49%);*/
1709 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1712 #close-button:hover:active {
1713 /* background-color: hsl(355, 82%, 69%);*/
1716 /* ::::: Location Bar ::::: */
1719 .searchbar-textbox {
1722 margin-inline-start: 3px;
1726 /* make color as light as possible to deal with dark non-domain parts */
1730 #urlbar:-moz-lwtheme,
1731 .searchbar-textbox:-moz-lwtheme {
1732 /* background-color: rgba(255,255,255,.8);
1733 @navbarTextboxCustomBorder@
1737 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1738 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1739 /* background-color: rgba(255,255,255,.9);*/
1742 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1743 .searchbar-textbox:-moz-lwtheme[focused] {
1744 /* background-color: white;*/
1747 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1748 /* border-inline-start: none;
1752 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1753 /* border-top-left-radius: 0;
1754 border-bottom-left-radius: 0; */
1757 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1758 /* border-top-right-radius: 0;
1759 border-bottom-right-radius: 0; */
1762 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1763 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1764 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1767 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1768 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1769 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1770 transform: scaleX(-1);
1773 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1774 -moz-box-direction: reverse;
1777 html|*.urlbar-input:-moz-lwtheme::placeholder,
1778 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1783 -moz-box-orient: horizontal;
1784 -moz-box-align: stretch;
1787 .urlbar-textbox-container {
1788 -moz-box-align: stretch;
1796 #urlbar-display-box {
1797 padding-inline-start: 4px;
1798 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1799 border-inline-end: 1px solid var(--urlbar-separator-color);
1800 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1801 border-image-slice: 1; */
1805 -moz-box-align: center;
1810 /* 16x16 icon with border-box sizing */
1815 /* ::::: URL Bar Zoom Reset Button ::::: */
1817 @keyframes urlbar-zoom-reset-pulse {
1819 transform: scale(0);
1822 transform: scale(1.5);
1825 transform: scale(1.0);
1829 #urlbar-zoom-button {
1830 /* -moz-appearance: none;*/
1831 /* color: inherit;*/
1834 .search-go-container {
1838 .search-go-container > .search-go-button {
1842 #urlbar-search-footer {
1843 border-top: 1px solid var(--panel-separator-color);
1846 #urlbar-search-settings {
1849 #urlbar-search-settings:hover {
1852 #urlbar-search-settings:hover:active {
1855 #urlbar-search-splitter {
1856 /* The splitter width should equal the location and search bars' combined
1857 neighboring margin and border width. */
1862 background: transparent;
1866 border-inline-end: 1px solid #9C9CFF;
1867 margin-inline-end: 3px;
1870 margin-inline-start: 0;
1874 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1876 #PopupAutoCompleteRichResult > 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 /* Opt-in notification */
1885 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
1887 padding-inline-start: 44px;
1888 background-color: #000000;
1889 background-image: url("chrome://browser/skin/info.svg");
1890 background-clip: padding-box;
1891 background-position: 20px center;
1892 background-repeat: no-repeat;
1893 background-size: 16px 16px;
1896 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1897 background-position: right 20px center;
1900 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
1905 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1906 margin-inline-start: 0;
1909 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
1910 -moz-appearance: none;
1915 margin-inline-start: 10px;
1918 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
1921 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
1924 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
1927 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
1932 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
1936 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
1939 background-color: #000000;
1940 border: 1px solid #FFCF00;
1945 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
1946 unicode-bidi: embed;
1949 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
1953 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
1954 transform: scale(0);
1955 animation-name: search-suggestions-hint-grow;
1956 animation-duration: 500ms;
1957 animation-delay: 500ms;
1958 animation-iteration-count: 1;
1959 animation-timing-function: ease-in-out;
1960 animation-fill-mode: forwards;
1963 @keyframes search-suggestions-hint-grow {
1964 0% { transform: scale(0); }
1965 40% { transform: scale(1.5); }
1966 60% { transform: scale(1); }
1967 80% { transform: scale(1.25); }
1968 100% { transform: scale(1); }
1971 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
1972 text-overflow: clip;
1975 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
1979 animation-name: search-suggestions-hint-typing;
1980 animation-duration: 500ms;
1981 animation-delay: 750ms;
1982 animation-iteration-count: 1;
1983 animation-fill-mode: forwards;
1986 @keyframes search-suggestions-hint-typing {
1991 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
1993 animation-duration: 250ms;
1994 animation-delay: 1500ms;
1995 animation-iteration-count: 1;
1996 animation-fill-mode: forwards;
1999 /* Margin-inline-start can't be animated yet */
2000 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
2002 animation-name: search-suggestions-hint-buildin-ltr;
2005 @keyframes search-suggestions-hint-buildin-ltr {
2006 from { margin-left: 160px; opacity: 0; }
2007 to { margin-left: 0; opacity: 1; }
2010 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
2011 /* Should be margin-inline-start but that can't be animated yet */
2012 margin-right: 160px;
2013 animation-name: search-suggestions-hint-buildin-rtl;
2016 @keyframes search-suggestions-hint-buildin-rtl {
2017 from { margin-right: 160px; opacity: 0; }
2018 to { margin-right: 0; opacity: 1; }
2021 #search-suggestions-change-settings {
2023 animation-name: search-suggestions-hint-fadein;
2024 animation-duration: 500ms;
2025 animation-delay: 1800ms;
2026 animation-iteration-count: 1;
2027 animation-fill-mode: forwards;
2030 @keyframes search-suggestions-hint-fadein {
2035 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2038 min-width: calc(54px + 11ch);
2043 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2044 background-color: var(--identity-box-verified-background-color);
2047 #identity-box:-moz-focusring {
2048 outline: 1px dotted;
2049 outline-offset: -1px;
2052 #identity-box.verifiedDomain:-moz-focusring,
2053 #identity-box.verifiedIdentity:-moz-focusring {
2054 outline-color: #000000;
2057 /* Location bar dropmarker */
2059 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2060 background-color: transparent;
2063 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2064 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2065 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2068 transition: opacity 0.15s ease;
2071 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2075 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
2079 .urlbar-history-dropmarker:hover {
2082 .urlbar-history-dropmarker:hover:active,
2083 .urlbar-history-dropmarker[open="true"] {
2086 /* page proxy icon */
2087 /* === BEGIN identity-block.inc.css === */
2094 /* The padding-left and padding-right transitions handle the delayed hiding of
2095 the forward button when hovered. */
2096 transition: background-color 150ms ease, padding-left, padding-right;
2099 #identity-box:-moz-locale-dir(ltr) {
2100 border-top-right-radius: 0;
2101 border-bottom-right-radius: 0;
2104 #identity-box:-moz-locale-dir(rtl) {
2105 border-top-left-radius: 0;
2106 border-bottom-left-radius: 0;
2109 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2110 border-inline-end: 1px solid #008484;
2113 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2117 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2118 border-inline-end: 1px solid #9C9CFF;
2121 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2126 #identity-icon-labels:-moz-locale-dir(ltr) {
2130 #identity-icon-labels:-moz-locale-dir(rtl) {
2134 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2135 /* border-radius: 0;
2136 padding-inline-start: 2px; */
2137 padding-inline-end: 2px;
2138 margin-inline-end: 1px;
2141 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2142 padding-inline-start: 2px;
2145 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2146 /* Forward button hiding is delayed when hovered, so we should use the same
2147 delay for the identity box. We handle both horizontal paddings (for LTR and
2148 RTL), the latter two delays here are for padding-left and padding-right. */
2149 transition-delay: 0s, 100s, 100s;
2152 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2153 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2154 padding-inline-start: 2.01px;
2158 #tracking-protection-icon,
2163 -moz-context-properties: fill;
2167 #identity-icon:-moz-lwtheme,
2168 #tracking-protection-icon:-moz-lwtheme,
2169 #connection-icon:-moz-lwtheme,
2170 #extension-icon:-moz-lwtheme {
2171 /* fill: rgba(0,0,0,.6);*/
2174 /* MAIN IDENTITY ICON */
2179 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2182 #identity-box:hover > #identity-icon:not(.no-hover),
2183 #identity-box[open=true] > #identity-icon {
2184 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2187 #identity-box.grantedPermissions > #identity-icon {
2188 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2191 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2192 #identity-box.grantedPermissions[open=true] > #identity-icon {
2193 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2196 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2197 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2200 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2204 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2205 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
2208 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2209 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2217 margin-inline-start: -16px;
2222 #identity-box[sharing="camera"] > #sharing-icon {
2223 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2226 #identity-box[sharing="microphone"] > #sharing-icon {
2227 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2230 #identity-box[sharing="screen"] > #sharing-icon {
2231 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2235 #identity-box[sharing] > #sharing-icon {
2237 animation-delay: -1.5s;
2240 #identity-box[sharing] > #identity-icon,
2242 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2245 @keyframes identity-box-sharing-icon-pulse {
2246 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2247 0%, 16.66%, 83.33%, 100% {
2255 /* TRACKING PROTECTION ICON */
2257 #tracking-protection-icon {
2258 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
2259 margin-inline-start: 2px;
2260 margin-inline-end: 0;
2263 #tracking-protection-icon[state="loaded-tracking-content"] {
2264 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2267 #tracking-protection-icon[animate] {
2268 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2271 #tracking-protection-icon:not([state]) {
2272 margin-inline-end: -18px;
2273 pointer-events: none;
2275 /* Only animate the shield in, when it disappears hide it immediately. */
2279 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
2280 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2281 visibility: collapse;
2284 /* CONNECTION ICON, EXTENSION ICON */
2290 margin-inline-start: 2px;
2291 visibility: collapse;
2294 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2295 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2296 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2297 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2298 visibility: visible;
2301 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2302 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2303 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2304 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2305 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2306 visibility: visible;
2309 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2310 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2311 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2312 visibility: visible;
2315 #identity-box.extensionPage > #extension-icon {
2316 list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
2317 visibility: visible;
2320 /* REMOTE CONTROL ICON */
2322 #main-window[remotecontrol] #remote-control-icon {
2323 list-style-image: url(chrome://browser/content/robot.ico);
2324 visibility: visible;
2327 margin-inline-start: 2px;
2330 /* === END identity-block.inc.css === */
2332 #page-proxy-favicon {
2333 -moz-image-region: rect(0, 16px, 16px, 0);
2336 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2337 /* margin-inline-end: 1px;*/
2340 #identity-box:hover > #page-proxy-favicon {
2341 -moz-image-region: rect(0, 32px, 16px, 16px);
2344 #identity-box:hover:active > #page-proxy-favicon,
2345 #identity-box[open=true] > #page-proxy-favicon {
2346 -moz-image-region: rect(0, 48px, 16px, 32px);
2349 #identity-box:hover {
2350 background-color: #FFCF00;
2354 #identity-box:hover:active,
2355 #identity-box[open=true] {
2356 background-color: #FF9F00;
2360 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2361 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2362 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2363 background-color: #A09090;
2367 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2369 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2373 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2376 background-color: #008484;
2380 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2381 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2382 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2386 #identity-box:hover > image,
2387 #identity-box:hover:active > image,
2388 #identity-box[open=true] > image {
2389 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2394 /* === BEGIN autocomplete.inc.css === */
2396 #PopupAutoComplete > richlistbox > richlistitem {
2401 padding: 0px 1px 0px 1px;
2404 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2405 margin-inline-start: 4px;
2406 margin-inline-end: 0;
2409 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2411 margin-inline-start: 4px;
2414 #PopupAutoComplete > richlistbox {
2418 /* Login form autocompletion */
2419 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2421 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2424 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2425 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2428 /* Insecure field warning */
2429 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2430 background-color: var(--arrowpanel-dimmed);
2431 border-bottom: 1px solid var(--panel-separator-color);
2432 padding-bottom: 4px;
2436 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2437 background-color: var(--arrowpanel-dimmed-further);
2441 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2446 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2450 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2451 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2454 /* === END autocomplete.inc.css === */
2456 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2457 border-top: 1px solid #A09090;
2460 #treecolAutoCompleteImage {
2465 .autocomplete-richlistbox {
2469 .autocomplete-richlistitem {
2474 border: 1px solid transparent;
2487 border: 1px solid transparent;
2498 html|span.ac-emphasize-text-title,
2499 html|span.ac-emphasize-text-tag,
2500 html|span.ac-emphasize-text-url {
2504 .ac-type-icon[type=bookmark] {
2505 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2508 .ac-type-icon[type=bookmark][selected][current] {
2509 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2512 .ac-result-type-bookmark {
2513 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2514 -moz-image-region: rect(0px 16px 16px 0px);
2519 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2520 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2523 .ac-type-icon[type=keyword],
2524 .ac-site-icon[type=searchengine] {
2525 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2526 context-properties: fill;
2530 .ac-type-icon[type=keyword][selected],
2531 .ac-site-icon[type=searchengine][selected] {
2532 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2533 context-properties: fill;
2537 .ac-result-type-tag {
2538 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2543 .ac-type-icon[type=switchtab],
2544 .ac-type-icon[type=remotetab] {
2545 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2548 .ac-type-icon[type=switchtab][selected],
2549 .ac-type-icon[type=remotetab][selected] {
2550 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2553 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2554 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2560 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2561 border-top: 1px solid #9C9CFF;
2564 /* combined go/reload/stop button in location bar */
2570 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2571 /* margin: 0 9px; */
2572 margin-inline-start: 0px;
2573 border-inline-start: 1px solid var(--urlbar-separator-color);
2574 border-image: linear-gradient(transparent 15%,
2575 var(--urlbar-separator-color) 15%,
2576 var(--urlbar-separator-color) 85%,
2578 border-image-slice: 1;
2581 /* XXX: temporary for Photon preview changes */
2584 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2587 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2588 border-top-left-radius: 0px;
2589 border-bottom-left-radius: 0px;
2592 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2593 border-top-right-radius: 0px;
2594 border-bottom-right-radius: 0px;
2597 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2598 #reload-button:not(:hover) {
2599 border-inline-start-style: none;
2600 padding-inline-start: 3px;
2605 -moz-image-region: rect(0px, 14px, 14px, 0px);
2608 #reload-button[disabled=true],
2609 #reload-button[disabled=true] {
2610 -moz-image-region: rect(28px, 14px, 42px, 0px);
2613 #reload-button:not([disabled=true]):hover,
2614 #reload-button:not([disabled=true]):hover {
2615 -moz-image-region: rect(14px, 14px, 28px, 0px);
2618 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2619 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2620 transform: scaleX(-1);
2624 -moz-image-region: rect(0, 42px, 14px, 28px);
2627 #urlbar-go-button:hover {
2628 -moz-image-region: rect(14px, 42px, 28px, 28px);
2631 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2632 transform: scaleX(-1);
2637 -moz-image-region: rect(0px, 28px, 14px, 14px);
2641 #stop-button:hover {
2642 -moz-image-region: rect(14px, 28px, 28px, 14px);
2645 @media (min-resolution: 1.1dppx) {
2651 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2654 #reload-button > .toolbarbutton-icon,
2655 #stop-button > .toolbarbutton-icon,
2656 #urlbar-go-button > .toolbarbutton-icon,
2657 #reload-button > .toolbarbutton-icon,
2658 #stop-button > .toolbarbutton-icon {
2663 -moz-image-region: rect(0, 84px, 28px, 56px);
2666 #urlbar-go-button:hover {
2667 -moz-image-region: rect(28px, 84px, 56px, 56px);
2670 #urlbar-go-button:hover:active {
2671 -moz-image-region: rect(56px, 84px, 84px, 56px);
2676 -moz-image-region: rect(0, 28px, 28px, 0);
2679 #reload-button:not([disabled]):hover,
2680 #reload-button:not([disabled]):hover {
2681 -moz-image-region: rect(28px, 28px, 56px, 0);
2684 #reload-button:not([disabled]):hover:active,
2685 #reload-button:not([disabled]):hover:active {
2686 -moz-image-region: rect(56px, 28px, 84px, 0);
2691 -moz-image-region: rect(0, 56px, 28px, 28px);
2694 #stop-button:not([disabled]):hover,
2695 #stop-button:not([disabled]):hover {
2696 -moz-image-region: rect(28px, 56px, 56px, 28px);
2699 #stop-button:hover:active,
2700 #stop-button:hover:active {
2701 -moz-image-region: rect(56px, 56px, 84px, 28px);
2705 /* popup blocker button */
2707 #page-report-button {
2708 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2709 -moz-image-region: rect(0, 16px, 16px, 0);
2712 #page-report-button:hover ,
2713 #page-report-button:hover:active,
2714 #page-report-button[open="true"] {
2715 -moz-image-region: rect(0, 32px, 16px, 16px);
2718 /* Reader mode button */
2720 #reader-mode-button {
2721 list-style-image: url("chrome://browser/skin/readerMode.svg");
2722 -moz-image-region: rect(0, 16px, 16px, 0);
2725 #reader-mode-button:hover,
2726 #reader-mode-button[readeractive]:hover {
2727 -moz-image-region: rect(0, 32px, 16px, 16px);
2730 #reader-mode-button:hover:active,
2731 #reader-mode-button[readeractive] {
2732 -moz-image-region: rect(0, 48px, 16px, 32px);
2735 /* social share panel */
2737 /* === BEGIN social.inc.css === */
2739 #manage-share-providers {
2740 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2741 -moz-image-region: rect(0, 468px, 18px, 450px);
2744 #manage-share-providers > .toolbarbutton-icon {
2749 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2752 /* fixup corners for share panel */
2753 .social-panel > .social-panel-frame {
2754 border-radius: inherit;
2757 /* === END social.inc.css === */
2759 .social-panel-frame {
2760 border-radius: inherit;
2763 .social-share-frame {
2770 background-color: white;
2771 background-repeat: no-repeat;
2772 background-position: center center;
2774 #share-container[loading] {
2775 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2777 #share-container > browser {
2778 transition: opacity 150ms ease-in-out;
2781 #share-container[loading] > browser {
2785 .social-share-toolbar {
2786 border-bottom: 1px solid #9C9CFF;
2790 #social-share-provider-buttons {
2795 .share-provider-button {
2800 .share-provider-button > .toolbarbutton-text {
2803 .share-provider-button > .toolbarbutton-icon {
2809 #social-share-panel {
2815 .social-share-frame {
2816 border-top-left-radius: 0;
2817 border-bottom-left-radius: inherit;
2818 border-top-right-radius: 0;
2819 border-bottom-right-radius: inherit;
2822 #social-share-panel > .social-share-toolbar {
2823 border-top-left-radius: inherit;
2824 border-top-right-radius: inherit;
2827 #social-share-provider-buttons {
2828 border-top-left-radius: inherit;
2829 border-top-right-radius: inherit;
2832 /* bookmarks menu-button */
2834 #bookmarks-menu-button.bookmark-item {
2835 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2836 -moz-image-region: rect(0px 16px 16px 0px);
2839 #bookmarks-menu-button.bookmark-item[starred] {
2840 -moz-image-region: rect(0px 32px 16px 16px);
2843 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2845 padding-bottom: 2px;
2848 #BMB_bookmarksPopup[side="top"],
2849 #BMB_bookmarksPopup[side="bottom"] {
2851 margin-right: -20px;
2854 #BMB_bookmarksPopup[side="left"],
2855 #BMB_bookmarksPopup[side="right"] {
2857 margin-bottom: -20px;
2860 /* bookmarking panel */
2862 #editBookmarkPanelStarIcon {
2863 list-style-image: url("chrome://browser/skin/places/starred48.png");
2868 #editBookmarkPanelStarIcon[unstarred] {
2869 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2872 #editBookmarkPanelTitle {
2876 #editBookmarkPanelHeader,
2877 #editBookmarkPanelContent {
2878 margin-bottom: .5em;
2881 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2882 #editBMPanel_folderTree {
2886 /* ::::: content area ::::: */
2888 /* === BEGIN sidebar.inc.css === */
2891 --icon-fill: #FFCF00;
2892 --header-background-color: #9C9CFF;
2893 --header-background-color-hover: #FFCF00;
2894 --title-font-size: 13px;
2896 background-color: #9C9CFF;
2906 margin-inline-start: 0;
2909 #sidebar-splitter:-moz-locale-dir(ltr),
2910 #sidebar:-moz-locale-dir(ltr) {
2911 border-radius: 0 5px 0 0;
2914 #sidebar-splitter:-moz-locale-dir(rtl),
2915 #sidebar:-moz-locale-dir(rtl) {
2916 border-radius: 5px 0 0 0;
2919 #sidebar-throbber[loading="true"] {
2920 list-style-image: url("chrome://global/skin/icons/loading.png");
2923 @media (min-resolution: 2dppx) {
2924 .sidebar-throbber[loading="true"],
2925 #sidebar-throbber[loading="true"] {
2926 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2932 padding-inline-start: 0px;
2938 padding-inline-start: 8px;
2939 padding-inline-end: 4px;
2942 #sidebar-switcher-arrow,
2943 #sidebar-close > .toolbarbutton-icon {
2944 -moz-context-properties: fill;
2949 #sidebar-switcher-arrow {
2950 /* list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2951 list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2956 #sidebar-switcher-arrow:hover {
2957 list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
2960 #sidebar-header > .close-icon {
2961 /* padding: 4px 2px;
2964 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2967 #sidebar-header > .close-icon:hover,
2968 #sidebar-header > .close-icon:hover:active {
2969 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2973 -moz-appearance: none;
2974 list-style-image: url(chrome://browser/skin/sidebar/close.svg);
2980 #sidebar-switcher-target {
2981 -moz-appearance: none;
2983 margin-inline-end: 4px;
2985 border: 1px solid transparent;
2989 #sidebar-switcher-target:hover,
2990 #sidebar-close:hover {
2991 background: hsla(240, 5%, 5%, 0.05);
2994 #sidebar-switcher-target:hover {
2995 border-color: rgba(0, 0, 0, 0.2);
2998 #sidebar-close:hover:active,
2999 #sidebar-switcher-target:hover:active,
3000 #sidebar-switcher-target.active {
3001 background: hsla(240, 5%, 5%, 0.1);
3004 #sidebar-switcher-target:hover:active,
3005 #sidebar-switcher-target.active {
3006 border-color: rgba(0, 0, 0, 0.25);
3009 #sidebarMenu-popup .subviewbutton {
3013 #sidebar-extensions:empty + toolbarseparator {
3017 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
3018 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
3019 padding-inline-start: 16px;
3021 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
3022 padding-inline-start: 0;
3025 #sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3026 list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
3029 #sidebar-switcher-bookmarks > .toolbarbutton-icon,
3030 #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3031 /* list-style-image: url(chrome://browser/skin/bookmark.svg);
3032 -moz-context-properties: fill;
3035 list-style-image: url(chrome://browser/skin/places/bookmark.png);
3036 -moz-image-region: rect(0px 16px 16px 0px);
3039 #sidebar-switcher-history > .toolbarbutton-icon,
3040 #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3041 /* list-style-image: url(chrome://browser/skin/history.svg);
3042 -moz-context-properties: fill;
3045 list-style-image: url(chrome://browser/skin/places/history.png);
3048 #sidebar-switcher-tabs > .toolbarbutton-icon,
3049 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3050 /* list-style-image: url(chrome://browser/skin/synced-tabs.svg);
3051 -moz-context-properties: fill;
3054 list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
3057 /* === END sidebar.inc.css === */
3060 background-color: #000000;
3063 .browserContainer > findbar {
3065 background-color: -moz-dialog;
3066 color: -moz-DialogText;
3075 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
3078 #TabsToolbar .toolbar-holder {
3079 background-color: #000000; /* correct effect of being an actual toolbar */
3082 #main-window[disablechrome] #TabsToolbar,
3083 #TabsToolbar[tabsontop="false"] {
3084 border-bottom: 1px solid #008484;
3087 /* === BEGIN tabs.inc.css === */
3090 /* --tab-toolbar-navbar-overlap: 1px; */
3091 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
3092 /* --tab-min-height: 31px; */
3095 /* --tab-stroke-background-size: auto 100%; */
3099 .tabs-newtab-button,
3100 #TabsToolbar > #new-tab-button {
3105 padding: 1px 4px 2px;
3108 .tabbrowser-tab:first-of-type {
3109 margin-inline-start: 2px;
3112 .tabs-newtab-button,
3113 #TabsToolbar > #new-tab-button,
3114 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3115 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3116 border-radius: 8px 8px 0px 0px;
3117 margin-inline-start: 0;
3120 .tabs-newtab-button:not(:hover),
3121 #TabsToolbar > #new-tab-button:not(:hover),
3122 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3123 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3124 background-color: #C09070;
3127 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3128 .tabbrowser-tab[visuallyselected=true] {
3129 /* position: relative;
3133 .tab-background-middle {
3139 .tab-content[pinned] {
3144 .tab-sharing-icon-overlay,
3150 .tab-sharing-icon-overlay,
3154 margin-inline-end: 3px;
3158 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3161 .tab-icon-image[sharing]:not([selected]),
3162 .tab-sharing-icon-overlay {
3163 animation: 3s linear tab-sharing-icon-pulse infinite;
3166 @keyframes tab-sharing-icon-pulse {
3167 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3168 0%, 16.66%, 83.33%, 100% {
3176 .tab-icon-image[sharing]:not([selected]) {
3177 animation-delay: -1.5s;
3180 .tab-sharing-icon-overlay {
3181 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3182 margin-inline-start: -22px;
3186 .tab-sharing-icon-overlay[sharing="camera"] {
3187 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
3190 .tab-sharing-icon-overlay[sharing="microphone"] {
3191 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3194 .tab-sharing-icon-overlay[sharing="screen"] {
3195 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
3202 margin-inline-start: -15px;
3203 margin-inline-end: -1px;
3207 .tab-icon-overlay[crashed] {
3208 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
3211 .tab-icon-overlay[soundplaying],
3212 .tab-icon-overlay[muted]:not([crashed]),
3213 .tab-icon-overlay[blocked]:not([crashed]) {
3214 border-radius: 10px;
3217 .tab-icon-overlay[soundplaying]:hover,
3218 .tab-icon-overlay[muted]:hover,
3219 .tab-icon-overlay[blocked]:not([crashed]):hover {
3220 background-color: #FFCF00;
3223 .tab-icon-overlay[soundplaying] {
3224 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
3227 .tab-icon-overlay[muted]:not([crashed]) {
3228 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
3231 .tab-icon-overlay[blocked]:not([crashed]) {
3232 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
3235 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
3236 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
3237 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
3240 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
3241 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
3242 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
3245 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
3246 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
3247 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
3250 .tab-throbber[busy] {
3251 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
3254 .tab-throbber[progress] {
3255 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
3258 @media (min-resolution: 1.1dppx) {
3259 .tab-throbber[busy] {
3260 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
3263 .tab-throbber[progress] {
3264 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3268 .tab-throbber[pinned],
3269 .tab-icon-image[pinned] {
3270 margin-inline-start: 2px;
3271 margin-inline-end: 2px;
3275 /* this needs to add up to the 16px of the icon image */
3277 margin-top: 2px !important;
3278 margin-bottom: 2px !important;
3282 margin-inline-start: 4px;
3288 .tab-icon-sound[soundplaying],
3289 .tab-icon-sound[muted],
3290 .tab-icon-sound[blocked] {
3291 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3292 filter: url(chrome://global/skin/filters.svg#fill);
3296 .tab-icon-sound[muted] {
3297 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3300 .tab-icon-sound[blocked] {
3301 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3309 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3310 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3311 transition: opacity .3s linear var(--soundplaying-removal-delay);
3316 .tabs-newtab-button {
3317 /* overlap the tab curves */
3320 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3324 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3325 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3328 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3329 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3332 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3335 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3338 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3339 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3342 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3343 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3346 .tab-background-start[selected=true]::after,
3347 .tab-background-start[selected=true]::before,
3348 .tab-background-start,
3349 .tab-background-end,
3350 .tab-background-end[selected=true]::after,
3351 .tab-background-end[selected=true]::before {
3354 .tabbrowser-tab:not([visuallyselected=true]),
3355 .tabbrowser-tab:-moz-lwtheme {
3358 /* tabbrowser-tab focus ring */
3359 .tabbrowser-tab:focus {
3360 outline: 1px dotted;
3365 .tabbrowser-tab[visuallyselected="true"] {
3368 /* End selected tab */
3370 /* Tab pointer-events */
3373 pointer-events: none;
3376 .tab-background-middle,
3377 .tabs-newtab-button,
3378 .tab-icon-overlay[soundplaying],
3379 .tab-icon-overlay[muted]:not([crashed]),
3380 .tab-icon-overlay[blocked]:not([crashed]),
3383 pointer-events: auto;
3389 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3390 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3392 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3393 background-color: #E7ADE7;
3396 .tab-label[attention]:not([selected="true"]) {
3400 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3401 background-color: #3333FF;
3405 /* Tab separators */
3407 .tabbrowser-tab::after,
3408 .tabbrowser-tab::before {
3410 margin-inline-start: -1px;
3411 background-image: linear-gradient(transparent 5px,
3413 currentColor calc(100% - 4px),
3414 transparent calc(100% - 4px));
3418 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3419 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3423 /* Also show separators beside the selected tab when dragging it. */
3425 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3426 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3427 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3432 /* New tab button */
3434 .tabs-newtab-button {
3436 /* width: calc(36px + var(--tab-curve-width)); */
3438 @media (min-resolution: 1.1dppx) {
3439 /* image preloading hack from like lowdpi styles */
3440 #tabbrowser-tabs::before {
3443 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3444 .tabs-newtab-button:hover {
3447 .tab-background-middle[selected=true] {
3450 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3451 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3454 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3455 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3459 /* All tabs menupopup */
3461 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3462 background-color: #402800;
3465 .alltabs-endimage[soundplaying],
3466 .alltabs-endimage[muted],
3467 .alltabs-endimage[blocked] {
3468 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3469 filter: url(chrome://global/skin/filters.svg#fill);
3473 .alltabs-endimage[muted] {
3474 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3477 .alltabs-endimage[blocked] {
3478 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3481 /* === END tabs.inc.css === */
3483 /* Tab DnD indicator */
3484 .tab-drop-indicator {
3485 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3486 margin-bottom: -11px;
3489 /* Tab close button */
3491 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3492 -moz-image-region: auto !important;
3495 .tab-close-button:hover,
3496 .tab-close-button:hover[selected="true"] {
3497 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3498 -moz-image-region: auto !important;
3501 .tab-close-button:hover:active,
3502 .tab-close-button:hover:active[selected="true"] {
3503 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3504 -moz-image-region: auto !important;
3507 .tab-close-button > .button-icon,
3508 .tab-close-button > .button-box > .button-icon,
3509 .tab-close-button > .toolbarbutton-icon {
3510 width: auto !important;
3514 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3516 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3517 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3521 background-origin: border-box;
3524 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3525 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3526 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3527 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3530 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3531 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3534 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3535 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3536 /* transform: scaleX(-1);*/
3539 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3540 transition: 1s background-color ease-out;
3543 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3544 background-color: #008484;
3547 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3548 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3549 /* border-width: 0 2px 0 0;
3550 border-style: solid;
3551 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3554 .tabs-newtab-button > .toolbarbutton-icon {
3556 margin-bottom: -1px;
3559 .tabs-newtab-button,
3560 #TabsToolbar > #new-tab-button,
3561 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3562 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3563 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3564 -moz-image-region: auto;
3567 .tabs-newtab-button,
3568 .tabs-newtab-button:hover,
3569 #TabsToolbar > #new-tab-button,
3570 #TabsToolbar > #new-tab-button:hover {
3573 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3574 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3575 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3576 .tabs-newtab-button:-moz-lwtheme-brighttext,
3577 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3578 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3581 #TabsToolbar > #new-tab-button {
3583 -moz-box-orient: horizontal;
3587 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3590 #alltabs-button:hover,
3591 #alltabs-button:hover:active,
3592 #alltabs-button[open="true"] {
3593 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3596 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3597 #alltabs-button:-moz-lwtheme-brighttext {
3600 #alltabs-button > .toolbarbutton-icon {
3604 #alltabs-button > .toolbarbutton-menu-dropmarker {
3608 /* All tabs menupopup */
3609 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3610 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3611 -moz-image-region: auto;
3614 .alltabs-item[selected="true"] {
3618 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3619 list-style-image: url("chrome://global/skin/icons/loading.png");
3622 @media (min-resolution: 1.1dppx) {
3623 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3624 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3628 toolbarbutton.chevron {
3629 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3632 toolbarbutton.chevron:hover {
3633 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3636 toolbar[brighttext] toolbarbutton.chevron {
3637 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3640 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3641 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3642 transform: scaleX(-1);
3645 toolbarbutton.chevron > .toolbarbutton-text,
3646 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3650 toolbarbutton.chevron > .toolbarbutton-icon {
3654 #sidebar-throbber[loading="true"] {
3655 list-style-image: url("chrome://global/skin/icons/loading.png");
3656 margin-inline-end: 4px;
3659 @media (min-resolution: 1.1dppx) {
3660 #sidebar-throbber[loading="true"] {
3661 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3666 /* Bookmarks toolbar */
3667 #PlacesToolbarDropIndicator {
3668 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3671 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3672 background-color: #008484 !important;
3673 color: #FFCF00 !important;
3676 /* rules for menupopup drop indicators */
3677 .menupopup-drop-indicator-bar {
3679 /* these two margins must together compensate the indicator's height */
3681 margin-bottom: -1px;
3684 .menupopup-drop-indicator {
3685 list-style-image: none;
3687 margin-inline-end: -4em;
3688 background-color: #008484;
3691 /* === BEGIN notification-icons.inc.css === */
3693 #notification-popup-box {
3694 border-radius: 3px 0 0 3px;
3697 margin-inline-end: -5px;
3698 padding-inline-end: 5px;
3701 .notification-anchor-icon,
3702 #blocked-permissions-container > .blocked-permission-icon {
3705 margin-inline-start: 2px;
3708 /* This class can be used alone or in combination with the class defining the
3709 type of icon displayed. This rule must be defined before the others in order
3710 for its list-style-image to be overridden. */
3711 .notification-anchor-icon {
3712 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3715 .notification-anchor-icon:-moz-focusring {
3716 outline: 1px dotted #008484;
3719 @media (min-resolution: 1.1dppx) {
3720 .notification-anchor-icon {
3721 list-style-image: url(chrome://global/skin/icons/info.svg);
3725 .notification-anchor-icon:not(.plugin-blocked),
3726 #blocked-permissions-container > .blocked-permission-icon {
3727 filter: url(chrome://global/skin/filters.svg#fill);
3731 /* INDIVIDUAL NOTIFICATIONS */
3733 .focus-tab-by-prompt-icon {
3734 list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
3737 .popup-notification-icon[popupid="persistent-storage"],
3738 .persistent-storage-icon {
3739 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
3742 .persistent-storage-icon.blocked-permission-icon {
3743 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
3746 .popup-notification-icon[popupid="web-notifications"],
3747 .desktop-notification-icon {
3748 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3751 .desktop-notification-icon.blocked-permission-icon {
3752 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3756 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3759 .geo-icon.blocked-permission-icon {
3760 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3763 .popup-notification-icon[popupid="geolocation"] {
3764 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3767 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3769 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3772 .indexedDB-icon.blocked-permission-icon {
3773 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3777 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3780 .popup-notification-icon[popupid="password"] {
3781 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3785 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3788 .camera-icon.in-use {
3789 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3792 .camera-icon.blocked-permission-icon {
3793 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3797 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3800 .microphone-icon.in-use {
3801 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3804 .microphone-icon.blocked-permission-icon {
3805 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3808 .popup-notification-icon.microphone-icon {
3809 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3813 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3816 .screen-icon.in-use {
3817 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3820 .screen-icon.blocked-permission-icon {
3821 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3824 #webRTC-preview:not([hidden]) {
3825 display: -moz-stack;
3827 border: 1px solid #A09090;
3833 html|*#webRTC-previewVideo {
3835 /* If we don't set the min-width, width is ignored. */
3840 #webRTC-previewWarning {
3841 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3844 padding-inline-start: calc(1.5em + 16px);
3845 border-top: 1px solid #A09090;
3848 #webRTC-previewWarning > .text-link {
3849 margin-inline-start: 0;
3852 /* This icon has a block sign in it, so we don't need a blocked version. */
3854 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3859 .popup-notification-icon[popupid="drmContentPlaying"],
3861 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3864 .drm-icon:hover:active {
3865 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3868 #eme-notification-icon[firstplay=true] {
3869 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3872 @keyframes emeTeachingMoment {
3873 0% {transform: translateX(0); }
3874 25% {transform: translateX(3px) }
3875 75% {transform: translateX(-3px) }
3876 100% { transform: translateX(0); }
3879 /* INSTALL ADDONS */
3882 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3885 .popup-notification-icon[popupid="xpinstall-disabled"],
3886 .popup-notification-icon[popupid="addon-install-blocked"],
3887 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3888 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3891 .popup-notification-icon[popupid="addon-progress"] {
3892 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3895 .popup-notification-icon[popupid="addon-install-failed"] {
3896 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3899 .popup-notification-icon[popupid="addon-install-confirmation"] {
3900 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3903 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3904 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3907 .popup-notification-icon[popupid="addon-install-complete"] {
3908 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3911 .popup-notification-icon[popupid="addon-install-restart"] {
3912 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3915 .popup-notification-icon[popupid="click-to-play-plugins"] {
3916 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3921 .popup-notification-icon[popupid*="offline-app-requested"],
3922 .popup-notification-icon[popupid="offline-app-usage"] {
3923 list-style-image: url(chrome://global/skin/icons/question-64.png);
3929 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3932 .plugin-icon.plugin-blocked {
3933 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3936 #notification-popup-box[hidden] {
3937 /* Override display:none to make the pluginBlockedNotification animation work
3938 when showing the notification repeatedly. */
3940 visibility: collapse;
3943 #plugins-notification-icon.plugin-blocked[showing] {
3944 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3947 @keyframes pluginBlockedNotification {
3958 .popup-notification-icon[popupid="servicesInstall"] {
3959 list-style-image: url(chrome://browser/skin/social/services-64.png);
3963 list-style-image: url(chrome://browser/skin/social/services-16.png);
3969 list-style-image: url(chrome://browser/skin/translation-16.png);
3970 -moz-image-region: rect(0px, 16px, 16px, 0px);
3973 .translation-icon.in-use {
3974 -moz-image-region: rect(0px, 32px, 16px, 16px);
3979 .popup-notification-icon[popupid="update-available"],
3980 .popup-notification-icon[popupid="update-manual"],
3981 .popup-notification-icon[popupid="update-restart"] {
3982 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
3986 /* === END notification-icons.inc.css === */
3988 .popup-notification-body[popupid="addon-progress"],
3989 .popup-notification-body[popupid="addon-install-confirmation"] {
3994 .addon-install-confirmation-name {
3998 html|*.addon-webext-perm-list {
3999 margin-block-end: 0;
4000 padding-inline-start: 10px;
4003 .addon-webext-perm-text {
4004 margin-inline-start: 0;
4007 .popup-notification-description[popupid="addon-webext-permissions"] {
4012 .addon-webext-name {
4021 list-style-image: url("chrome://browser/skin/menuPanel.svg");
4022 -moz-image-region: rect(0px, 288px, 32px, 256px);
4025 .addon-toolbar-icon {
4028 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4029 -moz-image-region: rect(0, 486px, 18px, 468px);
4032 /* Notification icon box */
4034 .notification-anchor-icon:-moz-focusring {
4035 /* outline: 1px dotted -moz-DialogText;*/
4038 /* Translation infobar */
4040 /* === BEGIN infobar.inc.css === */
4042 notification[value="translation"] .messageImage {
4043 list-style-image: url("chrome://browser/skin/translation-16.png");
4044 -moz-image-region: rect(0, 32px, 16px, 16px);
4047 @media (min-resolution: 1.25dppx) {
4048 notification[value="translation"] .messageImage {
4049 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4050 -moz-image-region: rect(0, 64px, 32px, 32px);
4054 notification[value="translation"][state="translating"] .messageImage {
4055 list-style-image: url("chrome://browser/skin/translating-16.png");
4056 -moz-image-region: auto;
4059 @media (min-resolution: 1.25dppx) {
4060 notification[value="translation"][state="translating"] .messageImage {
4061 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4065 notification[value="translation"] hbox[anonid="details"] {
4069 notification[value="translation"] button,
4070 notification[value="translation"] menulist {
4074 notification[value="translation"] menulist > .menulist-dropmarker {
4077 .translation-menupopup arrowscrollbox {
4081 .translation-attribution {
4083 -moz-box-align: end;
4087 .translation-attribution > label {
4091 .translation-attribution > image {
4095 .translation-welcome-panel {
4099 .translation-welcome-logo {
4102 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4103 -moz-image-region: rect(0, 64px, 32px, 32px);
4106 .translation-welcome-content {
4107 margin-inline-start: 16px;
4110 .translation-welcome-headline {
4115 .translation-welcome-body {
4120 /* === END infobar.inc.css === */
4122 notification[value="translation"] {
4126 .translation-menupopup {
4127 -moz-appearance: none;
4130 /* Bookmarks roots menu-items */
4131 #subscribeToPageMenuitem:not([disabled]),
4132 #subscribeToPageMenupopup {
4133 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4136 #bookmarksToolbarFolderMenu,
4137 #BMB_bookmarksToolbar,
4138 #panelMenu_bookmarksToolbar {
4139 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4140 -moz-image-region: auto;
4143 #BMB_unsortedBookmarks,
4144 #panelMenu_unsortedBookmarks {
4145 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4146 -moz-image-region: auto;
4151 .statuspanel-label {
4154 background: #404000;
4155 border: 1px none #9C9CFF;
4156 border-top-style: solid;
4161 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4162 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4163 border-right-style: solid;
4164 border-top-right-radius: .3em;
4168 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4169 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4170 border-left-style: solid;
4171 border-top-left-radius: .3em;
4175 /* HACK to abolish devily color on main content */
4178 background-color: transparent !important;
4181 /* === BEGIN fullscreen/warning.inc.css === */
4183 html|*.pointerlockfswarning {
4184 align-items: center;
4185 background: rgba(0, 0, 0, 0.9);
4186 border: 2px solid #A09090;
4187 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4190 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4193 html|*.pointerlockfswarning::before {
4195 width: 24px; height: 24px;
4198 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4199 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4200 content: url("chrome://browser/skin/fullscreen/secure.svg");
4203 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4204 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4206 html|*.pointerlockfswarning-domain-text,
4207 html|*.pointerlockfswarning-generic-text {
4209 font-weight: lighter;
4214 html|*.pointerlockfswarning-domain {
4219 html|*#fullscreen-exit-button,
4220 html|*.pointerlockfswarning-exit-button {
4223 border-radius: 300px;
4225 background-color: #C09070;
4229 /* === END fullscreen/warning.inc.css === */
4231 /* === BEGIN ctrlTab.inc.css === */
4236 -moz-appearance: none;
4237 background: rgba(0%,0%,0%,.7);
4240 padding: 20px 10px 10px;
4244 .ctrlTab-favicon[src] {
4245 background-color: #000000;
4251 .ctrlTab-preview-inner > .tabPreview-canvas {
4252 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4255 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4259 .ctrlTab-preview-inner {
4261 border: 2px solid transparent;
4262 border-radius: .5em;
4265 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4266 margin: -10px -10px 0;
4269 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4270 background-color: #000000;
4273 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4275 background-color: #000000;
4277 border-color: #9C9CFF;
4284 /* === END ctrlTab.inc.css === */
4286 /* === including indicator.css is done at the start of the file === */
4290 #developer-toolbar-toolbox-button[error-count]:before {
4294 background-color: #FF0000;
4296 margin-inline-end: 5px;
4299 /* === BEGIN plugin-doorhanger.inc.css === */
4302 * Plugin Doorhanger Styles
4305 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4306 padding: 6px 1px 2px;
4309 .click-to-play-plugins-notification-center-box {
4312 .plugin-popupnotification-centeritem:nth-child(odd) {
4313 /* background-color: rgba(0,0,0,0.1);*/
4316 .center-item-label {
4318 text-overflow: ellipsis;
4321 .center-item-warning-icon {
4322 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4323 background-repeat: no-repeat;
4326 margin-inline-start: 6px;
4329 .click-to-play-plugins-notification-button-container {
4332 .click-to-play-popup-button {
4336 .click-to-play-plugins-notification-description-box {
4340 padding-bottom: 3px;
4343 .click-to-play-plugins-outer-description {
4347 .click-to-play-plugins-notification-link,
4352 .messageImage[value="plugin-hidden"] {
4353 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4356 /* Keep any changes to this style in sync with pluginProblem.css */
4357 notification.pluginVulnerable {
4360 notification.pluginVulnerable .messageImage {
4361 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4364 /* === END plugin-doorhanger.inc.css === */
4366 /* === BEGIN customizeMode.inc.css === */
4368 /* Customization mode */
4371 --drag-drop-transition-duration: .3s;
4374 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4375 background-repeat: no-repeat;
4376 background-position: right top;
4377 background-attachment: fixed;
4378 background-color: transparent;
4379 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4380 var(--toolbox-rect-height), 0),
4381 linear-gradient(to bottom,
4382 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4383 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4384 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4385 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4386 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4387 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4390 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4394 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4395 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4396 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4401 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4402 pointer-events: none;
4405 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4406 #PanelUI-contents > .panel-customization-placeholder {
4407 -moz-outline-radius: 2.5px;
4408 outline: 1px dashed transparent;
4411 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4412 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4413 -moz-box-ordinal-group: 0;
4418 outline-offset: -2px;
4419 pointer-events: none;
4425 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4426 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4427 offset from the bottom effectively the same as other targets (-2px). */
4428 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4432 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4433 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4434 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4435 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4439 /* Most target outlines are shown on hover and drag over but the panel menu uses
4440 placeholders instead. */
4441 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4442 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4443 /* nav-bar and panel outlines are always shown */
4444 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4445 outline-color: currentColor;
4448 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4449 transition: outline-color 250ms linear;
4452 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4453 transition: outline-color 250ms linear;
4454 outline-color: var(--panel-separator-color);
4457 #PanelUI-contents > .panel-customization-placeholder {
4459 outline-offset: -5px;
4462 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4464 /* padding-left: 10px;
4465 padding-right: 10px;*/
4468 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4472 #customization-container {
4473 background-color: #000000;
4477 #customization-palette,
4478 #customization-empty {
4479 padding: 0 15px 15px;
4482 #customization-header {
4484 line-height: 1.75em;
4487 margin: 25px 25px 12px;
4488 padding-bottom: 12px;
4489 border-bottom: 1px solid #A09090;
4492 #customization-panel-container {
4493 padding: 10px 10px 0px;
4496 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4497 #customization-footer {
4498 /*background-color: rgb(236,236,236);*/
4501 #customization-footer {
4502 border-top: 1px solid #9C9CFF;
4506 .customizationmode-button {
4510 .customizationmode-button:hover {
4513 .customizationmode-button > .box-inherit {
4516 .customizationmode-button > .button-icon {
4519 .customizationmode-button:not([type=menu]) > .button-text {
4522 .customizationmode-button > .button-menu-dropmarker {
4527 .customizationmode-button[checked] {
4528 background-color: #008484;
4531 .customizationmode-button[checked]:hover:not([disabled]),
4532 .customizationmode-button:hover:not([disabled]) {
4533 background-color: #FFCF00;
4536 .customizationmode-button[checked]:hover:active:not([disabled]),
4537 .customizationmode-button:hover:active:not([disabled]),
4538 .customizationmode-button[open] {
4539 background-color: #FF9F00;
4542 .customizationmode-button[disabled="true"] {
4545 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4546 .customizationmode-button > .button-box > .button-icon {
4550 #customization-titlebar-visibility-button {
4551 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4552 -moz-image-region: rect(0, 16px, 16px, 0);
4555 #customization-titlebar-visibility-button:hover {
4556 -moz-image-region: rect(16px, 16px, 32px, 0);
4559 #customization-titlebar-visibility-button > .button-box {
4561 padding-bottom: 1px;
4564 #customization-titlebar-visibility-button:hover:active > .button-box {
4569 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4570 #customization-titlebar-visibility-button > .button-box > .button-text {
4571 /* Sadly, button.css thinks its margins are perfect for everyone. */
4572 margin-inline-start: 5px !important;
4575 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4579 background-image: url("chrome://browser/content/default-theme-icon.svg");
4580 background-size: contain;
4583 #customization-titlebar-visibility-button > .button-box > .button-icon {
4584 vertical-align: middle;
4587 #customization-titlebar-visibility-button[checked] {
4588 -moz-image-region: rect(0, 32px, 16px, 16px);
4589 background-color: #008484;
4592 #customization-titlebar-visibility-button[checked]:hover {
4593 -moz-image-region: rect(16px, 32px, 32px, 16px);
4594 background-color: #FFCF00;
4597 #customization-titlebar-visibility-button[checked]:hover:active {
4598 background-color: #FF9F00;
4601 @media (min-resolution: 1.1dppx) {
4602 #customization-titlebar-visibility-button {
4603 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4604 -moz-image-region: rect(0, 48px, 48px, 0);
4607 #customization-titlebar-visibility-button:hover {
4608 -moz-image-region: rect(48px, 48px, 96px, 0);
4611 #customization-titlebar-visibility-button[checked] {
4612 -moz-image-region: rect(0, 96px, 48px, 48px);
4615 #customization-titlebar-visibility-button[checked]:hover {
4616 -moz-image-region: rect(48px, 96px, 96px, 48px);
4620 #main-window[customize-entered] #customization-panel-container {
4621 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4622 background-position: left top;
4623 background-repeat: repeat;
4624 background-size: auto;
4625 background-attachment: fixed;
4628 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4629 toolbarpaletteitem[place="toolbar"] {
4630 transition: border-width 250ms ease-in-out;
4633 toolbarpaletteitem[mousedown] {
4634 outline: 1px solid #008484;
4635 cursor: -moz-grabbing;
4639 .panel-customization-placeholder,
4640 toolbarpaletteitem[place="palette"],
4641 toolbarpaletteitem[place="panel"] {
4642 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4645 #customization-palette {
4646 transition: opacity .3s ease-in-out;
4650 #customization-palette[showing="true"] {
4654 toolbarpaletteitem toolbarbutton[disabled] {
4655 /* color: inherit !important;*/
4658 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4659 toolbarpaletteitem[notransition].panel-customization-placeholder,
4660 toolbarpaletteitem[notransition][place="toolbar"],
4661 toolbarpaletteitem[notransition][place="palette"],
4662 toolbarpaletteitem[notransition][place="panel"] {
4666 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4667 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4668 toolbarpaletteitem > toolbaritem.panel-wide-item,
4669 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4670 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4673 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4674 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4675 transform: scale(1.3);
4678 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4679 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4680 transform: scale(1.1);
4683 /* Override the toolkit styling for items being dragged over. */
4684 toolbarpaletteitem[place="toolbar"] {
4685 border-left-width: 0;
4686 border-right-width: 0;
4691 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4692 border-top: 0px solid transparent;
4693 border-bottom: 0px solid transparent;
4696 #customization-palette:not([hidden]) {
4697 margin-bottom: 25px;
4700 toolbarpaletteitem[place="palette"]:-moz-focusring,
4701 toolbarpaletteitem[place="panel"]:-moz-focusring,
4702 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4706 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4707 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4708 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4709 /* Delay adding the focusring back until after the transform transition completes. */
4710 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4711 outline: 1px dotted;
4712 -moz-outline-radius: 2.5px;
4715 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4716 outline-offset: -5px;
4719 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4720 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4721 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4722 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4726 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4727 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4737 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4738 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4742 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4743 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4746 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4747 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4751 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4752 -moz-box-pack: center;
4756 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4757 margin-inline-end: 5px;
4760 #customization-palette > toolbarpaletteitem > label {
4766 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4767 -moz-box-orient: vertical;
4768 /* Make the panel padding uniform across all platforms due to the
4769 styling of the section headers and footer. */
4773 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4778 .customization-lwtheme-menu-theme {
4779 -moz-appearance: none;
4782 padding-inline-end: 5px;
4784 padding-inline-start: 0;
4787 .customization-lwtheme-menu-theme[defaulttheme] {
4788 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4791 .customization-lwtheme-menu-theme[active="true"] {
4792 background-color: #008484;
4795 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4799 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4803 #customization-lwtheme-menu-header,
4804 #customization-lwtheme-menu-recommended {
4809 #customization-lwtheme-menu-header,
4810 #customization-lwtheme-menu-recommended,
4811 #customization-lwtheme-menu-footer {
4812 background-color: #A09090;
4814 margin-right: -10px;
4818 #customization-lwtheme-menu-header {
4820 border-top-right-radius: 3px;
4821 border-top-left-radius: 3px;
4824 #customization-lwtheme-menu-recommended {
4827 #customization-lwtheme-menu-footer {
4828 margin-bottom: -10px;
4829 border-bottom-right-radius: 3px;
4830 border-bottom-left-radius: 3px;
4833 .customization-lwtheme-menu-footeritem {
4834 -moz-appearance: none;
4836 background-color: #C09070;
4838 border: 1px solid transparent;
4844 .customization-lwtheme-menu-footeritem:hover {
4845 background-color: #FFCF00;
4848 .customization-lwtheme-menu-footeritem:first-child {
4851 /* === END customizeMode.inc.css === */
4853 /* === BEGIN customizeTip.inc.css === */
4855 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4862 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4863 border: 1px solid #9C9CFF;
4867 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4868 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4871 .customization-tipPanel-infoBox {
4872 margin: 20px 25px 25px;
4874 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4875 background-repeat: no-repeat;
4878 .customization-tipPanel-content {
4884 .customization-tipPanel-em {
4889 .customization-tipPanel-contentImage {
4891 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4899 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4900 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4903 .customization-tipPanel-link {
4904 -moz-appearance: none;
4905 background: transparent;
4913 .customization-tipPanel-link > .button-box > .button-text {
4914 margin: 0 !important;
4917 .customization-tipPanel-closeBox > .close-icon {
4918 -moz-appearance: none;
4920 margin-inline-end: -25px;
4923 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4924 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4925 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4928 /* === END customizeTip.inc.css === */
4931 * This next rule is a hack to disable subpixel anti-aliasing on all
4932 * labels during the customize mode transition. Subpixel anti-aliasing
4933 * on Windows with Direct2D layers acceleration is particularly slow to
4934 * paint, so this hack is how we sidestep that performance bottleneck.
4936 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4937 transform: perspective(0.01px);
4940 #main-window[customize-entered] > #tab-view-deck {
4941 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4942 background-attachment: fixed;
4945 #main-window[customization-lwtheme]:-moz-lwtheme {
4946 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4947 background-repeat: repeat;
4948 background-attachment: fixed;
4949 background-position: left top;
4952 #main-window[customize-entered] #browser-bottombox,
4953 #main-window[customize-entered] #customization-container {
4954 border-left: 1px solid #9C9CFF;
4955 border-right: 1px solid #9C9CFF;
4956 background-clip: padding-box;
4959 #main-window[customize-entered] #browser-bottombox {
4960 border-bottom: 1px solid #9C9CFF;
4963 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4967 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4971 /* End customization mode */
4973 /* Private browsing indicators */
4976 * Currently, we have two places where we put private browsing indicators on
4977 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4978 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4979 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4980 * want the bottom border of the image to line up with the bottom of the window
4981 * caption buttons. That's why there's so much special-casing going on in here.
4983 .private-browsing-indicator {
4985 pointer-events: none;
4988 #private-browsing-indicator-titlebar {
4993 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4997 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5001 #TabsToolbar > .private-browsing-indicator {
5002 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5003 margin-inline-start: 4px;
5007 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5008 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5009 * min/max/close window buttons.
5011 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5012 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5013 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5014 margin-inline-end: 4px;
5020 /* This one is for Linux */
5021 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5022 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5026 /* End private browsing indicators */
5028 /* === BEGIN UITour.inc.css === */
5032 #UITourHighlightContainer {
5033 -moz-appearance: none;
5035 background-color: transparent;
5036 /* This is a buffer to compensate for the movement in the "wobble" effect,
5037 and for the box-shadow of #UITourHighlight. */
5042 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5043 border-radius: 40px;
5044 border: 1px solid #9C9CFF;
5045 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5046 on Linux without an X compositor where opacity is either 0 or 1. */
5047 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5052 #UITourTooltipBody {
5053 -moz-box-align: start;
5056 #UITourTooltipTitleContainer {
5057 -moz-box-align: start;
5058 margin-bottom: 10px;
5061 #UITourTooltipIcon {
5064 margin-inline-end: 10px;
5067 #UITourTooltipTitle,
5068 #UITourTooltipDescription {
5072 #UITourTooltipTitle {
5078 #UITourTooltipDescription {
5079 margin-inline-start: 0;
5080 margin-inline-end: 0;
5082 line-height: 1.8rem;
5083 margin-bottom: 0; /* Override global.css */
5086 #UITourTooltipClose {
5088 -moz-appearance: none;
5090 background-color: transparent;
5092 margin-inline-start: 4px;
5096 #UITourTooltipClose > .toolbarbutton-text {
5100 #UITourTooltipButtons {
5102 background-color: rgba(0,0,0,.2);
5103 border-top: 1px solid rgba(0,0,0,.4);
5104 margin: 10px -16px -16px;
5108 #UITourTooltipButtons > label,
5109 #UITourTooltipButtons > button {
5113 #UITourTooltipButtons > label:first-child,
5114 #UITourTooltipButtons > button:first-child {
5115 margin-inline-start: 0;
5118 #UITourTooltipButtons > label:last-child,
5119 #UITourTooltipButtons > button:last-child {
5120 margin-inline-end: 0;
5123 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5126 margin-inline-end: 5px;
5129 #UITourTooltipButtons > label,
5130 #UITourTooltipButtons > button .button-text {
5134 #UITourTooltipButtons > button:not(.button-link) {
5135 -moz-appearance: none;
5136 background-color: #C09070;
5137 border-radius: 3000px;
5141 transition-property: background-color, color;
5142 transition-duration: 150ms;
5145 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5146 background-color: #FFCF00;
5150 #UITourTooltipButtons > label,
5151 #UITourTooltipButtons > button.button-link {
5152 -moz-appearance: none;
5153 background: transparent;
5156 color: rgba(0,0,0,0.35);
5158 padding-right: 10px;
5161 #UITourTooltipButtons > button.button-link:hover {
5165 /* The primary button gets the same color as the customize button. */
5166 #UITourTooltipButtons > button.button-primary {
5167 background-color: #A06060; /* LCARS default button background color */
5170 padding-right: 30px;
5173 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5174 background-color: #FFCF00;
5178 /* Notification overrides for Heartbeat UI */
5180 notification.heartbeat {
5181 background-color: #A09090;
5185 @keyframes pulse-onshow {
5188 transform: scale(1.0);
5192 transform: scale(1.1);
5195 transform: scale(1.0);
5198 transform: scale(1.1);
5201 transform: scale(1.0);
5205 @keyframes pulse-twice {
5207 transform: scale(1.1);
5210 transform: scale(0.8);
5213 transform: scale(1);
5217 .messageText.heartbeat {
5219 /* text-shadow: none; */
5220 margin-inline-start: 0px;
5223 .messageImage.heartbeat {
5226 margin-inline-start: 8px;
5227 margin-inline-end: 8px;
5230 .messageImage.heartbeat.pulse-onshow {
5231 animation-name: pulse-onshow;
5232 animation-duration: 1.5s;
5233 animation-iteration-count: 1;
5234 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5237 .messageImage.heartbeat.pulse-twice {
5238 animation-name: pulse-twice;
5239 animation-duration: 1s;
5240 animation-iteration-count: 2;
5241 animation-timing-function: linear;
5244 /* Learn More link styles */
5245 .heartbeat > .text-link {
5247 margin-inline-start: 0px;
5250 .heartbeat > .text-link:hover {
5252 text-decoration: none;
5255 .heartbeat > .text-link:hover:active {
5259 /* Heartbeat UI Rating Star Classes */
5260 .heartbeat > #star-rating-container {
5262 /* margin-bottom: 4px;*/
5265 .heartbeat > #star-rating-container > #star5 {
5266 -moz-box-ordinal-group: 5;
5269 .heartbeat > #star-rating-container > #star4 {
5270 -moz-box-ordinal-group: 4;
5273 .heartbeat > #star-rating-container > #star3 {
5274 -moz-box-ordinal-group: 3;
5277 .heartbeat > #star-rating-container > #star2 {
5278 -moz-box-ordinal-group: 2;
5281 .heartbeat > #star-rating-container > .star-x {
5282 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5284 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5285 margin-inline-end: 4px !important;
5290 .heartbeat > #star-rating-container > .star-x:hover,
5291 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5292 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5295 /* === END UITour.inc.css === */
5297 #UITourTooltipButtons {
5299 * Override the --arrowpanel-padding so the background extends
5300 * to the sides and bottom of the panel.
5303 margin-right: -10px;
5304 margin-bottom: -10px;
5307 /* === BEGIN contextmenu.inc.css === */
5309 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5312 #context-navigation > .menuitem-iconic {
5314 -moz-box-pack: center;
5315 -moz-box-align: center;
5318 #context-navigation > .menuitem-iconic[disabled="true"] {
5319 background-color: transparent;
5322 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5323 -moz-appearance: none;
5326 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5330 filter: url(chrome://global/skin/filters.svg#fill);
5335 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5339 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5343 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5347 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5350 #context-bookmarkpage {
5351 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5354 #context-bookmarkpage[starred=true] {
5355 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5358 #context-back:-moz-locale-dir(rtl),
5359 #context-forward:-moz-locale-dir(rtl),
5360 #context-reload:-moz-locale-dir(rtl) {
5361 transform: scaleX(-1);
5364 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5365 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5371 #context-media-eme-learnmore {
5372 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5375 #context-media-eme-learnmore {
5376 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5379 /* === END contextmenu.inc.css === */
5381 /* Make context menu items larger when opened through touch. */
5382 #contentAreaContextMenu[touchmode] menu,
5383 #contentAreaContextMenu[touchmode] menuitem {
5385 padding-bottom: 12px;
5388 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5390 padding-bottom: 7px;
5393 #context-navigation {
5396 #context-sep-navigation {
5397 /* margin-top: -4px; */
5400 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5405 .webextension-popup-browser {
5406 border-radius: inherit;
5409 .contentSelectDropdown-ingroup > .menu-iconic-text {
5410 padding-inline-start: 20px;
5413 #ContentSelectDropdown > menupopup {
5414 background-color: #000000;
5415 -moz-border-top-colors: #A09090;
5416 -moz-border-right-colors: #A09090;
5417 -moz-border-bottom-colors: #A09090;
5418 -moz-border-left-colors: #A09090;
5421 #ContentSelectDropdown > menupopup > menucaption,
5422 #ContentSelectDropdown > menupopup > menuitem {
5425 /* font: -moz-list;*/
5428 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5429 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5430 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5431 with 4px being the preferred padding size. */
5432 padding-top: .3333em;
5433 padding-bottom: .3333em;
5436 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5440 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5442 background-color: unset;
5445 #ContentSelectDropdown > menupopup > menucaption {
5446 background-color: buttonface;
5449 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5453 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5454 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5455 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5456 font-size with 11px being the preferred padding size. */
5457 padding-top: .9167em;
5458 padding-bottom: .9167em;