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 toolbarbutton.bookmark-item:not(.subviewbutton),
429 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
432 -moz-appearance: none;
433 border: 1px solid transparent;*/
436 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
437 /* border-color: var(--toolbarbutton-hover-bordercolor);
438 background: var(--toolbarbutton-hover-background);*/
441 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
442 /* border-color: var(--toolbarbutton-active-bordercolor);
443 box-shadow: var(--toolbarbutton-active-boxshadow);
444 background: var(--toolbarbutton-active-background);*/
447 .bookmark-item > .toolbarbutton-icon,
448 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
451 margin-inline-start: 1px;
452 margin-inline-end: 2px;
457 /* Force the display of the label for bookmarks */
458 .bookmark-item > .toolbarbutton-text,
459 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
460 display: -moz-box !important;
463 .bookmark-item > .toolbarbutton-menu-dropmarker {
467 #bookmarks-toolbar-placeholder {
468 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
469 -moz-box-orient: horizontal;
472 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
473 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
474 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
477 /* ----- BOOKMARK STAR ANIMATION ----- */
479 @keyframes animation-bookmarkAdded {
480 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
481 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
483 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
486 @keyframes animation-bookmarkPulse {
487 from { transform: scale(1); }
488 50% { transform: scale(1.3); }
489 to { transform: scale(1); }
492 #bookmarked-notification-container {
501 #bookmarked-notification {
502 background-size: 16px;
503 background-position: center;
504 background-repeat: no-repeat;
510 #bookmarked-notification-dropmarker-anchor {
515 #bookmarked-notification-dropmarker-icon {
521 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
522 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
523 animation: animation-bookmarkAdded 800ms;
524 animation-timing-function: ease, ease, ease;
527 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
528 list-style-image: none !important;
531 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
533 animation: animation-bookmarkPulse 300ms;
534 animation-delay: 600ms;
535 animation-timing-function: ease-out;
538 /* ::::: bookmark menus ::::: */
541 menuitem.bookmark-item {
546 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
551 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
552 padding-inline-start: 0px;
555 /* ::::: bookmark items ::::: */
558 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
559 -moz-image-region: auto;
562 .bookmark-item[container] {
563 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
564 -moz-image-region: auto;
567 .bookmark-item[container][open] {
568 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
569 -moz-image-region: auto;
572 .bookmark-item[container][livemark] {
573 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
574 -moz-image-region: auto;
577 .bookmark-item[container][livemark] .bookmark-item {
578 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
579 -moz-image-region: rect(0px, 16px, 16px, 0px);
582 .bookmark-item[container][livemark] .bookmark-item[visited] {
583 -moz-image-region: rect(0px, 32px, 16px, 16px);
586 .bookmark-item[container][query] {
587 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
588 -moz-image-region: auto;
591 .bookmark-item[query][tagContainer] {
592 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
593 -moz-image-region: auto;
596 .bookmark-item[query][dayContainer] {
597 list-style-image: url("chrome://communicator/skin/history/calendar.png");
598 -moz-image-region: auto;
601 .bookmark-item[query][hostContainer] {
602 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
603 -moz-image-region: auto;
606 .bookmark-item[query][hostContainer][open] {
607 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
608 -moz-image-region: auto;
611 .bookmark-item[cutting] > .toolbarbutton-icon,
612 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
616 .bookmark-item[cutting] > .toolbarbutton-text,
617 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
621 /* ::::: primary toolbar buttons ::::: */
623 /* === BEGIN toolbarbuttons.inc.css === */
625 /* Whole section of this included file: */
626 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
627 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
628 #social-share-button, #open-file-button, #find-button, #developer-button,
629 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
630 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
631 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
632 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
633 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
634 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
638 -moz-image-region: rect(0, 36px, 18px, 18px);
641 #back-button:hover:not([disabled="true"]) {
642 -moz-image-region: rect(18px, 36px, 36px, 18px);
645 #back-button[disabled="true"] {
646 -moz-image-region: rect(36px, 36px, 54px, 18px);
650 -moz-image-region: rect(0, 72px, 18px, 54px);
653 #forward-button:hover:not([disabled="true"]) {
654 -moz-image-region: rect(18px, 72px, 36px, 54px);
657 #forward-button[disabled="true"] {
658 -moz-image-region: rect(36px, 72px, 54px, 54px);
661 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
662 #forward-button:-moz-locale-dir(rtl) {
663 transform: scaleX(-1);
666 #home-button[cui-areatype="toolbar"] {
667 -moz-image-region: rect(0, 126px, 18px, 108px);
670 #home-button[cui-areatype="toolbar"]:hover {
671 -moz-image-region: rect(18px, 126px, 36px, 108px);
674 #bookmarks-menu-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 144px, 18px, 126px);
678 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
679 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
680 -moz-image-region: rect(18px, 144px, 36px, 126px);
683 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
684 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
685 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
686 background-color: transparent !important;
689 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
690 -moz-image-region: rect(0, 162px, 18px, 144px);
693 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
694 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
695 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
696 /* When starred and clicked (for edit/delete dialog),
697 * then only the menubutton-button itself is open, but not the whole menubutton. */
698 -moz-image-region: rect(18px, 162px, 36px, 144px);
701 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
702 -moz-image-region: rect(0, 630px, 18px, 612px);
705 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
707 -moz-box-align: center;
710 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
711 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
712 -moz-image-region: rect(18px, 630px, 36px, 612px);
715 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
716 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
719 padding-inline-start: 2px;
720 padding-inline-end: 0px;
723 #history-panelmenu[cui-areatype="toolbar"] {
724 -moz-image-region: rect(0, 180px, 18px, 162px);
727 #history-panelmenu[cui-areatype="toolbar"]:hover,
728 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
729 -moz-image-region: rect(18px, 180px, 36px, 162px);
732 #downloads-button[cui-areatype="toolbar"] {
733 -moz-image-region: rect(0, 198px, 18px, 180px);
736 #downloads-button[cui-areatype="toolbar"]:hover,
737 #downloads-button[cui-areatype="toolbar"][open="true"] {
738 -moz-image-region: rect(18px, 198px, 36px, 180px);
741 #add-ons-button[cui-areatype="toolbar"] {
742 -moz-image-region: rect(0, 216px, 18px, 198px);
745 #add-ons-button[cui-areatype="toolbar"]:hover {
746 -moz-image-region: rect(18px, 216px, 36px, 198px);
749 #open-file-button[cui-areatype="toolbar"] {
750 -moz-image-region: rect(0, 234px, 18px, 216px);
753 #open-file-button[cui-areatype="toolbar"]:hover {
754 -moz-image-region: rect(18px, 234px, 36px, 216px);
757 #save-page-button[cui-areatype="toolbar"] {
758 -moz-image-region: rect(0, 252px, 18px, 234px);
761 #save-page-button[cui-areatype="toolbar"]:hover {
762 -moz-image-region: rect(18px, 252px, 36px, 234px);
765 #sync-button[cui-areatype="toolbar"] {
766 -moz-image-region: rect(0, 792px, 18px, 774px);
769 #sync-button[cui-areatype="toolbar"]:hover {
770 -moz-image-region: rect(18px, 792px, 36px, 774px);
773 #containers-panelmenu[cui-areatype="toolbar"] {
774 -moz-image-region: rect(0, 810px, 18px, 792px);
777 #containers-panelmenu[cui-areatype="toolbar"]:hover {
778 -moz-image-region: rect(18px, 810px, 36px, 792px);
781 #feed-button[cui-areatype="toolbar"] {
782 -moz-image-region: rect(0, 288px, 18px, 270px);
785 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
786 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
787 -moz-image-region: rect(18px, 288px, 36px, 270px);
790 #feed-button[cui-areatype="toolbar"][disabled="true"] {
791 -moz-image-region: rect(36px, 288px, 54px, 270px);
794 #social-share-button[cui-areatype="toolbar"] {
795 -moz-image-region: rect(0px, 306px, 18px, 288px);
798 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
799 #social-share-button[cui-areatype="toolbar"][open="true"] {
800 -moz-image-region: rect(18px, 306px, 36px, 288px);
803 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
804 -moz-image-region: rect(36px, 306px, 54px, 288px);
807 #characterencoding-button[cui-areatype="toolbar"] {
808 -moz-image-region: rect(0, 324px, 18px, 306px);
811 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
812 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
813 -moz-image-region: rect(18px, 324px, 36px, 306px);
816 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
817 -moz-image-region: rect(36px, 324px, 54px, 306px);
820 #new-window-button[cui-areatype="toolbar"] {
821 -moz-image-region: rect(0, 342px, 18px, 324px);
824 #new-window-button[cui-areatype="toolbar"]:hover {
825 -moz-image-region: rect(18px, 342px, 36px, 324px);
828 #e10s-button[cui-areatype="toolbar"] {
829 -moz-image-region: rect(0, 342px, 18px, 324px);
832 #e10s-button[cui-areatype="toolbar"]:hover {
833 -moz-image-region: rect(18px, 342px, 36px, 324px);
836 #e10s-button > .toolbarbutton-icon {
837 transform: scaleY(-1);
840 #new-tab-button[cui-areatype="toolbar"] {
841 -moz-image-region: rect(0, 360px, 18px, 342px);
844 #new-tab-button[cui-areatype="toolbar"]:hover {
845 -moz-image-region: rect(18px, 360px, 36px, 342px);
848 #privatebrowsing-button[cui-areatype="toolbar"] {
849 -moz-image-region: rect(0, 378px, 18px, 360px);
852 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
853 -moz-image-region: rect(18px, 378px, 36px, 360px);
856 #find-button[cui-areatype="toolbar"] {
857 -moz-image-region: rect(0, 396px, 18px, 378px);
860 #find-button[cui-areatype="toolbar"]:hover {
861 -moz-image-region: rect(18px, 396px, 36px, 378px);
864 #print-button[cui-areatype="toolbar"] {
865 -moz-image-region: rect(0, 414px, 18px, 396px);
868 #print-button[cui-areatype="toolbar"]:hover {
869 -moz-image-region: rect(18px, 414px, 36px, 396px);
872 #fullscreen-button[cui-areatype="toolbar"] {
873 -moz-image-region: rect(0, 432px, 18px, 414px);
876 #fullscreen-button[cui-areatype="toolbar"]:hover {
877 -moz-image-region: rect(18px, 432px, 36px, 414px);
880 #developer-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 450px, 18px, 432px);
884 #developer-button[cui-areatype="toolbar"]:hover,
885 #developer-button[cui-areatype="toolbar"][open="true"] {
886 -moz-image-region: rect(18px, 450px, 36px, 432px);
889 #preferences-button[cui-areatype="toolbar"] {
890 -moz-image-region: rect(0, 468px, 18px, 450px);
893 #preferences-button[cui-areatype="toolbar"]:hover {
894 -moz-image-region: rect(18px, 468px, 36px, 450px);
897 #PanelUI-menu-button {
898 -moz-image-region: rect(0, 486px, 18px, 468px);
901 #PanelUI-menu-button:hover,
902 #PanelUI-menu-button[open="true"] {
903 -moz-image-region: rect(18px, 486px, 36px, 468px);
906 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
907 -moz-image-region: rect(0, 504px, 18px, 486px);
910 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
911 -moz-image-region: rect(18px, 504px, 36px, 486px);
914 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
915 -moz-image-region: rect(36px, 504px, 54px, 486px);
918 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
919 -moz-image-region: rect(0, 522px, 18px, 504px);
922 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
923 -moz-image-region: rect(18px, 522px, 36px, 504px);
926 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
927 -moz-image-region: rect(36px, 522px, 54px, 504px);
930 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
931 -moz-image-region: rect(0, 540px, 18px, 522px);
934 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
935 -moz-image-region: rect(18px, 540px, 36px, 522px);
938 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
939 -moz-image-region: rect(36px, 540px, 54px, 522px);
942 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
943 -moz-image-region: rect(0, 558px, 18px, 540px);
946 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
947 -moz-image-region: rect(18px, 558px, 36px, 540px);
950 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
951 -moz-image-region: rect(36px, 558px, 54px, 540px);
954 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
955 -moz-image-region: rect(0, 576px, 18px, 558px);
958 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
959 -moz-image-region: rect(18px, 576px, 36px, 558px);
962 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
963 -moz-image-region: rect(36px, 576px, 54px, 558px);
966 #nav-bar-overflow-button {
967 -moz-image-region: rect(0, 612px, 18px, 594px);
970 #nav-bar-overflow-button:hover,
971 #nav-bar-overflow-button[open="true"] {
972 -moz-image-region: rect(18px, 612px, 36px, 594px);
975 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
976 transform: scaleX(-1);
979 #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
984 -moz-image-region: rect(0, 648px, 18px, 630px);
987 #tabview-button:hover {
988 -moz-image-region: rect(18px, 648px, 36px, 630px);
991 #email-link-button[cui-areatype="toolbar"] {
992 -moz-image-region: rect(0, 666px, 18px, 648px);
995 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
996 -moz-image-region: rect(18px, 666px, 36px, 648px);
999 #email-button[cui-areatype="toolbar"][disabled="true"] {
1000 -moz-image-region: rect(36px, 666px, 54px, 648px);
1003 #sidebar-button[cui-areatype="toolbar"] {
1004 -moz-image-region: rect(0, 684px, 18px, 666px);
1007 #sidebar-button[cui-areatype="toolbar"]:hover {
1008 -moz-image-region: rect(18px, 684px, 36px, 666px);
1011 #panic-button[cui-areatype="toolbar"] {
1012 -moz-image-region: rect(0, 702px, 18px, 684px);
1015 #panic-button[cui-areatype="toolbar"]:hover,
1016 #panic-button[cui-areatype="toolbar"][open] {
1017 -moz-image-region: rect(18px, 702px, 36px, 684px);
1020 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1021 transform: scaleX(-1);
1024 #webide-button[cui-areatype="toolbar"] {
1025 -moz-image-region: rect(0, 738px, 18px, 720px);
1028 #webide-button[cui-areatype="toolbar"]:hover {
1029 -moz-image-region: rect(18px, 738px, 36px, 720px);
1033 fill: currentColor !important;
1036 /* === END toolbarbuttons.inc.css === */
1038 /* === BEGIN menupanel.inc.css === */
1040 /* Menu panel and palette styles */
1042 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1043 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1044 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1045 #social-share-button, #open-file-button, #find-button, #developer-button,
1046 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1047 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1048 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1049 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
1050 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1051 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1052 #social-share-button, #open-file-button, #find-button, #developer-button,
1053 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1054 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1055 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1056 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
1057 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1060 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1061 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1062 #social-share-button, #open-file-button, #find-button, #developer-button,
1063 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1064 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1065 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1066 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1067 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1068 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1069 #social-share-button, #open-file-button, #find-button, #developer-button,
1070 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1071 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1072 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1073 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1074 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1075 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1076 #social-share-button, #open-file-button, #find-button, #developer-button,
1077 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1078 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1079 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1080 #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,
1081 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1082 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1083 #social-share-button, #open-file-button, #find-button, #developer-button,
1084 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1085 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1086 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1087 #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 {
1088 filter: url(chrome://global/skin/filters.svg#fill);
1092 #home-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #home-button {
1094 -moz-image-region: rect(0px, 128px, 32px, 96px);
1097 #bookmarks-menu-button[cui-areatype="menu-panel"],
1098 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1099 -moz-image-region: rect(0px, 192px, 32px, 160px);
1102 #history-panelmenu[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1104 -moz-image-region: rect(0px, 224px, 32px, 192px);
1107 #downloads-button[cui-areatype="menu-panel"],
1108 toolbarpaletteitem[place="palette"] > #downloads-button {
1109 -moz-image-region: rect(0px, 256px, 32px, 224px);
1112 #add-ons-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #add-ons-button {
1114 -moz-image-region: rect(0px, 288px, 32px, 256px);
1117 #open-file-button[cui-areatype="menu-panel"],
1118 toolbarpaletteitem[place="palette"] > #open-file-button {
1119 -moz-image-region: rect(0px, 320px, 32px, 288px);
1122 #save-page-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #save-page-button {
1124 -moz-image-region: rect(0px, 352px, 32px, 320px);
1127 #sync-button[cui-areatype="menu-panel"],
1128 toolbarpaletteitem[place="palette"] > #sync-button {
1129 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1132 #containers-panelmenu[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1134 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1137 #feed-button[cui-areatype="menu-panel"],
1138 toolbarpaletteitem[place="palette"] > #feed-button {
1139 -moz-image-region: rect(0px, 416px, 32px, 384px);
1142 #social-share-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #social-share-button {
1144 -moz-image-region: rect(0px, 448px, 32px, 416px);
1147 #characterencoding-button[cui-areatype="menu-panel"],
1148 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1149 -moz-image-region: rect(0px, 480px, 32px, 448px);
1152 #new-window-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #new-window-button {
1154 -moz-image-region: rect(0px, 512px, 32px, 480px);
1157 #e10s-button[cui-areatype="menu-panel"],
1158 toolbarpaletteitem[place="palette"] > #e10s-button {
1159 -moz-image-region: rect(0px, 512px, 32px, 480px);
1162 #new-tab-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #new-tab-button {
1164 -moz-image-region: rect(0px, 544px, 32px, 512px);
1167 #privatebrowsing-button[cui-areatype="menu-panel"],
1168 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1169 -moz-image-region: rect(0px, 576px, 32px, 544px);
1172 #tabview-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #tabview-button {
1174 -moz-image-region: rect(0px, 608px, 32px, 576px);
1177 #find-button[cui-areatype="menu-panel"],
1178 toolbarpaletteitem[place="palette"] > #find-button {
1179 -moz-image-region: rect(0px, 640px, 32px, 608px);
1182 #print-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #print-button {
1184 -moz-image-region: rect(0px, 672px, 32px, 640px);
1187 #fullscreen-button[cui-areatype="menu-panel"],
1188 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1189 -moz-image-region: rect(0px, 704px, 32px, 672px);
1192 #developer-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #developer-button {
1194 -moz-image-region: rect(0px, 736px, 32px, 704px);
1197 #preferences-button[cui-areatype="menu-panel"],
1198 toolbarpaletteitem[place="palette"] > #preferences-button {
1199 -moz-image-region: rect(0px, 768px, 32px, 736px);
1202 #email-link-button[cui-areatype="menu-panel"],
1203 toolbarpaletteitem[place="palette"] > #email-link-button {
1204 -moz-image-region: rect(0, 800px, 32px, 768px);
1207 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1208 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1209 -moz-image-region: rect(64px, 800px, 96px, 768px);
1212 #sidebar-button[cui-areatype="menu-panel"],
1213 toolbarpaletteitem[place="palette"] > #sidebar-button {
1214 -moz-image-region: rect(0, 864px, 32px, 832px);
1217 #panic-button[cui-areatype="menu-panel"],
1218 toolbarpaletteitem[place="palette"] > #panic-button {
1219 -moz-image-region: rect(0, 896px, 32px, 864px);
1222 #webide-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #webide-button {
1224 -moz-image-region: rect(0px, 960px, 32px, 928px);
1227 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1228 -moz-image-region: rect(0, 832px, 32px, 800px);
1231 /* Wide panel control icons */
1233 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1234 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1235 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1236 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1237 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1240 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1241 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1242 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1243 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1244 filter: url(chrome://global/skin/filters.svg#fill);
1248 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1249 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1250 -moz-image-region: rect(0px, 32px, 16px, 16px);
1253 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1254 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1255 -moz-image-region: rect(0px, 48px, 16px, 32px);
1258 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1259 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1260 -moz-image-region: rect(0px, 64px, 16px, 48px);
1263 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1264 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1265 -moz-image-region: rect(0px, 80px, 16px, 64px);
1268 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1269 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1270 -moz-image-region: rect(0px, 96px, 16px, 80px);
1273 #add-share-provider {
1274 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1275 -moz-image-region: rect(0px, 96px, 16px, 80px);
1278 /* === END menupanel.inc.css === */
1280 .toolbarbutton-1:not([type="menu-button"]) {
1281 -moz-box-orient: vertical;
1285 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1291 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1292 .toolbarbutton-1[disabled="true"]:hover:active,
1293 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1297 .toolbarbutton-1:hover:active,
1298 .toolbarbutton-1[open="true"],
1299 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1301 padding-bottom: 0px;
1302 padding-inline-start: 3px;
1303 padding-inline-end: 1px;
1306 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1307 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1308 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1309 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1310 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1313 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1314 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1317 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1318 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1321 .toolbarbutton-1 > .toolbarbutton-icon,
1322 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1326 #nav-bar .toolbarbutton-1,
1327 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1330 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1331 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1332 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1335 #nav-bar #PanelUI-menu-button {
1336 /* padding-inline-start: 7px;
1337 padding-inline-end: 5px;*/
1340 #nav-bar .toolbarbutton-1[type=panel],
1341 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1342 /* padding-left: 5px;
1343 padding-right: 5px;*/
1346 #nav-bar .toolbarbutton-1 > menupopup {
1347 /* margin-top: -3px;*/
1350 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1354 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1355 /* padding-inline-end: 0;*/
1358 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1359 /* padding-inline-start: 0;
1360 -moz-box-align: center;*/
1363 .findbar-button > .toolbarbutton-text,
1364 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1365 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1366 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1367 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1369 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1370 /* padding: 2px 6px;
1372 border-color: transparent;
1373 transition-property: background-color, border-color;
1374 transition-duration: 150ms;*/
1377 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1378 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1379 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1380 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1384 /* Help SDK icons fit: */
1385 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1386 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1390 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1391 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1395 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1396 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1397 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
1398 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1399 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1400 /* padding-inline-end: 17px;*/
1403 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1404 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
1405 /* horizontal padding + border + icon width */
1406 /* max-width: 43px;*/
1409 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1412 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1415 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1418 #nav-bar .toolbaritem-combined-buttons {
1419 /* margin-left: 2px;
1420 margin-right: 2px;*/
1423 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1428 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1429 #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 {
1435 margin-inline-end: -1px;
1439 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1442 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1443 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1444 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1445 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1446 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1447 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1448 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1449 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1450 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1453 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1454 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1455 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1456 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1457 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1458 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1461 #TabsToolbar .toolbarbutton-1,
1462 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1464 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1467 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1468 #TabsToolbar .toolbarbutton-1[open],
1469 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1470 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1471 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1474 /* unified back/forward button */
1477 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1480 #forward-button > menupopup {
1481 margin-top: 1px !important;
1484 #forward-button > .toolbarbutton-icon {
1485 background-clip: padding-box !important;
1486 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1487 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1491 margin-inline-start: -4px !important;
1496 border-radius: 0 10000px 10000px 0;
1497 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1500 #forward-button:-moz-locale-dir(rtl) {
1501 border-radius: 10000px 0 0 10000px;
1504 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1505 transition: margin-left 150ms ease-out;
1508 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1509 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1512 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1513 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1514 transition-delay: 100s;
1517 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1518 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1519 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1523 /* padding-top: 3px !important;
1524 padding-bottom: 3px !important;
1525 padding-inline-start: 5px !important;
1526 padding-inline-end: 0 !important;*/
1529 border-radius: 10000px;
1533 margin-bottom: -2px;
1536 #back-button:-moz-locale-dir(rtl) {
1539 #back-button > menupopup {
1540 margin-top: -1px !important;
1543 #back-button > .toolbarbutton-icon {
1544 border-radius: 10000px !important;
1545 background-clip: padding-box !important;
1546 /* background-color: hsla(210,25%,98%,.08) !important;
1547 padding: 6px !important;
1548 border-style: none !important;
1549 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1550 0 0 0 1px hsla(210,4%,10%,.25);*/
1551 transition-property: background-color, box-shadow !important;
1552 transition-duration: 250ms !important;
1555 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1556 /* background-color: hsla(210,4%,10%,.08) !important;*/
1559 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1560 #back-button[open="true"] > .toolbarbutton-icon {
1561 /* background-color: hsla(210,4%,10%,.12) !important;
1562 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1563 0 0 0 1px hsla(210,4%,10%,.25),
1564 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1567 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1568 transform: scaleX(-1);
1571 #forward-button > .toolbarbutton-menu-dropmarker,
1572 #back-button > .toolbarbutton-menu-dropmarker {
1577 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1578 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1579 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1582 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1583 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1584 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1587 #home-button.bookmark-item {
1588 list-style-image: url("chrome://browser/skin/Toolbar.png");
1591 #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),
1592 #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),
1593 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1594 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1595 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1596 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1597 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1600 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1603 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1604 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1605 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1609 #downloads-button > .toolbarbutton-icon {
1613 /* tabview menu item */
1616 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1617 -moz-image-region: rect(1px, 89px, 17px, 73px);
1620 #menu_tabview[groups="0"] {
1621 -moz-image-region: rect(1px, 17px, 17px, 1px);
1624 #menu_tabview[groups="1"] {
1625 -moz-image-region: rect(1px, 35px, 17px, 19px);
1628 #menu_tabview[groups="2"] {
1629 -moz-image-region: rect(1px, 53px, 17px, 37px);
1632 #menu_tabview[groups="3"] {
1633 -moz-image-region: rect(1px, 71px, 17px, 55px);
1636 /* zoom control text (reset) button special case: */
1638 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1639 /* To make this line up with the icons, it needs the same height (18px) +
1640 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1641 * increase in text sizes would break things...
1646 /* ::::: fullscreen window controls ::::: */
1651 -moz-appearance: none;
1653 /* margin: 0 !important;
1654 padding: 6px 12px;*/
1658 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1661 #minimize-button:hover {
1662 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1666 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1669 #restore-button:hover {
1670 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1673 #minimize-button:hover,
1674 #restore-button:hover {
1675 /* background-color: hsla(0, 0%, 0%, .12);*/
1678 #minimize-button:hover:active,
1679 #restore-button:hover:active {
1680 /* background-color: hsla(0, 0%, 0%, .22);*/
1684 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1687 #close-button:hover {
1688 /* background-color: hsl(355, 86%, 49%);*/
1689 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1692 #close-button:hover:active {
1693 /* background-color: hsl(355, 82%, 69%);*/
1696 /* ::::: Location Bar ::::: */
1699 .searchbar-textbox {
1702 margin-inline-start: 3px;
1706 /* make color as light as possible to deal with dark non-domain parts */
1710 #urlbar:-moz-lwtheme,
1711 .searchbar-textbox:-moz-lwtheme {
1712 /* background-color: rgba(255,255,255,.8);
1713 @navbarTextboxCustomBorder@
1717 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1718 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1719 /* background-color: rgba(255,255,255,.9);*/
1722 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1723 .searchbar-textbox:-moz-lwtheme[focused] {
1724 /* background-color: white;*/
1727 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1728 /* border-inline-start: none;
1732 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1733 /* border-top-left-radius: 0;
1734 border-bottom-left-radius: 0; */
1737 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1738 /* border-top-right-radius: 0;
1739 border-bottom-right-radius: 0; */
1742 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1743 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1744 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1747 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1748 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1749 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1750 transform: scaleX(-1);
1753 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1754 -moz-box-direction: reverse;
1757 html|*.urlbar-input:-moz-lwtheme::placeholder,
1758 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1763 -moz-box-orient: horizontal;
1764 -moz-box-align: stretch;
1767 .urlbar-textbox-container {
1768 -moz-box-align: stretch;
1772 margin-inline-start: 0;
1776 #urlbar-display-box {
1777 padding-inline-start: 4px;
1778 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1779 border-inline-end: 1px solid var(--urlbar-separator-color);
1780 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1781 border-image-slice: 1; */
1785 -moz-box-align: center;
1790 /* 16x16 icon with border-box sizing */
1795 /* ::::: URL Bar Zoom Reset Button ::::: */
1797 @keyframes urlbar-zoom-reset-pulse {
1799 transform: scale(0);
1802 transform: scale(1.5);
1805 transform: scale(1.0);
1809 #urlbar-zoom-button {
1810 /* -moz-appearance: none;*/
1811 /* color: inherit;*/
1814 .search-go-container {
1818 .search-go-container > .search-go-button {
1822 #urlbar-search-footer {
1823 border-top: 1px solid var(--panel-separator-color);
1826 #urlbar-search-settings {
1829 #urlbar-search-settings:hover {
1832 #urlbar-search-settings:hover:active {
1835 #urlbar-search-splitter {
1836 /* The splitter width should equal the location and search bars' combined
1837 neighboring margin and border width. */
1842 background: transparent;
1846 border-inline-end: 1px solid #9C9CFF;
1847 margin-inline-end: 3px;
1850 margin-inline-start: 0;
1854 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1856 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1857 border-bottom: 1px solid var(--panel-separator-color);
1858 background-color: #000000;
1860 padding-inline-start: 44px;
1861 padding-inline-end: 6px;
1862 background-image: url("chrome://browser/skin/info.svg");
1863 background-clip: padding-box;
1864 background-position: 20px center;
1865 background-repeat: no-repeat;
1866 background-size: 16px 16px;
1869 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1870 background-position: right 20px center;
1873 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1878 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1879 margin-inline-start: 0;
1882 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1883 -moz-appearance: none;
1888 margin-inline-start: 10px;
1891 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1894 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1897 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1900 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1903 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1906 min-width: calc(54px + 11ch);
1911 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1912 background-color: var(--identity-box-verified-background-color);
1915 #identity-box:-moz-focusring {
1916 outline: 1px dotted;
1917 outline-offset: -1px;
1920 #identity-box.verifiedDomain:-moz-focusring,
1921 #identity-box.verifiedIdentity:-moz-focusring {
1922 outline-color: #000000;
1925 /* Location bar dropmarker */
1927 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1928 background-color: transparent;
1931 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1932 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1933 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1936 transition: opacity 0.15s ease;
1939 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1943 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1947 .urlbar-history-dropmarker:hover {
1950 .urlbar-history-dropmarker:hover:active,
1951 .urlbar-history-dropmarker[open="true"] {
1954 /* page proxy icon */
1955 /* === BEGIN identity-block.inc.css === */
1957 /* === BEGIN identity-block/icons.inc.css === */
1960 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1963 #identity-box:hover > #identity-icon:not(.no-hover),
1964 #identity-box[open=true] > #identity-icon {
1965 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1968 #identity-box.grantedPermissions > #identity-icon {
1969 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1972 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1973 #identity-box.grantedPermissions[open=true] > #identity-icon {
1974 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1977 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1978 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1981 #tracking-protection-icon {
1982 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1985 #tracking-protection-icon[state="loaded-tracking-content"] {
1986 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1990 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1991 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1992 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1993 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1994 visibility: visible;
1997 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1998 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1999 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2000 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2001 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2002 visibility: visible;
2005 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2006 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2007 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2008 visibility: visible;
2011 /* === END identity-block/icons.inc.css === */
2018 /* The padding-left and padding-right transitions handle the delayed hiding of
2019 the forward button when hovered. */
2020 transition: background-color 150ms ease, padding-left, padding-right;
2023 #identity-box:-moz-locale-dir(ltr) {
2024 border-top-right-radius: 0;
2025 border-bottom-right-radius: 0;
2028 #identity-box:-moz-locale-dir(rtl) {
2029 border-top-left-radius: 0;
2030 border-bottom-left-radius: 0;
2033 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2034 border-inline-end: 1px solid #008484;
2037 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2041 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2042 border-inline-end: 1px solid #9C9CFF;
2045 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2050 #identity-icon-labels:-moz-locale-dir(ltr) {
2054 #identity-icon-labels:-moz-locale-dir(rtl) {
2058 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2059 /* border-radius: 0;
2060 padding-inline-start: 2px; */
2061 padding-inline-end: 2px;
2062 margin-inline-end: 1px;
2065 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2066 padding-inline-start: 2px;
2069 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2070 /* Forward button hiding is delayed when hovered, so we should use the same
2071 delay for the identity box. We handle both horizontal paddings (for LTR and
2072 RTL), the latter two delays here are for padding-left and padding-right. */
2073 transition-delay: 0s, 100s, 100s;
2076 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2077 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2078 padding-inline-start: 2.01px;
2081 /* MAIN IDENTITY ICON */
2088 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2092 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2093 -moz-image-region: inherit;
2094 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2099 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2100 -moz-image-region: inherit;
2101 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2111 margin-inline-start: -16px;
2116 #identity-box[sharing="camera"] > #sharing-icon {
2117 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2120 #identity-box[sharing="microphone"] > #sharing-icon {
2121 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2124 #identity-box[sharing="screen"] > #sharing-icon {
2125 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2129 #identity-box[sharing] > #sharing-icon {
2131 animation-delay: -1.5s;
2134 #identity-box[sharing] > #identity-icon,
2136 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2139 @keyframes identity-box-sharing-icon-pulse {
2140 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2141 0%, 16.66%, 83.33%, 100% {
2149 /* TRACKING PROTECTION ICON */
2151 #tracking-protection-icon {
2154 margin-inline-start: 2px;
2155 margin-inline-end: 0;
2158 #tracking-protection-icon[animate] {
2159 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2162 #tracking-protection-icon:not([state]) {
2163 margin-inline-end: -18px;
2164 pointer-events: none;
2166 /* Only animate the shield in, when it disappears hide it immediately. */
2170 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2171 visibility: collapse;
2174 /* CONNECTION ICON */
2179 margin-inline-start: 2px;
2180 visibility: collapse;
2183 /* === END identity-block.inc.css === */
2185 #page-proxy-favicon {
2186 -moz-image-region: rect(0, 16px, 16px, 0);
2189 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2190 /* margin-inline-end: 1px;*/
2193 #identity-box:hover > #page-proxy-favicon {
2194 -moz-image-region: rect(0, 32px, 16px, 16px);
2197 #identity-box:hover:active > #page-proxy-favicon,
2198 #identity-box[open=true] > #page-proxy-favicon {
2199 -moz-image-region: rect(0, 48px, 16px, 32px);
2202 #identity-box:hover {
2203 background-color: #FFCF00;
2207 #identity-box:hover:active,
2208 #identity-box[open=true] {
2209 background-color: #FF9F00;
2213 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2214 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2215 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2216 background-color: #A09090;
2220 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2221 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2222 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2226 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2227 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2228 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2229 background-color: #008484;
2233 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2234 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2235 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2239 #identity-box:hover > image,
2240 #identity-box:hover:active > image,
2241 #identity-box[open=true] > image {
2242 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2247 /* === BEGIN autocomplete.inc.css === */
2249 #PopupAutoComplete > richlistbox > richlistitem {
2254 padding: 0px 1px 0px 1px;
2257 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2258 margin-inline-start: 4px;
2259 margin-inline-end: 0;
2262 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2264 margin-inline-start: 4px;
2267 #PopupAutoComplete > richlistbox {
2271 /* Login form autocompletion */
2272 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2274 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2277 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2278 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2281 /* Insecure field warning */
2282 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2283 background-color: var(--arrowpanel-dimmed);
2284 border-bottom: 1px solid var(--panel-separator-color);
2285 padding-bottom: 4px;
2289 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2290 background-color: var(--arrowpanel-dimmed-further);
2294 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2299 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2303 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2304 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2307 /* === END autocomplete.inc.css === */
2309 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2310 border-top: 1px solid #A09090;
2313 #treecolAutoCompleteImage {
2318 .autocomplete-richlistbox {
2322 .autocomplete-richlistitem {
2327 border: 1px solid transparent;
2340 border: 1px solid transparent;
2351 html|span.ac-emphasize-text-title,
2352 html|span.ac-emphasize-text-tag,
2353 html|span.ac-emphasize-text-url {
2357 .ac-type-icon[type=bookmark] {
2358 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2361 .ac-type-icon[type=bookmark][selected][current] {
2362 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2365 .ac-result-type-bookmark {
2366 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2367 -moz-image-region: rect(0px 16px 16px 0px);
2372 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2373 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2376 .ac-type-icon[type=keyword],
2377 .ac-site-icon[type=searchengine] {
2378 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2381 .ac-type-icon[type=keyword][selected],
2382 .ac-site-icon[type=searchengine][selected] {
2383 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2386 .ac-result-type-tag {
2387 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2392 .ac-type-icon[type=switchtab],
2393 .ac-type-icon[type=remotetab] {
2394 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2397 .ac-type-icon[type=switchtab][selected],
2398 .ac-type-icon[type=remotetab][selected] {
2399 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2402 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2403 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2409 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2410 border-top: 1px solid #9C9CFF;
2413 /* combined go/reload/stop button in location bar */
2416 #urlbar-reload-button,
2417 #urlbar-stop-button {
2419 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2420 /* margin: 0 9px; */
2421 margin-inline-start: 0px;
2422 border-inline-start: 1px solid var(--urlbar-separator-color);
2423 border-image: linear-gradient(transparent 15%,
2424 var(--urlbar-separator-color) 15%,
2425 var(--urlbar-separator-color) 85%,
2427 border-image-slice: 1;
2430 /* XXX: temporary for Photon preview changes */
2433 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2436 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2437 border-top-left-radius: 0px;
2438 border-bottom-left-radius: 0px;
2441 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2442 border-top-right-radius: 0px;
2443 border-bottom-right-radius: 0px;
2446 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2447 #urlbar-reload-button:not(:hover) {
2448 border-inline-start-style: none;
2449 padding-inline-start: 3px;
2453 #urlbar-reload-button {
2454 -moz-image-region: rect(0px, 14px, 14px, 0px);
2457 #reload-button[disabled=true],
2458 #urlbar-reload-button[disabled=true] {
2459 -moz-image-region: rect(28px, 14px, 42px, 0px);
2462 #reload-button:not([disabled=true]):hover,
2463 #urlbar-reload-button:not([disabled=true]):hover {
2464 -moz-image-region: rect(14px, 14px, 28px, 0px);
2467 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2468 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2469 transform: scaleX(-1);
2473 -moz-image-region: rect(0, 42px, 14px, 28px);
2476 #urlbar-go-button:hover {
2477 -moz-image-region: rect(14px, 42px, 28px, 28px);
2480 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2481 transform: scaleX(-1);
2485 #urlbar-stop-button {
2486 -moz-image-region: rect(0px, 28px, 14px, 14px);
2490 #urlbar-stop-button:hover {
2491 -moz-image-region: rect(14px, 28px, 28px, 14px);
2494 @media (min-resolution: 1.1dppx) {
2498 #urlbar-reload-button,
2499 #urlbar-stop-button {
2500 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2503 #reload-button > .toolbarbutton-icon,
2504 #stop-button > .toolbarbutton-icon,
2505 #urlbar-go-button > .toolbarbutton-icon,
2506 #urlbar-reload-button > .toolbarbutton-icon,
2507 #urlbar-stop-button > .toolbarbutton-icon {
2512 -moz-image-region: rect(0, 84px, 28px, 56px);
2515 #urlbar-go-button:hover {
2516 -moz-image-region: rect(28px, 84px, 56px, 56px);
2519 #urlbar-go-button:hover:active {
2520 -moz-image-region: rect(56px, 84px, 84px, 56px);
2524 #urlbar-reload-button {
2525 -moz-image-region: rect(0, 28px, 28px, 0);
2528 #reload-button:not([disabled]):hover,
2529 #urlbar-reload-button:not([disabled]):hover {
2530 -moz-image-region: rect(28px, 28px, 56px, 0);
2533 #reload-button:not([disabled]):hover:active,
2534 #urlbar-reload-button:not([disabled]):hover:active {
2535 -moz-image-region: rect(56px, 28px, 84px, 0);
2539 #urlbar-stop-button {
2540 -moz-image-region: rect(0, 56px, 28px, 28px);
2543 #stop-button:not([disabled]):hover,
2544 #urlbar-stop-button:not([disabled]):hover {
2545 -moz-image-region: rect(28px, 56px, 56px, 28px);
2548 #stop-button:hover:active,
2549 #urlbar-stop-button:hover:active {
2550 -moz-image-region: rect(56px, 56px, 84px, 28px);
2554 /* popup blocker button */
2556 #page-report-button {
2557 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2558 -moz-image-region: rect(0, 16px, 16px, 0);
2561 #page-report-button:hover ,
2562 #page-report-button:hover:active,
2563 #page-report-button[open="true"] {
2564 -moz-image-region: rect(0, 32px, 16px, 16px);
2567 /* Reader mode button */
2569 #reader-mode-button {
2570 list-style-image: url("chrome://browser/skin/readerMode.svg");
2571 -moz-image-region: rect(0, 16px, 16px, 0);
2574 #reader-mode-button:hover,
2575 #reader-mode-button[readeractive]:hover {
2576 -moz-image-region: rect(0, 32px, 16px, 16px);
2579 #reader-mode-button:hover:active,
2580 #reader-mode-button[readeractive] {
2581 -moz-image-region: rect(0, 48px, 16px, 32px);
2584 /* social share panel */
2586 /* === BEGIN social.inc.css === */
2588 #manage-share-providers {
2589 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2590 -moz-image-region: rect(0, 468px, 18px, 450px);
2593 #manage-share-providers > .toolbarbutton-icon {
2598 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2601 /* fixup corners for share panel */
2602 .social-panel > .social-panel-frame {
2603 border-radius: inherit;
2606 /* === END social.inc.css === */
2608 .social-panel-frame {
2609 border-radius: inherit;
2612 .social-share-frame {
2619 background-color: white;
2620 background-repeat: no-repeat;
2621 background-position: center center;
2623 #share-container[loading] {
2624 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2626 #share-container > browser {
2627 transition: opacity 150ms ease-in-out;
2630 #share-container[loading] > browser {
2634 .social-share-toolbar {
2635 border-bottom: 1px solid #9C9CFF;
2639 #social-share-provider-buttons {
2644 .share-provider-button {
2649 .share-provider-button > .toolbarbutton-text {
2652 .share-provider-button > .toolbarbutton-icon {
2658 #social-share-panel {
2664 .social-share-frame {
2665 border-top-left-radius: 0;
2666 border-bottom-left-radius: inherit;
2667 border-top-right-radius: 0;
2668 border-bottom-right-radius: inherit;
2671 #social-share-panel > .social-share-toolbar {
2672 border-top-left-radius: inherit;
2673 border-top-right-radius: inherit;
2676 #social-share-provider-buttons {
2677 border-top-left-radius: inherit;
2678 border-top-right-radius: inherit;
2681 /* bookmarks menu-button */
2683 #bookmarks-menu-button.bookmark-item {
2684 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2685 -moz-image-region: rect(0px 16px 16px 0px);
2688 #bookmarks-menu-button.bookmark-item[starred] {
2689 -moz-image-region: rect(0px 32px 16px 16px);
2692 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2694 padding-bottom: 2px;
2697 #BMB_bookmarksPopup[side="top"],
2698 #BMB_bookmarksPopup[side="bottom"] {
2700 margin-right: -20px;
2703 #BMB_bookmarksPopup[side="left"],
2704 #BMB_bookmarksPopup[side="right"] {
2706 margin-bottom: -20px;
2709 /* bookmarking panel */
2711 #editBookmarkPanelStarIcon {
2712 list-style-image: url("chrome://browser/skin/places/starred48.png");
2717 #editBookmarkPanelStarIcon[unstarred] {
2718 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2721 #editBookmarkPanelTitle {
2725 #editBookmarkPanelHeader,
2726 #editBookmarkPanelContent {
2727 margin-bottom: .5em;
2730 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2731 #editBMPanel_folderTree {
2735 /* ::::: content area ::::: */
2738 background-color: #9C9CFF;
2743 background-color: #000000;
2747 margin-inline-start: 0;
2756 padding-inline-start: 0px;
2759 #sidebar-header > .close-icon {
2760 /* padding: 4px 2px;
2763 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2766 #sidebar-header > .close-icon:hover,
2767 #sidebar-header > .close-icon:hover:active {
2768 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2771 #sidebar-splitter:-moz-locale-dir(ltr),
2772 #sidebar:-moz-locale-dir(ltr) {
2773 border-radius: 0 5px 0 0;
2776 #sidebar-splitter:-moz-locale-dir(rtl),
2777 #sidebar:-moz-locale-dir(rtl) {
2778 border-radius: 5px 0 0 0;
2781 .browserContainer > findbar {
2783 background-color: -moz-dialog;
2784 color: -moz-DialogText;
2793 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2796 #TabsToolbar .toolbar-holder {
2797 background-color: #000000; /* correct effect of being an actual toolbar */
2800 #main-window[disablechrome] #TabsToolbar,
2801 #TabsToolbar[tabsontop="false"] {
2802 border-bottom: 1px solid #008484;
2805 /* === BEGIN tabs.inc.css === */
2808 /* --tab-toolbar-navbar-overlap: 1px; */
2809 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2810 /* --tab-min-height: 31px; */
2813 /* --tab-stroke-background-size: auto 100%; */
2817 .tabs-newtab-button,
2818 #TabsToolbar > #new-tab-button {
2823 padding: 1px 4px 2px;
2826 .tabbrowser-tab:first-of-type {
2827 margin-inline-start: 2px;
2830 .tabs-newtab-button,
2831 #TabsToolbar > #new-tab-button,
2832 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2833 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2834 border-radius: 8px 8px 0px 0px;
2835 margin-inline-start: 0;
2838 .tabs-newtab-button:not(:hover),
2839 #TabsToolbar > #new-tab-button:not(:hover),
2840 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2841 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2842 background-color: #C09070;
2845 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2846 .tabbrowser-tab[visuallyselected=true] {
2847 /* position: relative;
2851 .tab-background-middle {
2857 .tab-content[pinned] {
2862 .tab-sharing-icon-overlay,
2868 .tab-sharing-icon-overlay,
2872 margin-inline-end: 3px;
2876 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
2879 .tab-icon-image[sharing]:not([selected]),
2880 .tab-sharing-icon-overlay {
2881 animation: 3s linear tab-sharing-icon-pulse infinite;
2884 @keyframes tab-sharing-icon-pulse {
2885 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2886 0%, 16.66%, 83.33%, 100% {
2894 .tab-icon-image[sharing]:not([selected]) {
2895 animation-delay: -1.5s;
2898 .tab-sharing-icon-overlay {
2899 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2900 margin-inline-start: -22px;
2904 .tab-sharing-icon-overlay[sharing="camera"] {
2905 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2908 .tab-sharing-icon-overlay[sharing="microphone"] {
2909 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2912 .tab-sharing-icon-overlay[sharing="screen"] {
2913 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2920 margin-inline-start: -15px;
2921 margin-inline-end: -1px;
2925 .tab-icon-overlay[crashed] {
2926 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2929 .tab-icon-overlay[soundplaying],
2930 .tab-icon-overlay[muted]:not([crashed]),
2931 .tab-icon-overlay[blocked]:not([crashed]) {
2932 border-radius: 10px;
2935 .tab-icon-overlay[soundplaying]:hover,
2936 .tab-icon-overlay[muted]:hover,
2937 .tab-icon-overlay[blocked]:not([crashed]):hover {
2938 background-color: #FFCF00;
2941 .tab-icon-overlay[soundplaying] {
2942 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2945 .tab-icon-overlay[muted]:not([crashed]) {
2946 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2949 .tab-icon-overlay[blocked]:not([crashed]) {
2950 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2953 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2954 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2955 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2958 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2959 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2963 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2964 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2968 .tab-throbber[busy] {
2969 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2972 .tab-throbber[progress] {
2973 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2976 @media (min-resolution: 1.1dppx) {
2977 .tab-throbber[busy] {
2978 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2981 .tab-throbber[progress] {
2982 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2986 .tab-throbber[pinned],
2987 .tab-icon-image[pinned] {
2988 margin-inline-start: 2px;
2989 margin-inline-end: 2px;
2993 /* this needs to add up to the 16px of the icon image */
2995 margin-top: 2px !important;
2996 margin-bottom: 2px !important;
3000 margin-inline-start: 4px;
3006 .tab-icon-sound[soundplaying],
3007 .tab-icon-sound[muted],
3008 .tab-icon-sound[blocked] {
3009 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3010 filter: url(chrome://global/skin/filters.svg#fill);
3014 .tab-icon-sound[muted] {
3015 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3018 .tab-icon-sound[blocked] {
3019 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3027 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3028 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3029 transition: opacity .3s linear var(--soundplaying-removal-delay);
3034 .tabs-newtab-button {
3035 /* overlap the tab curves */
3038 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3042 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3043 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3046 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3047 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3050 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3053 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3056 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3057 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3060 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3061 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3064 .tab-background-start[selected=true]::after,
3065 .tab-background-start[selected=true]::before,
3066 .tab-background-start,
3067 .tab-background-end,
3068 .tab-background-end[selected=true]::after,
3069 .tab-background-end[selected=true]::before {
3072 .tabbrowser-tab:not([visuallyselected=true]),
3073 .tabbrowser-tab:-moz-lwtheme {
3076 /* tabbrowser-tab focus ring */
3077 .tabbrowser-tab:focus {
3078 outline: 1px dotted;
3083 .tabbrowser-tab[visuallyselected="true"] {
3086 /* End selected tab */
3088 /* Tab pointer-events */
3091 pointer-events: none;
3094 .tab-background-middle,
3095 .tabs-newtab-button,
3096 .tab-icon-overlay[soundplaying],
3097 .tab-icon-overlay[muted]:not([crashed]),
3098 .tab-icon-overlay[blocked]:not([crashed]),
3101 pointer-events: auto;
3107 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3108 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3110 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3111 background-color: #E7ADE7;
3114 .tab-label[attention]:not([selected="true"]) {
3118 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3119 background-color: #3333FF;
3123 /* Tab separators */
3125 .tabbrowser-tab::after,
3126 .tabbrowser-tab::before {
3128 margin-inline-start: -1px;
3129 background-image: linear-gradient(transparent 5px,
3131 currentColor calc(100% - 4px),
3132 transparent calc(100% - 4px));
3136 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3137 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3141 /* Also show separators beside the selected tab when dragging it. */
3143 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3144 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3145 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3150 /* New tab button */
3152 .tabs-newtab-button {
3154 /* width: calc(36px + var(--tab-curve-width)); */
3156 @media (min-resolution: 1.1dppx) {
3157 /* image preloading hack from like lowdpi styles */
3158 #tabbrowser-tabs::before {
3161 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3162 .tabs-newtab-button:hover {
3165 .tab-background-middle[selected=true] {
3168 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3169 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3172 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3173 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3177 /* All tabs menupopup */
3179 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3180 background-color: #402800;
3183 .alltabs-endimage[soundplaying],
3184 .alltabs-endimage[muted],
3185 .alltabs-endimage[blocked] {
3186 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3187 filter: url(chrome://global/skin/filters.svg#fill);
3191 .alltabs-endimage[muted] {
3192 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3195 .alltabs-endimage[blocked] {
3196 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3199 /* === END tabs.inc.css === */
3201 /* Tab DnD indicator */
3202 .tab-drop-indicator {
3203 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3204 margin-bottom: -11px;
3207 /* Tab close button */
3209 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3210 -moz-image-region: auto !important;
3213 .tab-close-button:hover,
3214 .tab-close-button:hover[selected="true"] {
3215 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3216 -moz-image-region: auto !important;
3219 .tab-close-button:hover:active,
3220 .tab-close-button:hover:active[selected="true"] {
3221 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3222 -moz-image-region: auto !important;
3225 .tab-close-button > .button-icon,
3226 .tab-close-button > .button-box > .button-icon,
3227 .tab-close-button > .toolbarbutton-icon {
3228 width: auto !important;
3232 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3234 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3235 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3239 background-origin: border-box;
3242 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3243 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3244 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3245 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3248 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3249 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3252 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3253 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3254 /* transform: scaleX(-1);*/
3257 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3258 transition: 1s background-color ease-out;
3261 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3262 background-color: #008484;
3265 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3266 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3267 /* border-width: 0 2px 0 0;
3268 border-style: solid;
3269 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3272 .tabs-newtab-button > .toolbarbutton-icon {
3274 margin-bottom: -1px;
3277 .tabs-newtab-button,
3278 #TabsToolbar > #new-tab-button,
3279 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3280 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3281 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3282 -moz-image-region: auto;
3285 .tabs-newtab-button,
3286 .tabs-newtab-button:hover,
3287 #TabsToolbar > #new-tab-button,
3288 #TabsToolbar > #new-tab-button:hover {
3291 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3292 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3293 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3294 .tabs-newtab-button:-moz-lwtheme-brighttext,
3295 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3296 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3299 #TabsToolbar > #new-tab-button {
3301 -moz-box-orient: horizontal;
3305 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3308 #alltabs-button:hover,
3309 #alltabs-button:hover:active,
3310 #alltabs-button[open="true"] {
3311 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3314 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3315 #alltabs-button:-moz-lwtheme-brighttext {
3318 #alltabs-button > .toolbarbutton-icon {
3322 #alltabs-button > .toolbarbutton-menu-dropmarker {
3326 /* All tabs menupopup */
3327 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3328 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3329 -moz-image-region: auto;
3332 .alltabs-item[selected="true"] {
3336 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3337 list-style-image: url("chrome://global/skin/icons/loading.png");
3340 @media (min-resolution: 1.1dppx) {
3341 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3342 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3346 toolbarbutton.chevron {
3347 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3350 toolbarbutton.chevron:hover {
3351 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3354 toolbar[brighttext] toolbarbutton.chevron {
3355 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3358 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3359 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3360 transform: scaleX(-1);
3363 toolbarbutton.chevron > .toolbarbutton-text,
3364 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3368 toolbarbutton.chevron > .toolbarbutton-icon {
3372 #sidebar-throbber[loading="true"] {
3373 list-style-image: url("chrome://global/skin/icons/loading.png");
3374 margin-inline-end: 4px;
3377 @media (min-resolution: 1.1dppx) {
3378 #sidebar-throbber[loading="true"] {
3379 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3384 /* Bookmarks toolbar */
3385 #PlacesToolbarDropIndicator {
3386 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3389 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3390 background-color: #008484 !important;
3391 color: #FFCF00 !important;
3394 /* rules for menupopup drop indicators */
3395 .menupopup-drop-indicator-bar {
3397 /* these two margins must together compensate the indicator's height */
3399 margin-bottom: -1px;
3402 .menupopup-drop-indicator {
3403 list-style-image: none;
3405 margin-inline-end: -4em;
3406 background-color: #008484;
3409 /* === BEGIN notification-icons.inc.css === */
3411 #notification-popup-box {
3412 border-radius: 3px 0 0 3px;
3415 margin-inline-end: -5px;
3416 padding-inline-end: 5px;
3419 .notification-anchor-icon,
3420 #blocked-permissions-container > .blocked-permission-icon {
3423 margin-inline-start: 2px;
3426 /* This class can be used alone or in combination with the class defining the
3427 type of icon displayed. This rule must be defined before the others in order
3428 for its list-style-image to be overridden. */
3429 .notification-anchor-icon {
3430 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3433 .notification-anchor-icon:-moz-focusring {
3434 outline: 1px dotted #008484;
3437 @media (min-resolution: 1.1dppx) {
3438 .notification-anchor-icon {
3439 list-style-image: url(chrome://global/skin/icons/info.svg);
3443 .notification-anchor-icon:not(.plugin-blocked),
3444 #blocked-permissions-container > .blocked-permission-icon {
3445 filter: url(chrome://global/skin/filters.svg#fill);
3449 /* INDIVIDUAL NOTIFICATIONS */
3451 .popup-notification-icon[popupid="web-notifications"],
3452 .desktop-notification-icon {
3453 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3456 .desktop-notification-icon.blocked-permission-icon {
3457 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3461 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3464 .geo-icon.blocked-permission-icon {
3465 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3468 .popup-notification-icon[popupid="geolocation"] {
3469 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3472 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3474 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3477 .indexedDB-icon.blocked-permission-icon {
3478 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3482 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3485 .popup-notification-icon[popupid="password"] {
3486 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3490 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3493 .camera-icon.in-use {
3494 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3497 .camera-icon.blocked-permission-icon {
3498 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3502 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3505 .microphone-icon.in-use {
3506 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3509 .microphone-icon.blocked-permission-icon {
3510 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3513 .popup-notification-icon.microphone-icon {
3514 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3518 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3521 .screen-icon.in-use {
3522 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3525 .screen-icon.blocked-permission-icon {
3526 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3529 #webRTC-preview:not([hidden]) {
3530 display: -moz-stack;
3532 border: 1px solid #A09090;
3538 html|*#webRTC-previewVideo {
3540 /* If we don't set the min-width, width is ignored. */
3545 #webRTC-previewWarning {
3546 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3549 padding-inline-start: calc(1.5em + 16px);
3550 border-top: 1px solid #A09090;
3553 #webRTC-previewWarning > .text-link {
3554 margin-inline-start: 0;
3557 /* This icon has a block sign in it, so we don't need a blocked version. */
3559 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3564 .popup-notification-icon[popupid="drmContentPlaying"],
3566 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3569 .drm-icon:hover:active {
3570 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3573 #eme-notification-icon[firstplay=true] {
3574 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3577 @keyframes emeTeachingMoment {
3578 0% {transform: translateX(0); }
3579 25% {transform: translateX(3px) }
3580 75% {transform: translateX(-3px) }
3581 100% { transform: translateX(0); }
3584 /* INSTALL ADDONS */
3587 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3590 .popup-notification-icon[popupid="xpinstall-disabled"],
3591 .popup-notification-icon[popupid="addon-install-blocked"],
3592 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3593 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3596 .popup-notification-icon[popupid="addon-progress"] {
3597 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3600 .popup-notification-icon[popupid="addon-install-failed"] {
3601 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3604 .popup-notification-icon[popupid="addon-install-confirmation"] {
3605 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3608 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3609 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3612 .popup-notification-icon[popupid="addon-install-complete"] {
3613 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3616 .popup-notification-icon[popupid="addon-install-restart"] {
3617 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3620 .popup-notification-icon[popupid="click-to-play-plugins"] {
3621 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3626 .popup-notification-icon[popupid*="offline-app-requested"],
3627 .popup-notification-icon[popupid="offline-app-usage"] {
3628 list-style-image: url(chrome://global/skin/icons/question-64.png);
3634 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3637 .plugin-icon.plugin-blocked {
3638 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3641 #notification-popup-box[hidden] {
3642 /* Override display:none to make the pluginBlockedNotification animation work
3643 when showing the notification repeatedly. */
3645 visibility: collapse;
3648 #plugins-notification-icon.plugin-blocked[showing] {
3649 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3652 @keyframes pluginBlockedNotification {
3663 .popup-notification-icon[popupid="servicesInstall"] {
3664 list-style-image: url(chrome://browser/skin/social/services-64.png);
3668 list-style-image: url(chrome://browser/skin/social/services-16.png);
3674 list-style-image: url(chrome://browser/skin/translation-16.png);
3675 -moz-image-region: rect(0px, 16px, 16px, 0px);
3678 .translation-icon.in-use {
3679 -moz-image-region: rect(0px, 32px, 16px, 16px);
3684 .popup-notification-icon[popupid="update-available"],
3685 .popup-notification-icon[popupid="update-manual"],
3686 .popup-notification-icon[popupid="update-restart"] {
3687 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
3691 /* === END notification-icons.inc.css === */
3693 .popup-notification-body[popupid="addon-progress"],
3694 .popup-notification-body[popupid="addon-install-confirmation"] {
3699 .addon-install-confirmation-name {
3703 .addon-webext-perm-header {
3707 .addon-webext-name {
3716 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3717 -moz-image-region: rect(0px, 288px, 32px, 256px);
3720 .addon-toolbar-icon {
3723 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
3724 -moz-image-region: rect(0, 486px, 18px, 468px);
3727 /* Notification icon box */
3729 .notification-anchor-icon:-moz-focusring {
3730 /* outline: 1px dotted -moz-DialogText;*/
3733 /* Translation infobar */
3735 /* === BEGIN infobar.inc.css === */
3737 notification[value="translation"] .messageImage {
3738 list-style-image: url("chrome://browser/skin/translation-16.png");
3739 -moz-image-region: rect(0, 32px, 16px, 16px);
3742 @media (min-resolution: 1.25dppx) {
3743 notification[value="translation"] .messageImage {
3744 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3745 -moz-image-region: rect(0, 64px, 32px, 32px);
3749 notification[value="translation"][state="translating"] .messageImage {
3750 list-style-image: url("chrome://browser/skin/translating-16.png");
3751 -moz-image-region: auto;
3754 @media (min-resolution: 1.25dppx) {
3755 notification[value="translation"][state="translating"] .messageImage {
3756 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3760 notification[value="translation"] hbox[anonid="details"] {
3764 notification[value="translation"] button,
3765 notification[value="translation"] menulist {
3769 notification[value="translation"] menulist > .menulist-dropmarker {
3772 .translation-menupopup arrowscrollbox {
3776 .translation-attribution {
3778 -moz-box-align: end;
3782 .translation-attribution > label {
3786 .translation-attribution > image {
3790 .translation-welcome-panel {
3794 .translation-welcome-logo {
3797 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3798 -moz-image-region: rect(0, 64px, 32px, 32px);
3801 .translation-welcome-content {
3802 margin-inline-start: 16px;
3805 .translation-welcome-headline {
3810 .translation-welcome-body {
3815 /* === END infobar.inc.css === */
3817 notification[value="translation"] {
3821 .translation-menupopup {
3822 -moz-appearance: none;
3825 /* Bookmarks roots menu-items */
3826 #subscribeToPageMenuitem:not([disabled]),
3827 #subscribeToPageMenupopup {
3828 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3831 #bookmarksToolbarFolderMenu,
3832 #BMB_bookmarksToolbar,
3833 #panelMenu_bookmarksToolbar {
3834 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3835 -moz-image-region: auto;
3838 #BMB_unsortedBookmarks,
3839 #panelMenu_unsortedBookmarks {
3840 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3841 -moz-image-region: auto;
3846 .statuspanel-label {
3849 background: #404000;
3850 border: 1px none #9C9CFF;
3851 border-top-style: solid;
3856 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3857 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3858 border-right-style: solid;
3859 border-top-right-radius: .3em;
3863 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3864 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3865 border-left-style: solid;
3866 border-top-left-radius: .3em;
3870 /* HACK to abolish devily color on main content */
3873 background-color: transparent !important;
3876 /* === BEGIN fullscreen/warning.inc.css === */
3878 html|*.pointerlockfswarning {
3879 align-items: center;
3880 background: rgba(0, 0, 0, 0.9);
3881 border: 2px solid #A09090;
3882 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3885 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3888 html|*.pointerlockfswarning::before {
3890 width: 24px; height: 24px;
3893 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3894 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3895 content: url("chrome://browser/skin/fullscreen/secure.svg");
3898 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3899 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3901 html|*.pointerlockfswarning-domain-text,
3902 html|*.pointerlockfswarning-generic-text {
3904 font-weight: lighter;
3909 html|*.pointerlockfswarning-domain {
3914 html|*#fullscreen-exit-button,
3915 html|*.pointerlockfswarning-exit-button {
3918 border-radius: 300px;
3920 background-color: #C09070;
3924 /* === END fullscreen/warning.inc.css === */
3926 /* === BEGIN ctrlTab.inc.css === */
3931 -moz-appearance: none;
3932 background: rgba(0%,0%,0%,.7);
3935 padding: 20px 10px 10px;
3939 .ctrlTab-favicon[src] {
3940 background-color: #000000;
3946 .ctrlTab-preview-inner > .tabPreview-canvas {
3947 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3950 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3954 .ctrlTab-preview-inner {
3956 border: 2px solid transparent;
3957 border-radius: .5em;
3960 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3961 margin: -10px -10px 0;
3964 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3965 background-color: #000000;
3968 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3970 background-color: #000000;
3972 border-color: #9C9CFF;
3979 /* === END ctrlTab.inc.css === */
3981 /* === BEGIN commandline.inc.css === */
3983 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3984 We are copy/pasting variables from light-theme and dark-theme,
3985 since they aren't loaded in this context (within browser.css). */
3986 :root #developer-toolbar {
3987 --gcli-background-color: #000000; /* --theme-toolbar-background */
3988 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3989 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3990 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3991 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3992 --selection-background: #008484; /* --theme-selection-background */
3993 --selection-color: #000000; /* --theme-selection-color */
3994 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3995 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3998 /* Developer toolbar */
4000 #developer-toolbar {
4001 border-top: 3px solid var(--gcli-background-color);
4002 border-bottom: none;
4005 #developer-toolbar .toolbar-holder {
4006 background-color: #8050B0;
4010 #developer-toolbar .toolbar-holder {
4011 background-color: #8050B0;
4015 #developer-toolbar .toolbar-startcap,
4016 #developer-toolbar .toolbar-endcap{
4017 background-color: #6000CF;
4020 #developer-toolbar {
4022 min-height: 32px; */
4025 #developer-toolbar > toolbarbutton {
4027 background-color: transparent;
4033 .developer-toolbar-button > image {
4034 /* margin: auto 10px; */
4037 #developer-toolbar-toolbox-button > label {
4041 .developer-toolbar-button > .toolbarbutton-icon {
4046 #developer-toolbar-toolbox-button {
4047 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4048 -moz-image-region: rect(0px, 16px, 16px, 0px);
4051 #developer-toolbar-toolbox-button > label {
4055 #developer-toolbar-toolbox-button:hover,
4056 #developer-toolbar-toolbox-button:hover:active,
4057 #developer-toolbar-toolbox-button[checked=true] {
4058 -moz-image-region: rect(0px, 32px, 16px, 16px);
4061 @media (min-resolution: 2dppx) {
4062 #developer-toolbar-toolbox-button {
4063 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4064 -moz-image-region: rect(0px, 32px, 32px, 0px);
4067 #developer-toolbar-toolbox-button:hover,
4068 #developer-toolbar-toolbox-button:hover:active,
4069 #developer-toolbar-toolbox-button[checked=true] {
4070 -moz-image-region: rect(0px, 64px, 32px, 32px);
4076 html|*#gcli-tooltip-frame,
4077 html|*#gcli-output-frame {
4080 background-color: transparent;
4086 background-color: transparent;
4089 .gclitoolbar-input-node,
4090 .gclitoolbar-complete-node {
4092 -moz-box-align: center;
4096 background-color: transparent;
4099 .gclitoolbar-input-node {
4100 /* line-height: 32px;
4101 outline-style: none; */
4102 background-repeat: no-repeat;
4103 background-color: var(--gcli-input-background);
4106 .gclitoolbar-input-node[focused="true"] {
4107 background-color: var(--gcli-input-focused-background);
4110 .gclitoolbar-input-node::before {
4112 display: inline-block;
4113 -moz-box-ordinal-group: 0;
4117 background-image: var(--command-line-image);
4120 .gclitoolbar-input-node[focused="true"]::before {
4121 background-image: var(--command-line-image-focus);
4124 .gclitoolbar-input-node:not([focused="true"]) {
4125 border-color: transparent;
4128 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4129 background-color: var(--selection-background);
4130 color: var(--selection-color);
4133 .gclitoolbar-complete-node {
4135 background-color: transparent;
4138 pointer-events: none;
4141 .gcli-in-incomplete,
4145 .gcli-in-closebrace,
4152 .gcli-in-incomplete {
4153 border-bottom: 2px dotted #8050B0;
4157 border-bottom: 2px dotted #FF0000;
4168 .gcli-in-closebrace {
4172 /* === END commandline.inc.css === */
4174 /* === BEGIN responsivedesign.inc.css === */
4176 /* Responsive Mode */
4178 .browserContainer[responsivemode] {
4179 background-color: #221500;
4180 padding: 0 20px 20px 20px;
4183 .browserStack[responsivemode] {
4184 box-shadow: 0 0 7px #9C9CFF;
4187 .devtools-responsiveui-toolbar {
4188 background: transparent;
4189 /* text color is textColor from dark theme, since no theme is applied to
4190 * the responsive toolbar.
4196 border-bottom-width: 0;
4199 .devtools-responsiveui-textinput {
4200 /* -moz-appearance: none;
4203 border: 1px solid #111;
4210 .devtools-responsiveui-textinput[attention] {
4211 /* border-color: #38ace6;
4212 background: rgba(56,172,230,0.4);*/
4215 .devtools-responsiveui-menulist,
4216 .devtools-responsiveui-toolbarbutton {
4217 -moz-box-align: center;
4219 /* min-height: 22px;*/
4220 /* margin: 0 3px; */
4223 .devtools-responsiveui-menulist .menulist-editable-box {
4224 background-color: transparent;
4227 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4232 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4233 /* background: hsla(212,7%,57%,.35);*/
4236 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4241 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4242 -moz-box-orient: horizontal;
4245 .devtools-responsiveui-menulist:-moz-focusring,
4246 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4247 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4248 outline-offset: -4px;*/
4251 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4255 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4256 /* border-color: hsla(210,8%,5%,.6);
4257 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4258 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4261 .devtools-responsiveui-menulist[open=true],
4262 .devtools-responsiveui-toolbarbutton[open=true],
4263 .devtools-responsiveui-toolbarbutton[checked=true] {
4264 /* border-color: hsla(210,8%,5%,.6) !important;
4265 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4266 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4269 .devtools-responsiveui-toolbarbutton[checked=true] {
4270 /* color: hsl(208,100%,60%); */
4273 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4274 /* background-color: transparent !important;*/
4277 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4278 /* background-color: hsla(210,8%,5%,.2) !important;*/
4281 .devtools-responsiveui-menulist > .menulist-label-box {
4285 .devtools-responsiveui-menulist > .menulist-dropmarker {
4286 /* display: -moz-box;
4287 background-color: transparent;
4288 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4289 -moz-box-align: center;
4294 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4297 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4298 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4301 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4302 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4305 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4306 /* padding: 0 1px;*/
4307 -moz-box-align: stretch;
4310 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4311 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4312 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4313 -moz-box-align: center;
4317 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4318 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4322 .devtools-responsiveui-close {
4323 list-style-image: url("chrome://devtools/skin/close.svg");
4326 .devtools-responsiveui-close:hover {
4327 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4330 .devtools-responsiveui-close > image {
4334 .devtools-responsiveui-rotate {
4335 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4336 -moz-image-region: rect(0px,16px,16px,0px);
4339 .devtools-responsiveui-rotate:hover {
4340 -moz-image-region: rect(0px,32px,16px,16px);
4343 @media (min-resolution: 2dppx) {
4344 .devtools-responsiveui-rotate {
4345 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4348 .devtools-responsiveui-rotate:hover {
4349 -moz-image-region: rect(0px,64px,32px,32px);
4353 .devtools-responsiveui-touch {
4354 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4355 -moz-image-region: rect(0px,16px,16px,0px);
4358 .devtools-responsiveui-touch:hover,
4359 .devtools-responsiveui-touch[checked],
4360 .devtools-responsiveui-touch[checked]:hover {
4361 -moz-image-region: rect(0px,32px,16px,16px);
4364 @media (min-resolution: 2dppx) {
4365 .devtools-responsiveui-touch {
4366 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4367 -moz-image-region: rect(0px,32px,32px,0px);
4370 .devtools-responsiveui-touch:hover,
4371 .devtools-responsiveui-touch[checked],
4372 .devtools-responsiveui-touch[checked]:hover {
4373 -moz-image-region: rect(0px,64px,32px,32px);
4377 .devtools-responsiveui-screenshot {
4378 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4379 -moz-image-region: rect(0px,16px,16px,0px);
4382 .devtools-responsiveui-screenshot:hover {
4383 -moz-image-region: rect(0px,32px,16px,16px);
4386 @media (min-resolution: 2dppx) {
4387 .devtools-responsiveui-screenshot {
4388 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4391 .devtools-responsiveui-screenshot:hover {
4392 -moz-image-region: rect(0px,64px,32px,32px);
4396 .devtools-responsiveui-resizebarV {
4400 transform: translate(12px, -12px);
4401 background-size: cover;
4402 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4405 .devtools-responsiveui-resizebarH {
4409 transform: translate(-12px, 12px);
4410 background-size: cover;
4411 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4414 .devtools-responsiveui-resizehandle {
4418 transform: translate(12px, 12px);
4419 background-size: cover;
4420 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4423 /* FxOS custom mode with additional buttons and phone look'n feel */
4425 /* Hide devtools manual resizer */
4426 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4427 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4428 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4432 /* Gives responsive mode a phone look'n feel */
4433 .browserStack[responsivemode].fxos-mode {
4434 padding: 60px 15px 0;
4436 border-radius: 25px / 20px;
4437 border-bottom-left-radius: 0;
4438 border-bottom-right-radius: 0;
4439 border: 1px solid #FFFFFF;
4440 border-bottom-width: 0;
4442 background-color: #353535;
4444 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4446 background-image: linear-gradient(to right, #111 11%, #333 56%);
4450 .devtools-responsiveui-hardware-buttons {
4451 -moz-appearance: none;
4454 border: 1px solid #FFFFFF;
4455 border-bottom-left-radius: 25px;
4456 border-bottom-right-radius: 25px;
4457 border-top-width: 0;
4459 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4461 background-image: linear-gradient(to right, #111 11%, #333 56%);
4464 .devtools-responsiveui-home-button {
4465 -moz-user-focus: ignore;
4468 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4471 .devtools-responsiveui-sleep-button {
4472 -moz-user-focus: ignore;
4473 -moz-appearance: none;
4474 /* compensate browserStack top padding */
4482 border: 1px solid #444;
4483 border-top-right-radius: 12px;
4484 border-top-left-radius: 12px;
4485 border-bottom-color: transparent;
4487 background-image: linear-gradient(to top, #111 11%, #333 56%);
4490 .devtools-responsiveui-sleep-button:hover:active {
4491 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4494 .devtools-responsiveui-volume-buttons {
4498 .devtools-responsiveui-volume-up-button,
4499 .devtools-responsiveui-volume-down-button {
4500 -moz-user-focus: ignore;
4501 -moz-appearance: none;
4502 border: 1px solid red;
4506 border: 1px solid #444;
4507 border-right-color: transparent;
4509 background-image: linear-gradient(to right, #111 11%, #333 56%);
4512 .devtools-responsiveui-volume-up-button:hover:active,
4513 .devtools-responsiveui-volume-down-button:hover:active {
4514 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4517 .devtools-responsiveui-volume-up-button {
4518 border-top-left-radius: 12px;
4521 .devtools-responsiveui-volume-down-button {
4522 border-bottom-left-radius: 12px;
4525 @media (min-resolution: 2dppx) {
4526 .devtools-responsiveui-resizebarV {
4527 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4530 .devtools-responsiveui-resizebarH {
4531 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4534 .devtools-responsiveui-resizehandle {
4535 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4539 /* === END responsivedesign.inc.css === */
4541 /* === including indicator.css is done at the start of the file === */
4545 #developer-toolbar-toolbox-button[error-count]:before {
4549 background-color: #FF0000;
4551 margin-inline-end: 5px;
4554 /* === BEGIN plugin-doorhanger.inc.css === */
4557 * Plugin Doorhanger Styles
4560 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4561 padding: 6px 1px 2px;
4564 .click-to-play-plugins-notification-center-box {
4567 .plugin-popupnotification-centeritem:nth-child(odd) {
4568 /* background-color: rgba(0,0,0,0.1);*/
4571 .center-item-label {
4573 text-overflow: ellipsis;
4576 .center-item-warning-icon {
4577 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4578 background-repeat: no-repeat;
4581 margin-inline-start: 6px;
4584 .click-to-play-plugins-notification-button-container {
4587 .click-to-play-popup-button {
4591 .click-to-play-plugins-notification-description-box {
4595 padding-bottom: 3px;
4598 .click-to-play-plugins-outer-description {
4602 .click-to-play-plugins-notification-link,
4607 .messageImage[value="plugin-hidden"] {
4608 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4611 /* Keep any changes to this style in sync with pluginProblem.css */
4612 notification.pluginVulnerable {
4615 notification.pluginVulnerable .messageImage {
4616 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4619 /* === END plugin-doorhanger.inc.css === */
4621 /* === BEGIN customizeMode.inc.css === */
4623 /* Customization mode */
4626 --drag-drop-transition-duration: .3s;
4629 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4630 background-repeat: no-repeat;
4631 background-position: right top;
4632 background-attachment: fixed;
4633 background-color: transparent;
4634 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4635 var(--toolbox-rect-height), 0),
4636 linear-gradient(to bottom,
4637 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4638 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4639 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4640 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4641 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4642 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4645 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4649 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4650 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4651 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4656 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4657 pointer-events: none;
4660 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4661 #PanelUI-contents > .panel-customization-placeholder {
4662 -moz-outline-radius: 2.5px;
4663 outline: 1px dashed transparent;
4666 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4667 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4668 -moz-box-ordinal-group: 0;
4673 outline-offset: -2px;
4674 pointer-events: none;
4680 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4681 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4682 offset from the bottom effectively the same as other targets (-2px). */
4683 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4687 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4688 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4689 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4690 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4694 /* Most target outlines are shown on hover and drag over but the panel menu uses
4695 placeholders instead. */
4696 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4697 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4698 /* nav-bar and panel outlines are always shown */
4699 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4700 outline-color: currentColor;
4703 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4704 transition: outline-color 250ms linear;
4707 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4708 transition: outline-color 250ms linear;
4709 outline-color: var(--panel-separator-color);
4712 #PanelUI-contents > .panel-customization-placeholder {
4714 outline-offset: -5px;
4717 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4719 /* padding-left: 10px;
4720 padding-right: 10px;*/
4723 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4727 #customization-container {
4728 background-color: #000000;
4732 #customization-palette,
4733 #customization-empty {
4734 padding: 0 15px 15px;
4737 #customization-header {
4739 line-height: 1.75em;
4742 margin: 25px 25px 12px;
4743 padding-bottom: 12px;
4744 border-bottom: 1px solid #A09090;
4747 #customization-panel-container {
4748 padding: 10px 10px 0px;
4751 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4752 #customization-footer {
4753 /*background-color: rgb(236,236,236);*/
4756 #customization-footer {
4757 border-top: 1px solid #9C9CFF;
4761 .customizationmode-button {
4765 .customizationmode-button:hover {
4768 .customizationmode-button > .box-inherit {
4771 .customizationmode-button > .button-icon {
4774 .customizationmode-button:not([type=menu]) > .button-text {
4777 .customizationmode-button > .button-menu-dropmarker {
4782 .customizationmode-button[checked] {
4783 background-color: #008484;
4786 .customizationmode-button[checked]:hover:not([disabled]),
4787 .customizationmode-button:hover:not([disabled]) {
4788 background-color: #FFCF00;
4791 .customizationmode-button[checked]:hover:active:not([disabled]),
4792 .customizationmode-button:hover:active:not([disabled]),
4793 .customizationmode-button[open] {
4794 background-color: #FF9F00;
4797 .customizationmode-button[disabled="true"] {
4800 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4801 .customizationmode-button > .button-box > .button-icon {
4805 #customization-titlebar-visibility-button {
4806 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4807 -moz-image-region: rect(0, 16px, 16px, 0);
4810 #customization-titlebar-visibility-button:hover {
4811 -moz-image-region: rect(16px, 16px, 32px, 0);
4814 #customization-titlebar-visibility-button > .button-box {
4816 padding-bottom: 1px;
4819 #customization-titlebar-visibility-button:hover:active > .button-box {
4824 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4825 #customization-titlebar-visibility-button > .button-box > .button-text {
4826 /* Sadly, button.css thinks its margins are perfect for everyone. */
4827 margin-inline-start: 5px !important;
4830 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4834 background-image: url("chrome://browser/content/default-theme-icon.svg");
4835 background-size: contain;
4838 #customization-titlebar-visibility-button > .button-box > .button-icon {
4839 vertical-align: middle;
4842 #customization-titlebar-visibility-button[checked] {
4843 -moz-image-region: rect(0, 32px, 16px, 16px);
4844 background-color: #008484;
4847 #customization-titlebar-visibility-button[checked]:hover {
4848 -moz-image-region: rect(16px, 32px, 32px, 16px);
4849 background-color: #FFCF00;
4852 #customization-titlebar-visibility-button[checked]:hover:active {
4853 background-color: #FF9F00;
4856 @media (min-resolution: 1.1dppx) {
4857 #customization-titlebar-visibility-button {
4858 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4859 -moz-image-region: rect(0, 48px, 48px, 0);
4862 #customization-titlebar-visibility-button:hover {
4863 -moz-image-region: rect(48px, 48px, 96px, 0);
4866 #customization-titlebar-visibility-button[checked] {
4867 -moz-image-region: rect(0, 96px, 48px, 48px);
4870 #customization-titlebar-visibility-button[checked]:hover {
4871 -moz-image-region: rect(48px, 96px, 96px, 48px);
4875 #main-window[customize-entered] #customization-panel-container {
4876 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4877 background-position: left top;
4878 background-repeat: repeat;
4879 background-size: auto;
4880 background-attachment: fixed;
4883 toolbarpaletteitem[place="toolbar"] {
4884 transition: border-width 250ms ease-in-out;
4887 toolbarpaletteitem[mousedown] {
4888 outline: 1px solid #008484;
4889 cursor: -moz-grabbing;
4893 .panel-customization-placeholder,
4894 toolbarpaletteitem[place="palette"],
4895 toolbarpaletteitem[place="panel"] {
4896 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4899 #customization-palette {
4900 transition: opacity .3s ease-in-out;
4904 #customization-palette[showing="true"] {
4908 toolbarpaletteitem toolbarbutton[disabled] {
4909 /* color: inherit !important;*/
4912 toolbarpaletteitem[notransition].panel-customization-placeholder,
4913 toolbarpaletteitem[notransition][place="toolbar"],
4914 toolbarpaletteitem[notransition][place="palette"],
4915 toolbarpaletteitem[notransition][place="panel"] {
4919 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4920 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4921 toolbarpaletteitem > toolbaritem.panel-wide-item,
4922 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4923 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4926 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4927 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4928 transform: scale(1.3);
4931 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4932 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4933 transform: scale(1.1);
4936 /* Override the toolkit styling for items being dragged over. */
4937 toolbarpaletteitem[place="toolbar"] {
4938 border-left-width: 0;
4939 border-right-width: 0;
4944 #customization-palette:not([hidden]) {
4945 margin-bottom: 25px;
4948 toolbarpaletteitem[place="palette"]:-moz-focusring,
4949 toolbarpaletteitem[place="panel"]:-moz-focusring,
4950 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4954 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4955 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4956 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4957 /* Delay adding the focusring back until after the transform transition completes. */
4958 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4959 outline: 1px dotted;
4960 -moz-outline-radius: 2.5px;
4963 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4964 outline-offset: -5px;
4967 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4968 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4969 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4970 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4974 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4975 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4985 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4986 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4990 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4991 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4994 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4995 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4999 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5000 -moz-box-pack: center;
5004 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5005 margin-inline-end: 5px;
5008 #customization-palette > toolbarpaletteitem > label {
5014 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5015 -moz-box-orient: vertical;
5016 /* Make the panel padding uniform across all platforms due to the
5017 styling of the section headers and footer. */
5021 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5026 .customization-lwtheme-menu-theme {
5027 -moz-appearance: none;
5030 padding-inline-end: 5px;
5032 padding-inline-start: 0;
5035 .customization-lwtheme-menu-theme[defaulttheme] {
5036 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
5039 .customization-lwtheme-menu-theme[active="true"] {
5040 background-color: #008484;
5043 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5047 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5051 #customization-lwtheme-menu-header,
5052 #customization-lwtheme-menu-recommended {
5057 #customization-lwtheme-menu-header,
5058 #customization-lwtheme-menu-recommended,
5059 #customization-lwtheme-menu-footer {
5060 background-color: #A09090;
5062 margin-right: -10px;
5066 #customization-lwtheme-menu-header {
5068 border-top-right-radius: 3px;
5069 border-top-left-radius: 3px;
5072 #customization-lwtheme-menu-recommended {
5075 #customization-lwtheme-menu-footer {
5076 margin-bottom: -10px;
5077 border-bottom-right-radius: 3px;
5078 border-bottom-left-radius: 3px;
5081 .customization-lwtheme-menu-footeritem {
5082 -moz-appearance: none;
5084 background-color: #C09070;
5086 border: 1px solid transparent;
5092 .customization-lwtheme-menu-footeritem:hover {
5093 background-color: #FFCF00;
5096 .customization-lwtheme-menu-footeritem:first-child {
5099 /* === END customizeMode.inc.css === */
5101 /* === BEGIN customizeTip.inc.css === */
5103 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5110 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5111 border: 1px solid #9C9CFF;
5115 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5116 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5119 .customization-tipPanel-infoBox {
5120 margin: 20px 25px 25px;
5122 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5123 background-repeat: no-repeat;
5126 .customization-tipPanel-content {
5132 .customization-tipPanel-em {
5137 .customization-tipPanel-contentImage {
5139 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5147 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5148 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5151 .customization-tipPanel-link {
5152 -moz-appearance: none;
5153 background: transparent;
5161 .customization-tipPanel-link > .button-box > .button-text {
5162 margin: 0 !important;
5165 .customization-tipPanel-closeBox > .close-icon {
5166 -moz-appearance: none;
5168 margin-inline-end: -25px;
5171 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5172 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5173 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5176 /* === END customizeTip.inc.css === */
5179 * This next rule is a hack to disable subpixel anti-aliasing on all
5180 * labels during the customize mode transition. Subpixel anti-aliasing
5181 * on Windows with Direct2D layers acceleration is particularly slow to
5182 * paint, so this hack is how we sidestep that performance bottleneck.
5184 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5185 transform: perspective(0.01px);
5188 #main-window[customize-entered] > #tab-view-deck {
5189 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5190 background-attachment: fixed;
5193 #main-window[customization-lwtheme]:-moz-lwtheme {
5194 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5195 background-repeat: repeat;
5196 background-attachment: fixed;
5197 background-position: left top;
5200 #main-window[customize-entered] #browser-bottombox,
5201 #main-window[customize-entered] #customization-container {
5202 border-left: 1px solid #9C9CFF;
5203 border-right: 1px solid #9C9CFF;
5204 background-clip: padding-box;
5207 #main-window[customize-entered] #browser-bottombox {
5208 border-bottom: 1px solid #9C9CFF;
5211 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5215 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5219 /* End customization mode */
5221 /* Private browsing indicators */
5224 * Currently, we have two places where we put private browsing indicators on
5225 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5226 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5227 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5228 * want the bottom border of the image to line up with the bottom of the window
5229 * caption buttons. That's why there's so much special-casing going on in here.
5231 .private-browsing-indicator {
5233 pointer-events: none;
5236 #private-browsing-indicator-titlebar {
5241 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5245 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5249 #TabsToolbar > .private-browsing-indicator {
5250 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5251 margin-inline-start: 4px;
5255 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5256 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5257 * min/max/close window buttons.
5259 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5260 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5261 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5262 margin-inline-end: 4px;
5268 /* This one is for Linux */
5269 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5270 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5274 /* End private browsing indicators */
5276 /* === BEGIN UITour.inc.css === */
5280 #UITourHighlightContainer {
5281 -moz-appearance: none;
5283 background-color: transparent;
5284 /* This is a buffer to compensate for the movement in the "wobble" effect,
5285 and for the box-shadow of #UITourHighlight. */
5290 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5291 border-radius: 40px;
5292 border: 1px solid #9C9CFF;
5293 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5294 on Linux without an X compositor where opacity is either 0 or 1. */
5295 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5300 #UITourTooltipBody {
5301 -moz-box-align: start;
5304 #UITourTooltipTitleContainer {
5305 -moz-box-align: start;
5306 margin-bottom: 10px;
5309 #UITourTooltipIcon {
5312 margin-inline-end: 10px;
5315 #UITourTooltipTitle,
5316 #UITourTooltipDescription {
5320 #UITourTooltipTitle {
5326 #UITourTooltipDescription {
5327 margin-inline-start: 0;
5328 margin-inline-end: 0;
5330 line-height: 1.8rem;
5331 margin-bottom: 0; /* Override global.css */
5334 #UITourTooltipClose {
5336 -moz-appearance: none;
5338 background-color: transparent;
5340 margin-inline-start: 4px;
5344 #UITourTooltipClose > .toolbarbutton-text {
5348 #UITourTooltipButtons {
5350 background-color: rgba(0,0,0,.2);
5351 border-top: 1px solid rgba(0,0,0,.4);
5352 margin: 10px -16px -16px;
5356 #UITourTooltipButtons > label,
5357 #UITourTooltipButtons > button {
5361 #UITourTooltipButtons > label:first-child,
5362 #UITourTooltipButtons > button:first-child {
5363 margin-inline-start: 0;
5366 #UITourTooltipButtons > label:last-child,
5367 #UITourTooltipButtons > button:last-child {
5368 margin-inline-end: 0;
5371 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5374 margin-inline-end: 5px;
5377 #UITourTooltipButtons > label,
5378 #UITourTooltipButtons > button .button-text {
5382 #UITourTooltipButtons > button:not(.button-link) {
5383 -moz-appearance: none;
5384 background-color: #C09070;
5385 border-radius: 3000px;
5389 transition-property: background-color, color;
5390 transition-duration: 150ms;
5393 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5394 background-color: #FFCF00;
5398 #UITourTooltipButtons > label,
5399 #UITourTooltipButtons > button.button-link {
5400 -moz-appearance: none;
5401 background: transparent;
5404 color: rgba(0,0,0,0.35);
5406 padding-right: 10px;
5409 #UITourTooltipButtons > button.button-link:hover {
5413 /* The primary button gets the same color as the customize button. */
5414 #UITourTooltipButtons > button.button-primary {
5415 background-color: #A06060; /* LCARS default button background color */
5418 padding-right: 30px;
5421 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5422 background-color: #FFCF00;
5426 /* Notification overrides for Heartbeat UI */
5428 notification.heartbeat {
5429 background-color: #A09090;
5433 @keyframes pulse-onshow {
5436 transform: scale(1.0);
5440 transform: scale(1.1);
5443 transform: scale(1.0);
5446 transform: scale(1.1);
5449 transform: scale(1.0);
5453 @keyframes pulse-twice {
5455 transform: scale(1.1);
5458 transform: scale(0.8);
5461 transform: scale(1);
5465 .messageText.heartbeat {
5467 /* text-shadow: none; */
5468 margin-inline-start: 0px;
5471 .messageImage.heartbeat {
5474 margin-inline-start: 8px;
5475 margin-inline-end: 8px;
5478 .messageImage.heartbeat.pulse-onshow {
5479 animation-name: pulse-onshow;
5480 animation-duration: 1.5s;
5481 animation-iteration-count: 1;
5482 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5485 .messageImage.heartbeat.pulse-twice {
5486 animation-name: pulse-twice;
5487 animation-duration: 1s;
5488 animation-iteration-count: 2;
5489 animation-timing-function: linear;
5492 /* Learn More link styles */
5493 .heartbeat > .text-link {
5495 margin-inline-start: 0px;
5498 .heartbeat > .text-link:hover {
5500 text-decoration: none;
5503 .heartbeat > .text-link:hover:active {
5507 /* Heartbeat UI Rating Star Classes */
5508 .heartbeat > #star-rating-container {
5510 /* margin-bottom: 4px;*/
5513 .heartbeat > #star-rating-container > #star5 {
5514 -moz-box-ordinal-group: 5;
5517 .heartbeat > #star-rating-container > #star4 {
5518 -moz-box-ordinal-group: 4;
5521 .heartbeat > #star-rating-container > #star3 {
5522 -moz-box-ordinal-group: 3;
5525 .heartbeat > #star-rating-container > #star2 {
5526 -moz-box-ordinal-group: 2;
5529 .heartbeat > #star-rating-container > .star-x {
5530 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5532 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5533 margin-inline-end: 4px !important;
5538 .heartbeat > #star-rating-container > .star-x:hover,
5539 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5540 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5543 /* === END UITour.inc.css === */
5545 #UITourTooltipButtons {
5547 * Override the --arrowpanel-padding so the background extends
5548 * to the sides and bottom of the panel.
5551 margin-right: -10px;
5552 margin-bottom: -10px;
5555 /* === BEGIN contextmenu.inc.css === */
5557 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5560 #context-navigation > .menuitem-iconic {
5562 -moz-box-pack: center;
5563 -moz-box-align: center;
5566 #context-navigation > .menuitem-iconic[disabled="true"] {
5567 background-color: transparent;
5570 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5571 -moz-appearance: none;
5574 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5578 filter: url(chrome://global/skin/filters.svg#fill);
5583 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5587 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5591 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5595 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5598 #context-bookmarkpage {
5599 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5602 #context-bookmarkpage[starred=true] {
5603 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5606 #context-back:-moz-locale-dir(rtl),
5607 #context-forward:-moz-locale-dir(rtl),
5608 #context-reload:-moz-locale-dir(rtl) {
5609 transform: scaleX(-1);
5612 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5613 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5619 #context-media-eme-learnmore {
5620 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5623 #context-media-eme-learnmore {
5624 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5627 /* === END contextmenu.inc.css === */
5629 #context-navigation {
5632 #context-sep-navigation {
5633 /* margin-top: -4px; */
5636 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5641 .webextension-popup-browser {
5642 border-radius: inherit;
5645 .contentSelectDropdown-ingroup > .menu-iconic-text {
5646 padding-inline-start: 20px;
5649 #ContentSelectDropdown > menupopup {
5650 background-color: #000000;
5651 -moz-border-top-colors: #A09090;
5652 -moz-border-right-colors: #A09090;
5653 -moz-border-bottom-colors: #A09090;
5654 -moz-border-left-colors: #A09090;
5657 #ContentSelectDropdown > menupopup > menucaption,
5658 #ContentSelectDropdown > menupopup > menuitem {
5661 /* font: -moz-list;*/
5664 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5665 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5666 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5667 with 4px being the preferred padding size. */
5668 padding-top: .3333em;
5669 padding-bottom: .3333em;
5672 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5676 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5678 background-color: unset;
5681 #ContentSelectDropdown > menupopup > menucaption {
5682 background-color: buttonface;
5685 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5689 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5690 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5691 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5692 font-size with 11px being the preferred padding size. */
5693 padding-top: .9167em;
5694 padding-bottom: .9167em;