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::placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::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/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://global/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://global/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;