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 -moz-image-region: rect(18px, 162px, 36px, 144px);
488 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
489 -moz-image-region: rect(0, 630px, 18px, 612px);
492 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
494 -moz-box-align: center;
497 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
498 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
499 -moz-image-region: rect(18px, 630px, 36px, 612px);
502 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
503 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
506 -moz-padding-start: 2px;
507 -moz-padding-end: 0px;
510 #history-panelmenu[cui-areatype="toolbar"] {
511 -moz-image-region: rect(0, 180px, 18px, 162px);
514 #history-panelmenu[cui-areatype="toolbar"]:hover,
515 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
516 -moz-image-region: rect(18px, 180px, 36px, 162px);
519 #downloads-button[cui-areatype="toolbar"] {
520 -moz-image-region: rect(0, 198px, 18px, 180px);
523 #downloads-button[cui-areatype="toolbar"]:hover,
524 #downloads-button[cui-areatype="toolbar"][open="true"] {
525 -moz-image-region: rect(18px, 198px, 36px, 180px);
528 #add-ons-button[cui-areatype="toolbar"] {
529 -moz-image-region: rect(0, 216px, 18px, 198px);
532 #add-ons-button[cui-areatype="toolbar"]:hover {
533 -moz-image-region: rect(18px, 216px, 36px, 198px);
536 #open-file-button[cui-areatype="toolbar"] {
537 -moz-image-region: rect(0, 234px, 18px, 216px);
540 #open-file-button[cui-areatype="toolbar"]:hover {
541 -moz-image-region: rect(18px, 234px, 36px, 216px);
544 #save-page-button[cui-areatype="toolbar"] {
545 -moz-image-region: rect(0, 252px, 18px, 234px);
548 #save-page-button[cui-areatype="toolbar"]:hover {
549 -moz-image-region: rect(18px, 252px, 36px, 234px);
552 #sync-button[cui-areatype="toolbar"] {
553 -moz-image-region: rect(0, 270px, 18px, 252px);
556 #sync-button[cui-areatype="toolbar"]:hover {
557 -moz-image-region: rect(18px, 270px, 36px, 252px);
560 #feed-button[cui-areatype="toolbar"] {
561 -moz-image-region: rect(0, 288px, 18px, 270px);
564 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
565 -moz-image-region: rect(18px, 288px, 36px, 270px);
568 #feed-button[cui-areatype="toolbar"][disabled="true"] {
569 -moz-image-region: rect(36px, 288px, 54px, 270px);
572 #social-share-button[cui-areatype="toolbar"] {
573 -moz-image-region: rect(0px, 306px, 18px, 288px);
576 #social-share-button[cui-areatype="toolbar"]:hover {
577 -moz-image-region: rect(18px, 306px, 36px, 288px);
580 #email-link-button[cui-areatype="toolbar"] {
581 -moz-image-region: rect(0, 306px, 18px, 288px);
582 /* This is temporary until we have an email-link icon (Bug 932235) */
583 transform: scale(-1, -1);
586 #email-link-button[cui-areatype="toolbar"]:hover {
587 -moz-image-region: rect(18px, 306px, 36px, 288px);
590 #characterencoding-button[cui-areatype="toolbar"] {
591 -moz-image-region: rect(0, 324px, 18px, 306px);
594 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
595 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
596 -moz-image-region: rect(18px, 324px, 36px, 306px);
599 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
600 -moz-image-region: rect(36px, 324px, 54px, 306px);
603 #new-window-button[cui-areatype="toolbar"] {
604 -moz-image-region: rect(0, 342px, 18px, 324px);
607 #new-window-button[cui-areatype="toolbar"]:hover {
608 -moz-image-region: rect(18px, 342px, 36px, 324px);
611 #new-tab-button[cui-areatype="toolbar"] {
612 -moz-image-region: rect(0, 360px, 18px, 342px);
615 #new-tab-button[cui-areatype="toolbar"]:hover {
616 -moz-image-region: rect(18px, 360px, 36px, 342px);
619 #privatebrowsing-button[cui-areatype="toolbar"] {
620 -moz-image-region: rect(0, 378px, 18px, 360px);
623 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
624 -moz-image-region: rect(18px, 378px, 36px, 360px);
627 #find-button[cui-areatype="toolbar"] {
628 -moz-image-region: rect(0, 396px, 18px, 378px);
631 #find-button[cui-areatype="toolbar"]:hover {
632 -moz-image-region: rect(18px, 396px, 36px, 378px);
635 #print-button[cui-areatype="toolbar"] {
636 -moz-image-region: rect(0, 414px, 18px, 396px);
639 #print-button[cui-areatype="toolbar"]:hover {
640 -moz-image-region: rect(18px, 414px, 36px, 396px);
643 #fullscreen-button[cui-areatype="toolbar"] {
644 -moz-image-region: rect(0, 432px, 18px, 414px);
647 #fullscreen-button[cui-areatype="toolbar"]:hover {
648 -moz-image-region: rect(18px, 432px, 36px, 414px);
651 #developer-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 450px, 18px, 432px);
655 #developer-button[cui-areatype="toolbar"]:hover,
656 #developer-button[cui-areatype="toolbar"][open="true"] {
657 -moz-image-region: rect(18px, 450px, 36px, 432px);
660 #preferences-button[cui-areatype="toolbar"] {
661 -moz-image-region: rect(0, 468px, 18px, 450px);
664 #preferences-button[cui-areatype="toolbar"]:hover {
665 -moz-image-region: rect(18px, 468px, 36px, 450px);
668 #PanelUI-menu-button {
669 -moz-image-region: rect(0, 486px, 18px, 468px);
672 #PanelUI-menu-button:hover,
673 #PanelUI-menu-button[open="true"] {
674 -moz-image-region: rect(18px, 486px, 36px, 468px);
677 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button {
678 -moz-image-region: rect(0, 504px, 18px, 486px);
681 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button:hover:not([disabled="true"]) {
682 -moz-image-region: rect(18px, 504px, 36px, 486px);
685 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button[disabled="true"] {
686 -moz-image-region: rect(36px, 504px, 54px, 486px);
689 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button {
690 -moz-image-region: rect(0, 522px, 18px, 504px);
693 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button:hover:not([disabled="true"]) {
694 -moz-image-region: rect(18px, 522px, 36px, 504px);
697 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button[disabled="true"] {
698 -moz-image-region: rect(36px, 522px, 54px, 504px);
701 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button {
702 -moz-image-region: rect(0, 540px, 18px, 522px);
705 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button:hover:not([disabled="true"]) {
706 -moz-image-region: rect(18px, 540px, 36px, 522px);
709 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button[disabled="true"] {
710 -moz-image-region: rect(36px, 540px, 54px, 522px);
713 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button {
714 -moz-image-region: rect(0, 558px, 18px, 540px);
717 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button:hover:not([disabled="true"]) {
718 -moz-image-region: rect(18px, 558px, 36px, 540px);
721 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button[disabled="true"] {
722 -moz-image-region: rect(36px, 558px, 54px, 540px);
725 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button {
726 -moz-image-region: rect(0, 576px, 18px, 558px);
729 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button:hover:not([disabled="true"]) {
730 -moz-image-region: rect(18px, 576px, 36px, 558px);
733 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button[disabled="true"] {
734 -moz-image-region: rect(36px, 576px, 54px, 558px);
737 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) {
738 -moz-image-region: rect(0, 594px, 18px, 576px);
741 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)):hover,
742 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem))[open="true"] {
743 -moz-image-region: rect(18px, 594px, 36px, 576px);
746 #nav-bar-overflow-button {
747 -moz-image-region: rect(0, 612px, 18px, 594px);
750 #nav-bar-overflow-button:hover,
751 #nav-bar-overflow-button[open="true"] {
752 -moz-image-region: rect(18px, 612px, 36px, 594px);
756 -moz-image-region: rect(0, 648px, 18px, 630px);
759 #tabview-button:hover {
760 -moz-image-region: rect(18px, 648px, 36px, 630px);
763 #email-link-button[cui-areatype="toolbar"] {
764 -moz-image-region: rect(0, 666px, 18px, 648px);
767 #email-button[cui-areatype="toolbar"]:hover {
768 -moz-image-region: rect(18px, 666px, 36px, 648px);
771 #sidebar-button[cui-areatype="toolbar"] {
772 -moz-image-region: rect(0, 684px, 18px, 666px);
775 #sidebar-button[cui-areatype="toolbar"]:hover {
776 -moz-image-region: rect(18px, 684px, 36px, 666px);
779 /* === END toolbarbuttons.inc.css === */
781 /* === BEGIN menupanel.inc.css === */
783 /* Menu panel and palette styles */
785 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
786 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
787 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
788 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
789 #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="menu-panel"],
790 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
791 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
792 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
793 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
794 #PanelUI-menu-button, #characterencoding-button, #email-link-button) {
795 list-style-image: url("chrome://browser/skin/menuPanel.png");
798 #home-button[cui-areatype="menu-panel"],
799 toolbarpaletteitem[place="palette"] > #home-button {
800 -moz-image-region: rect(0px, 128px, 32px, 96px);
803 #home-button[cui-areatype="menu-panel"]:hover,
804 toolbarpaletteitem[place="palette"] > #home-button:hover {
805 -moz-image-region: rect(32px, 128px, 64px, 96px);
808 #bookmarks-menu-button[cui-areatype="menu-panel"],
809 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
810 -moz-image-region: rect(0px, 160px, 32px, 128px);
813 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
814 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
815 -moz-image-region: rect(32px, 160px, 64px, 128px);
818 #bookmarks-menu-button[starred][cui-areatype="menu-panel"] {
819 -moz-image-region: rect(0px, 192px, 32px, 160px);
822 #bookmarks-menu-button[starred][cui-areatype="menu-panel"]:hover {
823 -moz-image-region: rect(32px, 192px, 64px, 160px);
826 #history-panelmenu[cui-areatype="menu-panel"],
827 toolbarpaletteitem[place="palette"] > #history-panelmenu {
828 -moz-image-region: rect(0px, 224px, 32px, 192px);
831 #history-panelmenu[cui-areatype="menu-panel"]:hover,
832 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
833 -moz-image-region: rect(32px, 224px, 64px, 192px);
836 #downloads-button[cui-areatype="menu-panel"],
837 toolbarpaletteitem[place="palette"] > #downloads-button {
838 -moz-image-region: rect(0px, 256px, 32px, 224px);
841 #downloads-button[cui-areatype="menu-panel"]:hover,
842 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
843 -moz-image-region: rect(32px, 256px, 64px, 224px);
846 #switch-to-metro-button[cui-areatype="menu-panel"],
847 toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
848 -moz-image-region: rect(0px, 800px, 32px, 768px);
851 #switch-to-metro-button[cui-areatype="menu-panel"]:hover,
852 toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover {
853 -moz-image-region: rect(32px, 800px, 64px, 768px);
856 #add-ons-button[cui-areatype="menu-panel"],
857 toolbarpaletteitem[place="palette"] > #add-ons-button {
858 -moz-image-region: rect(0px, 288px, 32px, 256px);
861 #add-ons-button[cui-areatype="menu-panel"]:hover,
862 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
863 -moz-image-region: rect(32px, 288px, 64px, 256px);
866 #open-file-button[cui-areatype="menu-panel"],
867 toolbarpaletteitem[place="palette"] > #open-file-button {
868 -moz-image-region: rect(0px, 320px, 32px, 288px);
871 #open-file-button[cui-areatype="menu-panel"]:hover,
872 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
873 -moz-image-region: rect(32px, 320px, 64px, 288px);
876 #save-page-button[cui-areatype="menu-panel"],
877 toolbarpaletteitem[place="palette"] > #save-page-button {
878 -moz-image-region: rect(0px, 352px, 32px, 320px);
881 #save-page-button[cui-areatype="menu-panel"]:hover,
882 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
883 -moz-image-region: rect(32px, 352px, 64px, 320px);
886 #sync-button[cui-areatype="menu-panel"],
887 toolbarpaletteitem[place="palette"] > #sync-button {
888 -moz-image-region: rect(0px, 384px, 32px, 352px);
891 #sync-button[cui-areatype="menu-panel"]:hover,
892 toolbarpaletteitem[place="palette"] > #sync-button:hover {
893 -moz-image-region: rect(32px, 384px, 64px, 352px);
896 #feed-button[cui-areatype="menu-panel"],
897 toolbarpaletteitem[place="palette"] > #feed-button {
898 -moz-image-region: rect(0px, 416px, 32px, 384px);
901 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
902 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
903 -moz-image-region: rect(32px, 416px, 64px, 384px);
906 #feed-button[cui-areatype="menu-panel"][disabled="true"],
907 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
908 -moz-image-region: rect(64px, 416px, 96px, 384px);
911 #social-share-button[cui-areatype="menu-panel"],
912 toolbarpaletteitem[place="palette"] > #social-share-button {
913 -moz-image-region: rect(0px, 448px, 32px, 416px);
916 #social-share-button[cui-areatype="menu-panel"]:hover,
917 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
918 -moz-image-region: rect(32px, 448px, 64px, 416px);
921 #email-link-button[cui-areatype="menu-panel"],
922 toolbarpaletteitem[place="palette"] > #email-link-button {
923 -moz-image-region: rect(0, 448px, 32px, 416px);
926 #email-link-button[cui-areatype="menu-panel"]:hover,
927 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
928 -moz-image-region: rect(32px, 448px, 64px, 416px);
931 /* This is temporary until we have an email-link icon (Bug 932235) */
932 #email-link-button[cui-areatype="menu-panel"] > image,
933 toolbarpaletteitem[place="palette"] > #email-link-button > image {
934 transform: scale(-1, -1);
937 #characterencoding-button[cui-areatype="menu-panel"],
938 toolbarpaletteitem[place="palette"] > #characterencoding-button {
939 -moz-image-region: rect(0px, 480px, 32px, 448px);
942 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
943 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
944 -moz-image-region: rect(32px, 480px, 64px, 448px);
947 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
948 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
949 -moz-image-region: rect(64px, 480px, 96px, 448px);
952 #new-window-button[cui-areatype="menu-panel"],
953 toolbarpaletteitem[place="palette"] > #new-window-button {
954 -moz-image-region: rect(0px, 512px, 32px, 480px);
957 #new-window-button[cui-areatype="menu-panel"]:hover,
958 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
959 -moz-image-region: rect(32px, 512px, 64px, 480px);
962 #new-tab-button[cui-areatype="menu-panel"],
963 toolbarpaletteitem[place="palette"] > #new-tab-button {
964 -moz-image-region: rect(0px, 544px, 32px, 512px);
967 #new-tab-button[cui-areatype="menu-panel"]:hover,
968 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
969 -moz-image-region: rect(32px, 544px, 64px, 512px);
972 #privatebrowsing-button[cui-areatype="menu-panel"],
973 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
974 -moz-image-region: rect(0px, 576px, 32px, 544px);
977 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
978 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
979 -moz-image-region: rect(32px, 576px, 64px, 544px);
982 #find-button[cui-areatype="menu-panel"],
983 toolbarpaletteitem[place="palette"] > #find-button {
984 -moz-image-region: rect(0px, 640px, 32px, 608px);
987 #find-button[cui-areatype="menu-panel"]:hover,
988 toolbarpaletteitem[place="palette"] > #find-button:hover {
989 -moz-image-region: rect(32px, 640px, 64px, 608px);
992 #print-button[cui-areatype="menu-panel"],
993 toolbarpaletteitem[place="palette"] > #print-button {
994 -moz-image-region: rect(0px, 672px, 32px, 640px);
997 #print-button[cui-areatype="menu-panel"]:hover,
998 toolbarpaletteitem[place="palette"] > #print-button:hover {
999 -moz-image-region: rect(32px, 672px, 64px, 640px);
1002 #fullscreen-button[cui-areatype="menu-panel"],
1003 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1004 -moz-image-region: rect(0px, 704px, 32px, 672px);
1007 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1008 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1009 -moz-image-region: rect(32px, 704px, 64px, 672px);
1012 #developer-button[cui-areatype="menu-panel"],
1013 toolbarpaletteitem[place="palette"] > #developer-button {
1014 -moz-image-region: rect(0px, 736px, 32px, 704px);
1017 #developer-button[cui-areatype="menu-panel"]:hover,
1018 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1019 -moz-image-region: rect(32px, 736px, 64px, 704px);
1022 #preferences-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #preferences-button {
1024 -moz-image-region: rect(0px, 768px, 32px, 736px);
1027 #preferences-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1029 -moz-image-region: rect(32px, 768px, 64px, 736px);
1032 /* Wide panel control icons */
1034 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1035 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1036 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1037 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1038 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1041 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button,
1042 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1043 -moz-image-region: rect(0px, 32px, 16px, 16px);
1046 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:hover:not([disabled="true"]),
1047 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1048 -moz-image-region: rect(16px, 32px, 32px, 16px);
1051 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button[disabled="true"],
1052 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1053 -moz-image-region: rect(32px, 32px, 48px, 16px);
1056 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
1057 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1058 -moz-image-region: rect(0px, 48px, 16px, 32px);
1061 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button:hover:not([disabled="true"]),
1062 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1063 -moz-image-region: rect(16px, 48px, 32px, 32px);
1066 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button[disabled="true"],
1067 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1068 -moz-image-region: rect(32px, 48px, 48px, 32px);
1071 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button,
1072 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1073 -moz-image-region: rect(0px, 64px, 16px, 48px);
1076 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:hover:not([disabled="true"]),
1077 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1078 -moz-image-region: rect(16px, 64px, 32px, 48px);
1081 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button[disabled="true"],
1082 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1083 -moz-image-region: rect(32px, 64px, 48px, 48px);
1086 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button,
1087 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1088 -moz-image-region: rect(0px, 80px, 16px, 64px);
1091 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:hover:not([disabled="true"]),
1092 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1093 -moz-image-region: rect(16px, 80px, 32px, 64px);
1096 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button[disabled="true"],
1097 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1098 -moz-image-region: rect(32px, 80px, 48px, 64px);
1101 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button,
1102 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1103 -moz-image-region: rect(0px, 96px, 16px, 80px);
1106 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:hover:not([disabled="true"]),
1107 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1108 -moz-image-region: rect(16px, 96px, 32px, 80px);
1111 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button[disabled="true"],
1112 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1113 -moz-image-region: rect(32px, 96px, 48px, 80px);
1116 /* === END menupanel.inc.css === */
1118 .toolbarbutton-1:not([type="menu-button"]) {
1119 -moz-box-orient: vertical;
1123 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1129 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1130 .toolbarbutton-1[disabled="true"]:hover:active,
1131 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1135 .toolbarbutton-1:hover:active,
1136 .toolbarbutton-1[open="true"],
1137 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1139 padding-bottom: 0px;
1140 -moz-padding-start: 3px;
1141 -moz-padding-end: 1px;
1144 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1145 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1146 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1147 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1148 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1151 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1152 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1155 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1156 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1159 .toolbarbutton-1 > .toolbarbutton-icon,
1160 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1163 #nav-bar .toolbarbutton-1,
1164 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1167 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1168 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1169 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1172 #nav-bar #PanelUI-menu-button {
1173 /* -moz-padding-start: 7px;
1174 -moz-padding-end: 5px;*/
1177 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1178 /* padding-left: 5px;
1179 padding-right: 5px;*/
1182 #nav-bar .toolbarbutton-1 > menupopup {
1183 /* margin-top: -3px;*/
1186 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1187 /* margin-top: -8px;*/
1190 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1191 /* -moz-padding-end: 0;*/
1194 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1195 /* -moz-padding-start: 0;
1196 -moz-box-align: center;*/
1199 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1200 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1201 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1202 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1203 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1204 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1205 /* padding: 2px 6px;
1207 border-color: transparent;
1208 transition-property: background-color, border-color;
1209 transition-duration: 150ms;*/
1212 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1213 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1214 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1219 /* Help SDK icons fit: */
1220 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1224 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1225 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1229 #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,
1230 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1231 /* -moz-padding-end: 17px;*/
1234 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1237 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1240 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1243 #nav-bar .toolbaritem-combined-buttons {
1244 /* margin-left: 2px;
1245 margin-right: 2px;*/
1248 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1253 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1254 #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 {
1260 -moz-margin-end: -1px;
1264 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1267 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1268 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1269 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1270 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1271 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1272 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
1273 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
1276 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1277 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1278 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1279 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1280 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1283 #TabsToolbar .toolbarbutton-1,
1284 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1285 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1286 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1289 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1290 #TabsToolbar .toolbarbutton-1[open],
1291 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1292 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1293 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1296 /* unified back/forward button */
1301 #forward-button > menupopup {
1302 margin-top: 1px !important;
1305 #forward-button > .toolbarbutton-icon {
1306 background-clip: padding-box !important;
1307 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1308 /*clip-path: url(chrome://browser/content/browser.xul#windows-keyhole-forward-clip-path) !important;*/
1312 -moz-margin-start: -6px !important;
1317 border-radius: 0 10000px 10000px 0;
1320 #forward-button:-moz-locale-dir(rtl) {
1321 border-radius: 10000px 0 0 10000px;
1324 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1325 transition: opacity @forwardTransitionLength@ ease-out;
1328 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled] {
1332 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1337 /* padding-top: 3px !important;
1338 padding-bottom: 3px !important;
1339 -moz-padding-start: 5px !important;
1340 -moz-padding-end: 0 !important;*/
1343 border-radius: 10000px;
1347 margin-bottom: -2px;
1350 #back-button:-moz-locale-dir(rtl) {
1353 #back-button > menupopup {
1354 margin-top: -1px !important;
1357 #back-button > .toolbarbutton-icon {
1358 border-radius: 10000px !important;
1359 background-clip: padding-box !important;
1360 /* background-color: hsla(210,25%,98%,.08) !important;
1361 padding: 6px !important;
1362 border-color: hsla(210,4%,10%,.25) !important;*/
1363 transition-property: background-color, border-color !important;
1364 transition-duration: 250ms !important;
1367 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1368 /* background-color: hsla(210,4%,10%,.08) !important;
1369 box-shadow: none !important;*/
1372 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1373 #back-button[open="true"] > .toolbarbutton-icon {
1374 /* background-color: hsla(210,4%,10%,.12) !important;
1375 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1378 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1379 #forward-button:-moz-locale-dir(rtl) {
1380 transform: scaleX(-1);
1383 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1384 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1385 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1388 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1389 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1390 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1393 #home-button.bookmark-item {
1394 list-style-image: url("chrome://browser/skin/Toolbar.png");
1397 #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),
1398 #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),
1399 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1400 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1401 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1402 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1403 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1406 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1409 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1410 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1411 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1415 #downloads-button > .toolbarbutton-icon {
1419 /* tabview button & menu item */
1422 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1423 -moz-image-region: rect(1px, 89px, 17px, 73px);
1426 #menu_tabview[groups="0"] {
1427 -moz-image-region: rect(1px, 17px, 17px, 1px);
1430 #menu_tabview[groups="1"] {
1431 -moz-image-region: rect(1px, 35px, 17px, 19px);
1434 #menu_tabview[groups="2"] {
1435 -moz-image-region: rect(1px, 53px, 17px, 37px);
1438 #menu_tabview[groups="3"] {
1439 -moz-image-region: rect(1px, 71px, 17px, 55px);
1442 /* ::::: fullscreen window controls ::::: */
1445 -moz-margin-start: 4px;
1451 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1456 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1459 #minimize-button:hover {
1460 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1464 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1467 #restore-button:hover {
1468 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1472 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1475 #close-button:hover {
1476 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1479 /* ::::: Location Bar ::::: */
1482 .searchbar-textbox {
1485 -moz-margin-start: 3px;
1490 /* make color as light as possible to deal with dark non-domain parts */
1494 #urlbar:-moz-lwtheme,
1495 .searchbar-textbox:-moz-lwtheme {
1496 /* background-color: rgba(255,255,255,.8);
1497 @navbarTextboxCustomBorder@
1501 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1502 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1503 /* background-color: rgba(255,255,255,.9);*/
1506 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1507 .searchbar-textbox:-moz-lwtheme[focused] {
1508 /* background-color: white;*/
1511 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1513 -moz-margin-start: -22px;
1515 pointer-events: none;
1518 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1519 /* -moz-border-start: none;
1521 pointer-events: all;
1524 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1525 transition: margin-left 150ms ease-out;
1528 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1529 /* border-top-left-radius: 0;
1530 border-bottom-left-radius: 0; */
1533 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1534 /* border-top-right-radius: 0;
1535 border-bottom-right-radius: 0; */
1538 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1539 /* clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path");*/
1542 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1546 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1547 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1548 transition-delay: 100s;
1551 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1552 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1553 margin-left: -22.01px;
1556 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1557 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1558 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1559 transform: scaleX(-1);
1562 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1563 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1568 -moz-box-orient: horizontal;
1569 -moz-box-align: stretch;
1572 .urlbar-textbox-container {
1573 -moz-box-align: stretch;
1577 -moz-margin-start: 0;
1582 -moz-box-align: center;
1589 .searchbar-engine-button,
1590 .search-go-container {
1594 .search-go-container > .search-go-button {
1598 .urlbar-icon:hover {
1601 .urlbar-icon[open="true"],
1602 .urlbar-icon:hover:active {
1605 #urlbar-search-splitter {
1607 -moz-margin-start: -3px;
1609 background: transparent;
1612 #urlbar-search-splitter + #urlbar-container > #urlbar,
1613 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1614 -moz-margin-start: 0;
1617 #urlbar-display-box {
1621 -moz-border-end: 1px solid #9C9CFF;
1622 -moz-margin-end: 3px;
1625 -moz-margin-start: 0;
1630 min-width: calc(54px + 11ch);
1640 #identity-box:-moz-locale-dir(ltr) {
1641 /* border-top-left-radius: 1.5px;
1642 border-bottom-left-radius: 1.5px;*/
1645 #identity-box:-moz-locale-dir(rtl) {
1646 /* border-top-right-radius: 1.5px;
1647 border-bottom-right-radius: 1.5px;*/
1650 #notification-popup-box:not([hidden]) + #identity-box {
1651 -moz-padding-start: 10px !important;
1655 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1656 /* border-radius: 0; */
1657 -moz-padding-start: 2px;
1658 -moz-padding-end: 2px;
1659 -moz-margin-end: 1px;
1662 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1663 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1665 transition: padding-left;
1668 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1669 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1671 transition: padding-right;
1674 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1675 #notification-popup-box[hidden] + #identity-box {
1676 /* forward button hiding is delayed when hovered */
1677 transition-delay: 100s;
1680 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1681 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1682 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1683 padding-left: 2.01px;
1686 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1687 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1688 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1689 padding-right: 2.01px;
1692 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1693 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1694 -moz-margin-end: 3px;
1697 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1698 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1699 border-top-right-radius: 0;
1700 border-bottom-right-radius: 0;
1703 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1704 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1705 border-top-left-radius: 0;
1706 border-bottom-left-radius: 0;
1709 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1710 background-color: #000000;
1713 #identity-box:-moz-focusring {
1714 outline: 1px dotted #008484;
1715 outline-offset: -1px;
1718 #identity-box.verifiedDomain:-moz-focusring,
1719 #identity-box.verifiedIdentity:-moz-focusring {
1720 outline-color: #000000;
1723 #identity-icon-labels {
1724 -moz-margin-start: 1px;
1725 -moz-margin-end: 3px;
1728 /* Location bar dropmarker */
1730 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1731 background-color: transparent;
1734 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1735 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1740 .urlbar-history-dropmarker:hover {
1743 .urlbar-history-dropmarker:hover:active,
1744 .urlbar-history-dropmarker[open="true"] {
1747 /* page proxy icon */
1749 /* === BEGIN identity-block.inc.css === */
1751 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1752 /* Default theme does different color per channel, we can't as they do it build-time. */
1754 -moz-border-end: 1px solid #9C9CFF;
1757 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1759 -moz-border-end: 1px solid #008484;
1762 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1763 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1764 background-position: right;
1765 background-size: 1px;
1766 background-repeat: no-repeat;
1769 /* page proxy icon */
1771 #page-proxy-favicon {
1774 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1778 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1779 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1782 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1783 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1786 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1787 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1790 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1791 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1794 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1795 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1798 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1799 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1802 #page-proxy-favicon[pageproxystate="invalid"] {
1806 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1807 list-style-image: url("chrome://branding/content/icon64.png");
1810 #identity-popup-brandName {
1814 margin-bottom: .5em;
1817 #identity-popup-content-box {
1821 /* === END identity-block.inc.css === */
1823 #page-proxy-favicon {
1824 -moz-image-region: rect(0, 16px, 16px, 0);
1827 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1828 /* -moz-margin-end: 1px;*/
1831 #identity-box:hover > #page-proxy-favicon {
1832 -moz-image-region: rect(0, 32px, 16px, 16px);
1835 #identity-box:hover:active > #page-proxy-favicon,
1836 #identity-box[open=true] > #page-proxy-favicon {
1837 -moz-image-region: rect(0, 48px, 16px, 32px);
1840 #identity-box:hover {
1841 background-color: #FFCF00;
1845 #identity-box:hover:active,
1846 #identity-box[open=true] {
1847 background-color: #FF9F00;
1851 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1852 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1853 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1854 background-color: #9C9CFF;
1858 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1859 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1860 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1861 background-color: #008484;
1867 #treecolAutoCompleteImage {
1871 .ac-result-type-bookmark,
1872 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1873 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1874 -moz-image-region: rect(0px 16px 16px 0px);
1879 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1880 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1881 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1884 .ac-result-type-keyword,
1885 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1886 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1887 -moz-image-region: rect(0px 32px 16px 16px);
1892 .ac-result-type-tag,
1893 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1894 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1903 .ac-extra > .ac-comment {
1913 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1914 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1915 -moz-image-region: rect(0, 16px, 16px, 0);
1919 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1920 -moz-image-region: rect(16px, 16px, 32px, 0);
1923 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1927 .ac-comment[selected="true"],
1928 .ac-url-text[selected="true"],
1929 .ac-action-text[selected="true"] {
1930 color: inherit !important;
1933 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1934 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1940 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1941 border-top: 1px solid #9C9CFF;
1944 /* combined go/reload/stop button in location bar */
1946 #urlbar > toolbarbutton {
1947 -moz-margin-start: 0;
1949 background-origin: border-box;
1951 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1952 -moz-border-start: 1px solid #9C9CFF;
1955 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
1956 border-top-left-radius: 0px;
1957 border-bottom-left-radius: 0px;
1960 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
1961 border-top-right-radius: 0px;
1962 border-bottom-right-radius: 0px;
1965 #urlbar > toolbarbutton:not([disabled]):active:hover,
1966 #urlbar-reload-button:not(:hover) {
1967 -moz-border-start-style: none;
1968 -moz-padding-start: 3px;
1971 #urlbar-reload-button {
1972 -moz-image-region: rect(0px, 14px, 14px, 0px);
1975 #urlbar-reload-button[disabled] {
1976 -moz-image-region: rect(28px, 14px, 42px, 0px);
1979 #urlbar-reload-button:not([disabled]):hover {
1980 -moz-image-region: rect(14px, 14px, 28px, 0px);
1983 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1984 transform: scaleX(-1);
1988 -moz-image-region: rect(0, 42px, 14px, 28px);
1991 #urlbar-go-button:hover,
1992 -moz-image-region: rect(14px, 42px, 28px, 28px);
1995 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1996 transform: scaleX(-1);
1999 #urlbar-stop-button {
2000 -moz-image-region: rect(0px, 28px, 14px, 14px);
2003 #urlbar-stop-button:hover {
2004 -moz-image-region: rect(14px, 28px, 28px, 14px);
2007 /* popup blocker button */
2009 #page-report-button {
2010 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2011 -moz-image-region: rect(0, 16px, 16px, 0);
2014 #page-report-button:hover ,
2015 #page-report-button:hover:active,
2016 #page-report-button[open="true"] {
2017 -moz-image-region: rect(0, 32px, 16px, 16px);
2020 /* social share panel */
2022 #social-share-panel > iframe {
2023 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2028 .social-share-toolbar {
2029 border-right: 1px solid #9C9CFF;
2030 /* background-color: #000000; */
2033 #social-share-provider-buttons {
2037 #social-share-provider-buttons > .share-provider-button {
2038 -moz-appearance: none;
2046 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2047 #social-share-provider-buttons > .share-provider-button:hover,
2048 #social-share-provider-buttons > .share-provider-button:active {
2052 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2055 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2058 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2064 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2071 /* fixup corners for share panel */
2072 .social-panel > .social-panel-frame {
2073 border-radius: inherit;
2076 #social-share-panel {
2083 .social-share-frame {
2084 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2087 /* we resize our panels dynamically, make it look nice */
2088 transition: height 100ms ease-out, width 100ms ease-out;
2091 .social-share-frame:-moz-locale-dir(ltr) {
2092 border-top-left-radius: 0;
2093 border-bottom-left-radius: 0;
2094 border-top-right-radius: inherit;
2095 border-bottom-right-radius: inherit;
2098 .social-share-frame:-moz-locale-dir(rtl) {
2099 border-top-left-radius: inherit;
2100 border-bottom-left-radius: inherit;
2101 border-top-right-radius: 0;
2102 border-bottom-right-radius: 0;
2105 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2106 border-top-left-radius: inherit;
2107 border-bottom-left-radius: inherit;
2110 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2111 border-top-right-radius: inherit;
2112 border-bottom-right-radius: inherit;
2115 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2116 border-top-left-radius: inherit;
2117 border-bottom-left-radius: inherit;
2120 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2121 border-top-right-radius: inherit;
2122 border-bottom-right-radius: inherit;
2125 /* social recommending panel */
2127 #social-mark-button {
2128 -moz-image-region: rect(0, 16px, 16px, 0);
2131 /* bookmarks menu-button */
2133 #bookmarks-menu-button.bookmark-item {
2134 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2135 -moz-image-region: rect(0px 16px 16px 0px);
2138 #bookmarks-menu-button.bookmark-item[starred] {
2139 -moz-image-region: rect(0px 32px 16px 16px);
2142 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2143 -moz-margin-start: 5px;
2146 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2148 padding-bottom: 2px;
2151 #BMB_bookmarksPopup[side="top"],
2152 #BMB_bookmarksPopup[side="bottom"] {
2154 margin-right: -20px;
2157 #BMB_bookmarksPopup[side="left"],
2158 #BMB_bookmarksPopup[side="right"] {
2160 margin-bottom: -20px;
2163 /* bookmarking panel */
2165 #editBookmarkPanelStarIcon {
2166 list-style-image: url("chrome://browser/skin/places/starred48.png");
2171 #editBookmarkPanelStarIcon[unstarred] {
2172 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2175 #editBookmarkPanelTitle {
2179 #editBookmarkPanelHeader,
2180 #editBookmarkPanelContent {
2181 margin-bottom: .5em;
2184 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2185 #editBMPanel_folderTree {
2190 margin: 5px -6px -6px;
2192 border-top: 1px solid #9C9CFF;
2193 border-bottom-left-radius: 5px;
2194 border-bottom-right-radius: 5px;
2198 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2199 -moz-margin-end: 10px;
2200 vertical-align: middle;
2203 .panel-promo-closebutton {
2204 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2205 -moz-margin-end: -3px;
2209 .panel-promo-closebutton:hover {
2210 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2213 .panel-promo-closebutton:hover:active {
2214 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2217 .panel-promo-closebutton > .toolbarbutton-text {
2222 /* ::::: content area ::::: */
2225 background-color: Window;
2229 -moz-padding-start: 0px;
2232 .browserContainer > findbar {
2234 background-color: -moz-dialog;
2235 color: -moz-DialogText;
2244 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2247 #TabsToolbar .toolbar-holder {
2248 background-color: #000000; /* correct effect of being an actual toolbar */
2251 #main-window[disablechrome] #TabsToolbar,
2252 #TabsToolbar[tabsontop="false"] {
2253 border-bottom: 1px solid #008484;
2256 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2259 #main-window[tabsintitlebar] #TabsToolbar {
2260 background-color: transparent;
2263 /* === BEGIN tabs.inc.css === */
2266 .tabs-newtab-button,
2267 #TabsToolbar > #new-tab-button {
2272 padding: 1px 4px 2px;
2275 .tabbrowser-tab:first-of-type {
2276 -moz-margin-start: 2px;
2279 .tabs-newtab-button,
2280 #TabsToolbar > #new-tab-button {
2281 border-radius: 8px 8px 0px 0px;
2282 -moz-margin-start: 0;
2285 .tabs-newtab-button:not(:hover),
2286 #TabsToolbar > #new-tab-button:not(:hover) {
2287 background-color: #C09070;
2290 .tabbrowser-tab[remote] {
2291 text-decoration: underline;
2294 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2295 .tabbrowser-tab[selected=true] {
2296 /* position: relative;
2300 .tab-background-middle {
2318 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2322 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2325 .tab-throbber[progress] {
2326 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2329 .tab-throbber:not([pinned]),
2330 .tab-icon-image:not([pinned]) {
2331 -moz-margin-end: 3px;
2334 .tab-throbber[pinned],
2335 .tab-icon-image[pinned] {
2336 -moz-margin-start: 2px;
2337 -moz-margin-end: 2px;
2349 .tabs-newtab-button {
2350 /* overlap the tab curves */
2353 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2356 .tab-background-start[selected=true]::after,
2357 .tab-background-start[selected=true]::before,
2358 .tab-background-start,
2359 .tab-background-end,
2360 .tab-background-end[selected=true]::after,
2361 .tab-background-end[selected=true]::before {
2364 .tabbrowser-tab:not([selected=true]),
2365 .tabbrowser-tab:-moz-lwtheme {
2368 /* tabbrowser-tab focus ring */
2369 .tabbrowser-tab:focus {
2370 outline: 1px dotted;
2375 .tabbrowser-tab[selected="true"] {
2378 /* End selected tab */
2380 /* Background tabs */
2382 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2383 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2384 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2385 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2388 /* End background tabs */
2390 /* Tab pointer-events */
2393 pointer-events: none;
2396 .tab-background-middle,
2397 .tabs-newtab-button,
2399 pointer-events: auto;
2404 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2405 background-color: #E7ADE7;
2408 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2409 background-color: #3333FF;
2413 /* New tab button */
2415 .tabs-newtab-button {
2419 /* === END tabs.inc.css === */
2421 /* Tab DnD indicator */
2422 .tab-drop-indicator {
2423 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2424 margin-bottom: -11px;
2427 /* Tab close button */
2429 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2432 .tab-close-button:hover,
2433 .tab-close-button:hover[selected="true"] {
2434 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2437 .tab-close-button:hover:active,
2438 .tab-close-button:hover:active[selected="true"] {
2439 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2442 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2444 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2445 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2449 background-origin: border-box;
2452 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2453 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2454 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2455 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2458 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2459 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2462 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2463 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2464 /* transform: scaleX(-1);*/
2467 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2468 transition: 1s background-color ease-out;
2471 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2472 background-color: #008484;
2475 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2476 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2477 /* border-width: 0 2px 0 0;
2478 border-style: solid;
2479 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2482 .tabs-newtab-button > .toolbarbutton-icon {
2484 margin-bottom: -1px;
2487 .tabs-newtab-button,
2488 #TabsToolbar > #new-tab-button,
2489 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2490 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2491 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2492 -moz-image-region: rect(0, 16px, 18px, 0);
2495 .tabs-newtab-button,
2496 .tabs-newtab-button:hover,
2497 #TabsToolbar > #new-tab-button,
2498 #TabsToolbar > #new-tab-button:hover {
2499 -moz-image-region: rect(0, 32px, 18px, 16px);
2502 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2503 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2504 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2505 .tabs-newtab-button:-moz-lwtheme-brighttext,
2506 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2507 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2510 #TabsToolbar > #new-tab-button {
2515 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2518 #alltabs-button:hover,
2519 #alltabs-button:hover:active,
2520 #alltabs-button[open="true"] {
2521 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2524 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2525 #alltabs-button:-moz-lwtheme-brighttext {
2528 #alltabs-button > .toolbarbutton-icon {
2532 #alltabs-button > .toolbarbutton-menu-dropmarker {
2536 /* All tabs menupopup */
2537 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2538 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2539 -moz-image-region: auto;
2542 .alltabs-item[selected="true"] {
2546 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2547 list-style-image: url("chrome://global/skin/icons/loading.gif");
2550 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2551 background-color: #402800;
2554 /* Tabstrip close button */
2559 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2562 .tabs-closebutton > .toolbarbutton-icon {
2565 .tabs-closebutton > .toolbarbutton-text {
2569 .tabs-closebutton:hover,
2570 .tabs-closebutton:hover:active {
2571 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2574 toolbarbutton.chevron {
2575 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2578 toolbarbutton.chevron:hover {
2579 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2582 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2583 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2584 transform: scaleX(-1);
2587 toolbarbutton.chevron > .toolbarbutton-text,
2588 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2592 toolbarbutton.chevron > .toolbarbutton-icon {
2596 #sidebar-throbber[loading="true"] {
2597 list-style-image: url("chrome://global/skin/icons/loading.gif");
2598 -moz-margin-end: 4px;
2601 /* Bookmarks toolbar */
2602 #PlacesToolbarDropIndicator {
2603 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2606 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2607 background-color: #008484 !important;
2608 color: #FFCF00 !important;
2611 /* rules for menupopup drop indicators */
2612 .menupopup-drop-indicator-bar {
2614 /* these two margins must together compensate the indicator's height */
2616 margin-bottom: -1px;
2619 .menupopup-drop-indicator {
2620 list-style-image: none;
2622 -moz-margin-end: -4em;
2623 background-color: #008484;
2626 /* ::::: Identity Indicator Styling ::::: */
2629 #identity-popup-icon {
2633 list-style-image: url("chrome://browser/skin/identity.png");
2634 -moz-image-region: rect(0px, 64px, 64px, 0px);
2637 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2638 -moz-image-region: rect(64px, 64px, 128px, 0px);
2641 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2642 -moz-image-region: rect(128px, 64px, 192px, 0px);
2645 /* Popup Body Text */
2646 .identity-popup-description {
2647 white-space: pre-wrap;
2648 -moz-padding-start: 15px;
2652 .identity-popup-label {
2653 white-space: pre-wrap;
2654 -moz-padding-start: 15px;
2658 #identity-popup-content-host,
2659 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2663 #identity-popup-content-host {
2670 #identity-popup-content-owner {
2672 margin-bottom: 0 !important;
2677 .verifiedDomain > #identity-popup-content-owner {
2678 font-weight: normal;
2681 #identity-popup-content-verifier {
2685 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2686 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2688 -moz-margin-start: -24px;
2691 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2692 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2693 list-style-image: url("chrome://browser/skin/Secure24.png");
2696 #identity-popup-help-icon {
2698 margin: 7px 0 0 -3px;
2701 list-style-image: url("chrome://global/skin/icons/question-16.png");
2705 #identity-popup-help-icon > .button-box > .button-text {
2709 #identity-popup-help-icon > .button-box > .button-icon {
2714 #identity-popup-more-info-button {
2720 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2724 #identity-popup-container {
2729 #identity-popup-button-container {
2730 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2735 .popup-notification-icon {
2738 -moz-margin-end: 10px;
2741 .popup-notification-icon[popupid="geolocation"] {
2742 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2745 .popup-notification-icon[popupid="xpinstall-disabled"],
2746 .popup-notification-icon[popupid="addon-progress"],
2747 .popup-notification-icon[popupid="addon-install-cancelled"],
2748 .popup-notification-icon[popupid="addon-install-blocked"],
2749 .popup-notification-icon[popupid="addon-install-failed"],
2750 .popup-notification-icon[popupid="addon-install-complete"] {
2751 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2756 .popup-notification-icon[popupid="click-to-play-plugins"] {
2757 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2760 .popup-notification-icon[popupid="plugins-not-found"] {
2761 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2764 .popup-notification-icon[popupid="web-notifications"] {
2765 list-style-image: url("chrome://browser/skin/notification-64.png");
2768 .addon-progress-description {
2773 .popup-progress-label,
2774 .popup-progress-meter {
2775 -moz-margin-start: 0;
2779 .popup-progress-cancel {
2780 -moz-appearance: none;
2781 background: transparent;
2787 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2788 -moz-image-region: rect(0px, 32px, 16px, 16px);
2791 .popup-progress-cancel:hover {
2792 -moz-image-region: rect(16px, 32px, 32px, 16px);
2795 .popup-progress-cancel:active {
2796 -moz-image-region: rect(32px, 32px, 48px, 16px);
2799 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2800 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2801 .popup-notification-icon[popupid*="offline-app-requested"],
2802 .popup-notification-icon[popupid="offline-app-usage"] {
2803 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2806 .popup-notification-icon[popupid="password-save"],
2807 .popup-notification-icon[popupid="password-change"] {
2808 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2811 .popup-notification-icon[popupid="webapps-install-progress"],
2812 .popup-notification-icon[popupid="webapps-install"] {
2813 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2816 .popup-notification-icon[popupid="mixed-content-blocked"] {
2817 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2820 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2821 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2822 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2825 .popup-notification-icon[popupid="pointerLock"] {
2826 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2829 /* Notification icon box */
2830 #notification-popup-box {
2832 background-color: #000000;
2833 background-clip: padding-box;
2836 border-radius: 3px 0 0 3px;
2837 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2838 -moz-margin-end: -8px;
2839 border-right-width: 8px;
2842 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2843 /* padding-left: 5px; */
2846 #notification-popup-box:-moz-locale-dir(rtl),
2847 .notification-anchor-icon:-moz-locale-dir(rtl) {
2848 transform: scaleX(-1);
2851 .notification-anchor-icon {
2857 .notification-anchor-icon:-moz-focusring {
2858 outline: 1px dotted #008484;
2859 /* outline-offset: -3px; */
2862 .default-notification-icon,
2863 #default-notification-icon {
2864 list-style-image: url("chrome://global/skin/icons/information-16.png");
2867 .identity-notification-icon,
2868 #identity-notification-icon {
2869 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2872 .geo-notification-icon,
2873 #geo-notification-icon {
2874 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2877 #addons-notification-icon {
2878 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2881 .indexedDB-notification-icon,
2882 #indexedDB-notification-icon {
2883 list-style-image: url("chrome://global/skin/icons/question-16.png");
2886 #password-notification-icon {
2887 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2890 #webapps-notification-icon {
2891 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2894 #plugins-notification-icon {
2895 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2898 #plugins-notification-icon.plugin-hidden {
2899 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2902 #plugins-notification-icon.plugin-blocked {
2903 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2906 #plugins-notification-icon {
2907 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2910 #plugins-notification-icon:hover {
2911 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2914 #plugin-install-notification-icon {
2915 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2918 #notification-popup-box[hidden] {
2919 /* Override display:none to make the pluginBlockedNotification animation work
2920 when showing the notification repeatedly. */
2922 visibility: collapse;
2925 #plugins-notification-icon.plugin-blocked[showing] {
2926 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
2929 @keyframes pluginBlockedNotification {
2938 .mixed-content-blocked-notification-icon,
2939 #mixed-content-blocked-notification-icon {
2940 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
2943 .webRTC-shareDevices-notification-icon,
2944 #webRTC-shareDevices-notification-icon {
2945 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
2948 .webRTC-sharingDevices-notification-icon,
2949 #webRTC-sharingDevices-notification-icon {
2950 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
2953 .web-notifications-notification-icon,
2954 #web-notifications-notification-icon {
2955 list-style-image: url("chrome://browser/skin/notification-16.png");
2958 #pointerLock-notification-icon {
2959 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
2961 #pointerLock-cancel {
2965 /* Bookmarks roots menu-items */
2966 #subscribeToPageMenuitem:not([disabled]),
2967 #subscribeToPageMenupopup,
2968 #BMB_subscribeToPageMenuitem:not([disabled]),
2969 #BMB_subscribeToPageMenupopup {
2970 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
2973 #bookmarksToolbarFolderMenu,
2974 #BMB_bookmarksToolbar,
2975 #panelMenu_bookmarksToolbar {
2976 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
2977 -moz-image-region: auto;
2980 #BMB_unsortedBookmarks,
2981 #panelMenu_unsortedBookmarks {
2982 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
2983 -moz-image-region: auto;
2986 /* ::::: Keyboard UI Panel ::::: */
2991 border-radius: 20px;
2994 .KUI-panel[level="top"] {
2995 /*background-color: rgba(27%,27%,27%,.65);*/
3001 padding: 20px 10px 10px;
3005 .ctrlTab-favicon[src] {
3006 background-color: #000000;
3012 .ctrlTab-preview-inner > .tabPreview-canvas {
3015 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3019 .ctrlTab-preview-inner {
3020 padding-bottom: 10px;
3023 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3025 background-color: #000000;
3026 border-radius: .5em;
3029 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3031 background-color: #000000;
3034 border: 2px solid #9C9CFF;
3035 border-radius: .5em;
3038 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3039 margin: -10px -10px 0;
3048 .statuspanel-label {
3051 background: #404000;
3052 border: 1px none #9C9CFF;
3053 border-top-style: solid;
3058 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3059 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3060 border-right-style: solid;
3061 border-top-right-radius: .3em;
3065 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3066 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3067 border-left-style: solid;
3068 border-top-left-radius: .3em;
3072 /* HACK to abolish devily color on main content */
3075 background-color: transparent !important;
3078 /* === BEGIN highlighter.inc.css === */
3082 .highlighter-outline {
3083 box-shadow: 0 0 0 1px black;
3084 outline: 1px dashed #A09090;
3087 .highlighter-outline[locked] {
3088 box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
3089 outline-color: rgba(255,255,255,0.7);
3092 /* Highlighter - Node Infobar */
3094 .highlighter-nodeinfobar {
3097 background-color: #000000;
3098 background-clip: padding-box;
3099 border: 1px solid #008484;
3101 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3106 /* Highlighter - Node Infobar - text */
3108 .highlighter-nodeinfobar-text {
3109 /* 100% - size of the buttons and margins */
3110 max-width: calc(100% - 2 * (26px + 6px));
3111 padding-bottom: 1px;
3114 html|*.highlighter-nodeinfobar-tagname {
3118 html|*.highlighter-nodeinfobar-id {
3122 html|*.highlighter-nodeinfobar-pseudo-classes {
3126 /* Highlighter - Node Infobar - buttons */
3128 .highlighter-nodeinfobar-button {
3134 .highlighter-nodeinfobar-inspectbutton {
3135 list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
3136 -moz-image-region: rect(0px 16px 16px 0px);
3137 -moz-margin-start: 0px;
3138 -moz-margin-end: 2px;
3141 .highlighter-nodeinfobar-inspectbutton:hover,
3142 .highlighter-nodeinfobar-inspectbutton:hover:active/*,
3143 .highlighter-nodeinfobar-container:not([locked]) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-inspectbutton*/ {
3144 -moz-image-region: rect(0px 32px 16px 16px);
3147 .highlighter-nodeinfobar-menu {
3150 .highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
3151 -moz-box-align: center;
3152 -moz-margin-start: -1px;
3155 /* Highlighter - Node Infobar - box & arrow */
3157 .highlighter-nodeinfobar-arrow {
3160 -moz-margin-start: calc(50% - 7px);
3161 transform: rotate(-45deg);
3162 background-clip: padding-box;
3163 background-repeat: no-repeat;
3166 .highlighter-nodeinfobar-arrow-top {
3167 margin-bottom: -8px;
3169 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3172 .highlighter-nodeinfobar-arrow-bottom {
3175 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3178 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3182 /* === END highlighter.inc.css === */
3184 #full-screen-warning-message {
3185 background-color: #000000;
3190 box-shadow: 0 0 2px #9C9CFF;
3193 #full-screen-warning-container[obscure-browser] {
3194 background-color: rgba(0,0,0,0.3);
3197 .full-screen-description {
3201 #full-screen-domain-text {
3205 .full-screen-approval-button,
3206 #full-screen-remember-decision {
3210 /* === BEGIN commandline.inc.css === */
3212 /* Developer toolbar */
3214 #developer-toolbar {
3215 border-top: 3px solid #000000;
3216 border-bottom: none;
3219 #developer-toolbar .toolbar-holder {
3220 background-color: #8050B0;
3224 #developer-toolbar .toolbar-holder {
3225 background-color: #8050B0;
3229 #developer-toolbar .toolbar-startcap,
3230 #developer-toolbar .toolbar-endcap{
3231 background-color: #6000CF;
3234 #developer-toolbar {
3236 min-height: 32px; */
3239 #developer-toolbar > toolbarbutton {
3245 .developer-toolbar-button > image {
3246 /* margin: auto 10px; */
3249 #developer-toolbar-toolbox-button > label {
3253 #developer-toolbar-toolbox-button {
3254 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3255 -moz-image-region: rect(0px, 16px, 16px, 0px);
3258 #developer-toolbar-toolbox-button > label {
3262 #developer-toolbar-toolbox-button:hover,
3263 #developer-toolbar-toolbox-button:hover:active,
3264 #developer-toolbar-toolbox-button[checked=true] {
3265 -moz-image-region: rect(0px, 32px, 16px, 16px);
3268 #developer-toolbar-closebutton {
3269 list-style-image: url("chrome://browser/skin/devtools/close.png");
3270 -moz-image-region: rect(0px, 16px, 16px, 0px);
3275 #developer-toolbar-closebutton > .toolbarbutton-icon {
3278 #developer-toolbar-closebutton > .toolbarbutton-text {
3282 #developer-toolbar-closebutton:hover,
3283 #developer-toolbar-closebutton:hover:active {
3284 -moz-image-region: rect(0px, 32px, 16px, 16px);
3289 html|*#gcli-tooltip-frame,
3290 html|*#gcli-output-frame {
3293 background-color: transparent;
3299 background-color: transparent;
3302 .gclitoolbar-input-node,
3303 .gclitoolbar-complete-node {
3305 -moz-box-align: center;
3309 background-color: transparent;
3312 .gclitoolbar-input-node {
3314 /* line-height: 32px;
3315 outline-style: none; */
3316 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3317 background-repeat: no-repeat;
3318 background-color: rgba(0, 0, 0, .75);
3321 .gclitoolbar-input-node[focused="true"] {
3322 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3323 background-color: #000000;
3326 .gclitoolbar-input-node:not([focused="true"]) {
3327 border-color: transparent;
3330 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3331 background-color: #008484;
3336 .gclitoolbar-complete-node {
3338 background-color: transparent;
3341 pointer-events: none;
3344 .gcli-in-incomplete,
3348 .gcli-in-closebrace,
3355 .gcli-in-incomplete {
3356 border-bottom: 2px dotted #8050B0;
3360 border-bottom: 2px dotted #FF0000;
3371 .gcli-in-closebrace {
3375 /* === END commandline.inc.css === */
3377 /* === BEGIN responsivedesign.inc.css === */
3379 /* Responsive Mode */
3381 .browserContainer[responsivemode] {
3382 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3383 padding: 0 20px 20px 20px;
3386 .browserStack[responsivemode] {
3387 box-shadow: 0 0 7px #9C9CFF;
3390 .devtools-responsiveui-toolbar {
3391 background: transparent;
3392 /* text color is textColor from dark theme, since no theme is applied to
3393 * the responsive toolbar.
3399 border-bottom-width: 0;
3402 .devtools-responsiveui-menulist,
3403 .devtools-responsiveui-toolbarbutton {
3404 -moz-box-align: center;
3406 /* min-height: 22px;*/
3407 /* margin: 0 3px; */
3410 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3411 -moz-box-orient: horizontal;
3414 .devtools-responsiveui-menulist:-moz-focusring,
3415 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3416 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3417 outline-offset: -4px;*/
3420 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3424 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3425 /* border-color: hsla(210,8%,5%,.6);
3426 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3427 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); */
3430 .devtools-responsiveui-menulist[open=true],
3431 .devtools-responsiveui-toolbarbutton[open=true],
3432 .devtools-responsiveui-toolbarbutton[checked=true] {
3433 /* border-color: hsla(210,8%,5%,.6) !important;
3434 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3435 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); */
3438 .devtools-responsiveui-toolbarbutton[checked=true] {
3439 /* color: hsl(208,100%,60%); */
3442 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3443 /* background-color: transparent !important;*/
3446 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3447 /* background-color: hsla(210,8%,5%,.2) !important;*/
3450 .devtools-responsiveui-menulist > .menulist-label-box {
3454 .devtools-responsiveui-menulist > .menulist-dropmarker {
3455 /* display: -moz-box;
3456 background-color: transparent;
3457 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3458 -moz-box-align: center;
3463 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3466 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3467 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3470 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3471 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3474 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3475 /* padding: 0 1px;*/
3476 -moz-box-align: stretch;
3479 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3480 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3481 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3482 -moz-box-align: center;
3486 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3487 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3491 .devtools-responsiveui-close {
3492 list-style-image: url("chrome://browser/skin/devtools/close.png");
3493 -moz-image-region: rect(0px,16px,16px,0px);
3496 .devtools-responsiveui-close:hover {
3497 -moz-image-region: rect(0px,32px,16px,16px);
3500 .devtools-responsiveui-rotate {
3501 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3502 -moz-image-region: rect(0px,16px,16px,0px);
3505 .devtools-responsiveui-rotate:hover {
3506 -moz-image-region: rect(0px,32px,16px,16px);
3509 .devtools-responsiveui-touch {
3510 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3511 -moz-image-region: rect(0px,16px,16px,0px);
3514 .devtools-responsiveui-touch:hover,
3515 .devtools-responsiveui-touch[checked],
3516 .devtools-responsiveui-touch[checked]:hover {
3517 -moz-image-region: rect(0px,32px,16px,16px);
3520 .devtools-responsiveui-screenshot {
3521 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3522 -moz-image-region: rect(0px,16px,16px,0px);
3525 .devtools-responsiveui-screenshot:hover {
3526 -moz-image-region: rect(0px,32px,16px,16px);
3529 .devtools-responsiveui-resizebarV {
3533 transform: translate(12px, -12px);
3534 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3537 .devtools-responsiveui-resizebarH {
3541 transform: translate(-12px, 12px);
3542 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3545 .devtools-responsiveui-resizehandle {
3549 transform: translate(12px, 12px);
3550 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3553 /* === END responsivedesign.inc.css === */
3555 /* === including indicator.css is done at the start of the file === */
3559 #developer-toolbar-toolbox-button[error-count]:before {
3563 background-color: #FF0000;
3565 -moz-margin-end: 5px;
3568 /* Social toolbar item */
3570 #social-provider-button {
3571 -moz-image-region: rect(0, 16px, 16px, 0);
3572 list-style-image: url("chrome://browser/skin/social/services-16.png");
3575 #social-provider-button > .toolbarbutton-menu-dropmarker {
3579 .toolbarbutton-badge-container {
3585 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3589 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3595 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3599 .toolbarbutton-badge[badge=""] {
3602 .toolbarbutton-badge[badge]:not([badge=""])::after {
3603 /* The |content| property is set in the content stylesheet. */
3608 background-color: #000000;
3609 border: 1px solid #9C9CFF;
3616 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3621 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3626 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3631 #social-notification-icon-mentions {
3632 background-color: #000000;
3634 -moz-margin-start: 2px;
3637 #social-notification-icon-mentions:hover {
3638 background-color: #FFCF00;
3641 #social-notification-icon-mentions[open="true"] {
3642 background-color: #FF9F00;
3645 #social-sidebar-splitter {
3649 .popup-notification-icon[popupid="servicesInstall"] {
3650 list-style-image: url("chrome://browser/skin/social/services-64.png");
3652 #servicesInstall-notification-icon {
3653 list-style-image: url("chrome://browser/skin/social/services-16.png");
3655 #social-undoactivation-button,
3656 #servicesInstall-learnmore-link {
3657 -moz-margin-start: 0; /* override default label margin to match description margin */
3660 #socialActivatedNotification .popup-notification-button-container {
3664 .social-activation-icon {
3671 #social-activation-message {
3675 #social-activation-message > label {
3679 /* social toolbar provider menu */
3680 .social-statusarea-popup {
3683 margin-right: -12px;
3686 .social-statusarea-user {
3687 border-bottom: 1px solid #9C9CFF;
3688 background-color: #000000;
3694 .social-statusarea-user-portrait {
3701 .social-statusarea-loggedInStatus {
3702 background: transparent;
3707 list-style-image: none;
3710 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3711 text-decoration: underline;
3714 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3718 .social-panel-frame {
3719 border-radius: inherit;
3722 /* === BEGIN chat.inc.css === */
3730 .chat-toolbarbutton {
3731 -moz-appearance: none;
3739 .chat-toolbarbutton > .toolbarbutton-text {
3743 .chat-toolbarbutton > .toolbarbutton-icon {
3747 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3752 .chat-close-button {
3753 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3754 -moz-image-region: rect(0, 16px, 16px, 0);
3757 .chat-close-button:hover,
3758 .chat-close-button:hover:active {
3759 -moz-image-region: rect(0, 32px, 16px, 16px);
3762 .chat-minimize-button {
3763 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3764 -moz-image-region: rect(16px, 16px, 32px, 0);
3767 .chat-minimize-button:hover:active,
3768 .chat-minimize-button:hover {
3769 -moz-image-region: rect(16px, 32px, 32px, 16px);
3773 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3774 -moz-image-region: rect(48px, 16px, 64px, 0);
3777 .chat-swap-button:hover:active,
3778 .chat-swap-button:hover {
3779 -moz-image-region: rect(48px, 32px, 64px, 16px);
3782 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3783 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3784 -moz-image-region: rect(32px, 16px, 48px, 0);
3787 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3788 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3789 -moz-image-region: rect(32px, 32px, 48px, 16px);
3794 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3800 background-color: #9C9CFF;
3807 -moz-padding-start: 6px;
3809 border-bottom: 1px solid #008484;
3813 .chat-titlebar > .notification-anchor-icon {
3818 .chat-titlebar[minimized="true"] {
3819 border-bottom: none;
3822 .chat-titlebar[selected] {
3823 background-color: #008484;
3826 .chat-titlebar[activity] {
3827 background-color: #E7ADE7;
3837 list-style-image: url("chrome://browser/skin/social/services-16.png");
3838 background-color: #000000;
3844 border-top: 1px solid #008484;
3845 -moz-border-end: 1px solid #008484;
3848 @media (min-resolution: 2dppx) {
3850 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3854 .chatbar-button > .toolbarbutton-icon {
3858 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3865 .chatbar-button > .toolbarbutton-icon {
3869 .chatbar-button:hover > .toolbarbutton-icon,
3870 .chatbar-button[open="true"] > .toolbarbutton-icon {
3874 .chatbar-button:hover,
3875 .chatbar-button[open="true"] {
3878 .chatbar-button > .toolbarbutton-text,
3879 .chatbar-button > .toolbarbutton-menu-dropmarker {
3883 .chatbar-button[activity]:not([open="true"]) {
3884 background-color: #E7ADE7;
3887 .chatbar-button > menupopup > menuitem[activity] {
3892 background: transparent;
3898 -moz-margin-end: 20px;
3904 -moz-margin-start: 4px;
3905 background-color: #000000;
3906 border: 1px solid #9C9CFF;
3907 border-bottom: none;
3908 border-top-left-radius: 2.5px;
3909 border-top-right-radius: 2.5px;
3912 chatbox[minimized="true"] {
3918 -moz-margin-start: 0px;
3924 /* === END chat.inc.css === */
3927 /* background-color: #c4cfde; */
3930 .chat-titlebar[selected] {
3931 /* background-color: #dae3f0; */
3935 -moz-appearance: none;
3936 /* background-color: #c4cfde; */
3939 .chatbar-button > .toolbarbutton-icon {
3940 /* -moz-margin-end: 0; */
3943 .chatbar-button:hover,
3944 .chatbar-button[open="true"] {
3945 /* background-color: #dae3f0; */
3948 .chatbar-button[activity]:not([open="true"]) {
3952 /* border-top-left-radius: 2.5px;
3953 border-top-right-radius: 2.5px; */
3956 /* === BEGIN plugin-doorhanger.inc.css === */
3959 * Plugin Doorhanger Styles
3962 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
3963 padding: 6px 1px 2px;
3966 .click-to-play-plugins-notification-center-box {
3969 .plugin-popupnotification-centeritem:nth-child(odd) {
3970 /* background-color: rgba(0,0,0,0.1);*/
3973 .center-item-label {
3975 text-overflow: ellipsis;
3978 .center-item-warning-icon {
3979 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
3980 background-repeat: no-repeat;
3983 -moz-margin-start: 6px;
3986 .click-to-play-plugins-notification-button-container {
3989 .click-to-play-popup-button {
3993 .click-to-play-plugins-notification-description-box {
3997 padding-bottom: 3px;
4000 .click-to-play-plugins-outer-description {
4004 .click-to-play-plugins-notification-link,
4009 .messageImage[value="plugin-hidden"] {
4010 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4013 /* Keep any changes to this style in sync with pluginProblem.css */
4014 notification.pluginVulnerable {
4017 notification.pluginVulnerable .messageImage {
4018 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4021 /* === END plugin-doorhanger.inc.css === */
4023 /* === BEGIN customizeMode.inc.css === */
4025 /* Customization mode */
4027 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck {
4031 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4036 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4037 pointer-events: none;
4040 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4041 #PanelUI-contents > .panel-customization-placeholder {
4042 -moz-outline-radius: 2.5px;
4043 outline: 1px dashed transparent;
4046 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4047 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4048 -moz-box-ordinal-group: 0;
4053 outline-offset: -2px;
4054 pointer-events: none;
4060 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4061 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4062 offset from the bottom effectively the same as other targets (-2px). */
4063 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4067 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4068 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4069 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4070 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4074 /* Most target outlines are shown on hover and drag over but the panel menu uses
4075 placeholders instead. */
4076 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4077 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4078 /* nav-bar and panel outlines are always shown */
4079 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4080 outline-color: #A09090;
4083 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4084 transition: outline-color 250ms linear;
4087 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4088 transition: outline-color 250ms linear;
4089 outline-color: #9C9CFF;
4092 #PanelUI-contents > .panel-customization-placeholder {
4094 outline-offset: -5px;
4097 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4099 /* padding-left: 10px;
4100 padding-right: 10px;*/
4103 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4107 #customization-container {
4108 background-color: #000000;
4111 #customization-palette,
4112 #customization-empty {
4113 padding: 0 15px 15px;
4116 #customization-header {
4120 font-weight: lighter;
4122 padding: 15px 15px 0;
4125 #customization-panel-container {
4126 padding: 10px 10px 0px;
4129 #customization-footer {
4130 /*background-color: rgb(236,236,236);*/
4131 border-top: 1px solid #9C9CFF;
4135 .customizationmode-button {
4139 .customizationmode-button:hover {
4142 .customizationmode-button[disabled="true"] {
4145 #customization-titlebar-visibility-button {
4146 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4147 -moz-image-region: rect(0, 24px, 24px, 0);
4149 -moz-margin-end: 10px;
4152 #customization-titlebar-visibility-button > .button-box > .button-text {
4153 /* Sadly, button.css thinks its margins are perfect for everyone. */
4154 -moz-margin-start: 6px !important;
4157 #customization-titlebar-visibility-button[checked] {
4158 -moz-image-region: rect(0, 48px, 24px, 24px);
4159 background-color: #008484;
4162 #customization-undo-reset-button {
4163 -moz-margin-end: 10px;
4166 #main-window[customize-entered] #customization-panel-container {
4167 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4168 background-position: left top;
4169 background-repeat: repeat;
4170 background-size: auto;
4171 background-attachment: fixed;
4174 toolbarpaletteitem[place="toolbar"] {
4175 transition: border-width 250ms ease-in-out;
4178 toolbarpaletteitem[mousedown] {
4179 outline: 1px solid #008484;
4180 cursor: -moz-grabbing;
4184 .panel-customization-placeholder,
4185 toolbarpaletteitem[place="palette"],
4186 toolbarpaletteitem[place="panel"] {
4187 transition: transform .3s ease-in-out;
4190 #customization-palette {
4191 transition: opacity .3s ease-in-out;
4195 #customization-palette[showing="true"] {
4199 toolbarpaletteitem[notransition].panel-customization-placeholder,
4200 toolbarpaletteitem[notransition][place="toolbar"],
4201 toolbarpaletteitem[notransition][place="palette"],
4202 toolbarpaletteitem[notransition][place="panel"] {
4206 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4207 toolbarpaletteitem > toolbaritem.panel-wide-item,
4208 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4209 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4212 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4213 transform: scale(1.3);
4216 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4217 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4218 transform: scale(1.1);
4221 /* Override the toolkit styling for items being dragged over. */
4222 toolbarpaletteitem[place="toolbar"] {
4223 border-left-width: 0;
4224 border-right-width: 0;
4229 #customization-palette:not([hidden]) {
4230 margin-bottom: 25px;
4233 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4234 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4235 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4236 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4240 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4241 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4251 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4252 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4256 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4257 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4260 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4261 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4265 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4266 -moz-box-pack: center;
4270 #customization-palette > toolbarpaletteitem > label {
4276 /* === END customizeMode.inc.css === */
4278 /* === BEGIN customizeTip.inc.css === */
4280 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4287 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4288 border: 1px solid #9C9CFF;
4291 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4292 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4295 .customization-tipPanel-infoBox {
4296 margin: 20px 25px 25px;
4298 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4299 background-repeat: no-repeat;
4302 .customization-tipPanel-content {
4308 .customization-tipPanel-em {
4313 .customization-tipPanel-contentImage {
4315 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4323 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4324 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4327 .customization-tipPanel-link {
4328 -moz-appearance: none;
4329 background: transparent;
4337 .customization-tipPanel-link > .button-box > .button-text {
4338 margin: 0 !important;
4341 .customization-tipPanel-closeBox > .close-icon {
4342 -moz-appearance: none;
4344 -moz-margin-end: -25px;
4347 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4348 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4349 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4352 /* === END customizeTip.inc.css === */
4355 * This next rule is a hack to disable subpixel anti-aliasing on all
4356 * labels during the customize mode transition. Subpixel anti-aliasing
4357 * on Windows with Direct2D layers acceleration is particularly slow to
4358 * paint, so this hack is how we sidestep that performance bottleneck.
4360 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4361 transform: perspective(0.01px);
4364 #main-window[customize-entered] {
4365 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4366 background-attachment: fixed;
4369 #customization-container {
4370 border-left: 1px solid #9C9CFF;
4371 border-right: 1px solid #9C9CFF;
4372 background-clip: padding-box;
4375 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4379 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4383 /* End customization mode */
4385 #main-window[privatebrowsingmode=temporary] #toolbar-menubar {
4386 background-image: url("chrome://browser/skin/privatebrowsing-dark.png");
4387 background-position: top right;
4388 background-repeat: no-repeat;
4391 #main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) {
4392 background-position: top left;
4395 #main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon {
4396 list-style-image: url("chrome://browser/skin/privatebrowsing-light.png");
4401 #main-window[privatebrowsingmode=temporary] #TabsToolbar::after {
4405 background: url("chrome://browser/skin/privatebrowsing-indicator.png") no-repeat center center;
4408 /* === BEGIN UITour.inc.css === */
4412 html|div#UITourHighlight {
4413 border-radius: 20px;
4414 border: 2px #9C9CFF solid;
4419 html|div#UITourHighlight[active] {
4426 #UITourTooltipTitle {
4432 #UITourTooltipDescription {
4436 /* === END UITour.inc.css === */
4438 #UITourTooltipButtons {
4439 margin: 24px -4px -4px;