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");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
47 --identity-box-verified-background-color: #000000;
49 --panel-separator-color: #A09090;
51 --urlbar-separator-color: #9C9CFF;
55 -moz-box-orient: vertical; /* for flex hack */
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
62 /* ::::: primary toolbar ::::: */
64 .toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
82 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
83 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
89 /* margin-top: var(--space-above-tabbar);*/
92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
93 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
100 /* 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 */
104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
108 outline-color: #A09090;
114 #navigator-toolbox::after {
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
121 #navigator-toolbox > toolbar {
124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
128 overflow: -moz-hidden-unscrollable;
130 transition: min-height 170ms ease-out, max-height 170ms ease-out;
133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
140 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
141 /* Indent also due to non-applicable aero rule in original Windows theme. */
142 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
143 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
145 background-color: #6000CF;
149 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
150 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
151 background-color: #8050B0;
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
170 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
171 #titlebar-buttonbox > .titlebar-button {
177 /* Position the toolbar above the bottom of background tabs */
182 #personal-bookmarks {
183 /* min-height: 24px; */
186 #PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
190 #PersonalToolbar > #home-button > .toolbarbutton-text {
194 #print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
198 #browser-bottombox:not(:-moz-lwtheme) {
201 /* ::::: titlebar ::::: */
205 background-color: #6000CF;
208 #titlebar:-moz-window-inactive {
209 background-color: #8050B0;
213 #main-window[sizemode="normal"] > #titlebar {
218 #main-window[sizemode="maximized"] > #titlebar {
222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
223 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
227 /* There is a margin-bottom set to -23 by code. */
231 /* The button box must appear on top of the navigator-toolbox in order for
232 * click and hover mouse events to work properly for the button in the restored
233 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
234 * can swallow those events. It will also place the buttons above the fog on
235 * themes with Aero Glass.
238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
239 -moz-appearance: none;
242 margin-inline-end: 3px;
246 .titlebar-placeholder[type="appmenu-button"] {
250 .titlebar-placeholder[type="caption-buttons"] {
254 /* titlebar command buttons */
256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
259 #titlebar-min:hover {
260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
267 #titlebar-max:hover {
268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
271 #main-window[sizemode="maximized"] #titlebar-max {
272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
275 #main-window[sizemode="maximized"] #titlebar-max:hover {
276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
283 #titlebar-close:hover {
284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
288 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
289 #titlebar-fullscreen-button {
290 -moz-appearance: none;
291 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
292 -moz-image-region: rect(0px, 16px, 16px, 0px);
295 #titlebar-fullscreen-button:hover {
296 -moz-image-region: rect(0px, 32px, 16px, 16px);
299 @media (min-resolution: 2dppx) {
300 #titlebar-fullscreen-button {
301 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
302 -moz-image-region: rect(0px, 32px, 32px, 0px);
305 #titlebar-fullscreen-button:hover {
306 -moz-image-region: rect(0px, 64px, 32px, 32px);
312 /* ::::: bookmark buttons ::::: */
314 toolbarbutton.bookmark-item:not(.subviewbutton),
315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
318 -moz-appearance: none;
319 border: 1px solid transparent;*/
322 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
323 /* border-color: var(--toolbarbutton-hover-bordercolor);
324 background: var(--toolbarbutton-hover-background);*/
327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
328 /* border-color: var(--toolbarbutton-active-bordercolor);
329 box-shadow: var(--toolbarbutton-active-boxshadow);
330 background: var(--toolbarbutton-active-background);*/
333 .bookmark-item > .toolbarbutton-icon,
334 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
337 margin-inline-start: 1px;
338 margin-inline-end: 2px;
343 /* Force the display of the label for bookmarks */
344 .bookmark-item > .toolbarbutton-text,
345 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
346 display: -moz-box !important;
349 .bookmark-item > .toolbarbutton-menu-dropmarker {
353 #bookmarks-toolbar-placeholder {
354 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
355 -moz-box-orient: horizontal;
358 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
359 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
360 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
363 /* ----- BOOKMARK STAR ANIMATION ----- */
365 @keyframes animation-bookmarkAdded {
366 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
367 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
369 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
372 @keyframes animation-bookmarkPulse {
373 from { transform: scale(1); }
374 50% { transform: scale(1.3); }
375 to { transform: scale(1); }
378 #bookmarked-notification-container {
387 #bookmarked-notification {
388 background-size: 16px;
389 background-position: center;
390 background-repeat: no-repeat;
396 #bookmarked-notification-dropmarker-anchor {
401 #bookmarked-notification-dropmarker-icon {
407 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
408 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
409 animation: animation-bookmarkAdded 800ms;
410 animation-timing-function: ease, ease, ease;
413 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
414 list-style-image: none !important;
417 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
419 animation: animation-bookmarkPulse 300ms;
420 animation-delay: 600ms;
421 animation-timing-function: ease-out;
424 /* ::::: bookmark menus ::::: */
427 menuitem.bookmark-item {
432 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
437 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
438 padding-inline-start: 0px;
441 /* ::::: bookmark items ::::: */
444 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
445 -moz-image-region: auto;
448 .bookmark-item[container] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
450 -moz-image-region: auto;
453 .bookmark-item[container][open] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
455 -moz-image-region: auto;
458 .bookmark-item[container][livemark] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
460 -moz-image-region: auto;
463 .bookmark-item[container][livemark] .bookmark-item {
464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
465 -moz-image-region: rect(0px, 16px, 16px, 0px);
468 .bookmark-item[container][livemark] .bookmark-item[visited] {
469 -moz-image-region: rect(0px, 32px, 16px, 16px);
472 .bookmark-item[container][query] {
473 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
474 -moz-image-region: auto;
477 .bookmark-item[query][tagContainer] {
478 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][dayContainer] {
483 list-style-image: url("chrome://communicator/skin/history/calendar.png");
484 -moz-image-region: auto;
487 .bookmark-item[query][hostContainer] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
489 -moz-image-region: auto;
492 .bookmark-item[query][hostContainer][open] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
494 -moz-image-region: auto;
497 .bookmark-item[cutting] > .toolbarbutton-icon,
498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
502 .bookmark-item[cutting] > .toolbarbutton-text,
503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
507 /* ::::: primary toolbar buttons ::::: */
509 /* === BEGIN toolbarbuttons.inc.css === */
511 /* Whole section of this included file: */
512 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
513 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
514 #social-share-button, #open-file-button, #find-button, #developer-button,
515 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
516 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
517 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
518 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
519 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
520 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
524 -moz-image-region: rect(0, 36px, 18px, 18px);
527 #back-button:hover:not([disabled="true"]) {
528 -moz-image-region: rect(18px, 36px, 36px, 18px);
531 #back-button[disabled="true"] {
532 -moz-image-region: rect(36px, 36px, 54px, 18px);
536 -moz-image-region: rect(0, 72px, 18px, 54px);
539 #forward-button:hover:not([disabled="true"]) {
540 -moz-image-region: rect(18px, 72px, 36px, 54px);
543 #forward-button[disabled="true"] {
544 -moz-image-region: rect(36px, 72px, 54px, 54px);
547 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
548 #forward-button:-moz-locale-dir(rtl) {
549 transform: scaleX(-1);
552 #home-button[cui-areatype="toolbar"] {
553 -moz-image-region: rect(0, 126px, 18px, 108px);
556 #home-button[cui-areatype="toolbar"]:hover {
557 -moz-image-region: rect(18px, 126px, 36px, 108px);
560 #bookmarks-menu-button[cui-areatype="toolbar"] {
561 -moz-image-region: rect(0, 144px, 18px, 126px);
564 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
565 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
566 -moz-image-region: rect(18px, 144px, 36px, 126px);
569 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
570 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
571 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
572 background-color: transparent !important;
575 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
576 -moz-image-region: rect(0, 162px, 18px, 144px);
579 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
580 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
581 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
582 /* When starred and clicked (for edit/delete dialog),
583 * then only the menubutton-button itself is open, but not the whole menubutton. */
584 -moz-image-region: rect(18px, 162px, 36px, 144px);
587 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
588 -moz-image-region: rect(0, 630px, 18px, 612px);
591 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
593 -moz-box-align: center;
596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
598 -moz-image-region: rect(18px, 630px, 36px, 612px);
601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
605 padding-inline-start: 2px;
606 padding-inline-end: 0px;
609 #history-panelmenu[cui-areatype="toolbar"] {
610 -moz-image-region: rect(0, 180px, 18px, 162px);
613 #history-panelmenu[cui-areatype="toolbar"]:hover,
614 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
615 -moz-image-region: rect(18px, 180px, 36px, 162px);
618 #downloads-button[cui-areatype="toolbar"] {
619 -moz-image-region: rect(0, 198px, 18px, 180px);
622 #downloads-button[cui-areatype="toolbar"]:hover,
623 #downloads-button[cui-areatype="toolbar"][open="true"] {
624 -moz-image-region: rect(18px, 198px, 36px, 180px);
627 #add-ons-button[cui-areatype="toolbar"] {
628 -moz-image-region: rect(0, 216px, 18px, 198px);
631 #add-ons-button[cui-areatype="toolbar"]:hover {
632 -moz-image-region: rect(18px, 216px, 36px, 198px);
635 #open-file-button[cui-areatype="toolbar"] {
636 -moz-image-region: rect(0, 234px, 18px, 216px);
639 #open-file-button[cui-areatype="toolbar"]:hover {
640 -moz-image-region: rect(18px, 234px, 36px, 216px);
643 #save-page-button[cui-areatype="toolbar"] {
644 -moz-image-region: rect(0, 252px, 18px, 234px);
647 #save-page-button[cui-areatype="toolbar"]:hover {
648 -moz-image-region: rect(18px, 252px, 36px, 234px);
651 #sync-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 792px, 18px, 774px);
655 #sync-button[cui-areatype="toolbar"]:hover {
656 -moz-image-region: rect(18px, 792px, 36px, 774px);
659 #containers-panelmenu[cui-areatype="toolbar"] {
660 -moz-image-region: rect(0, 810px, 18px, 792px);
663 #containers-panelmenu[cui-areatype="toolbar"]:hover {
664 -moz-image-region: rect(18px, 810px, 36px, 792px);
667 #feed-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0, 288px, 18px, 270px);
671 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
672 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
673 -moz-image-region: rect(18px, 288px, 36px, 270px);
676 #feed-button[cui-areatype="toolbar"][disabled="true"] {
677 -moz-image-region: rect(36px, 288px, 54px, 270px);
680 #social-share-button[cui-areatype="toolbar"] {
681 -moz-image-region: rect(0px, 306px, 18px, 288px);
684 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685 #social-share-button[cui-areatype="toolbar"][open="true"] {
686 -moz-image-region: rect(18px, 306px, 36px, 288px);
689 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 306px, 54px, 288px);
693 #characterencoding-button[cui-areatype="toolbar"] {
694 -moz-image-region: rect(0, 324px, 18px, 306px);
697 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
698 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
699 -moz-image-region: rect(18px, 324px, 36px, 306px);
702 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
703 -moz-image-region: rect(36px, 324px, 54px, 306px);
706 #new-window-button[cui-areatype="toolbar"] {
707 -moz-image-region: rect(0, 342px, 18px, 324px);
710 #new-window-button[cui-areatype="toolbar"]:hover {
711 -moz-image-region: rect(18px, 342px, 36px, 324px);
714 #e10s-button[cui-areatype="toolbar"] {
715 -moz-image-region: rect(0, 342px, 18px, 324px);
718 #e10s-button[cui-areatype="toolbar"]:hover {
719 -moz-image-region: rect(18px, 342px, 36px, 324px);
722 #e10s-button > .toolbarbutton-icon {
723 transform: scaleY(-1);
726 #new-tab-button[cui-areatype="toolbar"] {
727 -moz-image-region: rect(0, 360px, 18px, 342px);
730 #new-tab-button[cui-areatype="toolbar"]:hover {
731 -moz-image-region: rect(18px, 360px, 36px, 342px);
734 #privatebrowsing-button[cui-areatype="toolbar"] {
735 -moz-image-region: rect(0, 378px, 18px, 360px);
738 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
739 -moz-image-region: rect(18px, 378px, 36px, 360px);
742 #find-button[cui-areatype="toolbar"] {
743 -moz-image-region: rect(0, 396px, 18px, 378px);
746 #find-button[cui-areatype="toolbar"]:hover {
747 -moz-image-region: rect(18px, 396px, 36px, 378px);
750 #print-button[cui-areatype="toolbar"] {
751 -moz-image-region: rect(0, 414px, 18px, 396px);
754 #print-button[cui-areatype="toolbar"]:hover {
755 -moz-image-region: rect(18px, 414px, 36px, 396px);
758 #fullscreen-button[cui-areatype="toolbar"] {
759 -moz-image-region: rect(0, 432px, 18px, 414px);
762 #fullscreen-button[cui-areatype="toolbar"]:hover {
763 -moz-image-region: rect(18px, 432px, 36px, 414px);
766 #developer-button[cui-areatype="toolbar"] {
767 -moz-image-region: rect(0, 450px, 18px, 432px);
770 #developer-button[cui-areatype="toolbar"]:hover,
771 #developer-button[cui-areatype="toolbar"][open="true"] {
772 -moz-image-region: rect(18px, 450px, 36px, 432px);
775 #preferences-button[cui-areatype="toolbar"] {
776 -moz-image-region: rect(0, 468px, 18px, 450px);
779 #preferences-button[cui-areatype="toolbar"]:hover {
780 -moz-image-region: rect(18px, 468px, 36px, 450px);
783 #PanelUI-menu-button {
784 -moz-image-region: rect(0, 486px, 18px, 468px);
787 #PanelUI-menu-button:hover,
788 #PanelUI-menu-button[open="true"] {
789 -moz-image-region: rect(18px, 486px, 36px, 468px);
792 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
793 -moz-image-region: rect(0, 504px, 18px, 486px);
796 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
797 -moz-image-region: rect(18px, 504px, 36px, 486px);
800 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
801 -moz-image-region: rect(36px, 504px, 54px, 486px);
804 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
805 -moz-image-region: rect(0, 522px, 18px, 504px);
808 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
809 -moz-image-region: rect(18px, 522px, 36px, 504px);
812 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
813 -moz-image-region: rect(36px, 522px, 54px, 504px);
816 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
817 -moz-image-region: rect(0, 540px, 18px, 522px);
820 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
821 -moz-image-region: rect(18px, 540px, 36px, 522px);
824 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
825 -moz-image-region: rect(36px, 540px, 54px, 522px);
828 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
829 -moz-image-region: rect(0, 558px, 18px, 540px);
832 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
833 -moz-image-region: rect(18px, 558px, 36px, 540px);
836 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
837 -moz-image-region: rect(36px, 558px, 54px, 540px);
840 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
841 -moz-image-region: rect(0, 576px, 18px, 558px);
844 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
845 -moz-image-region: rect(18px, 576px, 36px, 558px);
848 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
849 -moz-image-region: rect(36px, 576px, 54px, 558px);
852 #nav-bar-overflow-button {
853 -moz-image-region: rect(0, 612px, 18px, 594px);
856 #nav-bar-overflow-button:hover,
857 #nav-bar-overflow-button[open="true"] {
858 -moz-image-region: rect(18px, 612px, 36px, 594px);
861 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
862 transform: scaleX(-1);
866 -moz-image-region: rect(0, 648px, 18px, 630px);
869 #tabview-button:hover {
870 -moz-image-region: rect(18px, 648px, 36px, 630px);
873 #email-link-button[cui-areatype="toolbar"] {
874 -moz-image-region: rect(0, 666px, 18px, 648px);
877 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
878 -moz-image-region: rect(18px, 666px, 36px, 648px);
881 #email-button[cui-areatype="toolbar"][disabled="true"] {
882 -moz-image-region: rect(36px, 666px, 54px, 648px);
885 #sidebar-button[cui-areatype="toolbar"] {
886 -moz-image-region: rect(0, 684px, 18px, 666px);
889 #sidebar-button[cui-areatype="toolbar"]:hover {
890 -moz-image-region: rect(18px, 684px, 36px, 666px);
893 #panic-button[cui-areatype="toolbar"] {
894 -moz-image-region: rect(0, 702px, 18px, 684px);
897 #panic-button[cui-areatype="toolbar"]:hover,
898 #panic-button[cui-areatype="toolbar"][open] {
899 -moz-image-region: rect(18px, 702px, 36px, 684px);
902 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
903 transform: scaleX(-1);
906 #webide-button[cui-areatype="toolbar"] {
907 -moz-image-region: rect(0, 738px, 18px, 720px);
910 #webide-button[cui-areatype="toolbar"]:hover {
911 -moz-image-region: rect(18px, 738px, 36px, 720px);
914 /* === END toolbarbuttons.inc.css === */
916 /* === BEGIN menupanel.inc.css === */
918 /* Menu panel and palette styles */
921 /* avoid aero overrides with changed filenames */
922 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
923 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
926 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
927 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
928 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
929 #social-share-button, #open-file-button, #find-button, #developer-button,
930 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
931 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
932 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
933 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
934 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
935 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
936 #social-share-button, #open-file-button, #find-button, #developer-button,
937 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
938 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
939 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
940 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
941 list-style-image: var(--menupanel-list-style-image);
944 #home-button[cui-areatype="menu-panel"],
945 toolbarpaletteitem[place="palette"] > #home-button {
946 -moz-image-region: rect(0px, 128px, 32px, 96px);
949 #home-button[cui-areatype="menu-panel"]:hover,
950 toolbarpaletteitem[place="palette"] > #home-button:hover {
951 -moz-image-region: rect(32px, 128px, 64px, 96px);
954 #bookmarks-menu-button[cui-areatype="menu-panel"],
955 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
956 -moz-image-region: rect(0px, 192px, 32px, 160px);
959 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
960 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
961 -moz-image-region: rect(32px, 192px, 64px, 160px);
964 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
965 -moz-image-region: rect(32px, 192px, 64px, 160px);
968 #history-panelmenu[cui-areatype="menu-panel"],
969 toolbarpaletteitem[place="palette"] > #history-panelmenu {
970 -moz-image-region: rect(0px, 224px, 32px, 192px);
973 #history-panelmenu[cui-areatype="menu-panel"]:hover,
974 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
975 -moz-image-region: rect(32px, 224px, 64px, 192px);
978 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
979 -moz-image-region: rect(32px, 224px, 64px, 192px);
982 #downloads-button[cui-areatype="menu-panel"],
983 toolbarpaletteitem[place="palette"] > #downloads-button {
984 -moz-image-region: rect(0px, 256px, 32px, 224px);
987 #downloads-button[cui-areatype="menu-panel"]:hover,
988 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
989 -moz-image-region: rect(32px, 256px, 64px, 224px);
992 #add-ons-button[cui-areatype="menu-panel"],
993 toolbarpaletteitem[place="palette"] > #add-ons-button {
994 -moz-image-region: rect(0px, 288px, 32px, 256px);
997 #add-ons-button[cui-areatype="menu-panel"]:hover,
998 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
999 -moz-image-region: rect(32px, 288px, 64px, 256px);
1002 #open-file-button[cui-areatype="menu-panel"],
1003 toolbarpaletteitem[place="palette"] > #open-file-button {
1004 -moz-image-region: rect(0px, 320px, 32px, 288px);
1007 #open-file-button[cui-areatype="menu-panel"]:hover,
1008 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1009 -moz-image-region: rect(32px, 320px, 64px, 288px);
1012 #save-page-button[cui-areatype="menu-panel"],
1013 toolbarpaletteitem[place="palette"] > #save-page-button {
1014 -moz-image-region: rect(0px, 352px, 32px, 320px);
1017 #save-page-button[cui-areatype="menu-panel"]:hover,
1018 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1019 -moz-image-region: rect(32px, 352px, 64px, 320px);
1022 #sync-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #sync-button {
1024 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1027 #sync-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1029 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1032 #containers-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1034 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1037 #containers-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1039 #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1040 -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1043 #feed-button[cui-areatype="menu-panel"],
1044 toolbarpaletteitem[place="palette"] > #feed-button {
1045 -moz-image-region: rect(0px, 416px, 32px, 384px);
1048 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1049 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1050 -moz-image-region: rect(32px, 416px, 64px, 384px);
1053 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1054 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1055 -moz-image-region: rect(64px, 416px, 96px, 384px);
1058 #social-share-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #social-share-button {
1060 -moz-image-region: rect(0px, 448px, 32px, 416px);
1063 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1064 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1065 -moz-image-region: rect(32px, 448px, 64px, 416px);
1068 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1069 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1070 -moz-image-region: rect(64px, 448px, 96px, 416px);
1073 #characterencoding-button[cui-areatype="menu-panel"],
1074 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1075 -moz-image-region: rect(0px, 480px, 32px, 448px);
1078 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1079 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1080 -moz-image-region: rect(32px, 480px, 64px, 448px);
1083 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1084 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1085 -moz-image-region: rect(64px, 480px, 96px, 448px);
1088 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1089 -moz-image-region: rect(32px, 480px, 64px, 448px);
1092 #new-window-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #new-window-button {
1094 -moz-image-region: rect(0px, 512px, 32px, 480px);
1097 #new-window-button[cui-areatype="menu-panel"]:hover,
1098 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1099 -moz-image-region: rect(32px, 512px, 64px, 480px);
1102 #e10s-button[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #e10s-button {
1104 -moz-image-region: rect(0px, 512px, 32px, 480px);
1107 #e10s-button[cui-areatype="menu-panel"]:hover,
1108 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1109 -moz-image-region: rect(32px, 512px, 64px, 480px);
1112 #new-tab-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #new-tab-button {
1114 -moz-image-region: rect(0px, 544px, 32px, 512px);
1117 #new-tab-button[cui-areatype="menu-panel"]:hover,
1118 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1119 -moz-image-region: rect(32px, 544px, 64px, 512px);
1122 #privatebrowsing-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1124 -moz-image-region: rect(0px, 576px, 32px, 544px);
1127 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1128 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1129 -moz-image-region: rect(32px, 576px, 64px, 544px);
1132 #tabview-button[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #tabview-button {
1134 -moz-image-region: rect(0px, 608px, 32px, 576px);
1137 #tabview-button[cui-areatype="menu-panel"]:hover,
1138 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1139 -moz-image-region: rect(32px, 608px, 64px, 576px);
1142 #find-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #find-button {
1144 -moz-image-region: rect(0px, 640px, 32px, 608px);
1147 #find-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #find-button:hover {
1149 -moz-image-region: rect(32px, 640px, 64px, 608px);
1152 #print-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #print-button {
1154 -moz-image-region: rect(0px, 672px, 32px, 640px);
1157 #print-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #print-button:hover {
1159 -moz-image-region: rect(32px, 672px, 64px, 640px);
1162 #fullscreen-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1164 -moz-image-region: rect(0px, 704px, 32px, 672px);
1167 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1169 -moz-image-region: rect(32px, 704px, 64px, 672px);
1172 #developer-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #developer-button {
1174 -moz-image-region: rect(0px, 736px, 32px, 704px);
1177 #developer-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1179 -moz-image-region: rect(32px, 736px, 64px, 704px);
1182 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1183 -moz-image-region: rect(32px, 736px, 64px, 704px);
1186 #preferences-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #preferences-button {
1188 -moz-image-region: rect(0px, 768px, 32px, 736px);
1191 #preferences-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1193 -moz-image-region: rect(32px, 768px, 64px, 736px);
1196 #email-link-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #email-link-button {
1198 -moz-image-region: rect(0, 800px, 32px, 768px);
1201 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1202 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1203 -moz-image-region: rect(32px, 800px, 64px, 768px);
1206 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1207 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1208 -moz-image-region: rect(64px, 800px, 96px, 768px);
1211 #sidebar-button[cui-areatype="menu-panel"],
1212 toolbarpaletteitem[place="palette"] > #sidebar-button {
1213 -moz-image-region: rect(0, 864px, 32px, 832px);
1216 #sidebar-button[cui-areatype="menu-panel"]:hover,
1217 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1218 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1219 -moz-image-region: rect(32px, 864px, 64px, 832px);
1222 #panic-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #panic-button {
1224 -moz-image-region: rect(0, 896px, 32px, 864px);
1227 #panic-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1229 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1230 -moz-image-region: rect(32px, 896px, 64px, 864px);
1233 #webide-button[cui-areatype="menu-panel"],
1234 toolbarpaletteitem[place="palette"] > #webide-button {
1235 -moz-image-region: rect(0px, 960px, 32px, 928px);
1238 #webide-button[cui-areatype="menu-panel"]:hover,
1239 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1240 -moz-image-region: rect(32px, 960px, 64px, 928px);
1243 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1244 -moz-image-region: rect(0, 832px, 32px, 800px);
1247 /* Wide panel control icons */
1249 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1250 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1251 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1252 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1253 list-style-image: var(--menupanel-small-list-style-image);
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1258 -moz-image-region: rect(0px, 32px, 16px, 16px);
1261 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1262 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1263 -moz-image-region: rect(16px, 32px, 32px, 16px);
1266 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1267 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1268 -moz-image-region: rect(32px, 32px, 48px, 16px);
1271 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1272 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1273 -moz-image-region: rect(0px, 48px, 16px, 32px);
1276 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1277 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1278 -moz-image-region: rect(16px, 48px, 32px, 32px);
1281 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1282 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1283 -moz-image-region: rect(32px, 48px, 48px, 32px);
1286 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1287 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1288 -moz-image-region: rect(0px, 64px, 16px, 48px);
1291 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1292 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1293 -moz-image-region: rect(16px, 64px, 32px, 48px);
1296 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1297 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1298 -moz-image-region: rect(32px, 64px, 48px, 48px);
1301 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1302 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1303 -moz-image-region: rect(0px, 80px, 16px, 64px);
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1307 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1308 -moz-image-region: rect(16px, 80px, 32px, 64px);
1311 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1312 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1313 -moz-image-region: rect(32px, 80px, 48px, 64px);
1316 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1317 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1318 -moz-image-region: rect(0px, 96px, 16px, 80px);
1321 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1323 -moz-image-region: rect(16px, 96px, 32px, 80px);
1326 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1327 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1328 -moz-image-region: rect(32px, 96px, 48px, 80px);
1331 #add-share-provider {
1332 list-style-image: var(--menupanel-small-list-style-image);
1333 -moz-image-region: rect(0px, 96px, 16px, 80px);
1336 /* === END menupanel.inc.css === */
1338 .toolbarbutton-1:not([type="menu-button"]) {
1339 -moz-box-orient: vertical;
1343 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1349 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350 .toolbarbutton-1[disabled="true"]:hover:active,
1351 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1355 .toolbarbutton-1:hover:active,
1356 .toolbarbutton-1[open="true"],
1357 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1359 padding-bottom: 0px;
1360 padding-inline-start: 3px;
1361 padding-inline-end: 1px;
1364 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1365 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1366 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1367 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1371 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1372 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1375 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1376 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1379 .toolbarbutton-1 > .toolbarbutton-icon,
1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1384 #nav-bar .toolbarbutton-1,
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1388 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1389 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1390 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1393 #nav-bar #PanelUI-menu-button {
1394 /* padding-inline-start: 7px;
1395 padding-inline-end: 5px;*/
1398 #nav-bar .toolbarbutton-1[type=panel],
1399 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1400 /* padding-left: 5px;
1401 padding-right: 5px;*/
1404 #nav-bar .toolbarbutton-1 > menupopup {
1405 /* margin-top: -3px;*/
1408 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1412 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1413 /* padding-inline-end: 0;*/
1416 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1417 /* padding-inline-start: 0;
1418 -moz-box-align: center;*/
1421 .findbar-button > .toolbarbutton-text,
1422 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1423 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1424 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1425 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1426 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1427 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1428 /* padding: 2px 6px;
1430 border-color: transparent;
1431 transition-property: background-color, border-color;
1432 transition-duration: 150ms;*/
1435 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1436 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1437 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1438 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1442 /* Help SDK icons fit: */
1443 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1444 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1448 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1449 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1453 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1454 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1455 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1456 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1457 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1458 /* padding-inline-end: 17px;*/
1461 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1462 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1463 /* horizontal padding + border + icon width */
1464 /* max-width: 43px;*/
1467 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1470 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1473 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1476 #nav-bar .toolbaritem-combined-buttons {
1477 /* margin-left: 2px;
1478 margin-right: 2px;*/
1481 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1486 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1487 #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 {
1493 margin-inline-end: -1px;
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1500 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1501 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1502 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1503 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1504 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1505 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1506 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1507 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1508 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1511 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1512 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1513 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1514 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1515 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1516 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1519 #TabsToolbar .toolbarbutton-1,
1520 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1521 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1522 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1525 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1526 #TabsToolbar .toolbarbutton-1[open],
1527 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1528 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1529 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1532 /* unified back/forward button */
1535 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1538 #forward-button > menupopup {
1539 margin-top: 1px !important;
1542 #forward-button > .toolbarbutton-icon {
1543 background-clip: padding-box !important;
1544 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1545 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1549 margin-inline-start: -4px !important;
1554 border-radius: 0 10000px 10000px 0;
1555 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1558 #forward-button:-moz-locale-dir(rtl) {
1559 border-radius: 10000px 0 0 10000px;
1562 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1563 transition: margin-left 150ms ease-out;
1566 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1567 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1570 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1571 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1572 transition-delay: 100s;
1575 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1576 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1577 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1581 /* padding-top: 3px !important;
1582 padding-bottom: 3px !important;
1583 padding-inline-start: 5px !important;
1584 padding-inline-end: 0 !important;*/
1587 border-radius: 10000px;
1591 margin-bottom: -2px;
1594 #back-button:-moz-locale-dir(rtl) {
1597 #back-button > menupopup {
1598 margin-top: -1px !important;
1601 #back-button > .toolbarbutton-icon {
1602 border-radius: 10000px !important;
1603 background-clip: padding-box !important;
1604 /* background-color: hsla(210,25%,98%,.08) !important;
1605 padding: 6px !important;
1606 border-style: none !important;
1607 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1608 0 0 0 1px hsla(210,4%,10%,.25);*/
1609 transition-property: background-color, box-shadow !important;
1610 transition-duration: 250ms !important;
1613 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1614 /* background-color: hsla(210,4%,10%,.08) !important;*/
1617 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1618 #back-button[open="true"] > .toolbarbutton-icon {
1619 /* background-color: hsla(210,4%,10%,.12) !important;
1620 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1621 0 0 0 1px hsla(210,4%,10%,.25),
1622 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1625 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1626 transform: scaleX(-1);
1629 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1630 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1631 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1634 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1635 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1636 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1639 #home-button.bookmark-item {
1640 list-style-image: url("chrome://browser/skin/Toolbar.png");
1643 #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),
1644 #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),
1645 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1646 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1647 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1648 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1649 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1652 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1655 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1656 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1657 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1661 #downloads-button > .toolbarbutton-icon {
1665 /* tabview menu item */
1668 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1669 -moz-image-region: rect(1px, 89px, 17px, 73px);
1672 #menu_tabview[groups="0"] {
1673 -moz-image-region: rect(1px, 17px, 17px, 1px);
1676 #menu_tabview[groups="1"] {
1677 -moz-image-region: rect(1px, 35px, 17px, 19px);
1680 #menu_tabview[groups="2"] {
1681 -moz-image-region: rect(1px, 53px, 17px, 37px);
1684 #menu_tabview[groups="3"] {
1685 -moz-image-region: rect(1px, 71px, 17px, 55px);
1688 /* undo close tab menu item */
1689 #alltabs_undoCloseTab {
1690 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1693 @media (min-resolution: 1.1dppx) {
1694 #alltabs_undoCloseTab {
1695 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1697 #alltabs_undoCloseTab > .toolbarbutton-icon {
1702 /* zoom control text (reset) button special case: */
1704 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1705 /* To make this line up with the icons, it needs the same height (18px) +
1706 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1707 * increase in text sizes would break things...
1712 /* ::::: fullscreen window controls ::::: */
1717 -moz-appearance: none;
1719 /* margin: 0 !important;
1720 padding: 6px 12px;*/
1724 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1727 #minimize-button:hover {
1728 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1732 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1735 #restore-button:hover {
1736 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1739 #minimize-button:hover,
1740 #restore-button:hover {
1741 /* background-color: hsla(0, 0%, 0%, .12);*/
1744 #minimize-button:hover:active,
1745 #restore-button:hover:active {
1746 /* background-color: hsla(0, 0%, 0%, .22);*/
1750 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1753 #close-button:hover {
1754 /* background-color: hsl(355, 86%, 49%);*/
1755 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1758 #close-button:hover:active {
1759 /* background-color: hsl(355, 82%, 69%);*/
1762 /* ::::: Location Bar ::::: */
1765 .searchbar-textbox {
1768 margin-inline-start: 3px;
1772 /* make color as light as possible to deal with dark non-domain parts */
1776 #urlbar:-moz-lwtheme,
1777 .searchbar-textbox:-moz-lwtheme {
1778 /* background-color: rgba(255,255,255,.8);
1779 @navbarTextboxCustomBorder@
1783 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1784 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1785 /* background-color: rgba(255,255,255,.9);*/
1788 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1789 .searchbar-textbox:-moz-lwtheme[focused] {
1790 /* background-color: white;*/
1793 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1794 /* border-inline-start: none;
1798 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1799 /* border-top-left-radius: 0;
1800 border-bottom-left-radius: 0; */
1803 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1804 /* border-top-right-radius: 0;
1805 border-bottom-right-radius: 0; */
1808 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1809 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1810 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1813 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1814 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1815 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1816 transform: scaleX(-1);
1819 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1820 -moz-box-direction: reverse;
1823 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1829 -moz-box-orient: horizontal;
1830 -moz-box-align: stretch;
1833 .urlbar-textbox-container {
1834 -moz-box-align: stretch;
1838 margin-inline-start: 0;
1842 #urlbar-display-box {
1843 padding-inline-start: 4px;
1844 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1845 border-inline-end: 1px solid var(--urlbar-separator-color);
1846 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1847 border-image-slice: 1; */
1851 -moz-box-align: center;
1856 /* 16x16 icon with border-box sizing */
1861 .search-go-container {
1865 .search-go-container > .search-go-button {
1869 #urlbar-search-footer {
1870 border-top: 1px solid #A09090;
1873 #urlbar-search-settings {
1876 #urlbar-search-settings:hover {
1879 #urlbar-search-settings:hover:active {
1882 #urlbar-search-splitter {
1884 margin-inline-start: -3px;
1886 background: transparent;
1889 #urlbar-search-splitter + #urlbar-container > #urlbar,
1890 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1891 margin-inline-start: 0;
1895 border-inline-end: 1px solid #9C9CFF;
1896 margin-inline-end: 3px;
1899 margin-inline-start: 0;
1903 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1905 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1906 border-bottom: 1px solid #A09090;
1907 background-color: #000000;
1909 padding-inline-start: 44px;
1910 padding-inline-end: 6px;
1911 background-image: url("chrome://browser/skin/info.svg");
1912 background-clip: padding-box;
1913 background-position: 20px center;
1914 background-repeat: no-repeat;
1915 background-size: 16px 16px;
1918 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1919 background-position: right 20px center;
1922 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1927 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1928 margin-inline-start: 0;
1931 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1932 -moz-appearance: none;
1937 margin-inline-start: 10px;
1940 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1943 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1946 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1949 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1952 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1955 min-width: calc(54px + 11ch);
1960 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1961 background-color: var(--identity-box-verified-background-color);
1964 #identity-box:-moz-focusring {
1965 outline: 1px dotted #008484;
1966 outline-offset: -1px;
1969 #identity-box.verifiedDomain:-moz-focusring,
1970 #identity-box.verifiedIdentity:-moz-focusring {
1971 outline-color: #000000;
1974 /* Location bar dropmarker */
1976 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1977 background-color: transparent;
1980 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1981 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1982 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1985 transition: opacity 0.15s ease;
1988 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1992 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1996 .urlbar-history-dropmarker:hover {
1999 .urlbar-history-dropmarker:hover:active,
2000 .urlbar-history-dropmarker[open="true"] {
2003 /* page proxy icon */
2005 /* === BEGIN identity-block.inc.css === */
2008 --identity-box-verified-color: #008484;
2009 /* Default theme does different color per channel, we can't as they do it build-time. */
2010 --identity-box-chrome-color: #9C9CFF;
2016 /* The latter two properties have a transition to handle the delayed hiding of
2017 the forward button when hovered. */
2018 transition: background-color 150ms ease, padding-left, padding-right;
2021 #identity-box:-moz-locale-dir(ltr) {
2022 border-top-right-radius: 0;
2023 border-bottom-right-radius: 0;
2026 #identity-box:-moz-locale-dir(rtl) {
2027 border-top-left-radius: 0;
2028 border-bottom-left-radius: 0;
2031 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2032 color: var(--identity-box-chrome-color);
2033 border-inline-end: 1px solid var(--identity-box-chrome-color);
2036 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2037 color: var(--identity-box-verified-color);
2038 border-inline-end: 1px solid var(--identity-box-verified-color);
2041 #identity-icon-labels:-moz-locale-dir(ltr) {
2045 #identity-icon-labels:-moz-locale-dir(rtl) {
2049 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2050 /* border-radius: 0;
2051 padding-inline-start: 2px; */
2052 padding-inline-end: 2px;
2053 margin-inline-end: 1px;
2056 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2057 padding-inline-start: 2px;
2060 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2061 /* Forward button hiding is delayed when hovered, so we should use the same
2062 delay for the identity box. We handle both horizontal paddings (for LTR and
2063 RTL), the latter two delays here are for padding-left and padding-right. */
2064 transition-delay: 0s, 100s, 100s;
2067 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2068 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2069 padding-inline-start: 2.01px;
2072 /* MAIN IDENTITY ICON */
2077 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2080 #identity-box:hover > #identity-icon:not(.no-hover),
2081 #identity-box[open=true] > #identity-icon {
2082 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2085 #identity-box.grantedPermissions > #identity-icon {
2086 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2089 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2090 #identity-box.grantedPermissions[open=true] > #identity-icon {
2091 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2094 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2095 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2098 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2102 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2103 -moz-image-region: inherit;
2104 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2110 /* TRACKING PROTECTION ICON */
2112 #tracking-protection-icon {
2115 margin-inline-start: 2px;
2116 margin-inline-end: 0;
2117 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2121 #tracking-protection-icon[state="loaded-tracking-content"] {
2122 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2125 #tracking-protection-icon[animate] {
2126 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2129 #tracking-protection-icon:not([state]) {
2130 margin-inline-end: -18px;
2131 pointer-events: none;
2133 /* Only animate the shield in, when it disappears hide it immediately. */
2137 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2138 visibility: collapse;
2141 /* CONNECTION ICON */
2146 margin-inline-start: 2px;
2147 visibility: collapse;
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2152 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2153 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2154 visibility: visible;
2157 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2158 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2159 visibility: visible;
2162 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2163 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2164 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2165 visibility: visible;
2168 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2169 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2170 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2171 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2172 visibility: visible;
2175 /* === END identity-block.inc.css === */
2177 #page-proxy-favicon {
2178 -moz-image-region: rect(0, 16px, 16px, 0);
2181 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2182 /* margin-inline-end: 1px;*/
2185 #identity-box:hover > #page-proxy-favicon {
2186 -moz-image-region: rect(0, 32px, 16px, 16px);
2189 #identity-box:hover:active > #page-proxy-favicon,
2190 #identity-box[open=true] > #page-proxy-favicon {
2191 -moz-image-region: rect(0, 48px, 16px, 32px);
2194 #identity-box:hover {
2195 background-color: #FFCF00;
2199 #identity-box:hover:active,
2200 #identity-box[open=true] {
2201 background-color: #A09090;
2205 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2206 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2207 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2208 background-color: #9C9CFF;
2212 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2214 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2215 background-color: #008484;
2219 #identity-box:hover > image,
2220 #identity-box:hover:active > image,
2221 #identity-box[open=true] > image {
2222 filter: url(chrome://global/skin/icons/filters.svg#active-icon-state);
2227 #treecolAutoCompleteImage {
2232 .autocomplete-richlistbox {
2236 .autocomplete-richlistitem {
2241 border: 1px solid transparent;
2244 .autocomplete-richlistitem[selected=true] {
2245 background-color: hsl(210, 80%, 52%);
2250 /* color: hsl(0, 0%, 0%);*/
2258 background-color: hsl(216, 0%, 88%);
2259 color: hsl(0, 0%, 0%);
2261 border: 1px solid transparent;
2273 /* color: hsl(0, 0%, 50%);*/
2284 .ac-title[selected=true],
2285 .ac-separator[selected],
2286 .ac-url[selected=true],
2287 .ac-action[selected=true] {
2291 .ac-tags-text[selected] > html|span.ac-tag {
2292 background-color: #A09090;
2296 html|span.ac-emphasize-text-title,
2297 html|span.ac-emphasize-text-tag,
2298 html|span.ac-emphasize-text-url {
2302 .ac-type-icon[type=bookmark] {
2303 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2306 .ac-type-icon[type=bookmark][selected][current] {
2307 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2310 .ac-result-type-bookmark,
2311 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2312 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2313 -moz-image-region: rect(0px 16px 16px 0px);
2318 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2319 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2320 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2323 .ac-type-icon[type=keyword],
2324 .ac-site-icon[type=searchengine],
2325 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2326 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2329 .ac-type-icon[type=keyword][selected],
2330 .ac-site-icon[type=searchengine][selected],
2331 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2332 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2335 .ac-result-type-tag,
2336 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2337 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2342 .ac-type-icon[type=switchtab],
2343 .ac-type-icon[type=remotetab] {
2344 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2347 .ac-type-icon[type=switchtab][selected],
2348 .ac-type-icon[type=remotetab][selected] {
2349 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2352 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2353 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2359 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2360 border-top: 1px solid #9C9CFF;
2363 /* combined go/reload/stop button in location bar */
2366 #urlbar-reload-button,
2367 #urlbar-stop-button {
2369 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2370 /* margin: 0 9px; */
2371 margin-inline-start: 0px;
2372 border-inline-start: 1px solid var(--urlbar-separator-color);
2373 border-image: linear-gradient(transparent 15%,
2374 var(--urlbar-separator-color) 15%,
2375 var(--urlbar-separator-color) 85%,
2377 border-image-slice: 1;
2380 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2381 border-top-left-radius: 0px;
2382 border-bottom-left-radius: 0px;
2385 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2386 border-top-right-radius: 0px;
2387 border-bottom-right-radius: 0px;
2390 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2391 #urlbar-reload-button:not(:hover) {
2392 border-inline-start-style: none;
2393 padding-inline-start: 3px;
2396 #urlbar-reload-button {
2397 -moz-image-region: rect(0px, 14px, 14px, 0px);
2400 #urlbar-reload-button[disabled=true] {
2401 -moz-image-region: rect(28px, 14px, 42px, 0px);
2404 #urlbar-reload-button:not([disabled=true]):hover {
2405 -moz-image-region: rect(14px, 14px, 28px, 0px);
2408 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2409 transform: scaleX(-1);
2413 -moz-image-region: rect(0, 42px, 14px, 28px);
2416 #urlbar-go-button:hover {
2417 -moz-image-region: rect(14px, 42px, 28px, 28px);
2420 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2421 transform: scaleX(-1);
2424 #urlbar-stop-button {
2425 -moz-image-region: rect(0px, 28px, 14px, 14px);
2428 #urlbar-stop-button:hover {
2429 -moz-image-region: rect(14px, 28px, 28px, 14px);
2432 @media (min-resolution: 1.1dppx) {
2434 #urlbar-reload-button,
2435 #urlbar-stop-button {
2436 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2439 #urlbar-go-button > .toolbarbutton-icon,
2440 #urlbar-reload-button > .toolbarbutton-icon,
2441 #urlbar-stop-button > .toolbarbutton-icon {
2446 -moz-image-region: rect(0, 84px, 28px, 56px);
2449 #urlbar-go-button:hover {
2450 -moz-image-region: rect(28px, 84px, 56px, 56px);
2453 #urlbar-go-button:hover:active {
2454 -moz-image-region: rect(56px, 84px, 84px, 56px);
2457 #urlbar-reload-button {
2458 -moz-image-region: rect(0, 28px, 28px, 0);
2461 #urlbar-reload-button:not([disabled]):hover {
2462 -moz-image-region: rect(28px, 28px, 56px, 0);
2465 #urlbar-reload-button:not([disabled]):hover:active {
2466 -moz-image-region: rect(56px, 28px, 84px, 0);
2469 #urlbar-stop-button {
2470 -moz-image-region: rect(0, 56px, 28px, 28px);
2473 #urlbar-stop-button:not([disabled]):hover {
2474 -moz-image-region: rect(28px, 56px, 56px, 28px);
2477 #urlbar-stop-button:hover:active {
2478 -moz-image-region: rect(56px, 56px, 84px, 28px);
2482 /* popup blocker button */
2484 #page-report-button {
2485 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2486 -moz-image-region: rect(0, 16px, 16px, 0);
2489 #page-report-button:hover ,
2490 #page-report-button:hover:active,
2491 #page-report-button[open="true"] {
2492 -moz-image-region: rect(0, 32px, 16px, 16px);
2495 /* Reader mode button */
2497 #reader-mode-button {
2498 list-style-image: url("chrome://browser/skin/readerMode.svg");
2499 -moz-image-region: rect(0, 16px, 16px, 0);
2502 #reader-mode-button:hover,
2503 #reader-mode-button[readeractive]:hover {
2504 -moz-image-region: rect(0, 32px, 16px, 16px);
2507 #reader-mode-button:hover:active,
2508 #reader-mode-button[readeractive] {
2509 -moz-image-region: rect(0, 48px, 16px, 32px);
2512 /* social share panel */
2514 .social-share-frame {
2521 background-color: white;
2522 background-repeat: no-repeat;
2523 background-position: center center;
2525 #share-container[loading] {
2526 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2528 #share-container > browser {
2529 transition: opacity 150ms ease-in-out;
2532 #share-container[loading] > browser {
2536 .social-share-toolbar {
2537 border-bottom: 1px solid #9C9CFF;
2541 #social-share-provider-buttons {
2546 .share-provider-button {
2551 .share-provider-button > .toolbarbutton-text {
2554 .share-provider-button > .toolbarbutton-icon {
2560 /* fixup corners for share panel */
2561 .social-panel > .social-panel-frame {
2562 border-radius: inherit;
2565 #social-share-panel {
2571 .social-share-frame {
2572 border-top-left-radius: 0;
2573 border-bottom-left-radius: inherit;
2574 border-top-right-radius: 0;
2575 border-bottom-right-radius: inherit;
2578 #social-share-panel > .social-share-toolbar {
2579 border-top-left-radius: inherit;
2580 border-top-right-radius: inherit;
2583 #social-share-provider-buttons {
2584 border-top-left-radius: inherit;
2585 border-top-right-radius: inherit;
2588 /* social recommending panel */
2590 #social-mark-button {
2591 -moz-image-region: rect(0, 16px, 16px, 0);
2594 /* bookmarks menu-button */
2596 #bookmarks-menu-button.bookmark-item {
2597 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2598 -moz-image-region: rect(0px 16px 16px 0px);
2601 #bookmarks-menu-button.bookmark-item[starred] {
2602 -moz-image-region: rect(0px 32px 16px 16px);
2605 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2607 padding-bottom: 2px;
2610 #BMB_bookmarksPopup[side="top"],
2611 #BMB_bookmarksPopup[side="bottom"] {
2613 margin-right: -20px;
2616 #BMB_bookmarksPopup[side="left"],
2617 #BMB_bookmarksPopup[side="right"] {
2619 margin-bottom: -20px;
2622 /* bookmarking panel */
2624 #editBookmarkPanelStarIcon {
2625 list-style-image: url("chrome://browser/skin/places/starred48.png");
2630 #editBookmarkPanelStarIcon[unstarred] {
2631 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2634 #editBookmarkPanelTitle {
2638 #editBookmarkPanelHeader,
2639 #editBookmarkPanelContent {
2640 margin-bottom: .5em;
2643 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2644 #editBMPanel_folderTree {
2648 /* ::::: content area ::::: */
2651 background-color: #9C9CFF;
2656 background-color: #000000;
2660 margin-inline-start: 0;
2669 padding-inline-start: 0px;
2672 #sidebar-header > .close-icon {
2673 /* padding: 4px 2px;
2676 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2679 #sidebar-header > .close-icon:hover,
2680 #sidebar-header > .close-icon:hover:active {
2681 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2684 #sidebar-splitter:-moz-locale-dir(ltr),
2685 #sidebar:-moz-locale-dir(ltr) {
2686 border-radius: 0 5px 0 0;
2689 #sidebar-splitter:-moz-locale-dir(rtl),
2690 #sidebar:-moz-locale-dir(rtl) {
2691 border-radius: 5px 0 0 0;
2694 .browserContainer > findbar {
2696 background-color: -moz-dialog;
2697 color: -moz-DialogText;
2706 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2709 #TabsToolbar .toolbar-holder {
2710 background-color: #000000; /* correct effect of being an actual toolbar */
2713 #main-window[disablechrome] #TabsToolbar,
2714 #TabsToolbar[tabsontop="false"] {
2715 border-bottom: 1px solid #008484;
2718 /* === BEGIN tabs.inc.css === */
2721 /* --tab-toolbar-navbar-overlap: 1px; */
2722 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2723 /* --tab-min-height: 31px; */
2726 /* --tab-stroke-background-size: auto 100%; */
2730 .tabs-newtab-button,
2731 #TabsToolbar > #new-tab-button {
2736 padding: 1px 4px 2px;
2739 .tabbrowser-tab:first-of-type {
2740 margin-inline-start: 2px;
2743 .tabs-newtab-button,
2744 #TabsToolbar > #new-tab-button,
2745 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2746 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2747 border-radius: 8px 8px 0px 0px;
2748 margin-inline-start: 0;
2751 .tabs-newtab-button:not(:hover),
2752 #TabsToolbar > #new-tab-button:not(:hover),
2753 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2754 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2755 background-color: #C09070;
2758 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2759 .tabbrowser-tab[visuallyselected=true] {
2760 /* position: relative;
2764 .tab-background-middle {
2770 .tab-content[pinned] {
2775 .tab-sharing-icon-overlay,
2781 .tab-sharing-icon-overlay,
2785 margin-inline-end: 3px;
2789 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2792 .tab-icon-image[sharing]:not([selected]),
2793 .tab-sharing-icon-overlay {
2794 animation: 3s linear pulse infinite;
2798 0%, 16.66%, 83.33%, 100% {
2806 .tab-icon-image[sharing]:not([selected]) {
2807 animation-delay: -1.5s;
2810 .tab-sharing-icon-overlay {
2811 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2812 margin-inline-start: -22px;
2816 .tab-sharing-icon-overlay[sharing="camera"] {
2817 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2820 .tab-sharing-icon-overlay[sharing="microphone"] {
2821 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2824 .tab-sharing-icon-overlay[sharing="screen"] {
2825 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2828 .tab-sharing-icon-overlay[sharing] {
2829 filter: url("chrome://browser/skin/filters.svg#fill");
2837 margin-inline-start: -15px;
2838 margin-inline-end: -1px;
2842 .tab-icon-overlay[crashed] {
2843 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2846 .tab-icon-overlay[soundplaying],
2847 .tab-icon-overlay[muted]:not([crashed]) {
2848 border-radius: 10px;
2851 .tab-icon-overlay[soundplaying]:hover,
2852 .tab-icon-overlay[muted]:hover {
2853 background-color: #FFCF00;
2856 .tab-icon-overlay[soundplaying] {
2857 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2860 .tab-icon-overlay[muted]:not([crashed]) {
2861 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2864 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2865 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2869 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2870 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2873 .tab-throbber[busy] {
2874 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2877 .tab-throbber[progress] {
2878 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2881 @media (min-resolution: 1.1dppx) {
2882 .tab-throbber[busy] {
2883 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2886 .tab-throbber[progress] {
2887 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2891 .tab-throbber[pinned],
2892 .tab-icon-image[pinned] {
2893 margin-inline-start: 2px;
2894 margin-inline-end: 2px;
2898 /* this needs to add up to the 16px of the icon image */
2900 margin-top: 2px !important;
2901 margin-bottom: 2px !important;
2905 margin-inline-start: 4px;
2911 .tab-icon-sound[muted] {
2912 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2915 .tab-icon-sound[muted]:hover {
2916 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2919 .tab-icon-sound[muted]:hover:active {
2920 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2923 .tab-icon-sound[soundplaying] {
2924 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2927 .tab-icon-sound[soundplaying]:hover {
2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2931 .tab-icon-sound[soundplaying]:hover:active {
2932 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2935 .tab-icon-sound[muted] {
2936 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2939 .tab-icon-sound[muted]:hover {
2940 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2943 .tab-icon-sound[muted]:hover:active {
2944 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2947 .tab-icon-sound[visuallyselected=true][soundplaying] {
2948 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2952 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2955 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2959 .tab-icon-sound[visuallyselected=true][muted] {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2963 .tab-icon-sound[visuallyselected=true][muted]:hover {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2967 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2968 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2972 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2976 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2979 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2980 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2984 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2988 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2991 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2992 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3001 .tabs-newtab-button {
3002 /* overlap the tab curves */
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3014 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3017 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3027 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3028 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3031 .tab-background-start[visuallyselected=true]::after,
3032 .tab-background-start[visuallyselected=true]::before,
3033 .tab-background-start,
3034 .tab-background-end,
3035 .tab-background-end[visuallyselected=true]::after,
3036 .tab-background-end[visuallyselected=true]::before {
3039 .tabbrowser-tab:not([visuallyselected=true]),
3040 .tabbrowser-tab:-moz-lwtheme {
3043 /* tabbrowser-tab focus ring */
3044 .tabbrowser-tab:focus {
3045 outline: 1px dotted;
3050 .tabbrowser-tab[visuallyselected="true"] {
3053 /* End selected tab */
3055 /* Tab pointer-events */
3058 pointer-events: none;
3061 .tab-background-middle,
3062 .tabs-newtab-button,
3063 .tab-icon-overlay[soundplaying],
3064 .tab-icon-overlay[muted]:not([crashed]),
3067 pointer-events: auto;
3073 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3074 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3076 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3077 background-color: #E7ADE7;
3080 .tab-label[attention]:not([visuallyselected="true"]) {
3084 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3085 background-color: #3333FF;
3089 /* Tab separators */
3091 .tabbrowser-tab::after,
3092 .tabbrowser-tab::before {
3094 margin-inline-start: -1px;
3095 background-image: linear-gradient(transparent 5px,
3097 currentColor calc(100% - 4px),
3098 transparent calc(100% - 4px));
3102 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3103 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3107 /* Also show separators beside the selected tab when dragging it. */
3109 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3110 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3111 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3116 /* New tab button */
3118 .tabs-newtab-button {
3120 /* width: calc(36px + var(--tab-curve-width)); */
3122 @media (min-resolution: 1.1dppx) {
3123 /* image preloading hack from like lowdpi styles */
3124 #tabbrowser-tabs::before {
3127 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3128 .tabs-newtab-button:hover {
3131 .tab-background-middle[visuallyselected=true] {
3134 .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135 .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3138 .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3139 .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3143 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3147 /* === END tabs.inc.css === */
3149 /* Tab DnD indicator */
3150 .tab-drop-indicator {
3151 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3152 margin-bottom: -11px;
3155 /* Tab close button */
3157 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3160 .tab-close-button:hover,
3161 .tab-close-button:hover[selected="true"] {
3162 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3165 .tab-close-button:hover:active,
3166 .tab-close-button:hover:active[selected="true"] {
3167 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3170 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3172 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3173 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3177 background-origin: border-box;
3180 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3181 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3186 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3190 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3192 /* transform: scaleX(-1);*/
3195 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3196 transition: 1s background-color ease-out;
3199 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3200 background-color: #008484;
3203 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3204 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3205 /* border-width: 0 2px 0 0;
3206 border-style: solid;
3207 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3210 .tabs-newtab-button > .toolbarbutton-icon {
3212 margin-bottom: -1px;
3215 .tabs-newtab-button,
3216 #TabsToolbar > #new-tab-button,
3217 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3218 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3219 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3220 -moz-image-region: auto;
3223 .tabs-newtab-button,
3224 .tabs-newtab-button:hover,
3225 #TabsToolbar > #new-tab-button,
3226 #TabsToolbar > #new-tab-button:hover {
3229 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3230 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3231 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3232 .tabs-newtab-button:-moz-lwtheme-brighttext,
3233 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3234 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3237 #TabsToolbar > #new-tab-button {
3242 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3245 #alltabs-button:hover,
3246 #alltabs-button:hover:active,
3247 #alltabs-button[open="true"] {
3248 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3251 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3252 #alltabs-button:-moz-lwtheme-brighttext {
3255 #alltabs-button > .toolbarbutton-icon {
3259 #alltabs-button > .toolbarbutton-menu-dropmarker {
3263 /* All tabs menupopup */
3264 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3265 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3266 -moz-image-region: auto;
3269 .alltabs-item[selected="true"] {
3273 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3274 list-style-image: url("chrome://global/skin/icons/loading.png");
3277 @media (min-resolution: 1.1dppx) {
3278 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3279 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3283 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3284 background-color: #402800;
3287 .alltabs-endimage[muted] {
3288 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3291 .alltabs-endimage[soundplaying] {
3292 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3295 toolbarbutton.chevron {
3296 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3299 toolbarbutton.chevron:hover {
3300 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3303 toolbar[brighttext] toolbarbutton.chevron {
3304 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3307 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3308 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3309 transform: scaleX(-1);
3312 toolbarbutton.chevron > .toolbarbutton-text,
3313 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3317 toolbarbutton.chevron > .toolbarbutton-icon {
3321 #sidebar-throbber[loading="true"] {
3322 list-style-image: url("chrome://global/skin/icons/loading.png");
3323 margin-inline-end: 4px;
3326 @media (min-resolution: 1.1dppx) {
3327 #sidebar-throbber[loading="true"] {
3328 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3333 /* Bookmarks toolbar */
3334 #PlacesToolbarDropIndicator {
3335 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3338 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3339 background-color: #008484 !important;
3340 color: #FFCF00 !important;
3343 /* rules for menupopup drop indicators */
3344 .menupopup-drop-indicator-bar {
3346 /* these two margins must together compensate the indicator's height */
3348 margin-bottom: -1px;
3351 .menupopup-drop-indicator {
3352 list-style-image: none;
3354 margin-inline-end: -4em;
3355 background-color: #008484;
3358 /* === BEGIN notification-icons.inc.css === */
3360 #notification-popup-box {
3361 border-radius: 3px 0 0 3px;
3364 margin-inline-end: -5px;
3365 padding-inline-end: 5px;
3368 /* This class can be used alone or in combination with the class defining the
3369 type of icon displayed. This rule must be defined before the others in order
3370 for its list-style-image to be overridden. */
3371 .notification-anchor-icon {
3374 margin-inline-start: 2px;
3375 list-style-image: url("chrome://global/skin/icons/information-16.png");
3378 .notification-anchor-icon:-moz-focusring {
3379 outline: 1px dotted #008484;
3382 @media (min-resolution: 1.1dppx) {
3383 .notification-anchor-icon {
3384 list-style-image: url(chrome://global/skin/icons/information-32.png);
3388 .popup-notification-icon {
3391 margin-inline-end: 10px;
3394 #notification-popup-box > .notification-anchor-icon:not(.in-use):hover {
3398 /* INDIVIDUAL NOTIFICATIONS */
3400 /* For the moment we apply the color filter only on the icons listed here.
3401 The first two selectors are used by socialchat.xml (bug 1275558). */
3402 .webRTC-sharingDevices-notification-icon,
3403 .webRTC-sharingMicrophone-notification-icon,
3414 .desktop-notification-icon,
3415 .popup-notification-icon[popupid="geolocation"],
3416 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3417 .popup-notification-icon[popupid="password"],
3418 .popup-notification-icon[popupid="pointerLock"],
3419 .popup-notification-icon[popupid="webRTC-shareDevices"],
3420 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3421 .popup-notification-icon[popupid="webRTC-shareScreen"],
3422 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3423 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3424 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3425 .popup-notification-icon[popupid="web-notifications"] {
3426 filter: url(chrome://browser/skin/filters.svg#fill);
3430 /* The first two selectors are used by socialchat.xml (bug 1275558). The
3431 notifications in the chat window are only shown when they are in use. */
3432 .webRTC-sharingDevices-notification-icon,
3433 .webRTC-sharingMicrophone-notification-icon,
3438 .popup-notification-icon[popupid="web-notifications"],
3439 .desktop-notification-icon {
3440 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3443 .desktop-notification-icon.blocked {
3444 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3448 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3452 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3455 .popup-notification-icon[popupid="geolocation"] {
3456 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3459 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3461 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3464 .indexedDB-icon.blocked {
3465 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3469 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3472 .popup-notification-icon[popupid="password"] {
3473 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3476 #login-fill-notification-icon {
3477 /* Temporary solution until the capture and fill doorhangers are unified. */
3478 transform: scaleX(-1);
3481 /* The first selector is used by socialchat.xml (bug 1275558). */
3482 .webRTC-sharingDevices-notification-icon,
3484 .popup-notification-icon[popupid="webRTC-shareDevices"],
3485 .popup-notification-icon[popupid="webRTC-sharingDevices"] {
3486 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3489 .camera-icon.blocked {
3490 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3493 /* The first selector is used by socialchat.xml (bug 1275558). */
3494 .webRTC-sharingMicrophone-notification-icon,
3496 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3499 .microphone-icon.blocked {
3500 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3503 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3504 .popup-notification-icon[popupid="webRTC-sharingMicrophone"] {
3505 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3508 .popup-notification-icon[popupid="webRTC-shareScreen"],
3509 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3511 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3514 .screen-icon.blocked {
3515 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3518 .popup-notification-icon[popupid="pointerLock"],
3520 list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
3523 .pointerLock-icon.blocked {
3524 list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
3527 /* This icon has a block sign in it, so we don't need a blocked version. */
3529 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3534 .popup-notification-icon[popupid="drmContentPlaying"],
3536 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3539 .drm-icon:hover:active {
3540 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3543 #eme-notification-icon[firstplay=true] {
3544 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3547 @keyframes emeTeachingMoment {
3548 0% {transform: translateX(0); }
3549 25% {transform: translateX(3px) }
3550 75% {transform: translateX(-3px) }
3551 100% { transform: translateX(0); }
3554 /* INSTALL ADDONS */
3557 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3560 .popup-notification-icon[popupid="xpinstall-disabled"],
3561 .popup-notification-icon[popupid="addon-install-blocked"],
3562 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3563 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3566 .popup-notification-icon[popupid="addon-progress"] {
3567 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3570 .popup-notification-icon[popupid="addon-install-failed"] {
3571 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3574 .popup-notification-icon[popupid="addon-install-confirmation"] {
3575 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3578 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3579 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3582 .popup-notification-icon[popupid="addon-install-complete"] {
3583 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3586 .popup-notification-icon[popupid="addon-install-restart"] {
3587 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3590 .popup-notification-icon[popupid="click-to-play-plugins"] {
3591 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3596 .popup-notification-icon[popupid*="offline-app-requested"],
3597 .popup-notification-icon[popupid="offline-app-usage"] {
3598 list-style-image: url(chrome://global/skin/icons/question-64.png);
3604 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3607 .plugin-icon.plugin-blocked {
3608 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3609 fill: #FF0000 !important; /* important! to override the default hover color */
3612 #notification-popup-box[hidden] {
3613 /* Override display:none to make the pluginBlockedNotification animation work
3614 when showing the notification repeatedly. */
3616 visibility: collapse;
3619 #plugins-notification-icon.plugin-blocked[showing] {
3620 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3623 @keyframes pluginBlockedNotification {
3634 .popup-notification-icon[popupid="servicesInstall"] {
3635 list-style-image: url(chrome://browser/skin/social/services-64.png);
3639 list-style-image: url(chrome://browser/skin/social/services-16.png);
3645 list-style-image: url(chrome://browser/skin/translation-16.png);
3646 -moz-image-region: rect(0px, 16px, 16px, 0px);
3649 .translation-icon.in-use {
3650 -moz-image-region: rect(0px, 32px, 16px, 16px);
3653 /* === END notification-icons.inc.css === */
3655 .popup-notification-body[popupid="addon-progress"],
3656 .popup-notification-body[popupid="addon-install-confirmation"] {
3661 /* Translation infobar */
3663 /* === BEGIN infobar.inc.css === */
3665 notification[value="translation"] .messageImage {
3666 list-style-image: url("chrome://browser/skin/translation-16.png");
3667 -moz-image-region: rect(0, 32px, 16px, 16px);
3670 @media (min-resolution: 1.25dppx) {
3671 notification[value="translation"] .messageImage {
3672 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3673 -moz-image-region: rect(0, 64px, 32px, 32px);
3677 notification[value="translation"][state="translating"] .messageImage {
3678 list-style-image: url("chrome://browser/skin/translating-16.png");
3679 -moz-image-region: auto;
3682 @media (min-resolution: 1.25dppx) {
3683 notification[value="translation"][state="translating"] .messageImage {
3684 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3688 notification[value="translation"] hbox[anonid="details"] {
3692 notification[value="translation"] button,
3693 notification[value="translation"] menulist {
3697 notification[value="translation"] menulist > .menulist-dropmarker {
3700 .translation-menupopup arrowscrollbox {
3704 .translation-attribution {
3706 -moz-box-align: end;
3710 .translation-attribution > label {
3714 .translation-attribution > image {
3718 .translation-welcome-panel {
3722 .translation-welcome-logo {
3725 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3726 -moz-image-region: rect(0, 64px, 32px, 32px);
3729 .translation-welcome-content {
3730 margin-inline-start: 16px;
3733 .translation-welcome-headline {
3738 .translation-welcome-body {
3743 /* === END infobar.inc.css === */
3745 notification[value="translation"] {
3749 .translation-menupopup {
3750 -moz-appearance: none;
3753 /* Bookmarks roots menu-items */
3754 #subscribeToPageMenuitem:not([disabled]),
3755 #subscribeToPageMenupopup {
3756 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3759 #bookmarksToolbarFolderMenu,
3760 #BMB_bookmarksToolbar,
3761 #panelMenu_bookmarksToolbar {
3762 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3763 -moz-image-region: auto;
3766 #BMB_unsortedBookmarks,
3767 #panelMenu_unsortedBookmarks {
3768 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3769 -moz-image-region: auto;
3775 -moz-appearance: none;
3776 background: rgba(0%,0%,0%,.7);
3779 padding: 20px 10px 10px;
3783 .ctrlTab-favicon[src] {
3784 background-color: #000000;
3790 .ctrlTab-preview-inner > .tabPreview-canvas {
3791 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3794 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3798 .ctrlTab-preview-inner {
3799 padding-bottom: 10px;
3802 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3804 background-color: #000000;
3805 border-radius: .5em;
3808 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3810 background-color: #000000;
3813 border: 2px solid #9C9CFF;
3814 border-radius: .5em;
3817 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3818 margin: -10px -10px 0;
3827 .statuspanel-label {
3830 background: #404000;
3831 border: 1px none #9C9CFF;
3832 border-top-style: solid;
3837 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3838 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3839 border-right-style: solid;
3840 border-top-right-radius: .3em;
3844 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3845 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3846 border-left-style: solid;
3847 border-top-left-radius: .3em;
3851 /* HACK to abolish devily color on main content */
3854 background-color: transparent !important;
3857 /* === BEGIN fullscreen/warning.inc.css === */
3859 html|*.pointerlockfswarning {
3860 align-items: center;
3861 background: rgba(0, 0, 0, 0.9);
3862 border: 2px solid #A09090;
3863 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3866 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3869 html|*.pointerlockfswarning::before {
3871 width: 24px; height: 24px;
3874 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3875 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3876 content: url("chrome://browser/skin/fullscreen/secure.svg");
3879 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3880 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3883 html|*.pointerlockfswarning-domain-text,
3884 html|*.pointerlockfswarning-generic-text {
3886 font-weight: lighter;
3891 html|*.pointerlockfswarning-domain {
3896 html|*.pointerlockfswarning-exit-button {
3898 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3900 font-weight: lighter;
3902 box-sizing: content-box;
3904 border-radius: 300px;
3906 background-color: #C09070;
3910 /* === END fullscreen/warning.inc.css === */
3912 /* === BEGIN commandline.inc.css === */
3914 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3915 We are copy/pasting variables from light-theme and dark-theme,
3916 since they aren't loaded in this context (within browser.css). */
3917 :root #developer-toolbar {
3918 --gcli-background-color: #000000; /* --theme-toolbar-background */
3919 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3920 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3921 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3922 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3923 --selection-background: #008484; /* --theme-selection-background */
3924 --selection-color: #000000; /* --theme-selection-color */
3925 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3926 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3929 /* Developer toolbar */
3931 #developer-toolbar {
3932 border-top: 3px solid var(--gcli-background-color);
3933 border-bottom: none;
3936 #developer-toolbar .toolbar-holder {
3937 background-color: #8050B0;
3941 #developer-toolbar .toolbar-holder {
3942 background-color: #8050B0;
3946 #developer-toolbar .toolbar-startcap,
3947 #developer-toolbar .toolbar-endcap{
3948 background-color: #6000CF;
3951 #developer-toolbar {
3953 min-height: 32px; */
3956 #developer-toolbar > toolbarbutton {
3958 background-color: transparent;
3964 .developer-toolbar-button > image {
3965 /* margin: auto 10px; */
3968 #developer-toolbar-toolbox-button > label {
3972 .developer-toolbar-button > .toolbarbutton-icon {
3977 #developer-toolbar-toolbox-button {
3978 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3979 -moz-image-region: rect(0px, 16px, 16px, 0px);
3982 #developer-toolbar-toolbox-button > label {
3986 #developer-toolbar-toolbox-button:hover,
3987 #developer-toolbar-toolbox-button:hover:active,
3988 #developer-toolbar-toolbox-button[checked=true] {
3989 -moz-image-region: rect(0px, 32px, 16px, 16px);
3992 @media (min-resolution: 2dppx) {
3993 #developer-toolbar-toolbox-button {
3994 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3995 -moz-image-region: rect(0px, 32px, 32px, 0px);
3998 #developer-toolbar-toolbox-button:hover,
3999 #developer-toolbar-toolbox-button:hover:active,
4000 #developer-toolbar-toolbox-button[checked=true] {
4001 -moz-image-region: rect(0px, 64px, 32px, 32px);
4007 html|*#gcli-tooltip-frame,
4008 html|*#gcli-output-frame {
4011 background-color: transparent;
4017 background-color: transparent;
4020 .gclitoolbar-input-node,
4021 .gclitoolbar-complete-node {
4023 -moz-box-align: center;
4027 background-color: transparent;
4030 .gclitoolbar-input-node {
4031 /* line-height: 32px;
4032 outline-style: none; */
4033 background-repeat: no-repeat;
4034 background-color: var(--gcli-input-background);
4037 .gclitoolbar-input-node[focused="true"] {
4038 background-color: var(--gcli-input-focused-background);
4041 .gclitoolbar-input-node::before {
4043 display: inline-block;
4044 -moz-box-ordinal-group: 0;
4048 background-image: var(--command-line-image);
4051 .gclitoolbar-input-node[focused="true"]::before {
4052 background-image: var(--command-line-image-focus);
4055 .gclitoolbar-input-node:not([focused="true"]) {
4056 border-color: transparent;
4059 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4060 background-color: var(--selection-background);
4061 color: var(--selection-color);
4064 .gclitoolbar-complete-node {
4066 background-color: transparent;
4069 pointer-events: none;
4072 .gcli-in-incomplete,
4076 .gcli-in-closebrace,
4083 .gcli-in-incomplete {
4084 border-bottom: 2px dotted #8050B0;
4088 border-bottom: 2px dotted #FF0000;
4099 .gcli-in-closebrace {
4103 /* === END commandline.inc.css === */
4105 /* === BEGIN responsivedesign.inc.css === */
4107 /* Responsive Mode */
4109 .browserContainer[responsivemode] {
4110 background-color: #221500;
4111 padding: 0 20px 20px 20px;
4114 .browserStack[responsivemode] {
4115 box-shadow: 0 0 7px #9C9CFF;
4118 .devtools-responsiveui-toolbar {
4119 background: transparent;
4120 /* text color is textColor from dark theme, since no theme is applied to
4121 * the responsive toolbar.
4127 border-bottom-width: 0;
4130 .devtools-responsiveui-textinput {
4131 /* -moz-appearance: none;
4134 border: 1px solid #111;
4141 .devtools-responsiveui-textinput[attention] {
4142 /* border-color: #38ace6;
4143 background: rgba(56,172,230,0.4);*/
4146 .devtools-responsiveui-menulist,
4147 .devtools-responsiveui-toolbarbutton {
4148 -moz-box-align: center;
4150 /* min-height: 22px;*/
4151 /* margin: 0 3px; */
4154 .devtools-responsiveui-menulist .menulist-editable-box {
4155 background-color: transparent;
4158 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4163 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4164 /* background: hsla(212,7%,57%,.35);*/
4167 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4172 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4173 -moz-box-orient: horizontal;
4176 .devtools-responsiveui-menulist:-moz-focusring,
4177 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4178 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4179 outline-offset: -4px;*/
4182 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4186 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4187 /* border-color: hsla(210,8%,5%,.6);
4188 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4189 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); */
4192 .devtools-responsiveui-menulist[open=true],
4193 .devtools-responsiveui-toolbarbutton[open=true],
4194 .devtools-responsiveui-toolbarbutton[checked=true] {
4195 /* border-color: hsla(210,8%,5%,.6) !important;
4196 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4197 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); */
4200 .devtools-responsiveui-toolbarbutton[checked=true] {
4201 /* color: hsl(208,100%,60%); */
4204 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4205 /* background-color: transparent !important;*/
4208 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4209 /* background-color: hsla(210,8%,5%,.2) !important;*/
4212 .devtools-responsiveui-menulist > .menulist-label-box {
4216 .devtools-responsiveui-menulist > .menulist-dropmarker {
4217 /* display: -moz-box;
4218 background-color: transparent;
4219 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4220 -moz-box-align: center;
4225 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4228 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4229 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4232 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4233 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4236 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4237 /* padding: 0 1px;*/
4238 -moz-box-align: stretch;
4241 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4242 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4243 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4244 -moz-box-align: center;
4248 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4249 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4253 .devtools-responsiveui-close {
4254 list-style-image: url("chrome://devtools/skin/close.svg");
4257 .devtools-responsiveui-close:hover {
4258 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4261 .devtools-responsiveui-rotate {
4262 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4263 -moz-image-region: rect(0px,16px,16px,0px);
4266 .devtools-responsiveui-rotate:hover {
4267 -moz-image-region: rect(0px,32px,16px,16px);
4270 @media (min-resolution: 2dppx) {
4271 .devtools-responsiveui-rotate {
4272 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4275 .devtools-responsiveui-rotate:hover {
4276 -moz-image-region: rect(0px,64px,32px,32px);
4280 .devtools-responsiveui-touch {
4281 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4282 -moz-image-region: rect(0px,16px,16px,0px);
4285 .devtools-responsiveui-touch:hover,
4286 .devtools-responsiveui-touch[checked],
4287 .devtools-responsiveui-touch[checked]:hover {
4288 -moz-image-region: rect(0px,32px,16px,16px);
4291 @media (min-resolution: 2dppx) {
4292 .devtools-responsiveui-touch {
4293 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4294 -moz-image-region: rect(0px,32px,32px,0px);
4297 .devtools-responsiveui-touch:hover,
4298 .devtools-responsiveui-touch[checked],
4299 .devtools-responsiveui-touch[checked]:hover {
4300 -moz-image-region: rect(0px,64px,32px,32px);
4304 .devtools-responsiveui-screenshot {
4305 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4306 -moz-image-region: rect(0px,16px,16px,0px);
4309 .devtools-responsiveui-screenshot:hover {
4310 -moz-image-region: rect(0px,32px,16px,16px);
4313 @media (min-resolution: 2dppx) {
4314 .devtools-responsiveui-screenshot {
4315 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4318 .devtools-responsiveui-screenshot:hover {
4319 -moz-image-region: rect(0px,64px,32px,32px);
4323 .devtools-responsiveui-resizebarV {
4327 transform: translate(12px, -12px);
4328 background-size: cover;
4329 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4332 .devtools-responsiveui-resizebarH {
4336 transform: translate(-12px, 12px);
4337 background-size: cover;
4338 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4341 .devtools-responsiveui-resizehandle {
4345 transform: translate(12px, 12px);
4346 background-size: cover;
4347 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4350 /* FxOS custom mode with additional buttons and phone look'n feel */
4352 /* Hide devtools manual resizer */
4353 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4354 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4355 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4359 /* Gives responsive mode a phone look'n feel */
4360 .browserStack[responsivemode].fxos-mode {
4361 padding: 60px 15px 0;
4363 border-radius: 25px / 20px;
4364 border-bottom-left-radius: 0;
4365 border-bottom-right-radius: 0;
4366 border: 1px solid #FFFFFF;
4367 border-bottom-width: 0;
4369 background-color: #353535;
4371 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4373 background-image: linear-gradient(to right, #111 11%, #333 56%);
4377 .devtools-responsiveui-hardware-buttons {
4378 -moz-appearance: none;
4381 border: 1px solid #FFFFFF;
4382 border-bottom-left-radius: 25px;
4383 border-bottom-right-radius: 25px;
4384 border-top-width: 0;
4386 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4388 background-image: linear-gradient(to right, #111 11%, #333 56%);
4391 .devtools-responsiveui-home-button {
4392 -moz-user-focus: ignore;
4395 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4398 .devtools-responsiveui-sleep-button {
4399 -moz-user-focus: ignore;
4400 -moz-appearance: none;
4401 /* compensate browserStack top padding */
4409 border: 1px solid #444;
4410 border-top-right-radius: 12px;
4411 border-top-left-radius: 12px;
4412 border-bottom-color: transparent;
4414 background-image: linear-gradient(to top, #111 11%, #333 56%);
4417 .devtools-responsiveui-sleep-button:hover:active {
4418 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4421 .devtools-responsiveui-volume-buttons {
4425 .devtools-responsiveui-volume-up-button,
4426 .devtools-responsiveui-volume-down-button {
4427 -moz-user-focus: ignore;
4428 -moz-appearance: none;
4429 border: 1px solid red;
4433 border: 1px solid #444;
4434 border-right-color: transparent;
4436 background-image: linear-gradient(to right, #111 11%, #333 56%);
4439 .devtools-responsiveui-volume-up-button:hover:active,
4440 .devtools-responsiveui-volume-down-button:hover:active {
4441 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4444 .devtools-responsiveui-volume-up-button {
4445 border-top-left-radius: 12px;
4448 .devtools-responsiveui-volume-down-button {
4449 border-bottom-left-radius: 12px;
4452 @media (min-resolution: 2dppx) {
4453 .devtools-responsiveui-resizebarV {
4454 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4457 .devtools-responsiveui-resizebarH {
4458 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4461 .devtools-responsiveui-resizehandle {
4462 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4466 /* === END responsivedesign.inc.css === */
4468 /* === including indicator.css is done at the start of the file === */
4472 #developer-toolbar-toolbox-button[error-count]:before {
4476 background-color: #FF0000;
4478 margin-inline-end: 5px;
4481 /* social toolbar provider menu */
4482 .social-statusarea-popup {
4485 margin-right: -12px;
4488 .social-statusarea-user {
4489 border-bottom: 1px solid #9C9CFF;
4490 background-color: #000000;
4496 .social-statusarea-user-portrait {
4503 .social-statusarea-loggedInStatus {
4504 background: transparent;
4509 list-style-image: none;
4512 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4513 text-decoration: underline;
4516 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4520 .social-panel-frame {
4521 border-radius: inherit;
4524 /* === BEGIN chat.inc.css === */
4526 #social-sidebar-header {
4530 #manage-share-providers,
4531 #social-sidebar-button {
4532 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4533 -moz-image-region: rect(0, 468px, 18px, 450px);
4536 #social-sidebar-button {
4537 -moz-appearance: none;
4542 #manage-share-providers > .toolbarbutton-icon,
4543 #social-sidebar-button > .toolbarbutton-icon {
4547 #manage-share-providers:hover,
4548 #manage-share-providers:hover:active,
4549 #social-sidebar-button:hover,
4550 #social-sidebar-button:hover:active {
4551 -moz-image-region: rect(18px, 468px, 36px, 450px);
4553 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4557 #social-sidebar-button[loading="true"] {
4558 list-style-image: url("chrome://global/skin/icons/loading.png");
4561 #social-sidebar-favico {
4574 .chat-toolbarbutton {
4575 -moz-appearance: none;
4582 .chat-toolbarbutton > .toolbarbutton-text {
4586 .chat-toolbarbutton > .toolbarbutton-icon {
4591 .chat-close-button {
4592 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4595 .chat-close-button:hover {
4596 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4599 .chat-close-button:hover:active {
4600 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4603 .chat-minimize-button {
4604 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4607 .chat-minimize-button:hover {
4608 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4611 .chat-minimize-button:hover:active {
4612 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4616 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4617 transform: rotate(180deg);
4620 .chat-swap-button:hover {
4621 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4624 .chat-swap-button:hover:active {
4625 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4628 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4639 background-color: #9C9CFF;
4646 border: 1px solid #008484;
4648 border-top-left-radius: 4px;
4649 border-top-right-radius: 4px;
4651 background-color: #A09090;
4654 .chat-titlebar[selected] {
4655 background-color: #008484;
4658 .chat-titlebar > .notification-anchor-icon {
4663 .chat-titlebar[minimized="true"] {
4664 border-bottom: none;
4667 .chat-titlebar[selected] {
4668 background-color: #008484;
4671 .chat-titlebar[activity] {
4672 background-color: #E7ADE7;
4682 list-style-image: url("chrome://browser/skin/social/services-16.png");
4683 background-color: #000000;
4689 border-top: 1px solid #008484;
4690 border-inline-end: 1px solid #008484;
4693 @media (min-resolution: 2dppx) {
4695 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4699 .chatbar-button:hover {
4700 background-color: #FFCF00;
4702 .chatbar-button[open="true"] {
4703 background-color: #FF9F00;
4706 .chatbar-button[activity]:not([open]) {
4707 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4710 .chatbar-button > .toolbarbutton-icon {
4714 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4721 .chatbar-button > .toolbarbutton-icon {
4723 margin-inline-end: 0;
4725 .chatbar-button:hover > .toolbarbutton-icon,
4726 .chatbar-button[open="true"] > .toolbarbutton-icon {
4730 .chatbar-button:hover,
4731 .chatbar-button[open="true"] {
4734 .chatbar-button > .toolbarbutton-text,
4735 .chatbar-button > .toolbarbutton-menu-dropmarker {
4739 .chatbar-button[activity]:not([open="true"]) {
4740 background-color: #E7ADE7;
4743 .chatbar-button > menupopup > menuitem[activity] {
4748 background: transparent;
4753 margin-inline-end: 20px;
4757 margin-inline-start: 4px;
4758 background-color: transparent;
4762 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4764 /* border-top-left-radius: 4px;
4765 border-top-right-radius: 4px;*/
4766 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4768 /* margin-inline-end: 5px;*/
4771 chatbox[minimized="true"] {
4777 margin-inline-start: 0px;
4783 /* === END chat.inc.css === */
4785 /* === BEGIN plugin-doorhanger.inc.css === */
4788 * Plugin Doorhanger Styles
4791 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4792 padding: 6px 1px 2px;
4795 .click-to-play-plugins-notification-center-box {
4798 .plugin-popupnotification-centeritem:nth-child(odd) {
4799 /* background-color: rgba(0,0,0,0.1);*/
4802 .center-item-label {
4804 text-overflow: ellipsis;
4807 .center-item-warning-icon {
4808 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4809 background-repeat: no-repeat;
4812 margin-inline-start: 6px;
4815 .click-to-play-plugins-notification-button-container {
4818 .click-to-play-popup-button {
4822 .click-to-play-plugins-notification-description-box {
4826 padding-bottom: 3px;
4829 .click-to-play-plugins-outer-description {
4833 .click-to-play-plugins-notification-link,
4838 .messageImage[value="plugin-hidden"] {
4839 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4840 filter: url(chrome://browser/skin/filters.svg#fill);
4844 /* Keep any changes to this style in sync with pluginProblem.css */
4845 notification.pluginVulnerable {
4848 notification.pluginVulnerable .messageImage {
4849 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4850 filter: url(chrome://browser/skin/filters.svg#fill);
4854 /* === END plugin-doorhanger.inc.css === */
4856 /* === BEGIN login-doorhanger.inc.css === */
4858 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4859 /* Since we display a sliding subview that extends to the border, we cannot
4860 * keep the default padding of arrow panels. We use the same padding in the
4861 * individual content views instead. Since we removed the padding, we also
4862 * have to ensure the contents are clipped to the border box. */
4867 #login-fill-mainview,
4868 #login-fill-details {
4869 padding: var(--panel-arrowcontent-padding);
4872 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4873 transform: translateX(-14px);
4876 #login-fill-mainview,
4877 #login-fill-details {
4878 transition: transform 150ms;
4881 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4882 transform: translateX(105%);
4885 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4886 transform: translateX(-105%);
4889 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4890 background-color: hsla(240,39%,100%,.1);
4893 #login-fill-testing {
4899 border: 1px solid #9C9CFF;
4903 .login-fill-item[disabled] {
4905 background-color: #000000;
4908 .login-fill-item[disabled][selected] {
4909 background-color: #008484;
4917 .login-fill-item.different-hostname > .login-hostname {
4927 #login-fill-details {
4929 background: var(--panel-arrowcontent-background);
4930 color: var(--panel-arrowcontent-color);
4931 background-clip: padding-box;
4932 border-left: 1px solid #9C9CFF;
4933 margin-inline-start: 38px;
4936 /* === END login-doorhanger.inc.css === */
4938 /* === BEGIN customizeMode.inc.css === */
4940 /* Customization mode */
4943 --drag-drop-transition-duration: .3s;
4946 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4950 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4951 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4952 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4957 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4958 pointer-events: none;
4961 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4962 #PanelUI-contents > .panel-customization-placeholder {
4963 -moz-outline-radius: 2.5px;
4964 outline: 1px dashed transparent;
4967 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4968 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4969 -moz-box-ordinal-group: 0;
4974 outline-offset: -2px;
4975 pointer-events: none;
4981 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4982 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4983 offset from the bottom effectively the same as other targets (-2px). */
4984 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4988 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4989 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4990 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4991 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4995 /* Most target outlines are shown on hover and drag over but the panel menu uses
4996 placeholders instead. */
4997 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4998 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4999 /* nav-bar and panel outlines are always shown */
5000 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5001 outline-color: #A09090;
5004 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5005 transition: outline-color 250ms linear;
5008 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5009 transition: outline-color 250ms linear;
5010 outline-color: #9C9CFF;
5013 #PanelUI-contents > .panel-customization-placeholder {
5015 outline-offset: -5px;
5018 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5020 /* padding-left: 10px;
5021 padding-right: 10px;*/
5024 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5028 #customization-container {
5029 background-color: #000000;
5033 #customization-palette,
5034 #customization-empty {
5035 padding: 0 15px 15px;
5038 #customization-header {
5040 line-height: 1.75em;
5043 margin: 25px 25px 12px;
5044 padding-bottom: 12px;
5045 border-bottom: 1px solid #A09090;
5048 #customization-panel-container {
5049 padding: 10px 10px 0px;
5052 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5053 #customization-footer {
5054 /*background-color: rgb(236,236,236);*/
5057 #customization-footer {
5058 border-top: 1px solid #9C9CFF;
5062 .customizationmode-button {
5066 .customizationmode-button:hover {
5069 #customization-titlebar-visibility-button[checked],
5070 #customization-devedition-theme-button[checked] {
5071 background-color: #008484;
5074 #customization-titlebar-visibility-button[checked]:hover,
5075 #customization-devedition-theme-button[checked]:hover {
5076 background-color: #FFCF00;
5079 #customization-titlebar-visibility-button[checked]:hover:active,
5080 #customization-devedition-theme-button[checked]:hover:active {
5081 background-color: #FF9F00;
5084 .customizationmode-button[disabled="true"] {
5087 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5088 .customizationmode-button > .button-box > .button-icon {
5092 #customization-titlebar-visibility-button {
5093 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5094 -moz-image-region: rect(0, 16px, 16px, 0);
5097 #customization-titlebar-visibility-button:hover {
5098 -moz-image-region: rect(16px, 16px, 32px, 0);
5101 #customization-lwtheme-button,
5102 #customization-titlebar-visibility-button {
5106 #customization-titlebar-visibility-button > .button-box {
5108 padding-bottom: 1px;
5111 #customization-titlebar-visibility-button:hover:active > .button-box {
5116 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5117 #customization-titlebar-visibility-button > .button-box > .button-text {
5118 /* Sadly, button.css thinks its margins are perfect for everyone. */
5119 margin-inline-start: 5px !important;
5122 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5126 background-size: contain;
5129 #customization-titlebar-visibility-button > .button-box > .button-icon {
5130 vertical-align: middle;
5133 #customization-titlebar-visibility-button[checked] {
5134 -moz-image-region: rect(0, 32px, 16px, 16px);
5135 background-color: #008484;
5138 #customization-titlebar-visibility-button[checked]:hover {
5139 -moz-image-region: rect(16px, 32px, 32px, 16px);
5140 background-color: #FFCF00;
5143 #customization-titlebar-visibility-button[checked]:hover:active {
5144 background-color: #FF9F00;
5147 @media (min-resolution: 1.1dppx) {
5148 #customization-titlebar-visibility-button {
5149 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5150 -moz-image-region: rect(0, 48px, 48px, 0);
5153 #customization-titlebar-visibility-button:hover {
5154 -moz-image-region: rect(48px, 48px, 96px, 0);
5157 #customization-titlebar-visibility-button[checked] {
5158 -moz-image-region: rect(0, 96px, 48px, 48px);
5161 #customization-titlebar-visibility-button[checked]:hover {
5162 -moz-image-region: rect(48px, 96px, 96px, 48px);
5166 #main-window[customize-entered] #customization-panel-container {
5167 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5168 background-position: left top;
5169 background-repeat: repeat;
5170 background-size: auto;
5171 background-attachment: fixed;
5174 toolbarpaletteitem[place="toolbar"] {
5175 transition: border-width 250ms ease-in-out;
5178 toolbarpaletteitem[mousedown] {
5179 outline: 1px solid #008484;
5180 cursor: -moz-grabbing;
5184 .panel-customization-placeholder,
5185 toolbarpaletteitem[place="palette"],
5186 toolbarpaletteitem[place="panel"] {
5187 transition: transform var(--drag-drop-transition-duration) ease-in-out;
5190 #customization-palette {
5191 transition: opacity .3s ease-in-out;
5195 #customization-palette[showing="true"] {
5199 toolbarpaletteitem toolbarbutton[disabled] {
5200 /* color: inherit !important;*/
5203 toolbarpaletteitem[notransition].panel-customization-placeholder,
5204 toolbarpaletteitem[notransition][place="toolbar"],
5205 toolbarpaletteitem[notransition][place="palette"],
5206 toolbarpaletteitem[notransition][place="panel"] {
5210 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5211 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5212 toolbarpaletteitem > toolbaritem.panel-wide-item,
5213 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5214 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5217 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5218 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5219 transform: scale(1.3);
5222 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5223 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5224 transform: scale(1.1);
5227 /* Override the toolkit styling for items being dragged over. */
5228 toolbarpaletteitem[place="toolbar"] {
5229 border-left-width: 0;
5230 border-right-width: 0;
5235 #customization-palette:not([hidden]) {
5236 margin-bottom: 25px;
5239 toolbarpaletteitem[place="palette"]:-moz-focusring,
5240 toolbarpaletteitem[place="panel"]:-moz-focusring,
5241 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5245 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5246 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5247 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5248 /* Delay adding the focusring back until after the transform transition completes. */
5249 transition: outline-width .01s linear var(--drag-drop-transition-duration);
5250 outline: 1px dotted #A09090;
5251 -moz-outline-radius: 2.5px;
5254 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5255 outline-offset: -5px;
5258 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5259 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5260 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5261 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5265 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5266 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5276 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5277 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5281 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5282 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5285 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5286 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5290 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5291 -moz-box-pack: center;
5295 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5296 margin-inline-end: 5px;
5299 #customization-palette > toolbarpaletteitem > label {
5305 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5306 -moz-box-orient: vertical;
5307 /* Make the panel padding uniform across all platforms due to the
5308 styling of the section headers and footer. */
5312 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5317 .customization-lwtheme-menu-theme {
5318 -moz-appearance: none;
5321 padding-inline-end: 5px;
5323 padding-inline-start: 0;
5326 .customization-lwtheme-menu-theme[defaulttheme] {
5327 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5330 .customization-lwtheme-menu-theme[active="true"] {
5331 background-color: #008484;
5334 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5338 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5342 #customization-lwtheme-menu-header,
5343 #customization-lwtheme-menu-recommended {
5348 #customization-lwtheme-menu-header,
5349 #customization-lwtheme-menu-recommended,
5350 #customization-lwtheme-menu-footer {
5351 background-color: #A09090;
5353 margin-right: -10px;
5357 #customization-lwtheme-menu-header {
5359 border-top-right-radius: 3px;
5360 border-top-left-radius: 3px;
5363 #customization-lwtheme-menu-recommended {
5366 #customization-lwtheme-menu-footer {
5367 margin-bottom: -10px;
5368 border-bottom-right-radius: 3px;
5369 border-bottom-left-radius: 3px;
5372 .customization-lwtheme-menu-footeritem {
5373 -moz-appearance: none;
5375 background-color: #C09070;
5377 border: 1px solid transparent;
5383 .customization-lwtheme-menu-footeritem:hover {
5384 background-color: #FFCF00;
5387 .customization-lwtheme-menu-footeritem:first-child {
5390 /* === END customizeMode.inc.css === */
5392 /* === BEGIN customizeTip.inc.css === */
5394 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5401 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5402 border: 1px solid #9C9CFF;
5406 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5407 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5410 .customization-tipPanel-infoBox {
5411 margin: 20px 25px 25px;
5413 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5414 background-repeat: no-repeat;
5417 .customization-tipPanel-content {
5423 .customization-tipPanel-em {
5428 .customization-tipPanel-contentImage {
5430 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5438 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5439 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5442 .customization-tipPanel-link {
5443 -moz-appearance: none;
5444 background: transparent;
5452 .customization-tipPanel-link > .button-box > .button-text {
5453 margin: 0 !important;
5456 .customization-tipPanel-closeBox > .close-icon {
5457 -moz-appearance: none;
5459 margin-inline-end: -25px;
5462 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5463 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5464 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5467 /* === END customizeTip.inc.css === */
5470 * This next rule is a hack to disable subpixel anti-aliasing on all
5471 * labels during the customize mode transition. Subpixel anti-aliasing
5472 * on Windows with Direct2D layers acceleration is particularly slow to
5473 * paint, so this hack is how we sidestep that performance bottleneck.
5475 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5476 transform: perspective(0.01px);
5479 #main-window[customize-entered] > #tab-view-deck {
5480 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5481 background-attachment: fixed;
5484 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5485 background-repeat: no-repeat;
5486 background-position: right top;
5487 background-attachment: fixed;
5488 /* The image will get set from CustomizeMode.jsm */
5489 background-image: none;
5490 background-color: transparent;
5493 #main-window[customization-lwtheme]:-moz-lwtheme {
5494 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5495 background-repeat: repeat;
5496 background-attachment: fixed;
5497 background-position: left top;
5500 #main-window[customize-entered] #browser-bottombox,
5501 #main-window[customize-entered] #customization-container {
5502 border-left: 1px solid #9C9CFF;
5503 border-right: 1px solid #9C9CFF;
5504 background-clip: padding-box;
5507 #main-window[customize-entered] #browser-bottombox {
5508 border-bottom: 1px solid #9C9CFF;
5511 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5515 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5519 /* End customization mode */
5521 /* Private browsing indicators */
5524 * Currently, we have two places where we put private browsing indicators on
5525 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5526 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5527 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5528 * want the bottom border of the image to line up with the bottom of the window
5529 * caption buttons. That's why there's so much special-casing going on in here.
5531 .private-browsing-indicator {
5533 pointer-events: none;
5536 #private-browsing-indicator-titlebar {
5541 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5545 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5549 #TabsToolbar > .private-browsing-indicator {
5550 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5551 margin-inline-start: 4px;
5555 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5556 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5557 * min/max/close window buttons.
5559 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5560 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5561 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5562 margin-inline-end: 4px;
5568 /* This one is for Linux */
5569 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5570 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5574 /* End private browsing indicators */
5576 /* === BEGIN UITour.inc.css === */
5580 #UITourHighlightContainer {
5581 -moz-appearance: none;
5583 background-color: transparent;
5584 /* This is a buffer to compensate for the movement in the "wobble" effect */
5589 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5590 border-radius: 40px;
5591 border: 1px solid #9C9CFF;
5592 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5593 on Linux without an X compositor where opacity is either 0 or 1. */
5594 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5599 #UITourTooltipBody {
5600 -moz-box-align: start;
5603 #UITourTooltipTitleContainer {
5604 -moz-box-align: start;
5605 margin-bottom: 10px;
5608 #UITourTooltipIcon {
5611 margin-inline-end: 10px;
5614 #UITourTooltipTitle,
5615 #UITourTooltipDescription {
5619 #UITourTooltipTitle {
5625 #UITourTooltipDescription {
5626 margin-inline-start: 0;
5627 margin-inline-end: 0;
5629 line-height: 1.8rem;
5630 margin-bottom: 0; /* Override global.css */
5633 #UITourTooltipClose {
5635 -moz-appearance: none;
5637 background-color: transparent;
5639 margin-inline-start: 4px;
5643 #UITourTooltipClose > .toolbarbutton-text {
5647 #UITourTooltipButtons {
5649 background-color: rgba(0,0,0,.2);
5650 border-top: 1px solid rgba(0,0,0,.4);
5651 margin: 10px -16px -16px;
5655 #UITourTooltipButtons > label,
5656 #UITourTooltipButtons > button {
5660 #UITourTooltipButtons > label:first-child,
5661 #UITourTooltipButtons > button:first-child {
5662 margin-inline-start: 0;
5665 #UITourTooltipButtons > label:last-child,
5666 #UITourTooltipButtons > button:last-child {
5667 margin-inline-end: 0;
5670 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5673 margin-inline-end: 5px;
5676 #UITourTooltipButtons > label,
5677 #UITourTooltipButtons > button .button-text {
5681 #UITourTooltipButtons > button:not(.button-link) {
5682 -moz-appearance: none;
5683 background-color: #C09070;
5684 border-radius: 3000px;
5688 transition-property: background-color, color;
5689 transition-duration: 150ms;
5692 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5693 background-color: #FFCF00;
5697 #UITourTooltipButtons > label,
5698 #UITourTooltipButtons > button.button-link {
5699 -moz-appearance: none;
5700 background: transparent;
5703 color: rgba(0,0,0,0.35);
5705 padding-right: 10px;
5708 #UITourTooltipButtons > button.button-link:hover {
5712 /* The primary button gets the same color as the customize button. */
5713 #UITourTooltipButtons > button.button-primary {
5714 background-color: #A06060; /* LCARS default button background color */
5717 padding-right: 30px;
5720 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5721 background-color: #FFCF00;
5725 /* Notification overrides for Heartbeat UI */
5727 notification.heartbeat {
5728 background-color: #A09090;
5732 @keyframes pulse-onshow {
5735 transform: scale(1.0);
5739 transform: scale(1.1);
5742 transform: scale(1.0);
5745 transform: scale(1.1);
5748 transform: scale(1.0);
5752 @keyframes pulse-twice {
5754 transform: scale(1.1);
5757 transform: scale(0.8);
5760 transform: scale(1);
5764 .messageText.heartbeat {
5766 /* text-shadow: none; */
5767 margin-inline-start: 0px;
5770 .messageImage.heartbeat {
5773 margin-inline-start: 8px;
5774 margin-inline-end: 8px;
5777 .messageImage.heartbeat.pulse-onshow {
5778 animation-name: pulse-onshow;
5779 animation-duration: 1.5s;
5780 animation-iteration-count: 1;
5781 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5784 .messageImage.heartbeat.pulse-twice {
5785 animation-name: pulse-twice;
5786 animation-duration: 1s;
5787 animation-iteration-count: 2;
5788 animation-timing-function: linear;
5791 /* Learn More link styles */
5792 .heartbeat > .text-link {
5794 margin-inline-start: 0px;
5797 .heartbeat > .text-link:hover {
5799 text-decoration: none;
5802 .heartbeat > .text-link:hover:active {
5806 /* Heartbeat UI Rating Star Classes */
5807 .heartbeat > #star-rating-container {
5809 /* margin-bottom: 4px;*/
5812 .heartbeat > #star-rating-container > #star5 {
5813 -moz-box-ordinal-group: 5;
5816 .heartbeat > #star-rating-container > #star4 {
5817 -moz-box-ordinal-group: 4;
5820 .heartbeat > #star-rating-container > #star3 {
5821 -moz-box-ordinal-group: 3;
5824 .heartbeat > #star-rating-container > #star2 {
5825 -moz-box-ordinal-group: 2;
5828 .heartbeat > #star-rating-container > .star-x {
5829 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5831 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5832 margin-inline-end: 4px !important;
5837 .heartbeat > #star-rating-container > .star-x:hover,
5838 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5839 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5842 /* === END UITour.inc.css === */
5844 #UITourTooltipButtons {
5846 * Override the --panel-arrowcontent-padding so the background extends
5847 * to the sides and bottom of the panel.
5850 margin-right: -10px;
5851 margin-bottom: -10px;
5854 /* === BEGIN contextmenu.inc.css === */
5856 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5859 #context-navigation > .menuitem-iconic {
5861 -moz-box-pack: center;
5862 -moz-box-align: center;
5865 #context-navigation > .menuitem-iconic[disabled="true"] {
5866 background-color: transparent;
5869 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5870 -moz-appearance: none;
5873 #context-back > .menu-iconic-left {
5874 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5875 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5876 -moz-image-region: rect(0, 54px, 18px, 36px);
5879 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5880 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5881 -moz-image-region: rect(18px, 54px, 36px, 36px);
5884 #context-back[disabled="true"] > .menu-iconic-left {
5885 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5886 -moz-image-region: rect(36px, 54px, 54px, 36px);
5889 #context-forward > .menu-iconic-left {
5890 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5891 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5892 -moz-image-region: rect(0, 72px, 18px, 54px);
5895 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5896 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5897 -moz-image-region: rect(18px, 72px, 36px, 54px);
5900 #context-forward[disabled="true"] > .menu-iconic-left {
5901 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5902 -moz-image-region: rect(36px, 72px, 54px, 54px);
5905 #context-reload > .menu-iconic-left {
5906 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5907 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5908 -moz-image-region: rect(0, 14px, 14px, 0);
5911 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5912 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5913 -moz-image-region: rect(14px, 14px, 28px, 0);
5916 #context-reload[disabled="true"] > .menu-iconic-left {
5917 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5918 -moz-image-region: rect(28px, 14px, 42px, 0);
5921 #context-stop > .menu-iconic-left {
5922 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5923 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5924 -moz-image-region: rect(0, 28px, 14px, 14px);
5927 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5928 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5929 -moz-image-region: rect(14px, 28px, 28px, 14px);
5932 #context-stop[disabled="true"] > .menu-iconic-left {
5933 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5934 -moz-image-region: rect(28px, 28px, 42px, 14px);
5937 #context-bookmarkpage > .menu-iconic-left {
5938 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5939 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5940 -moz-image-region: rect(0, 144px, 18px, 126px);
5943 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5944 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5945 -moz-image-region: rect(18px, 144px, 36px, 126px);
5948 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5949 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5950 -moz-image-region: rect(36px, 144px, 54px, 126px);
5953 #context-bookmarkpage[starred=true] {
5954 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5955 -moz-image-region: rect(0px, 162px, 18px, 144px);
5958 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5959 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5960 -moz-image-region: rect(18px, 162px, 36px, 144px);
5963 #context-bookmarkpage[starred=true][disabled=true] {
5964 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5965 -moz-image-region: rect(36px, 162px, 54px, 144px);
5968 #context-back:-moz-locale-dir(rtl),
5969 #context-forward:-moz-locale-dir(rtl),
5970 #context-reload:-moz-locale-dir(rtl) {
5971 transform: scaleX(-1);
5974 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5975 width: 18px; /*16px;*/
5976 height: 18px; /*16px;*/
5980 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5981 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5987 #context-media-eme-learnmore {
5988 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5991 #context-media-eme-learnmore {
5992 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5995 /* === END contextmenu.inc.css === */
5997 #context-navigation {
6000 #context-sep-navigation {
6001 /* margin-top: -4px; */
6004 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {