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");
12 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
15 toolbar[customizable="true"] {
16 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
19 toolbar[type="menubar"][autohide="true"] {
20 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
23 #toolbar-menubar[autohide="true"] {
24 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
32 -moz-box-orient: vertical; /* for flex hack */
36 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
39 /* ::::: primary toolbar ::::: */
41 .toolbar-primary > .toolbar-box > .toolbar-holder {
42 background-color: #A09090;
45 .toolbar-primary > .toolbar-box > .toolbar-startcap,
46 .toolbar-primary > .toolbar-box > .toolbar-endcap {
47 background-color: #9C9CFF;
50 /* Hides the titlebar-placeholder underneath the window caption buttons when we
51 are not autohiding the menubar. */
52 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
56 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
57 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
58 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
59 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
60 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
64 #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
65 #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
66 /* margin-top: 15px;*/
69 #toolbar-menubar:not([autohide="true"]) {
70 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
73 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
74 /* 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 */
78 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
79 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
80 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
81 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
82 outline-color: #A09090;
88 #navigator-toolbox::after {
91 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
95 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
98 /* indent due to non-applicable aero rule */
100 background-color: transparent !important;
103 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
104 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
106 background-color: #6000CF;
110 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
111 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
112 background-color: #8050B0;
116 #TabsToolbar:-moz-lwtheme {
117 /*background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);*/
120 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
124 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
125 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
129 /* Make the menu inherit the toolbar's color. On non-compositor (Aero Basic, XP modern, classic)
130 * this is defined above. Otherwise (Aero Glass, Windows 8 inactive windows), this is hardcoded
131 * to black in browser-aero.css. */
132 #main-menubar > menu:not(:-moz-lwtheme) {
137 /* Position the toolbar above the bottom of background tabs */
142 #personal-bookmarks {
143 /* min-height: 24px; */
146 #print-preview-toolbar:not(:-moz-lwtheme) {
147 /* -moz-appearance: toolbox; */
150 #browser-bottombox:not(:-moz-lwtheme) {
153 /* ::::: titlebar ::::: */
157 background-color: #6000CF;
160 #titlebar:-moz-window-inactive {
161 background-color: #8050B0;
165 #main-window[sizemode="normal"] > #titlebar {
170 #main-window[sizemode="maximized"] > #titlebar {
174 /* The button box must appear on top of the navigator-toolbox in order for
175 * click and hover mouse events to work properly for the button in the restored
176 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
177 * can swallow those events. It will also place the buttons above the fog on
178 * themes with Aero Glass.
180 #titlebar-buttonbox {
182 -moz-margin-end: 3px;
186 .titlebar-placeholder[type="appmenu-button"] {
190 .titlebar-placeholder[type="caption-buttons"] {
194 /* titlebar command buttons */
197 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
200 #titlebar-min:hover {
201 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
205 list-style-image: url("chrome://browser/skin/win-maximize.gif");
208 #titlebar-max:hover {
209 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
212 #main-window[sizemode="maximized"] #titlebar-max {
213 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
216 #main-window[sizemode="maximized"] #titlebar-max:hover {
217 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
221 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
224 #titlebar-close:hover {
225 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
228 /* ::::: bookmark buttons ::::: */
230 toolbarbutton.bookmark-item:not(.subviewbutton),
231 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
236 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
237 toolbarbutton.bookmark-item[open="true"] {
240 -moz-padding-start: 4px;
241 -moz-padding-end: 2px;*/
244 .bookmark-item > .toolbarbutton-icon,
245 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
250 /* Force the display of the label for bookmarks */
251 .bookmark-item > .toolbarbutton-text,
252 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
253 display: -moz-box !important;
256 .bookmark-item > .toolbarbutton-menu-dropmarker {
260 #bookmarks-toolbar-placeholder {
261 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
264 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
265 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
266 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
269 /* ----- BOOKMARK STAR ANIMATION ----- */
271 @keyframes animation-bookmarkAdded {
272 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
273 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
275 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
278 @keyframes animation-bookmarkPulse {
279 from { transform: scale(1); }
280 50% { transform: scale(1.3); }
281 to { transform: scale(1); }
284 #bookmarked-notification-container {
293 #bookmarked-notification {
294 background-size: 16px;
295 background-position: center;
296 background-repeat: no-repeat;
302 #bookmarked-notification-dropmarker-anchor {
307 #bookmarked-notification-dropmarker-icon {
313 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
314 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
315 animation: animation-bookmarkAdded 800ms;
316 animation-timing-function: ease, ease, ease;
319 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
320 list-style-image: none !important;
323 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
325 animation: animation-bookmarkPulse 300ms;
326 animation-delay: 600ms;
327 animation-timing-function: ease-out;
330 /* ::::: bookmark menus ::::: */
333 menuitem.bookmark-item {
338 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
343 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
344 -moz-padding-start: 0px;
347 /* ::::: bookmark items ::::: */
350 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
351 -moz-image-region: auto;
354 .bookmark-item[container] {
355 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
356 -moz-image-region: auto;
359 .bookmark-item[container][open] {
360 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
361 -moz-image-region: auto;
364 .bookmark-item[container][livemark] {
365 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
366 -moz-image-region: auto;
369 .bookmark-item[container][livemark] .bookmark-item {
370 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
371 -moz-image-region: rect(0px, 16px, 16px, 0px);
374 .bookmark-item[container][livemark] .bookmark-item[visited] {
375 -moz-image-region: rect(0px, 32px, 16px, 16px);
378 .bookmark-item[container][query] {
379 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
380 -moz-image-region: auto;
383 .bookmark-item[query][tagContainer] {
384 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
385 -moz-image-region: auto;
388 .bookmark-item[query][dayContainer] {
389 list-style-image: url("chrome://communicator/skin/history/calendar.png");
390 -moz-image-region: auto;
393 .bookmark-item[query][hostContainer] {
394 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
395 -moz-image-region: auto;
398 .bookmark-item[query][hostContainer][open] {
399 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
400 -moz-image-region: auto;
403 .bookmark-item[cutting] > .toolbarbutton-icon,
404 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
408 .bookmark-item[cutting] > .toolbarbutton-text,
409 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
413 /* ::::: primary toolbar buttons ::::: */
415 /* === BEGIN toolbarbuttons.inc.css === */
417 /* Whole section of this included file: */
418 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
419 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
420 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
421 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
422 #PanelUI-menu-button, #characterencoding-button, #email-link-button),
423 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
424 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
428 -moz-image-region: rect(0, 36px, 18px, 18px);
431 #back-button:hover:not([disabled="true"]) {
432 -moz-image-region: rect(18px, 36px, 36px, 18px);
435 #back-button[disabled="true"] {
436 -moz-image-region: rect(36px, 36px, 54px, 18px);
440 -moz-image-region: rect(0, 72px, 18px, 54px);
443 #forward-button:hover:not([disabled="true"]) {
444 -moz-image-region: rect(18px, 72px, 36px, 54px);
447 #forward-button[disabled="true"] {
448 -moz-image-region: rect(36px, 72px, 54px, 54px);
451 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
452 #forward-button:-moz-locale-dir(rtl) {
453 transform: scaleX(-1);
456 #home-button[cui-areatype="toolbar"] {
457 -moz-image-region: rect(0, 126px, 18px, 108px);
460 #home-button[cui-areatype="toolbar"]:hover {
461 -moz-image-region: rect(18px, 126px, 36px, 108px);
464 #bookmarks-menu-button[cui-areatype="toolbar"] {
465 -moz-image-region: rect(0, 144px, 18px, 126px);
468 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
469 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
470 -moz-image-region: rect(18px, 144px, 36px, 126px);
473 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
474 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
475 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
476 background-color: transparent !important;
479 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
480 -moz-image-region: rect(0, 162px, 18px, 144px);
483 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
484 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
485 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
486 /* When starred and clicked (for edit/delete dialog),
487 * then only the menubutton-button itself is open, but not the whole menubutton. */
488 -moz-image-region: rect(18px, 162px, 36px, 144px);
491 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
492 -moz-image-region: rect(0, 630px, 18px, 612px);
495 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
497 -moz-box-align: center;
500 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
501 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
502 -moz-image-region: rect(18px, 630px, 36px, 612px);
505 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
506 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
509 -moz-padding-start: 2px;
510 -moz-padding-end: 0px;
513 #history-panelmenu[cui-areatype="toolbar"] {
514 -moz-image-region: rect(0, 180px, 18px, 162px);
517 #history-panelmenu[cui-areatype="toolbar"]:hover,
518 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
519 -moz-image-region: rect(18px, 180px, 36px, 162px);
522 #downloads-button[cui-areatype="toolbar"] {
523 -moz-image-region: rect(0, 198px, 18px, 180px);
526 #downloads-button[cui-areatype="toolbar"]:hover,
527 #downloads-button[cui-areatype="toolbar"][open="true"] {
528 -moz-image-region: rect(18px, 198px, 36px, 180px);
531 #add-ons-button[cui-areatype="toolbar"] {
532 -moz-image-region: rect(0, 216px, 18px, 198px);
535 #add-ons-button[cui-areatype="toolbar"]:hover {
536 -moz-image-region: rect(18px, 216px, 36px, 198px);
539 #open-file-button[cui-areatype="toolbar"] {
540 -moz-image-region: rect(0, 234px, 18px, 216px);
543 #open-file-button[cui-areatype="toolbar"]:hover {
544 -moz-image-region: rect(18px, 234px, 36px, 216px);
547 #save-page-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 252px, 18px, 234px);
551 #save-page-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 252px, 36px, 234px);
555 #sync-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 270px, 18px, 252px);
559 #sync-button[cui-areatype="toolbar"]:hover {
560 -moz-image-region: rect(18px, 270px, 36px, 252px);
563 #feed-button[cui-areatype="toolbar"] {
564 -moz-image-region: rect(0, 288px, 18px, 270px);
567 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
568 -moz-image-region: rect(18px, 288px, 36px, 270px);
571 #feed-button[cui-areatype="toolbar"][disabled="true"] {
572 -moz-image-region: rect(36px, 288px, 54px, 270px);
575 #social-share-button[cui-areatype="toolbar"] {
576 -moz-image-region: rect(0px, 306px, 18px, 288px);
579 #social-share-button[cui-areatype="toolbar"]:hover {
580 -moz-image-region: rect(18px, 306px, 36px, 288px);
583 #email-link-button[cui-areatype="toolbar"] {
584 -moz-image-region: rect(0, 306px, 18px, 288px);
585 /* This is temporary until we have an email-link icon (Bug 932235) */
586 transform: scale(-1, -1);
589 #email-link-button[cui-areatype="toolbar"]:hover {
590 -moz-image-region: rect(18px, 306px, 36px, 288px);
593 #characterencoding-button[cui-areatype="toolbar"] {
594 -moz-image-region: rect(0, 324px, 18px, 306px);
597 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
598 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
599 -moz-image-region: rect(18px, 324px, 36px, 306px);
602 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
603 -moz-image-region: rect(36px, 324px, 54px, 306px);
606 #new-window-button[cui-areatype="toolbar"] {
607 -moz-image-region: rect(0, 342px, 18px, 324px);
610 #new-window-button[cui-areatype="toolbar"]:hover {
611 -moz-image-region: rect(18px, 342px, 36px, 324px);
614 #new-tab-button[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 360px, 18px, 342px);
618 #new-tab-button[cui-areatype="toolbar"]:hover {
619 -moz-image-region: rect(18px, 360px, 36px, 342px);
622 #privatebrowsing-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 378px, 18px, 360px);
626 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 378px, 36px, 360px);
630 #find-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 396px, 18px, 378px);
634 #find-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 396px, 36px, 378px);
638 #print-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 414px, 18px, 396px);
642 #print-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 414px, 36px, 396px);
646 #fullscreen-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 432px, 18px, 414px);
650 #fullscreen-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 432px, 36px, 414px);
654 #developer-button[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 450px, 18px, 432px);
658 #developer-button[cui-areatype="toolbar"]:hover,
659 #developer-button[cui-areatype="toolbar"][open="true"] {
660 -moz-image-region: rect(18px, 450px, 36px, 432px);
663 #preferences-button[cui-areatype="toolbar"] {
664 -moz-image-region: rect(0, 468px, 18px, 450px);
667 #preferences-button[cui-areatype="toolbar"]:hover {
668 -moz-image-region: rect(18px, 468px, 36px, 450px);
671 #PanelUI-menu-button {
672 -moz-image-region: rect(0, 486px, 18px, 468px);
675 #PanelUI-menu-button:hover,
676 #PanelUI-menu-button[open="true"] {
677 -moz-image-region: rect(18px, 486px, 36px, 468px);
680 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button {
681 -moz-image-region: rect(0, 504px, 18px, 486px);
684 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button:hover:not([disabled="true"]) {
685 -moz-image-region: rect(18px, 504px, 36px, 486px);
688 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button[disabled="true"] {
689 -moz-image-region: rect(36px, 504px, 54px, 486px);
692 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button {
693 -moz-image-region: rect(0, 522px, 18px, 504px);
696 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button:hover:not([disabled="true"]) {
697 -moz-image-region: rect(18px, 522px, 36px, 504px);
700 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button[disabled="true"] {
701 -moz-image-region: rect(36px, 522px, 54px, 504px);
704 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button {
705 -moz-image-region: rect(0, 540px, 18px, 522px);
708 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button:hover:not([disabled="true"]) {
709 -moz-image-region: rect(18px, 540px, 36px, 522px);
712 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button[disabled="true"] {
713 -moz-image-region: rect(36px, 540px, 54px, 522px);
716 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button {
717 -moz-image-region: rect(0, 558px, 18px, 540px);
720 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button:hover:not([disabled="true"]) {
721 -moz-image-region: rect(18px, 558px, 36px, 540px);
724 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button[disabled="true"] {
725 -moz-image-region: rect(36px, 558px, 54px, 540px);
728 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button {
729 -moz-image-region: rect(0, 576px, 18px, 558px);
732 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button:hover:not([disabled="true"]) {
733 -moz-image-region: rect(18px, 576px, 36px, 558px);
736 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button[disabled="true"] {
737 -moz-image-region: rect(36px, 576px, 54px, 558px);
740 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) {
741 -moz-image-region: rect(0, 594px, 18px, 576px);
744 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)):hover,
745 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem))[open="true"] {
746 -moz-image-region: rect(18px, 594px, 36px, 576px);
749 #nav-bar-overflow-button {
750 -moz-image-region: rect(0, 612px, 18px, 594px);
753 #nav-bar-overflow-button:hover,
754 #nav-bar-overflow-button[open="true"] {
755 -moz-image-region: rect(18px, 612px, 36px, 594px);
759 -moz-image-region: rect(0, 648px, 18px, 630px);
762 #tabview-button:hover {
763 -moz-image-region: rect(18px, 648px, 36px, 630px);
766 #email-link-button[cui-areatype="toolbar"] {
767 -moz-image-region: rect(0, 666px, 18px, 648px);
770 #email-button[cui-areatype="toolbar"]:hover {
771 -moz-image-region: rect(18px, 666px, 36px, 648px);
774 #sidebar-button[cui-areatype="toolbar"] {
775 -moz-image-region: rect(0, 684px, 18px, 666px);
778 #sidebar-button[cui-areatype="toolbar"]:hover {
779 -moz-image-region: rect(18px, 684px, 36px, 666px);
782 /* === END toolbarbuttons.inc.css === */
784 /* === BEGIN menupanel.inc.css === */
786 /* Menu panel and palette styles */
788 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
789 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
790 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
791 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
792 #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="menu-panel"],
793 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
794 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
795 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
796 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
797 #PanelUI-menu-button, #characterencoding-button, #email-link-button) {
798 list-style-image: url("chrome://browser/skin/menuPanel.png");
801 #home-button[cui-areatype="menu-panel"],
802 toolbarpaletteitem[place="palette"] > #home-button {
803 -moz-image-region: rect(0px, 128px, 32px, 96px);
806 #home-button[cui-areatype="menu-panel"]:hover,
807 toolbarpaletteitem[place="palette"] > #home-button:hover {
808 -moz-image-region: rect(32px, 128px, 64px, 96px);
811 #bookmarks-menu-button[cui-areatype="menu-panel"],
812 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
813 -moz-image-region: rect(0px, 160px, 32px, 128px);
816 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
817 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
818 -moz-image-region: rect(32px, 160px, 64px, 128px);
821 #bookmarks-menu-button[starred][cui-areatype="menu-panel"] {
822 -moz-image-region: rect(0px, 192px, 32px, 160px);
825 #bookmarks-menu-button[starred][cui-areatype="menu-panel"]:hover {
826 -moz-image-region: rect(32px, 192px, 64px, 160px);
829 #history-panelmenu[cui-areatype="menu-panel"],
830 toolbarpaletteitem[place="palette"] > #history-panelmenu {
831 -moz-image-region: rect(0px, 224px, 32px, 192px);
834 #history-panelmenu[cui-areatype="menu-panel"]:hover,
835 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
836 -moz-image-region: rect(32px, 224px, 64px, 192px);
839 #downloads-button[cui-areatype="menu-panel"],
840 toolbarpaletteitem[place="palette"] > #downloads-button {
841 -moz-image-region: rect(0px, 256px, 32px, 224px);
844 #downloads-button[cui-areatype="menu-panel"]:hover,
845 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
846 -moz-image-region: rect(32px, 256px, 64px, 224px);
849 #switch-to-metro-button[cui-areatype="menu-panel"],
850 toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
851 -moz-image-region: rect(0px, 800px, 32px, 768px);
854 #switch-to-metro-button[cui-areatype="menu-panel"]:hover,
855 toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover {
856 -moz-image-region: rect(32px, 800px, 64px, 768px);
859 #add-ons-button[cui-areatype="menu-panel"],
860 toolbarpaletteitem[place="palette"] > #add-ons-button {
861 -moz-image-region: rect(0px, 288px, 32px, 256px);
864 #add-ons-button[cui-areatype="menu-panel"]:hover,
865 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
866 -moz-image-region: rect(32px, 288px, 64px, 256px);
869 #open-file-button[cui-areatype="menu-panel"],
870 toolbarpaletteitem[place="palette"] > #open-file-button {
871 -moz-image-region: rect(0px, 320px, 32px, 288px);
874 #open-file-button[cui-areatype="menu-panel"]:hover,
875 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
876 -moz-image-region: rect(32px, 320px, 64px, 288px);
879 #save-page-button[cui-areatype="menu-panel"],
880 toolbarpaletteitem[place="palette"] > #save-page-button {
881 -moz-image-region: rect(0px, 352px, 32px, 320px);
884 #save-page-button[cui-areatype="menu-panel"]:hover,
885 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
886 -moz-image-region: rect(32px, 352px, 64px, 320px);
889 #sync-button[cui-areatype="menu-panel"],
890 toolbarpaletteitem[place="palette"] > #sync-button {
891 -moz-image-region: rect(0px, 384px, 32px, 352px);
894 #sync-button[cui-areatype="menu-panel"]:hover,
895 toolbarpaletteitem[place="palette"] > #sync-button:hover {
896 -moz-image-region: rect(32px, 384px, 64px, 352px);
899 #feed-button[cui-areatype="menu-panel"],
900 toolbarpaletteitem[place="palette"] > #feed-button {
901 -moz-image-region: rect(0px, 416px, 32px, 384px);
904 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
905 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
906 -moz-image-region: rect(32px, 416px, 64px, 384px);
909 #feed-button[cui-areatype="menu-panel"][disabled="true"],
910 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
911 -moz-image-region: rect(64px, 416px, 96px, 384px);
914 #social-share-button[cui-areatype="menu-panel"],
915 toolbarpaletteitem[place="palette"] > #social-share-button {
916 -moz-image-region: rect(0px, 448px, 32px, 416px);
919 #social-share-button[cui-areatype="menu-panel"]:hover,
920 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
921 -moz-image-region: rect(32px, 448px, 64px, 416px);
924 #email-link-button[cui-areatype="menu-panel"],
925 toolbarpaletteitem[place="palette"] > #email-link-button {
926 -moz-image-region: rect(0, 448px, 32px, 416px);
929 #email-link-button[cui-areatype="menu-panel"]:hover,
930 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
931 -moz-image-region: rect(32px, 448px, 64px, 416px);
934 /* This is temporary until we have an email-link icon (Bug 932235) */
935 #email-link-button[cui-areatype="menu-panel"] > image,
936 toolbarpaletteitem[place="palette"] > #email-link-button > image {
937 transform: scale(-1, -1);
940 #characterencoding-button[cui-areatype="menu-panel"],
941 toolbarpaletteitem[place="palette"] > #characterencoding-button {
942 -moz-image-region: rect(0px, 480px, 32px, 448px);
945 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
946 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
947 -moz-image-region: rect(32px, 480px, 64px, 448px);
950 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
951 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
952 -moz-image-region: rect(64px, 480px, 96px, 448px);
955 #new-window-button[cui-areatype="menu-panel"],
956 toolbarpaletteitem[place="palette"] > #new-window-button {
957 -moz-image-region: rect(0px, 512px, 32px, 480px);
960 #new-window-button[cui-areatype="menu-panel"]:hover,
961 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
962 -moz-image-region: rect(32px, 512px, 64px, 480px);
965 #new-tab-button[cui-areatype="menu-panel"],
966 toolbarpaletteitem[place="palette"] > #new-tab-button {
967 -moz-image-region: rect(0px, 544px, 32px, 512px);
970 #new-tab-button[cui-areatype="menu-panel"]:hover,
971 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
972 -moz-image-region: rect(32px, 544px, 64px, 512px);
975 #privatebrowsing-button[cui-areatype="menu-panel"],
976 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
977 -moz-image-region: rect(0px, 576px, 32px, 544px);
980 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
981 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
982 -moz-image-region: rect(32px, 576px, 64px, 544px);
985 #find-button[cui-areatype="menu-panel"],
986 toolbarpaletteitem[place="palette"] > #find-button {
987 -moz-image-region: rect(0px, 640px, 32px, 608px);
990 #find-button[cui-areatype="menu-panel"]:hover,
991 toolbarpaletteitem[place="palette"] > #find-button:hover {
992 -moz-image-region: rect(32px, 640px, 64px, 608px);
995 #print-button[cui-areatype="menu-panel"],
996 toolbarpaletteitem[place="palette"] > #print-button {
997 -moz-image-region: rect(0px, 672px, 32px, 640px);
1000 #print-button[cui-areatype="menu-panel"]:hover,
1001 toolbarpaletteitem[place="palette"] > #print-button:hover {
1002 -moz-image-region: rect(32px, 672px, 64px, 640px);
1005 #fullscreen-button[cui-areatype="menu-panel"],
1006 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1007 -moz-image-region: rect(0px, 704px, 32px, 672px);
1010 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1011 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1012 -moz-image-region: rect(32px, 704px, 64px, 672px);
1015 #developer-button[cui-areatype="menu-panel"],
1016 toolbarpaletteitem[place="palette"] > #developer-button {
1017 -moz-image-region: rect(0px, 736px, 32px, 704px);
1020 #developer-button[cui-areatype="menu-panel"]:hover,
1021 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1022 -moz-image-region: rect(32px, 736px, 64px, 704px);
1025 #preferences-button[cui-areatype="menu-panel"],
1026 toolbarpaletteitem[place="palette"] > #preferences-button {
1027 -moz-image-region: rect(0px, 768px, 32px, 736px);
1030 #preferences-button[cui-areatype="menu-panel"]:hover,
1031 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1032 -moz-image-region: rect(32px, 768px, 64px, 736px);
1035 /* Wide panel control icons */
1037 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1038 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1039 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1040 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1041 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1044 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button,
1045 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1046 -moz-image-region: rect(0px, 32px, 16px, 16px);
1049 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:hover:not([disabled="true"]),
1050 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1051 -moz-image-region: rect(16px, 32px, 32px, 16px);
1054 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button[disabled="true"],
1055 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1056 -moz-image-region: rect(32px, 32px, 48px, 16px);
1059 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
1060 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1061 -moz-image-region: rect(0px, 48px, 16px, 32px);
1064 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button:hover:not([disabled="true"]),
1065 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1066 -moz-image-region: rect(16px, 48px, 32px, 32px);
1069 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button[disabled="true"],
1070 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1071 -moz-image-region: rect(32px, 48px, 48px, 32px);
1074 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button,
1075 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1076 -moz-image-region: rect(0px, 64px, 16px, 48px);
1079 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:hover:not([disabled="true"]),
1080 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1081 -moz-image-region: rect(16px, 64px, 32px, 48px);
1084 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button[disabled="true"],
1085 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1086 -moz-image-region: rect(32px, 64px, 48px, 48px);
1089 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button,
1090 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1091 -moz-image-region: rect(0px, 80px, 16px, 64px);
1094 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:hover:not([disabled="true"]),
1095 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1096 -moz-image-region: rect(16px, 80px, 32px, 64px);
1099 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button[disabled="true"],
1100 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1101 -moz-image-region: rect(32px, 80px, 48px, 64px);
1104 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button,
1105 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1106 -moz-image-region: rect(0px, 96px, 16px, 80px);
1109 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:hover:not([disabled="true"]),
1110 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1111 -moz-image-region: rect(16px, 96px, 32px, 80px);
1114 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button[disabled="true"],
1115 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1116 -moz-image-region: rect(32px, 96px, 48px, 80px);
1119 /* === END menupanel.inc.css === */
1121 .toolbarbutton-1:not([type="menu-button"]) {
1122 -moz-box-orient: vertical;
1126 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1132 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1133 .toolbarbutton-1[disabled="true"]:hover:active,
1134 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1138 .toolbarbutton-1:hover:active,
1139 .toolbarbutton-1[open="true"],
1140 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1142 padding-bottom: 0px;
1143 -moz-padding-start: 3px;
1144 -moz-padding-end: 1px;
1147 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1148 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1149 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1150 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1151 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1154 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1155 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1158 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1159 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1162 .toolbarbutton-1 > .toolbarbutton-icon,
1163 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1166 #nav-bar .toolbarbutton-1,
1167 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1170 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1171 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1172 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1175 #nav-bar #PanelUI-menu-button {
1176 /* -moz-padding-start: 7px;
1177 -moz-padding-end: 5px;*/
1180 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1181 /* padding-left: 5px;
1182 padding-right: 5px;*/
1185 #nav-bar .toolbarbutton-1 > menupopup {
1186 /* margin-top: -3px;*/
1189 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1190 /* margin-top: -8px;*/
1193 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1194 /* -moz-padding-end: 0;*/
1197 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1198 /* -moz-padding-start: 0;
1199 -moz-box-align: center;*/
1202 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1203 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1204 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1205 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1206 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1207 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1208 /* padding: 2px 6px;
1210 border-color: transparent;
1211 transition-property: background-color, border-color;
1212 transition-duration: 150ms;*/
1215 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1216 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1217 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1222 /* Help SDK icons fit: */
1223 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1227 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1228 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1232 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) > .toolbarbutton-icon,
1233 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1234 /* -moz-padding-end: 17px;*/
1237 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1240 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1243 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1246 #nav-bar .toolbaritem-combined-buttons {
1247 /* margin-left: 2px;
1248 margin-right: 2px;*/
1251 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1256 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1257 #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 {
1263 -moz-margin-end: -1px;
1267 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1270 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1271 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1272 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1273 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1274 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1275 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
1276 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
1279 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1280 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1281 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1282 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1283 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1286 #TabsToolbar .toolbarbutton-1,
1287 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1288 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1289 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1292 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1293 #TabsToolbar .toolbarbutton-1[open],
1294 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1295 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1296 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1299 /* unified back/forward button */
1304 #forward-button > menupopup {
1305 margin-top: 1px !important;
1308 #forward-button > .toolbarbutton-icon {
1309 background-clip: padding-box !important;
1310 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1311 /*clip-path: url(chrome://browser/content/browser.xul#windows-keyhole-forward-clip-path) !important;*/
1315 -moz-margin-start: -6px !important;
1320 border-radius: 0 10000px 10000px 0;
1323 #forward-button:-moz-locale-dir(rtl) {
1324 border-radius: 10000px 0 0 10000px;
1327 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1328 transition: opacity @forwardTransitionLength@ ease-out;
1331 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled] {
1335 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1340 /* padding-top: 3px !important;
1341 padding-bottom: 3px !important;
1342 -moz-padding-start: 5px !important;
1343 -moz-padding-end: 0 !important;*/
1346 border-radius: 10000px;
1350 margin-bottom: -2px;
1353 #back-button:-moz-locale-dir(rtl) {
1356 #back-button > menupopup {
1357 margin-top: -1px !important;
1360 #back-button > .toolbarbutton-icon {
1361 border-radius: 10000px !important;
1362 background-clip: padding-box !important;
1363 /* background-color: hsla(210,25%,98%,.08) !important;
1364 padding: 6px !important;
1365 border-color: hsla(210,4%,10%,.25) !important;*/
1366 transition-property: background-color, border-color !important;
1367 transition-duration: 250ms !important;
1370 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1371 /* background-color: hsla(210,4%,10%,.08) !important;
1372 box-shadow: none !important;*/
1375 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1376 #back-button[open="true"] > .toolbarbutton-icon {
1377 /* background-color: hsla(210,4%,10%,.12) !important;
1378 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1381 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1382 #forward-button:-moz-locale-dir(rtl) {
1383 transform: scaleX(-1);
1386 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1387 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1388 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1391 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1392 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1393 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1396 #home-button.bookmark-item {
1397 list-style-image: url("chrome://browser/skin/Toolbar.png");
1400 #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),
1401 #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),
1402 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1403 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1404 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1405 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1406 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1409 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1412 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1413 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1414 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1418 #downloads-button > .toolbarbutton-icon {
1422 /* tabview button & menu item */
1425 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1426 -moz-image-region: rect(1px, 89px, 17px, 73px);
1429 #menu_tabview[groups="0"] {
1430 -moz-image-region: rect(1px, 17px, 17px, 1px);
1433 #menu_tabview[groups="1"] {
1434 -moz-image-region: rect(1px, 35px, 17px, 19px);
1437 #menu_tabview[groups="2"] {
1438 -moz-image-region: rect(1px, 53px, 17px, 37px);
1441 #menu_tabview[groups="3"] {
1442 -moz-image-region: rect(1px, 71px, 17px, 55px);
1445 /* ::::: fullscreen window controls ::::: */
1448 -moz-margin-start: 4px;
1454 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1459 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1462 #minimize-button:hover {
1463 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1467 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1470 #restore-button:hover {
1471 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1475 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1478 #close-button:hover {
1479 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1482 /* ::::: Location Bar ::::: */
1485 .searchbar-textbox {
1488 -moz-margin-start: 3px;
1493 /* make color as light as possible to deal with dark non-domain parts */
1497 #urlbar:-moz-lwtheme,
1498 .searchbar-textbox:-moz-lwtheme {
1499 /* background-color: rgba(255,255,255,.8);
1500 @navbarTextboxCustomBorder@
1504 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1505 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1506 /* background-color: rgba(255,255,255,.9);*/
1509 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1510 .searchbar-textbox:-moz-lwtheme[focused] {
1511 /* background-color: white;*/
1514 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1516 -moz-margin-start: -22px;
1518 pointer-events: none;
1521 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1522 /* -moz-border-start: none;
1524 pointer-events: all;
1527 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1528 transition: margin-left 150ms ease-out;
1531 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1532 /* border-top-left-radius: 0;
1533 border-bottom-left-radius: 0; */
1536 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1537 /* border-top-right-radius: 0;
1538 border-bottom-right-radius: 0; */
1541 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1542 /* clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path");*/
1545 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1549 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1550 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1551 transition-delay: 100s;
1554 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1555 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1556 margin-left: -22.01px;
1559 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1560 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1561 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1562 transform: scaleX(-1);
1565 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1566 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1571 -moz-box-orient: horizontal;
1572 -moz-box-align: stretch;
1575 .urlbar-textbox-container {
1576 -moz-box-align: stretch;
1580 -moz-margin-start: 0;
1585 -moz-box-align: center;
1592 .searchbar-engine-button,
1593 .search-go-container {
1597 .search-go-container > .search-go-button {
1601 .urlbar-icon:hover {
1604 .urlbar-icon[open="true"],
1605 .urlbar-icon:hover:active {
1608 #urlbar-search-splitter {
1610 -moz-margin-start: -3px;
1612 background: transparent;
1615 #urlbar-search-splitter + #urlbar-container > #urlbar,
1616 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1617 -moz-margin-start: 0;
1620 #urlbar-display-box {
1624 -moz-border-end: 1px solid #9C9CFF;
1625 -moz-margin-end: 3px;
1628 -moz-margin-start: 0;
1633 min-width: calc(54px + 11ch);
1643 #identity-box:-moz-locale-dir(ltr) {
1644 /* border-top-left-radius: 1.5px;
1645 border-bottom-left-radius: 1.5px;*/
1648 #identity-box:-moz-locale-dir(rtl) {
1649 /* border-top-right-radius: 1.5px;
1650 border-bottom-right-radius: 1.5px;*/
1653 #notification-popup-box:not([hidden]) + #identity-box {
1654 -moz-padding-start: 10px !important;
1658 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1659 /* border-radius: 0; */
1660 -moz-padding-start: 2px;
1661 -moz-padding-end: 2px;
1662 -moz-margin-end: 1px;
1665 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1666 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1668 transition: padding-left;
1671 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1672 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1674 transition: padding-right;
1677 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1678 #notification-popup-box[hidden] + #identity-box {
1679 /* forward button hiding is delayed when hovered */
1680 transition-delay: 100s;
1683 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1684 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1685 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1686 padding-left: 2.01px;
1689 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1690 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1691 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1692 padding-right: 2.01px;
1695 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1696 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1697 -moz-margin-end: 3px;
1700 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1701 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1702 border-top-right-radius: 0;
1703 border-bottom-right-radius: 0;
1706 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1707 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1708 border-top-left-radius: 0;
1709 border-bottom-left-radius: 0;
1712 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1713 background-color: #000000;
1716 #identity-box:-moz-focusring {
1717 outline: 1px dotted #008484;
1718 outline-offset: -1px;
1721 #identity-box.verifiedDomain:-moz-focusring,
1722 #identity-box.verifiedIdentity:-moz-focusring {
1723 outline-color: #000000;
1726 #identity-icon-labels {
1727 -moz-margin-start: 1px;
1728 -moz-margin-end: 3px;
1731 /* Location bar dropmarker */
1733 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1734 background-color: transparent;
1737 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1738 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1743 .urlbar-history-dropmarker:hover {
1746 .urlbar-history-dropmarker:hover:active,
1747 .urlbar-history-dropmarker[open="true"] {
1750 /* page proxy icon */
1752 /* === BEGIN identity-block.inc.css === */
1754 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1755 /* Default theme does different color per channel, we can't as they do it build-time. */
1757 -moz-border-end: 1px solid #9C9CFF;
1760 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1762 -moz-border-end: 1px solid #008484;
1765 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1766 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1767 background-position: right;
1768 background-size: 1px;
1769 background-repeat: no-repeat;
1772 /* page proxy icon */
1774 #page-proxy-favicon {
1777 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1781 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1782 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1785 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1786 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1789 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1790 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1793 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1794 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1797 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1798 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1801 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1802 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1805 #page-proxy-favicon[pageproxystate="invalid"] {
1809 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1810 list-style-image: url("chrome://branding/content/icon64.png");
1813 #identity-popup-brandName {
1817 margin-bottom: .5em;
1820 #identity-popup-content-box {
1824 /* === END identity-block.inc.css === */
1826 #page-proxy-favicon {
1827 -moz-image-region: rect(0, 16px, 16px, 0);
1830 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1831 /* -moz-margin-end: 1px;*/
1834 #identity-box:hover > #page-proxy-favicon {
1835 -moz-image-region: rect(0, 32px, 16px, 16px);
1838 #identity-box:hover:active > #page-proxy-favicon,
1839 #identity-box[open=true] > #page-proxy-favicon {
1840 -moz-image-region: rect(0, 48px, 16px, 32px);
1843 #identity-box:hover {
1844 background-color: #FFCF00;
1848 #identity-box:hover:active,
1849 #identity-box[open=true] {
1850 background-color: #FF9F00;
1854 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1855 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1856 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1857 background-color: #9C9CFF;
1861 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1862 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1863 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1864 background-color: #008484;
1870 #treecolAutoCompleteImage {
1874 .ac-result-type-bookmark,
1875 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1876 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1877 -moz-image-region: rect(0px 16px 16px 0px);
1882 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1883 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1884 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1887 .ac-result-type-keyword,
1888 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1889 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1890 -moz-image-region: rect(0px 32px 16px 16px);
1895 .ac-result-type-tag,
1896 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1897 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1906 .ac-extra > .ac-comment {
1916 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1917 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1918 -moz-image-region: rect(0, 16px, 16px, 0);
1922 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1923 -moz-image-region: rect(16px, 16px, 32px, 0);
1926 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1930 .ac-comment[selected="true"],
1931 .ac-url-text[selected="true"],
1932 .ac-action-text[selected="true"] {
1933 color: inherit !important;
1936 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1937 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1943 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1944 border-top: 1px solid #9C9CFF;
1947 /* combined go/reload/stop button in location bar */
1949 #urlbar > toolbarbutton {
1950 -moz-margin-start: 0;
1952 background-origin: border-box;
1954 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1955 -moz-border-start: 1px solid #9C9CFF;
1958 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
1959 border-top-left-radius: 0px;
1960 border-bottom-left-radius: 0px;
1963 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
1964 border-top-right-radius: 0px;
1965 border-bottom-right-radius: 0px;
1968 #urlbar > toolbarbutton:not([disabled]):active:hover,
1969 #urlbar-reload-button:not(:hover) {
1970 -moz-border-start-style: none;
1971 -moz-padding-start: 3px;
1974 #urlbar-reload-button {
1975 -moz-image-region: rect(0px, 14px, 14px, 0px);
1978 #urlbar-reload-button[disabled] {
1979 -moz-image-region: rect(28px, 14px, 42px, 0px);
1982 #urlbar-reload-button:not([disabled]):hover {
1983 -moz-image-region: rect(14px, 14px, 28px, 0px);
1986 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1987 transform: scaleX(-1);
1991 -moz-image-region: rect(0, 42px, 14px, 28px);
1994 #urlbar-go-button:hover,
1995 -moz-image-region: rect(14px, 42px, 28px, 28px);
1998 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1999 transform: scaleX(-1);
2002 #urlbar-stop-button {
2003 -moz-image-region: rect(0px, 28px, 14px, 14px);
2006 #urlbar-stop-button:hover {
2007 -moz-image-region: rect(14px, 28px, 28px, 14px);
2010 /* popup blocker button */
2012 #page-report-button {
2013 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2014 -moz-image-region: rect(0, 16px, 16px, 0);
2017 #page-report-button:hover ,
2018 #page-report-button:hover:active,
2019 #page-report-button[open="true"] {
2020 -moz-image-region: rect(0, 32px, 16px, 16px);
2023 /* social share panel */
2025 #social-share-panel > iframe {
2026 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2031 .social-share-toolbar {
2032 border-right: 1px solid #9C9CFF;
2033 /* background-color: #000000; */
2036 #social-share-provider-buttons {
2040 #social-share-provider-buttons > .share-provider-button {
2041 -moz-appearance: none;
2049 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2050 #social-share-provider-buttons > .share-provider-button:hover,
2051 #social-share-provider-buttons > .share-provider-button:active {
2055 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2058 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2061 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2067 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2074 /* fixup corners for share panel */
2075 .social-panel > .social-panel-frame {
2076 border-radius: inherit;
2079 #social-share-panel {
2086 .social-share-frame {
2087 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2090 /* we resize our panels dynamically, make it look nice */
2091 transition: height 100ms ease-out, width 100ms ease-out;
2094 .social-share-frame:-moz-locale-dir(ltr) {
2095 border-top-left-radius: 0;
2096 border-bottom-left-radius: 0;
2097 border-top-right-radius: inherit;
2098 border-bottom-right-radius: inherit;
2101 .social-share-frame:-moz-locale-dir(rtl) {
2102 border-top-left-radius: inherit;
2103 border-bottom-left-radius: inherit;
2104 border-top-right-radius: 0;
2105 border-bottom-right-radius: 0;
2108 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2109 border-top-left-radius: inherit;
2110 border-bottom-left-radius: inherit;
2113 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2114 border-top-right-radius: inherit;
2115 border-bottom-right-radius: inherit;
2118 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2119 border-top-left-radius: inherit;
2120 border-bottom-left-radius: inherit;
2123 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2124 border-top-right-radius: inherit;
2125 border-bottom-right-radius: inherit;
2128 /* social recommending panel */
2130 #social-mark-button {
2131 -moz-image-region: rect(0, 16px, 16px, 0);
2134 /* bookmarks menu-button */
2136 #bookmarks-menu-button.bookmark-item {
2137 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2138 -moz-image-region: rect(0px 16px 16px 0px);
2141 #bookmarks-menu-button.bookmark-item[starred] {
2142 -moz-image-region: rect(0px 32px 16px 16px);
2145 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2146 -moz-margin-start: 5px;
2149 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2151 padding-bottom: 2px;
2154 #BMB_bookmarksPopup[side="top"],
2155 #BMB_bookmarksPopup[side="bottom"] {
2157 margin-right: -20px;
2160 #BMB_bookmarksPopup[side="left"],
2161 #BMB_bookmarksPopup[side="right"] {
2163 margin-bottom: -20px;
2166 /* bookmarking panel */
2168 #editBookmarkPanelStarIcon {
2169 list-style-image: url("chrome://browser/skin/places/starred48.png");
2174 #editBookmarkPanelStarIcon[unstarred] {
2175 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2178 #editBookmarkPanelTitle {
2182 #editBookmarkPanelHeader,
2183 #editBookmarkPanelContent {
2184 margin-bottom: .5em;
2187 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2188 #editBMPanel_folderTree {
2193 margin: 5px -6px -6px;
2195 border-top: 1px solid #9C9CFF;
2196 border-bottom-left-radius: 5px;
2197 border-bottom-right-radius: 5px;
2201 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2202 -moz-margin-end: 10px;
2203 vertical-align: middle;
2206 .panel-promo-closebutton {
2207 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2208 -moz-margin-end: -3px;
2212 .panel-promo-closebutton:hover {
2213 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2216 .panel-promo-closebutton:hover:active {
2217 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2220 .panel-promo-closebutton > .toolbarbutton-text {
2225 /* ::::: content area ::::: */
2228 background-color: Window;
2232 -moz-padding-start: 0px;
2235 .browserContainer > findbar {
2237 background-color: -moz-dialog;
2238 color: -moz-DialogText;
2247 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2250 #TabsToolbar .toolbar-holder {
2251 background-color: #000000; /* correct effect of being an actual toolbar */
2254 #main-window[disablechrome] #TabsToolbar,
2255 #TabsToolbar[tabsontop="false"] {
2256 border-bottom: 1px solid #008484;
2259 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2262 #main-window[tabsintitlebar] #TabsToolbar {
2263 background-color: transparent;
2266 /* === BEGIN tabs.inc.css === */
2269 .tabs-newtab-button,
2270 #TabsToolbar > #new-tab-button {
2275 padding: 1px 4px 2px;
2278 .tabbrowser-tab:first-of-type {
2279 -moz-margin-start: 2px;
2282 .tabs-newtab-button,
2283 #TabsToolbar > #new-tab-button {
2284 border-radius: 8px 8px 0px 0px;
2285 -moz-margin-start: 0;
2288 .tabs-newtab-button:not(:hover),
2289 #TabsToolbar > #new-tab-button:not(:hover) {
2290 background-color: #C09070;
2293 .tabbrowser-tab[remote] {
2294 text-decoration: underline;
2297 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2298 .tabbrowser-tab[selected=true] {
2299 /* position: relative;
2303 .tab-background-middle {
2321 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2325 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2328 .tab-throbber[progress] {
2329 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2332 .tab-throbber:not([pinned]),
2333 .tab-icon-image:not([pinned]) {
2334 -moz-margin-end: 3px;
2337 .tab-throbber[pinned],
2338 .tab-icon-image[pinned] {
2339 -moz-margin-start: 2px;
2340 -moz-margin-end: 2px;
2352 .tabs-newtab-button {
2353 /* overlap the tab curves */
2356 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2359 .tab-background-start[selected=true]::after,
2360 .tab-background-start[selected=true]::before,
2361 .tab-background-start,
2362 .tab-background-end,
2363 .tab-background-end[selected=true]::after,
2364 .tab-background-end[selected=true]::before {
2367 .tabbrowser-tab:not([selected=true]),
2368 .tabbrowser-tab:-moz-lwtheme {
2371 /* tabbrowser-tab focus ring */
2372 .tabbrowser-tab:focus {
2373 outline: 1px dotted;
2378 .tabbrowser-tab[selected="true"] {
2381 /* End selected tab */
2383 /* Background tabs */
2385 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2386 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2387 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2388 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2391 /* End background tabs */
2393 /* Tab pointer-events */
2396 pointer-events: none;
2399 .tab-background-middle,
2400 .tabs-newtab-button,
2402 pointer-events: auto;
2407 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2408 background-color: #E7ADE7;
2411 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2412 background-color: #3333FF;
2416 /* New tab button */
2418 .tabs-newtab-button {
2422 /* === END tabs.inc.css === */
2424 /* Tab DnD indicator */
2425 .tab-drop-indicator {
2426 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2427 margin-bottom: -11px;
2430 /* Tab close button */
2432 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2435 .tab-close-button:hover,
2436 .tab-close-button:hover[selected="true"] {
2437 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2440 .tab-close-button:hover:active,
2441 .tab-close-button:hover:active[selected="true"] {
2442 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2445 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2447 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2448 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2452 background-origin: border-box;
2455 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2456 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2457 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2458 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2461 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2462 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2465 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2466 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2467 /* transform: scaleX(-1);*/
2470 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2471 transition: 1s background-color ease-out;
2474 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2475 background-color: #008484;
2478 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2479 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2480 /* border-width: 0 2px 0 0;
2481 border-style: solid;
2482 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2485 .tabs-newtab-button > .toolbarbutton-icon {
2487 margin-bottom: -1px;
2490 .tabs-newtab-button,
2491 #TabsToolbar > #new-tab-button,
2492 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2493 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2494 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2495 -moz-image-region: rect(0, 16px, 18px, 0);
2498 .tabs-newtab-button,
2499 .tabs-newtab-button:hover,
2500 #TabsToolbar > #new-tab-button,
2501 #TabsToolbar > #new-tab-button:hover {
2502 -moz-image-region: rect(0, 32px, 18px, 16px);
2505 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2506 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2507 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2508 .tabs-newtab-button:-moz-lwtheme-brighttext,
2509 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2510 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2513 #TabsToolbar > #new-tab-button {
2518 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2521 #alltabs-button:hover,
2522 #alltabs-button:hover:active,
2523 #alltabs-button[open="true"] {
2524 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2527 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2528 #alltabs-button:-moz-lwtheme-brighttext {
2531 #alltabs-button > .toolbarbutton-icon {
2535 #alltabs-button > .toolbarbutton-menu-dropmarker {
2539 /* All tabs menupopup */
2540 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2541 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2542 -moz-image-region: auto;
2545 .alltabs-item[selected="true"] {
2549 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2550 list-style-image: url("chrome://global/skin/icons/loading.gif");
2553 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2554 background-color: #402800;
2557 /* Tabstrip close button */
2562 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2565 .tabs-closebutton > .toolbarbutton-icon {
2568 .tabs-closebutton > .toolbarbutton-text {
2572 .tabs-closebutton:hover,
2573 .tabs-closebutton:hover:active {
2574 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2577 toolbarbutton.chevron {
2578 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2581 toolbarbutton.chevron:hover {
2582 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2585 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2586 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2587 transform: scaleX(-1);
2590 toolbarbutton.chevron > .toolbarbutton-text,
2591 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2595 toolbarbutton.chevron > .toolbarbutton-icon {
2599 #sidebar-throbber[loading="true"] {
2600 list-style-image: url("chrome://global/skin/icons/loading.gif");
2601 -moz-margin-end: 4px;
2604 /* Bookmarks toolbar */
2605 #PlacesToolbarDropIndicator {
2606 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2609 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2610 background-color: #008484 !important;
2611 color: #FFCF00 !important;
2614 /* rules for menupopup drop indicators */
2615 .menupopup-drop-indicator-bar {
2617 /* these two margins must together compensate the indicator's height */
2619 margin-bottom: -1px;
2622 .menupopup-drop-indicator {
2623 list-style-image: none;
2625 -moz-margin-end: -4em;
2626 background-color: #008484;
2629 /* ::::: Identity Indicator Styling ::::: */
2632 #identity-popup-icon {
2636 list-style-image: url("chrome://browser/skin/identity.png");
2637 -moz-image-region: rect(0px, 64px, 64px, 0px);
2640 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2641 -moz-image-region: rect(64px, 64px, 128px, 0px);
2644 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2645 -moz-image-region: rect(128px, 64px, 192px, 0px);
2648 /* Popup Body Text */
2649 .identity-popup-description {
2650 white-space: pre-wrap;
2651 -moz-padding-start: 15px;
2655 .identity-popup-label {
2656 white-space: pre-wrap;
2657 -moz-padding-start: 15px;
2661 #identity-popup-content-host,
2662 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2666 #identity-popup-content-host {
2673 #identity-popup-content-owner {
2675 margin-bottom: 0 !important;
2680 .verifiedDomain > #identity-popup-content-owner {
2681 font-weight: normal;
2684 #identity-popup-content-verifier {
2688 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2689 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2691 -moz-margin-start: -24px;
2694 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2695 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2696 list-style-image: url("chrome://browser/skin/Secure24.png");
2699 #identity-popup-help-icon {
2701 margin: 7px 0 0 -3px;
2704 list-style-image: url("chrome://global/skin/icons/question-16.png");
2708 #identity-popup-help-icon > .button-box > .button-text {
2712 #identity-popup-help-icon > .button-box > .button-icon {
2717 #identity-popup-more-info-button {
2723 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2727 #identity-popup-container {
2732 #identity-popup-button-container {
2733 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2738 .popup-notification-icon {
2741 -moz-margin-end: 10px;
2744 .popup-notification-icon[popupid="geolocation"] {
2745 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2748 .popup-notification-icon[popupid="xpinstall-disabled"],
2749 .popup-notification-icon[popupid="addon-progress"],
2750 .popup-notification-icon[popupid="addon-install-cancelled"],
2751 .popup-notification-icon[popupid="addon-install-blocked"],
2752 .popup-notification-icon[popupid="addon-install-failed"],
2753 .popup-notification-icon[popupid="addon-install-complete"] {
2754 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2759 .popup-notification-icon[popupid="click-to-play-plugins"] {
2760 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2763 .popup-notification-icon[popupid="plugins-not-found"] {
2764 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2767 .popup-notification-icon[popupid="web-notifications"] {
2768 list-style-image: url("chrome://browser/skin/notification-64.png");
2771 .addon-progress-description {
2776 .popup-progress-label,
2777 .popup-progress-meter {
2778 -moz-margin-start: 0;
2782 .popup-progress-cancel {
2783 -moz-appearance: none;
2784 background: transparent;
2790 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2791 -moz-image-region: rect(0px, 32px, 16px, 16px);
2794 .popup-progress-cancel:hover {
2795 -moz-image-region: rect(16px, 32px, 32px, 16px);
2798 .popup-progress-cancel:active {
2799 -moz-image-region: rect(32px, 32px, 48px, 16px);
2802 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2803 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2804 .popup-notification-icon[popupid*="offline-app-requested"],
2805 .popup-notification-icon[popupid="offline-app-usage"] {
2806 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2809 .popup-notification-icon[popupid="password-save"],
2810 .popup-notification-icon[popupid="password-change"] {
2811 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2814 .popup-notification-icon[popupid="webapps-install-progress"],
2815 .popup-notification-icon[popupid="webapps-install"] {
2816 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2819 .popup-notification-icon[popupid="mixed-content-blocked"] {
2820 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2823 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2824 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2825 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2828 .popup-notification-icon[popupid="pointerLock"] {
2829 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2832 /* Notification icon box */
2833 #notification-popup-box {
2835 background-color: #000000;
2836 background-clip: padding-box;
2839 border-radius: 3px 0 0 3px;
2840 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2841 -moz-margin-end: -8px;
2842 border-right-width: 8px;
2845 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2846 /* padding-left: 5px; */
2849 #notification-popup-box:-moz-locale-dir(rtl),
2850 .notification-anchor-icon:-moz-locale-dir(rtl) {
2851 transform: scaleX(-1);
2854 .notification-anchor-icon {
2860 .notification-anchor-icon:-moz-focusring {
2861 outline: 1px dotted #008484;
2862 /* outline-offset: -3px; */
2865 .default-notification-icon,
2866 #default-notification-icon {
2867 list-style-image: url("chrome://global/skin/icons/information-16.png");
2870 .identity-notification-icon,
2871 #identity-notification-icon {
2872 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2875 .geo-notification-icon,
2876 #geo-notification-icon {
2877 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2880 #addons-notification-icon {
2881 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2884 .indexedDB-notification-icon,
2885 #indexedDB-notification-icon {
2886 list-style-image: url("chrome://global/skin/icons/question-16.png");
2889 #password-notification-icon {
2890 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2893 #webapps-notification-icon {
2894 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2897 #plugins-notification-icon {
2898 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2901 #plugins-notification-icon.plugin-hidden {
2902 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2905 #plugins-notification-icon.plugin-blocked {
2906 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2909 #plugins-notification-icon {
2910 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2913 #plugins-notification-icon:hover {
2914 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2917 #plugin-install-notification-icon {
2918 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2921 #notification-popup-box[hidden] {
2922 /* Override display:none to make the pluginBlockedNotification animation work
2923 when showing the notification repeatedly. */
2925 visibility: collapse;
2928 #plugins-notification-icon.plugin-blocked[showing] {
2929 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
2932 @keyframes pluginBlockedNotification {
2941 .mixed-content-blocked-notification-icon,
2942 #mixed-content-blocked-notification-icon {
2943 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
2946 .webRTC-shareDevices-notification-icon,
2947 #webRTC-shareDevices-notification-icon {
2948 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
2951 .webRTC-sharingDevices-notification-icon,
2952 #webRTC-sharingDevices-notification-icon {
2953 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
2956 .web-notifications-notification-icon,
2957 #web-notifications-notification-icon {
2958 list-style-image: url("chrome://browser/skin/notification-16.png");
2961 #pointerLock-notification-icon {
2962 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
2964 #pointerLock-cancel {
2968 /* Bookmarks roots menu-items */
2969 #subscribeToPageMenuitem:not([disabled]),
2970 #subscribeToPageMenupopup,
2971 #BMB_subscribeToPageMenuitem:not([disabled]),
2972 #BMB_subscribeToPageMenupopup {
2973 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
2976 #bookmarksToolbarFolderMenu,
2977 #BMB_bookmarksToolbar,
2978 #panelMenu_bookmarksToolbar {
2979 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
2980 -moz-image-region: auto;
2983 #BMB_unsortedBookmarks,
2984 #panelMenu_unsortedBookmarks {
2985 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
2986 -moz-image-region: auto;
2989 /* ::::: Keyboard UI Panel ::::: */
2994 border-radius: 20px;
2997 .KUI-panel[level="top"] {
2998 /*background-color: rgba(27%,27%,27%,.65);*/
3004 padding: 20px 10px 10px;
3008 .ctrlTab-favicon[src] {
3009 background-color: #000000;
3015 .ctrlTab-preview-inner > .tabPreview-canvas {
3018 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3022 .ctrlTab-preview-inner {
3023 padding-bottom: 10px;
3026 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3028 background-color: #000000;
3029 border-radius: .5em;
3032 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3034 background-color: #000000;
3037 border: 2px solid #9C9CFF;
3038 border-radius: .5em;
3041 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3042 margin: -10px -10px 0;
3051 .statuspanel-label {
3054 background: #404000;
3055 border: 1px none #9C9CFF;
3056 border-top-style: solid;
3061 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3062 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3063 border-right-style: solid;
3064 border-top-right-radius: .3em;
3068 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3069 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3070 border-left-style: solid;
3071 border-top-left-radius: .3em;
3075 /* HACK to abolish devily color on main content */
3078 background-color: transparent !important;
3081 /* === BEGIN highlighter.inc.css === */
3085 .highlighter-outline {
3086 box-shadow: 0 0 0 1px black;
3087 outline: 1px dashed #A09090;
3090 .highlighter-outline[locked] {
3091 box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
3092 outline-color: rgba(255,255,255,0.7);
3095 /* Highlighter - Node Infobar */
3097 .highlighter-nodeinfobar {
3100 background-color: #000000;
3101 background-clip: padding-box;
3102 border: 1px solid #008484;
3104 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3109 /* Highlighter - Node Infobar - text */
3111 .highlighter-nodeinfobar-text {
3112 /* 100% - size of the buttons and margins */
3113 max-width: calc(100% - 2 * (26px + 6px));
3114 padding-bottom: 1px;
3117 html|*.highlighter-nodeinfobar-tagname {
3121 html|*.highlighter-nodeinfobar-id {
3125 html|*.highlighter-nodeinfobar-pseudo-classes {
3129 /* Highlighter - Node Infobar - buttons */
3131 .highlighter-nodeinfobar-button {
3137 .highlighter-nodeinfobar-inspectbutton {
3138 list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
3139 -moz-image-region: rect(0px 16px 16px 0px);
3140 -moz-margin-start: 0px;
3141 -moz-margin-end: 2px;
3144 .highlighter-nodeinfobar-inspectbutton:hover,
3145 .highlighter-nodeinfobar-inspectbutton:hover:active/*,
3146 .highlighter-nodeinfobar-container:not([locked]) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-inspectbutton*/ {
3147 -moz-image-region: rect(0px 32px 16px 16px);
3150 .highlighter-nodeinfobar-menu {
3153 .highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
3154 -moz-box-align: center;
3155 -moz-margin-start: -1px;
3158 /* Highlighter - Node Infobar - box & arrow */
3160 .highlighter-nodeinfobar-arrow {
3163 -moz-margin-start: calc(50% - 7px);
3164 transform: rotate(-45deg);
3165 background-clip: padding-box;
3166 background-repeat: no-repeat;
3169 .highlighter-nodeinfobar-arrow-top {
3170 margin-bottom: -8px;
3172 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3175 .highlighter-nodeinfobar-arrow-bottom {
3178 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3181 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3185 /* === END highlighter.inc.css === */
3187 #full-screen-warning-message {
3188 background-color: #000000;
3193 box-shadow: 0 0 2px #9C9CFF;
3196 #full-screen-warning-container[obscure-browser] {
3197 background-color: rgba(0,0,0,0.3);
3200 .full-screen-description {
3204 #full-screen-domain-text {
3208 .full-screen-approval-button,
3209 #full-screen-remember-decision {
3213 /* === BEGIN commandline.inc.css === */
3215 /* Developer toolbar */
3217 #developer-toolbar {
3218 border-top: 3px solid #000000;
3219 border-bottom: none;
3222 #developer-toolbar .toolbar-holder {
3223 background-color: #8050B0;
3227 #developer-toolbar .toolbar-holder {
3228 background-color: #8050B0;
3232 #developer-toolbar .toolbar-startcap,
3233 #developer-toolbar .toolbar-endcap{
3234 background-color: #6000CF;
3237 #developer-toolbar {
3239 min-height: 32px; */
3242 #developer-toolbar > toolbarbutton {
3248 .developer-toolbar-button > image {
3249 /* margin: auto 10px; */
3252 #developer-toolbar-toolbox-button > label {
3256 #developer-toolbar-toolbox-button {
3257 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3258 -moz-image-region: rect(0px, 16px, 16px, 0px);
3261 #developer-toolbar-toolbox-button > label {
3265 #developer-toolbar-toolbox-button:hover,
3266 #developer-toolbar-toolbox-button:hover:active,
3267 #developer-toolbar-toolbox-button[checked=true] {
3268 -moz-image-region: rect(0px, 32px, 16px, 16px);
3271 #developer-toolbar-closebutton {
3272 list-style-image: url("chrome://browser/skin/devtools/close.png");
3273 -moz-image-region: rect(0px, 16px, 16px, 0px);
3278 #developer-toolbar-closebutton > .toolbarbutton-icon {
3281 #developer-toolbar-closebutton > .toolbarbutton-text {
3285 #developer-toolbar-closebutton:hover,
3286 #developer-toolbar-closebutton:hover:active {
3287 -moz-image-region: rect(0px, 32px, 16px, 16px);
3292 html|*#gcli-tooltip-frame,
3293 html|*#gcli-output-frame {
3296 background-color: transparent;
3302 background-color: transparent;
3305 .gclitoolbar-input-node,
3306 .gclitoolbar-complete-node {
3308 -moz-box-align: center;
3312 background-color: transparent;
3315 .gclitoolbar-input-node {
3317 /* line-height: 32px;
3318 outline-style: none; */
3319 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3320 background-repeat: no-repeat;
3321 background-color: rgba(0, 0, 0, .75);
3324 .gclitoolbar-input-node[focused="true"] {
3325 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3326 background-color: #000000;
3329 .gclitoolbar-input-node:not([focused="true"]) {
3330 border-color: transparent;
3333 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3334 background-color: #008484;
3339 .gclitoolbar-complete-node {
3341 background-color: transparent;
3344 pointer-events: none;
3347 .gcli-in-incomplete,
3351 .gcli-in-closebrace,
3358 .gcli-in-incomplete {
3359 border-bottom: 2px dotted #8050B0;
3363 border-bottom: 2px dotted #FF0000;
3374 .gcli-in-closebrace {
3378 /* === END commandline.inc.css === */
3380 /* === BEGIN responsivedesign.inc.css === */
3382 /* Responsive Mode */
3384 .browserContainer[responsivemode] {
3385 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3386 padding: 0 20px 20px 20px;
3389 .browserStack[responsivemode] {
3390 box-shadow: 0 0 7px #9C9CFF;
3393 .devtools-responsiveui-toolbar {
3394 background: transparent;
3395 /* text color is textColor from dark theme, since no theme is applied to
3396 * the responsive toolbar.
3402 border-bottom-width: 0;
3405 .devtools-responsiveui-menulist,
3406 .devtools-responsiveui-toolbarbutton {
3407 -moz-box-align: center;
3409 /* min-height: 22px;*/
3410 /* margin: 0 3px; */
3413 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3414 -moz-box-orient: horizontal;
3417 .devtools-responsiveui-menulist:-moz-focusring,
3418 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3419 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3420 outline-offset: -4px;*/
3423 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3427 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3428 /* border-color: hsla(210,8%,5%,.6);
3429 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3430 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
3433 .devtools-responsiveui-menulist[open=true],
3434 .devtools-responsiveui-toolbarbutton[open=true],
3435 .devtools-responsiveui-toolbarbutton[checked=true] {
3436 /* border-color: hsla(210,8%,5%,.6) !important;
3437 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3438 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
3441 .devtools-responsiveui-toolbarbutton[checked=true] {
3442 /* color: hsl(208,100%,60%); */
3445 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3446 /* background-color: transparent !important;*/
3449 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3450 /* background-color: hsla(210,8%,5%,.2) !important;*/
3453 .devtools-responsiveui-menulist > .menulist-label-box {
3457 .devtools-responsiveui-menulist > .menulist-dropmarker {
3458 /* display: -moz-box;
3459 background-color: transparent;
3460 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3461 -moz-box-align: center;
3466 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3469 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3470 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3473 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3474 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3477 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3478 /* padding: 0 1px;*/
3479 -moz-box-align: stretch;
3482 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3483 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3484 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3485 -moz-box-align: center;
3489 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3490 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3494 .devtools-responsiveui-close {
3495 list-style-image: url("chrome://browser/skin/devtools/close.png");
3496 -moz-image-region: rect(0px,16px,16px,0px);
3499 .devtools-responsiveui-close:hover {
3500 -moz-image-region: rect(0px,32px,16px,16px);
3503 .devtools-responsiveui-rotate {
3504 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3505 -moz-image-region: rect(0px,16px,16px,0px);
3508 .devtools-responsiveui-rotate:hover {
3509 -moz-image-region: rect(0px,32px,16px,16px);
3512 .devtools-responsiveui-touch {
3513 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3514 -moz-image-region: rect(0px,16px,16px,0px);
3517 .devtools-responsiveui-touch:hover,
3518 .devtools-responsiveui-touch[checked],
3519 .devtools-responsiveui-touch[checked]:hover {
3520 -moz-image-region: rect(0px,32px,16px,16px);
3523 .devtools-responsiveui-screenshot {
3524 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3525 -moz-image-region: rect(0px,16px,16px,0px);
3528 .devtools-responsiveui-screenshot:hover {
3529 -moz-image-region: rect(0px,32px,16px,16px);
3532 .devtools-responsiveui-resizebarV {
3536 transform: translate(12px, -12px);
3537 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3540 .devtools-responsiveui-resizebarH {
3544 transform: translate(-12px, 12px);
3545 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3548 .devtools-responsiveui-resizehandle {
3552 transform: translate(12px, 12px);
3553 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3556 /* === END responsivedesign.inc.css === */
3558 /* === including indicator.css is done at the start of the file === */
3562 #developer-toolbar-toolbox-button[error-count]:before {
3566 background-color: #FF0000;
3568 -moz-margin-end: 5px;
3571 /* Social toolbar item */
3573 #social-provider-button {
3574 -moz-image-region: rect(0, 16px, 16px, 0);
3575 list-style-image: url("chrome://browser/skin/social/services-16.png");
3578 #social-provider-button > .toolbarbutton-menu-dropmarker {
3582 .toolbarbutton-badge-container {
3588 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3592 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3598 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3602 .toolbarbutton-badge[badge=""] {
3605 .toolbarbutton-badge[badge]:not([badge=""])::after {
3606 /* The |content| property is set in the content stylesheet. */
3611 background-color: #000000;
3612 border: 1px solid #9C9CFF;
3619 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3624 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3629 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3634 #social-notification-icon-mentions {
3635 background-color: #000000;
3637 -moz-margin-start: 2px;
3640 #social-notification-icon-mentions:hover {
3641 background-color: #FFCF00;
3644 #social-notification-icon-mentions[open="true"] {
3645 background-color: #FF9F00;
3648 #social-sidebar-splitter {
3652 .popup-notification-icon[popupid="servicesInstall"] {
3653 list-style-image: url("chrome://browser/skin/social/services-64.png");
3655 #servicesInstall-notification-icon {
3656 list-style-image: url("chrome://browser/skin/social/services-16.png");
3658 #social-undoactivation-button,
3659 #servicesInstall-learnmore-link {
3660 -moz-margin-start: 0; /* override default label margin to match description margin */
3663 #socialActivatedNotification .popup-notification-button-container {
3667 .social-activation-icon {
3674 #social-activation-message {
3678 #social-activation-message > label {
3682 /* social toolbar provider menu */
3683 .social-statusarea-popup {
3686 margin-right: -12px;
3689 .social-statusarea-user {
3690 border-bottom: 1px solid #9C9CFF;
3691 background-color: #000000;
3697 .social-statusarea-user-portrait {
3704 .social-statusarea-loggedInStatus {
3705 background: transparent;
3710 list-style-image: none;
3713 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3714 text-decoration: underline;
3717 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3721 .social-panel-frame {
3722 border-radius: inherit;
3725 /* === BEGIN chat.inc.css === */
3727 #social-sidebar-header {
3731 #social-sidebar-button {
3732 -moz-appearance: none;
3733 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3738 #social-sidebar-button:hover,
3739 #social-sidebar-button:hover:active {
3740 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3742 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3746 #social-sidebar-button[loading="true"] {
3747 list-style-image: url("chrome://global/skin/icons/loading.gif");
3750 #social-sidebar-favico {
3763 .chat-toolbarbutton {
3764 -moz-appearance: none;
3772 .chat-toolbarbutton > .toolbarbutton-text {
3776 .chat-toolbarbutton > .toolbarbutton-icon {
3780 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3785 .chat-close-button {
3786 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3787 -moz-image-region: rect(0, 16px, 16px, 0);
3790 .chat-close-button:hover,
3791 .chat-close-button:hover:active {
3792 -moz-image-region: rect(0, 32px, 16px, 16px);
3795 .chat-minimize-button {
3796 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3797 -moz-image-region: rect(16px, 16px, 32px, 0);
3800 .chat-minimize-button:hover:active,
3801 .chat-minimize-button:hover {
3802 -moz-image-region: rect(16px, 32px, 32px, 16px);
3806 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3807 -moz-image-region: rect(48px, 16px, 64px, 0);
3810 .chat-swap-button:hover:active,
3811 .chat-swap-button:hover {
3812 -moz-image-region: rect(48px, 32px, 64px, 16px);
3815 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3816 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3817 -moz-image-region: rect(32px, 16px, 48px, 0);
3820 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3821 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3822 -moz-image-region: rect(32px, 32px, 48px, 16px);
3827 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3833 background-color: #9C9CFF;
3840 -moz-padding-start: 6px;
3842 border-bottom: 1px solid #008484;
3846 .chat-titlebar > .notification-anchor-icon {
3851 .chat-titlebar[minimized="true"] {
3852 border-bottom: none;
3855 .chat-titlebar[selected] {
3856 background-color: #008484;
3859 .chat-titlebar[activity] {
3860 background-color: #E7ADE7;
3870 list-style-image: url("chrome://browser/skin/social/services-16.png");
3871 background-color: #000000;
3877 border-top: 1px solid #008484;
3878 -moz-border-end: 1px solid #008484;
3881 @media (min-resolution: 2dppx) {
3883 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3887 .chatbar-button > .toolbarbutton-icon {
3891 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3898 .chatbar-button > .toolbarbutton-icon {
3902 .chatbar-button:hover > .toolbarbutton-icon,
3903 .chatbar-button[open="true"] > .toolbarbutton-icon {
3907 .chatbar-button:hover,
3908 .chatbar-button[open="true"] {
3911 .chatbar-button > .toolbarbutton-text,
3912 .chatbar-button > .toolbarbutton-menu-dropmarker {
3916 .chatbar-button[activity]:not([open="true"]) {
3917 background-color: #E7ADE7;
3920 .chatbar-button > menupopup > menuitem[activity] {
3925 background: transparent;
3931 -moz-margin-end: 20px;
3937 -moz-margin-start: 4px;
3938 background-color: #000000;
3939 border: 1px solid #9C9CFF;
3940 border-bottom: none;
3941 border-top-left-radius: 2.5px;
3942 border-top-right-radius: 2.5px;
3945 chatbox[minimized="true"] {
3951 -moz-margin-start: 0px;
3957 /* === END chat.inc.css === */
3960 /* background-color: #c4cfde; */
3963 .chat-titlebar[selected] {
3964 /* background-color: #dae3f0; */
3968 -moz-appearance: none;
3969 /* background-color: #c4cfde; */
3972 .chatbar-button > .toolbarbutton-icon {
3973 /* -moz-margin-end: 0; */
3976 .chatbar-button:hover,
3977 .chatbar-button[open="true"] {
3978 /* background-color: #dae3f0; */
3981 .chatbar-button[activity]:not([open="true"]) {
3985 /* border-top-left-radius: 2.5px;
3986 border-top-right-radius: 2.5px; */
3989 /* === BEGIN plugin-doorhanger.inc.css === */
3992 * Plugin Doorhanger Styles
3995 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
3996 padding: 6px 1px 2px;
3999 .click-to-play-plugins-notification-center-box {
4002 .plugin-popupnotification-centeritem:nth-child(odd) {
4003 /* background-color: rgba(0,0,0,0.1);*/
4006 .center-item-label {
4008 text-overflow: ellipsis;
4011 .center-item-warning-icon {
4012 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4013 background-repeat: no-repeat;
4016 -moz-margin-start: 6px;
4019 .click-to-play-plugins-notification-button-container {
4022 .click-to-play-popup-button {
4026 .click-to-play-plugins-notification-description-box {
4030 padding-bottom: 3px;
4033 .click-to-play-plugins-outer-description {
4037 .click-to-play-plugins-notification-link,
4042 .messageImage[value="plugin-hidden"] {
4043 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4046 /* Keep any changes to this style in sync with pluginProblem.css */
4047 notification.pluginVulnerable {
4050 notification.pluginVulnerable .messageImage {
4051 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4054 /* === END plugin-doorhanger.inc.css === */
4056 /* === BEGIN customizeMode.inc.css === */
4058 /* Customization mode */
4060 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck {
4064 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4069 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4070 pointer-events: none;
4073 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4074 #PanelUI-contents > .panel-customization-placeholder {
4075 -moz-outline-radius: 2.5px;
4076 outline: 1px dashed transparent;
4079 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4080 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4081 -moz-box-ordinal-group: 0;
4086 outline-offset: -2px;
4087 pointer-events: none;
4093 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4094 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4095 offset from the bottom effectively the same as other targets (-2px). */
4096 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4100 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4101 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4102 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4103 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4107 /* Most target outlines are shown on hover and drag over but the panel menu uses
4108 placeholders instead. */
4109 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4110 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4111 /* nav-bar and panel outlines are always shown */
4112 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4113 outline-color: #A09090;
4116 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4117 transition: outline-color 250ms linear;
4120 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4121 transition: outline-color 250ms linear;
4122 outline-color: #9C9CFF;
4125 #PanelUI-contents > .panel-customization-placeholder {
4127 outline-offset: -5px;
4130 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4132 /* padding-left: 10px;
4133 padding-right: 10px;*/
4136 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4140 #customization-container {
4141 background-color: #000000;
4144 #customization-palette,
4145 #customization-empty {
4146 padding: 0 15px 15px;
4149 #customization-header {
4153 font-weight: lighter;
4155 padding: 15px 15px 0;
4158 #customization-panel-container {
4159 padding: 10px 10px 0px;
4162 #customization-footer {
4163 /*background-color: rgb(236,236,236);*/
4164 border-top: 1px solid #9C9CFF;
4168 .customizationmode-button {
4172 .customizationmode-button:hover {
4175 .customizationmode-button[disabled="true"] {
4178 #customization-titlebar-visibility-button {
4179 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4180 -moz-image-region: rect(0, 24px, 24px, 0);
4182 -moz-margin-end: 10px;
4185 #customization-titlebar-visibility-button > .button-box > .button-text {
4186 /* Sadly, button.css thinks its margins are perfect for everyone. */
4187 -moz-margin-start: 6px !important;
4190 #customization-titlebar-visibility-button[checked] {
4191 -moz-image-region: rect(0, 48px, 24px, 24px);
4192 background-color: #008484;
4195 #customization-undo-reset-button {
4196 -moz-margin-end: 10px;
4199 #main-window[customize-entered] #customization-panel-container {
4200 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4201 background-position: left top;
4202 background-repeat: repeat;
4203 background-size: auto;
4204 background-attachment: fixed;
4207 toolbarpaletteitem[place="toolbar"] {
4208 transition: border-width 250ms ease-in-out;
4211 toolbarpaletteitem[mousedown] {
4212 outline: 1px solid #008484;
4213 cursor: -moz-grabbing;
4217 .panel-customization-placeholder,
4218 toolbarpaletteitem[place="palette"],
4219 toolbarpaletteitem[place="panel"] {
4220 transition: transform .3s ease-in-out;
4223 #customization-palette {
4224 transition: opacity .3s ease-in-out;
4228 #customization-palette[showing="true"] {
4232 toolbarpaletteitem[notransition].panel-customization-placeholder,
4233 toolbarpaletteitem[notransition][place="toolbar"],
4234 toolbarpaletteitem[notransition][place="palette"],
4235 toolbarpaletteitem[notransition][place="panel"] {
4239 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4240 toolbarpaletteitem > toolbaritem.panel-wide-item,
4241 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4242 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4245 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4246 transform: scale(1.3);
4249 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4250 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4251 transform: scale(1.1);
4254 /* Override the toolkit styling for items being dragged over. */
4255 toolbarpaletteitem[place="toolbar"] {
4256 border-left-width: 0;
4257 border-right-width: 0;
4262 #customization-palette:not([hidden]) {
4263 margin-bottom: 25px;
4266 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4267 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4268 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4269 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4273 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4274 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4284 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4285 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4289 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4290 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4293 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4294 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4298 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4299 -moz-box-pack: center;
4303 #customization-palette > toolbarpaletteitem > label {
4309 /* === END customizeMode.inc.css === */
4311 /* === BEGIN customizeTip.inc.css === */
4313 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4320 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4321 border: 1px solid #9C9CFF;
4324 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4325 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4328 .customization-tipPanel-infoBox {
4329 margin: 20px 25px 25px;
4331 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4332 background-repeat: no-repeat;
4335 .customization-tipPanel-content {
4341 .customization-tipPanel-em {
4346 .customization-tipPanel-contentImage {
4348 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4356 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4357 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4360 .customization-tipPanel-link {
4361 -moz-appearance: none;
4362 background: transparent;
4370 .customization-tipPanel-link > .button-box > .button-text {
4371 margin: 0 !important;
4374 .customization-tipPanel-closeBox > .close-icon {
4375 -moz-appearance: none;
4377 -moz-margin-end: -25px;
4380 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4381 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4382 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4385 /* === END customizeTip.inc.css === */
4388 * This next rule is a hack to disable subpixel anti-aliasing on all
4389 * labels during the customize mode transition. Subpixel anti-aliasing
4390 * on Windows with Direct2D layers acceleration is particularly slow to
4391 * paint, so this hack is how we sidestep that performance bottleneck.
4393 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4394 transform: perspective(0.01px);
4397 #main-window[customize-entered] {
4398 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4399 background-attachment: fixed;
4402 #customization-container {
4403 border-left: 1px solid #9C9CFF;
4404 border-right: 1px solid #9C9CFF;
4405 background-clip: padding-box;
4408 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4412 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4416 /* End customization mode */
4418 #main-window[privatebrowsingmode=temporary] #toolbar-menubar {
4419 background-image: url("chrome://browser/skin/privatebrowsing-dark.png");
4420 background-position: top right;
4421 background-repeat: no-repeat;
4424 #main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) {
4425 background-position: top left;
4428 #main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon {
4429 list-style-image: url("chrome://browser/skin/privatebrowsing-light.png");
4434 #main-window[privatebrowsingmode=temporary] #TabsToolbar::after {
4438 background: url("chrome://browser/skin/privatebrowsing-indicator.png") no-repeat center center;
4441 /* === BEGIN UITour.inc.css === */
4445 #UITourHighlightContainer {
4446 -moz-appearance: none;
4448 background-color: transparent;
4449 /* This is a buffer to compensate for the movement in the "wobble" effect */
4454 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4455 border-radius: 40px;
4456 border: 1px solid #9C9CFF;
4457 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4458 on Linux without an X compositor where opacity is either 0 or 1. */
4459 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4464 #UITourTooltipBody {
4465 -moz-margin-end: 14px;
4468 #UITourTooltipBody > vbox {
4472 #UITourTooltipIconContainer {
4473 -moz-margin-start: -16px;
4476 #UITourTooltipIcon {
4479 -moz-margin-start: 28px;
4480 -moz-margin-end: 28px;
4483 #UITourTooltipTitle,
4484 #UITourTooltipDescription {
4488 #UITourTooltipTitle {
4491 -moz-margin-start: 0;
4496 #UITourTooltipDescription {
4497 -moz-margin-start: 0;
4500 line-height: 1.8rem;
4501 margin-bottom: 0; /* Override global.css */
4504 #UITourTooltipClose {
4505 -moz-appearance: none;
4507 background-color: transparent;
4509 -moz-margin-start: 4px;
4513 #UITourTooltipClose > .toolbarbutton-text {
4517 #UITourTooltipButtons {
4519 background-color: rgba(0,0,0,.2);
4520 border-top: 1px solid rgba(0,0,0,.4);
4521 margin: 24px -16px -16px;
4525 #UITourTooltipButtons > button {
4529 #UITourTooltipButtons > button:first-child {
4530 -moz-margin-start: 0;
4533 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4536 -moz-margin-end: 5px;
4539 #UITourTooltipButtons > button .button-text {
4543 #UITourTooltipButtons > button:not(.button-link) {
4544 -moz-appearance: none;
4545 background-color: #C09070;
4546 border-radius: 3000px;
4550 transition-property: background-color, color;
4551 transition-duration: 150ms;
4554 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4555 background-color: #FFCF00;
4559 #UITourTooltipButtons > button.button-link {
4560 -moz-appearance: none;
4561 background: transparent;
4564 color: rgba(0,0,0,0.35);
4566 padding-right: 10px;
4569 #UITourTooltipButtons > button.button-link:hover {
4573 /* The primary button gets the same color as the customize button. */
4574 #UITourTooltipButtons > button.button-primary {
4575 background-color: #A06060; /* LCARS default button background color */
4578 padding-right: 30px;
4581 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4582 background-color: #FFCF00;
4586 /* === END UITour.inc.css === */
4588 #UITourTooltipButtons {
4589 margin: 24px -4px -4px;