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,
419 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
420 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
421 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
422 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
423 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
424 #copy-button, #paste-button, #e10s-button),
426 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
427 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
431 -moz-image-region: rect(0, 36px, 18px, 18px);
434 #back-button:hover:not([disabled="true"]) {
435 -moz-image-region: rect(18px, 36px, 36px, 18px);
438 #back-button[disabled="true"] {
439 -moz-image-region: rect(36px, 36px, 54px, 18px);
443 -moz-image-region: rect(0, 72px, 18px, 54px);
446 #forward-button:hover:not([disabled="true"]) {
447 -moz-image-region: rect(18px, 72px, 36px, 54px);
450 #forward-button[disabled="true"] {
451 -moz-image-region: rect(36px, 72px, 54px, 54px);
454 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
455 #forward-button:-moz-locale-dir(rtl) {
456 transform: scaleX(-1);
459 #home-button[cui-areatype="toolbar"] {
460 -moz-image-region: rect(0, 126px, 18px, 108px);
463 #home-button[cui-areatype="toolbar"]:hover {
464 -moz-image-region: rect(18px, 126px, 36px, 108px);
467 #bookmarks-menu-button[cui-areatype="toolbar"] {
468 -moz-image-region: rect(0, 144px, 18px, 126px);
471 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
472 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
473 -moz-image-region: rect(18px, 144px, 36px, 126px);
476 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
477 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
478 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
479 background-color: transparent !important;
482 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
483 -moz-image-region: rect(0, 162px, 18px, 144px);
486 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
487 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
488 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
489 /* When starred and clicked (for edit/delete dialog),
490 * then only the menubutton-button itself is open, but not the whole menubutton. */
491 -moz-image-region: rect(18px, 162px, 36px, 144px);
494 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
495 -moz-image-region: rect(0, 630px, 18px, 612px);
498 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
500 -moz-box-align: center;
503 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
504 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
505 -moz-image-region: rect(18px, 630px, 36px, 612px);
508 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
509 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
512 -moz-padding-start: 2px;
513 -moz-padding-end: 0px;
516 #history-panelmenu[cui-areatype="toolbar"] {
517 -moz-image-region: rect(0, 180px, 18px, 162px);
520 #history-panelmenu[cui-areatype="toolbar"]:hover,
521 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
522 -moz-image-region: rect(18px, 180px, 36px, 162px);
525 #downloads-button[cui-areatype="toolbar"] {
526 -moz-image-region: rect(0, 198px, 18px, 180px);
529 #downloads-button[cui-areatype="toolbar"]:hover,
530 #downloads-button[cui-areatype="toolbar"][open="true"] {
531 -moz-image-region: rect(18px, 198px, 36px, 180px);
534 #add-ons-button[cui-areatype="toolbar"] {
535 -moz-image-region: rect(0, 216px, 18px, 198px);
538 #add-ons-button[cui-areatype="toolbar"]:hover {
539 -moz-image-region: rect(18px, 216px, 36px, 198px);
542 #open-file-button[cui-areatype="toolbar"] {
543 -moz-image-region: rect(0, 234px, 18px, 216px);
546 #open-file-button[cui-areatype="toolbar"]:hover {
547 -moz-image-region: rect(18px, 234px, 36px, 216px);
550 #save-page-button[cui-areatype="toolbar"] {
551 -moz-image-region: rect(0, 252px, 18px, 234px);
554 #save-page-button[cui-areatype="toolbar"]:hover {
555 -moz-image-region: rect(18px, 252px, 36px, 234px);
558 #sync-button[cui-areatype="toolbar"] {
559 -moz-image-region: rect(0, 270px, 18px, 252px);
562 #sync-button[cui-areatype="toolbar"]:hover {
563 -moz-image-region: rect(18px, 270px, 36px, 252px);
566 #feed-button[cui-areatype="toolbar"] {
567 -moz-image-region: rect(0, 288px, 18px, 270px);
570 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
571 -moz-image-region: rect(18px, 288px, 36px, 270px);
574 #feed-button[cui-areatype="toolbar"][disabled="true"] {
575 -moz-image-region: rect(36px, 288px, 54px, 270px);
578 #social-share-button[cui-areatype="toolbar"] {
579 -moz-image-region: rect(0px, 306px, 18px, 288px);
582 #social-share-button[cui-areatype="toolbar"]:hover {
583 -moz-image-region: rect(18px, 306px, 36px, 288px);
586 #characterencoding-button[cui-areatype="toolbar"] {
587 -moz-image-region: rect(0, 324px, 18px, 306px);
590 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
591 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
592 -moz-image-region: rect(18px, 324px, 36px, 306px);
595 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
596 -moz-image-region: rect(36px, 324px, 54px, 306px);
599 #new-window-button[cui-areatype="toolbar"] {
600 -moz-image-region: rect(0, 342px, 18px, 324px);
603 #new-window-button[cui-areatype="toolbar"]:hover {
604 -moz-image-region: rect(18px, 342px, 36px, 324px);
607 #e10s-button[cui-areatype="toolbar"] {
608 -moz-image-region: rect(0, 342px, 18px, 324px);
611 #e10s-button[cui-areatype="toolbar"]:hover {
612 -moz-image-region: rect(18px, 342px, 36px, 324px);
615 #e10s-button > .toolbarbutton-icon {
616 transform: scaleY(-1);
619 #new-tab-button[cui-areatype="toolbar"] {
620 -moz-image-region: rect(0, 360px, 18px, 342px);
623 #new-tab-button[cui-areatype="toolbar"]:hover {
624 -moz-image-region: rect(18px, 360px, 36px, 342px);
627 #privatebrowsing-button[cui-areatype="toolbar"] {
628 -moz-image-region: rect(0, 378px, 18px, 360px);
631 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
632 -moz-image-region: rect(18px, 378px, 36px, 360px);
635 #find-button[cui-areatype="toolbar"] {
636 -moz-image-region: rect(0, 396px, 18px, 378px);
639 #find-button[cui-areatype="toolbar"]:hover {
640 -moz-image-region: rect(18px, 396px, 36px, 378px);
643 #print-button[cui-areatype="toolbar"] {
644 -moz-image-region: rect(0, 414px, 18px, 396px);
647 #print-button[cui-areatype="toolbar"]:hover {
648 -moz-image-region: rect(18px, 414px, 36px, 396px);
651 #fullscreen-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 432px, 18px, 414px);
655 #fullscreen-button[cui-areatype="toolbar"]:hover {
656 -moz-image-region: rect(18px, 432px, 36px, 414px);
659 #developer-button[cui-areatype="toolbar"] {
660 -moz-image-region: rect(0, 450px, 18px, 432px);
663 #developer-button[cui-areatype="toolbar"]:hover,
664 #developer-button[cui-areatype="toolbar"][open="true"] {
665 -moz-image-region: rect(18px, 450px, 36px, 432px);
668 #preferences-button[cui-areatype="toolbar"] {
669 -moz-image-region: rect(0, 468px, 18px, 450px);
672 #preferences-button[cui-areatype="toolbar"]:hover {
673 -moz-image-region: rect(18px, 468px, 36px, 450px);
676 #PanelUI-menu-button {
677 -moz-image-region: rect(0, 486px, 18px, 468px);
680 #PanelUI-menu-button:hover,
681 #PanelUI-menu-button[open="true"] {
682 -moz-image-region: rect(18px, 486px, 36px, 468px);
685 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
686 -moz-image-region: rect(0, 504px, 18px, 486px);
689 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
690 -moz-image-region: rect(18px, 504px, 36px, 486px);
693 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
694 -moz-image-region: rect(36px, 504px, 54px, 486px);
697 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
698 -moz-image-region: rect(0, 522px, 18px, 504px);
701 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
702 -moz-image-region: rect(18px, 522px, 36px, 504px);
705 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
706 -moz-image-region: rect(36px, 522px, 54px, 504px);
709 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
710 -moz-image-region: rect(0, 540px, 18px, 522px);
713 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
714 -moz-image-region: rect(18px, 540px, 36px, 522px);
717 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
718 -moz-image-region: rect(36px, 540px, 54px, 522px);
721 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
722 -moz-image-region: rect(0, 558px, 18px, 540px);
725 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
726 -moz-image-region: rect(18px, 558px, 36px, 540px);
729 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
730 -moz-image-region: rect(36px, 558px, 54px, 540px);
733 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
734 -moz-image-region: rect(0, 576px, 18px, 558px);
737 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
738 -moz-image-region: rect(18px, 576px, 36px, 558px);
741 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
742 -moz-image-region: rect(36px, 576px, 54px, 558px);
745 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) {
746 -moz-image-region: rect(0, 594px, 18px, 576px);
749 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])):hover,
750 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]))[open="true"] {
751 -moz-image-region: rect(18px, 594px, 36px, 576px);
754 #nav-bar-overflow-button {
755 -moz-image-region: rect(0, 612px, 18px, 594px);
758 #nav-bar-overflow-button:hover,
759 #nav-bar-overflow-button[open="true"] {
760 -moz-image-region: rect(18px, 612px, 36px, 594px);
763 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
764 transform: scaleX(-1);
768 -moz-image-region: rect(0, 648px, 18px, 630px);
771 #tabview-button:hover {
772 -moz-image-region: rect(18px, 648px, 36px, 630px);
775 #email-link-button[cui-areatype="toolbar"] {
776 -moz-image-region: rect(0, 666px, 18px, 648px);
779 #email-button[cui-areatype="toolbar"]:hover {
780 -moz-image-region: rect(18px, 666px, 36px, 648px);
783 #sidebar-button[cui-areatype="toolbar"] {
784 -moz-image-region: rect(0, 684px, 18px, 666px);
787 #sidebar-button[cui-areatype="toolbar"]:hover {
788 -moz-image-region: rect(18px, 684px, 36px, 666px);
791 /* === END toolbarbuttons.inc.css === */
793 /* === BEGIN menupanel.inc.css === */
795 /* Menu panel and palette styles */
797 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
798 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
799 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
800 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
801 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
802 #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="menu-panel"],
803 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
804 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
805 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
806 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
807 #PanelUI-menu-button, #characterencoding-button, #email-link-button) {
808 list-style-image: url("chrome://browser/skin/menuPanel.png");
811 #home-button[cui-areatype="menu-panel"],
812 toolbarpaletteitem[place="palette"] > #home-button {
813 -moz-image-region: rect(0px, 128px, 32px, 96px);
816 #home-button[cui-areatype="menu-panel"]:hover,
817 toolbarpaletteitem[place="palette"] > #home-button:hover {
818 -moz-image-region: rect(32px, 128px, 64px, 96px);
821 #bookmarks-menu-button[cui-areatype="menu-panel"],
822 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
823 -moz-image-region: rect(0px, 192px, 32px, 160px);
826 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
827 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
828 -moz-image-region: rect(32px, 192px, 64px, 160px);
831 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
832 -moz-image-region: rect(32px, 192px, 64px, 160px);
835 #history-panelmenu[cui-areatype="menu-panel"],
836 toolbarpaletteitem[place="palette"] > #history-panelmenu {
837 -moz-image-region: rect(0px, 224px, 32px, 192px);
840 #history-panelmenu[cui-areatype="menu-panel"]:hover,
841 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
842 -moz-image-region: rect(32px, 224px, 64px, 192px);
845 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
846 -moz-image-region: rect(32px, 224px, 64px, 192px);
849 #downloads-button[cui-areatype="menu-panel"],
850 toolbarpaletteitem[place="palette"] > #downloads-button {
851 -moz-image-region: rect(0px, 256px, 32px, 224px);
854 #downloads-button[cui-areatype="menu-panel"]:hover,
855 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
856 -moz-image-region: rect(32px, 256px, 64px, 224px);
859 #add-ons-button[cui-areatype="menu-panel"],
860 toolbarpaletteitem[place="palette"] > #add-ons-button {
861 -moz-image-region: rect(0px, 288px, 32px, 256px);
864 #add-ons-button[cui-areatype="menu-panel"]:hover,
865 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
866 -moz-image-region: rect(32px, 288px, 64px, 256px);
869 #open-file-button[cui-areatype="menu-panel"],
870 toolbarpaletteitem[place="palette"] > #open-file-button {
871 -moz-image-region: rect(0px, 320px, 32px, 288px);
874 #open-file-button[cui-areatype="menu-panel"]:hover,
875 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
876 -moz-image-region: rect(32px, 320px, 64px, 288px);
879 #save-page-button[cui-areatype="menu-panel"],
880 toolbarpaletteitem[place="palette"] > #save-page-button {
881 -moz-image-region: rect(0px, 352px, 32px, 320px);
884 #save-page-button[cui-areatype="menu-panel"]:hover,
885 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
886 -moz-image-region: rect(32px, 352px, 64px, 320px);
889 #sync-button[cui-areatype="menu-panel"],
890 toolbarpaletteitem[place="palette"] > #sync-button {
891 -moz-image-region: rect(0px, 384px, 32px, 352px);
894 #sync-button[cui-areatype="menu-panel"]:hover,
895 toolbarpaletteitem[place="palette"] > #sync-button:hover {
896 -moz-image-region: rect(32px, 384px, 64px, 352px);
899 #feed-button[cui-areatype="menu-panel"],
900 toolbarpaletteitem[place="palette"] > #feed-button {
901 -moz-image-region: rect(0px, 416px, 32px, 384px);
904 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
905 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
906 -moz-image-region: rect(32px, 416px, 64px, 384px);
909 #feed-button[cui-areatype="menu-panel"][disabled="true"],
910 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
911 -moz-image-region: rect(64px, 416px, 96px, 384px);
914 #social-share-button[cui-areatype="menu-panel"],
915 toolbarpaletteitem[place="palette"] > #social-share-button {
916 -moz-image-region: rect(0px, 448px, 32px, 416px);
919 #social-share-button[cui-areatype="menu-panel"]:hover,
920 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
921 -moz-image-region: rect(32px, 448px, 64px, 416px);
924 #characterencoding-button[cui-areatype="menu-panel"],
925 toolbarpaletteitem[place="palette"] > #characterencoding-button {
926 -moz-image-region: rect(0px, 480px, 32px, 448px);
929 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
930 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
931 -moz-image-region: rect(32px, 480px, 64px, 448px);
934 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
935 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
936 -moz-image-region: rect(64px, 480px, 96px, 448px);
939 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
940 -moz-image-region: rect(32px, 480px, 64px, 448px);
943 #new-window-button[cui-areatype="menu-panel"],
944 toolbarpaletteitem[place="palette"] > #new-window-button {
945 -moz-image-region: rect(0px, 512px, 32px, 480px);
948 #new-window-button[cui-areatype="menu-panel"]:hover,
949 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
950 -moz-image-region: rect(32px, 512px, 64px, 480px);
953 #new-tab-button[cui-areatype="menu-panel"],
954 toolbarpaletteitem[place="palette"] > #new-tab-button {
955 -moz-image-region: rect(0px, 544px, 32px, 512px);
958 #new-tab-button[cui-areatype="menu-panel"]:hover,
959 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
960 -moz-image-region: rect(32px, 544px, 64px, 512px);
963 #privatebrowsing-button[cui-areatype="menu-panel"],
964 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
965 -moz-image-region: rect(0px, 576px, 32px, 544px);
968 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
969 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
970 -moz-image-region: rect(32px, 576px, 64px, 544px);
973 #tabview-button[cui-areatype="menu-panel"],
974 toolbarpaletteitem[place="palette"] > #tabview-button {
975 -moz-image-region: rect(0px, 608px, 32px, 576px);
978 #tabview-button[cui-areatype="menu-panel"]:hover,
979 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
980 -moz-image-region: rect(32px, 608px, 64px, 576px);
983 #find-button[cui-areatype="menu-panel"],
984 toolbarpaletteitem[place="palette"] > #find-button {
985 -moz-image-region: rect(0px, 640px, 32px, 608px);
988 #find-button[cui-areatype="menu-panel"]:hover,
989 toolbarpaletteitem[place="palette"] > #find-button:hover {
990 -moz-image-region: rect(32px, 640px, 64px, 608px);
993 #print-button[cui-areatype="menu-panel"],
994 toolbarpaletteitem[place="palette"] > #print-button {
995 -moz-image-region: rect(0px, 672px, 32px, 640px);
998 #print-button[cui-areatype="menu-panel"]:hover,
999 toolbarpaletteitem[place="palette"] > #print-button:hover {
1000 -moz-image-region: rect(32px, 672px, 64px, 640px);
1003 #fullscreen-button[cui-areatype="menu-panel"],
1004 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1005 -moz-image-region: rect(0px, 704px, 32px, 672px);
1008 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1009 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1010 -moz-image-region: rect(32px, 704px, 64px, 672px);
1013 #developer-button[cui-areatype="menu-panel"],
1014 toolbarpaletteitem[place="palette"] > #developer-button {
1015 -moz-image-region: rect(0px, 736px, 32px, 704px);
1018 #developer-button[cui-areatype="menu-panel"]:hover,
1019 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1020 -moz-image-region: rect(32px, 736px, 64px, 704px);
1023 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1024 -moz-image-region: rect(32px, 736px, 64px, 704px);
1027 #preferences-button[cui-areatype="menu-panel"],
1028 toolbarpaletteitem[place="palette"] > #preferences-button {
1029 -moz-image-region: rect(0px, 768px, 32px, 736px);
1032 #preferences-button[cui-areatype="menu-panel"]:hover,
1033 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1034 -moz-image-region: rect(32px, 768px, 64px, 736px);
1037 #email-link-button[cui-areatype="menu-panel"],
1038 toolbarpaletteitem[place="palette"] > #email-link-button {
1039 -moz-image-region: rect(0, 800px, 32px, 768px);
1042 #email-link-button[cui-areatype="menu-panel"]:hover,
1043 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
1044 -moz-image-region: rect(32px, 800px, 64px, 768px);
1047 #sidebar-button[cui-areatype="menu-panel"],
1048 toolbarpaletteitem[place="palette"] > #sidebar-button {
1049 -moz-image-region: rect(0, 864px, 32px, 832px);
1052 #sidebar-button[cui-areatype="menu-panel"]:hover,
1053 toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
1054 -moz-image-region: rect(32px, 864px, 64px, 832px);
1057 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1058 -moz-image-region: rect(32px, 864px, 64px, 832px);
1061 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1062 -moz-image-region: rect(0, 832px, 32px, 800px);
1065 /* Wide panel control icons */
1067 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1068 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1069 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1070 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1071 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1074 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1075 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1076 -moz-image-region: rect(0px, 32px, 16px, 16px);
1079 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1080 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1081 -moz-image-region: rect(16px, 32px, 32px, 16px);
1084 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1085 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1086 -moz-image-region: rect(32px, 32px, 48px, 16px);
1089 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1090 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1091 -moz-image-region: rect(0px, 48px, 16px, 32px);
1094 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1095 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1096 -moz-image-region: rect(16px, 48px, 32px, 32px);
1099 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1100 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1101 -moz-image-region: rect(32px, 48px, 48px, 32px);
1104 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1105 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1106 -moz-image-region: rect(0px, 64px, 16px, 48px);
1109 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1110 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1111 -moz-image-region: rect(16px, 64px, 32px, 48px);
1114 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1115 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1116 -moz-image-region: rect(32px, 64px, 48px, 48px);
1119 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1120 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1121 -moz-image-region: rect(0px, 80px, 16px, 64px);
1124 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1125 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1126 -moz-image-region: rect(16px, 80px, 32px, 64px);
1129 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1130 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1131 -moz-image-region: rect(32px, 80px, 48px, 64px);
1134 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1135 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1136 -moz-image-region: rect(0px, 96px, 16px, 80px);
1139 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1140 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1141 -moz-image-region: rect(16px, 96px, 32px, 80px);
1144 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1145 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1146 -moz-image-region: rect(32px, 96px, 48px, 80px);
1149 /* === END menupanel.inc.css === */
1151 .toolbarbutton-1:not([type="menu-button"]) {
1152 -moz-box-orient: vertical;
1156 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1162 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1163 .toolbarbutton-1[disabled="true"]:hover:active,
1164 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1168 .toolbarbutton-1:hover:active,
1169 .toolbarbutton-1[open="true"],
1170 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1172 padding-bottom: 0px;
1173 -moz-padding-start: 3px;
1174 -moz-padding-end: 1px;
1177 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1178 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1179 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1180 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1181 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1184 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1185 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1188 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1189 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1192 .toolbarbutton-1 > .toolbarbutton-icon,
1193 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1196 #nav-bar .toolbarbutton-1,
1197 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1200 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1201 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1202 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1205 #nav-bar #PanelUI-menu-button {
1206 /* -moz-padding-start: 7px;
1207 -moz-padding-end: 5px;*/
1210 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1211 /* padding-left: 5px;
1212 padding-right: 5px;*/
1215 #nav-bar .toolbarbutton-1 > menupopup {
1216 /* margin-top: -3px;*/
1219 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1220 /* margin-top: -8px;*/
1223 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1224 /* -moz-padding-end: 0;*/
1227 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1228 /* -moz-padding-start: 0;
1229 -moz-box-align: center;*/
1232 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1233 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1234 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1235 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1236 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1237 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1238 /* padding: 2px 6px;
1240 border-color: transparent;
1241 transition-property: background-color, border-color;
1242 transition-duration: 150ms;*/
1245 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1246 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1247 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1252 /* Help SDK icons fit: */
1253 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1257 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1258 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1262 #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,
1263 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1264 /* -moz-padding-end: 17px;*/
1267 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1270 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1273 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1276 #nav-bar .toolbaritem-combined-buttons {
1277 /* margin-left: 2px;
1278 margin-right: 2px;*/
1281 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1286 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1287 #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 {
1293 -moz-margin-end: -1px;
1297 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1300 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1301 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1302 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1303 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1304 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1305 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1306 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1309 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1310 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1311 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1312 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1313 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1316 #TabsToolbar .toolbarbutton-1,
1317 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1318 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1319 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1322 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1323 #TabsToolbar .toolbarbutton-1[open],
1324 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1325 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1326 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1329 /* unified back/forward button */
1334 #forward-button > menupopup {
1335 margin-top: 1px !important;
1338 #forward-button > .toolbarbutton-icon {
1339 background-clip: padding-box !important;
1340 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1341 /*clip-path: url(chrome://browser/content/browser.xul#windows-keyhole-forward-clip-path) !important;*/
1345 -moz-margin-start: -6px !important;
1350 border-radius: 0 10000px 10000px 0;
1353 #forward-button:-moz-locale-dir(rtl) {
1354 border-radius: 10000px 0 0 10000px;
1357 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1358 transition: opacity @forwardTransitionLength@ ease-out;
1361 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] {
1365 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1370 /* padding-top: 3px !important;
1371 padding-bottom: 3px !important;
1372 -moz-padding-start: 5px !important;
1373 -moz-padding-end: 0 !important;*/
1376 border-radius: 10000px;
1380 margin-bottom: -2px;
1383 #back-button:-moz-locale-dir(rtl) {
1386 #back-button > menupopup {
1387 margin-top: -1px !important;
1390 #back-button > .toolbarbutton-icon {
1391 border-radius: 10000px !important;
1392 background-clip: padding-box !important;
1393 /* background-color: hsla(210,25%,98%,.08) !important;
1394 padding: 6px !important;
1395 border-color: hsla(210,4%,10%,.25) !important;*/
1396 transition-property: background-color, border-color !important;
1397 transition-duration: 250ms !important;
1400 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1401 /* background-color: hsla(210,4%,10%,.08) !important;
1402 box-shadow: none !important;*/
1405 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1406 #back-button[open="true"] > .toolbarbutton-icon {
1407 /* background-color: hsla(210,4%,10%,.12) !important;
1408 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1411 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1412 #forward-button:-moz-locale-dir(rtl) {
1413 transform: scaleX(-1);
1416 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1417 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1418 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1421 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1422 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1423 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1426 #home-button.bookmark-item {
1427 list-style-image: url("chrome://browser/skin/Toolbar.png");
1430 #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),
1431 #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),
1432 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1433 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1434 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1435 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1436 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1439 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1442 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1443 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1444 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1448 #downloads-button > .toolbarbutton-icon {
1452 /* tabview button & menu item */
1455 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1456 -moz-image-region: rect(1px, 89px, 17px, 73px);
1459 #menu_tabview[groups="0"] {
1460 -moz-image-region: rect(1px, 17px, 17px, 1px);
1463 #menu_tabview[groups="1"] {
1464 -moz-image-region: rect(1px, 35px, 17px, 19px);
1467 #menu_tabview[groups="2"] {
1468 -moz-image-region: rect(1px, 53px, 17px, 37px);
1471 #menu_tabview[groups="3"] {
1472 -moz-image-region: rect(1px, 71px, 17px, 55px);
1475 /* ::::: fullscreen window controls ::::: */
1478 -moz-margin-start: 4px;
1484 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1489 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1492 #minimize-button:hover {
1493 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1497 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1500 #restore-button:hover {
1501 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1505 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1508 #close-button:hover {
1509 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1512 /* ::::: Location Bar ::::: */
1515 .searchbar-textbox {
1518 -moz-margin-start: 3px;
1522 /* make color as light as possible to deal with dark non-domain parts */
1526 #urlbar:-moz-lwtheme,
1527 .searchbar-textbox:-moz-lwtheme {
1528 /* background-color: rgba(255,255,255,.8);
1529 @navbarTextboxCustomBorder@
1533 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1534 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1535 /* background-color: rgba(255,255,255,.9);*/
1538 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1539 .searchbar-textbox:-moz-lwtheme[focused] {
1540 /* background-color: white;*/
1543 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1545 -moz-margin-start: -22px;
1547 pointer-events: none;
1550 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1551 /* -moz-border-start: none;
1553 pointer-events: all;
1556 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1557 transition: margin-left 150ms ease-out;
1560 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1561 /* border-top-left-radius: 0;
1562 border-bottom-left-radius: 0; */
1565 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1566 /* border-top-right-radius: 0;
1567 border-bottom-right-radius: 0; */
1570 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1571 /* clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path");*/
1574 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1578 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1579 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1580 transition-delay: 100s;
1583 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1584 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1585 margin-left: -22.01px;
1588 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1589 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1590 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1591 transform: scaleX(-1);
1594 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1595 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1600 -moz-box-orient: horizontal;
1601 -moz-box-align: stretch;
1604 .urlbar-textbox-container {
1605 -moz-box-align: stretch;
1609 -moz-margin-start: 0;
1613 -moz-box-align: center;
1620 .searchbar-engine-button,
1621 .search-go-container {
1625 .search-go-container > .search-go-button {
1629 .urlbar-icon:hover {
1632 .urlbar-icon[open="true"],
1633 .urlbar-icon:hover:active {
1636 #urlbar-search-splitter {
1638 -moz-margin-start: -3px;
1640 background: transparent;
1643 #urlbar-search-splitter + #urlbar-container > #urlbar,
1644 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1645 -moz-margin-start: 0;
1648 #urlbar-display-box {
1652 -moz-border-end: 1px solid #9C9CFF;
1653 -moz-margin-end: 3px;
1656 -moz-margin-start: 0;
1661 min-width: calc(54px + 11ch);
1671 #identity-box:-moz-locale-dir(ltr) {
1672 /* border-top-left-radius: 1.5px;
1673 border-bottom-left-radius: 1.5px;*/
1676 #identity-box:-moz-locale-dir(rtl) {
1677 /* border-top-right-radius: 1.5px;
1678 border-bottom-right-radius: 1.5px;*/
1681 #notification-popup-box:not([hidden]) + #identity-box {
1682 -moz-padding-start: 10px !important;
1686 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1687 /* border-radius: 0; */
1688 -moz-padding-start: 2px;
1689 -moz-padding-end: 2px;
1690 -moz-margin-end: 1px;
1693 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1694 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1696 transition: padding-left;
1699 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1700 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1702 transition: padding-right;
1705 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1706 #notification-popup-box[hidden] + #identity-box {
1707 /* forward button hiding is delayed when hovered */
1708 transition-delay: 100s;
1711 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1712 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1713 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1714 padding-left: 2.01px;
1717 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1718 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1719 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1720 padding-right: 2.01px;
1723 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1724 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1725 -moz-margin-end: 3px;
1728 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1729 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1730 border-top-right-radius: 0;
1731 border-bottom-right-radius: 0;
1734 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1735 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1736 border-top-left-radius: 0;
1737 border-bottom-left-radius: 0;
1740 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1741 background-color: #000000;
1744 #identity-box:-moz-focusring {
1745 outline: 1px dotted #008484;
1746 outline-offset: -1px;
1749 #identity-box.verifiedDomain:-moz-focusring,
1750 #identity-box.verifiedIdentity:-moz-focusring {
1751 outline-color: #000000;
1754 #identity-icon-labels {
1755 -moz-margin-start: 1px;
1756 -moz-margin-end: 3px;
1759 /* Location bar dropmarker */
1761 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1762 background-color: transparent;
1765 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1766 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1771 .urlbar-history-dropmarker:hover {
1774 .urlbar-history-dropmarker:hover:active,
1775 .urlbar-history-dropmarker[open="true"] {
1778 /* page proxy icon */
1780 /* === BEGIN identity-block.inc.css === */
1782 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1783 /* Default theme does different color per channel, we can't as they do it build-time. */
1785 -moz-border-end: 1px solid #9C9CFF;
1788 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1790 -moz-border-end: 1px solid #008484;
1793 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1794 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1795 background-position: right;
1796 background-size: 1px;
1797 background-repeat: no-repeat;
1800 /* page proxy icon */
1802 #page-proxy-favicon {
1805 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1809 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1810 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1813 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1814 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1817 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1818 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1821 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1822 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1825 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1826 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1829 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1830 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1833 #page-proxy-favicon[pageproxystate="invalid"] {
1837 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1838 list-style-image: url("chrome://branding/content/icon64.png");
1841 #identity-popup-brandName {
1845 margin-bottom: .5em;
1848 #identity-popup-content-box {
1852 /* === END identity-block.inc.css === */
1854 #page-proxy-favicon {
1855 -moz-image-region: rect(0, 16px, 16px, 0);
1858 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1859 /* -moz-margin-end: 1px;*/
1862 #identity-box:hover > #page-proxy-favicon {
1863 -moz-image-region: rect(0, 32px, 16px, 16px);
1866 #identity-box:hover:active > #page-proxy-favicon,
1867 #identity-box[open=true] > #page-proxy-favicon {
1868 -moz-image-region: rect(0, 48px, 16px, 32px);
1871 #identity-box:hover {
1872 background-color: #FFCF00;
1876 #identity-box:hover:active,
1877 #identity-box[open=true] {
1878 background-color: #FF9F00;
1882 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1883 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1884 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1885 background-color: #9C9CFF;
1889 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1890 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1891 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1892 background-color: #008484;
1898 #treecolAutoCompleteImage {
1902 .ac-result-type-bookmark,
1903 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1904 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1905 -moz-image-region: rect(0px 16px 16px 0px);
1910 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1911 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1912 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1915 .ac-result-type-keyword,
1916 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1917 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1918 -moz-image-region: rect(0px 32px 16px 16px);
1923 .ac-result-type-tag,
1924 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1925 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1934 .ac-extra > .ac-comment {
1944 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1945 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1946 -moz-image-region: rect(0, 16px, 16px, 0);
1950 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1951 -moz-image-region: rect(16px, 16px, 32px, 0);
1954 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1958 .ac-comment[selected="true"],
1959 .ac-url-text[selected="true"],
1960 .ac-action-text[selected="true"] {
1961 color: inherit !important;
1964 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1965 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1971 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1972 border-top: 1px solid #9C9CFF;
1975 /* combined go/reload/stop button in location bar */
1977 #urlbar > toolbarbutton {
1978 -moz-margin-start: 0;
1980 background-origin: border-box;
1982 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1983 -moz-border-start: 1px solid #9C9CFF;
1986 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
1987 border-top-left-radius: 0px;
1988 border-bottom-left-radius: 0px;
1991 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
1992 border-top-right-radius: 0px;
1993 border-bottom-right-radius: 0px;
1996 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
1997 #urlbar-reload-button:not(:hover) {
1998 -moz-border-start-style: none;
1999 -moz-padding-start: 3px;
2002 #urlbar-reload-button {
2003 -moz-image-region: rect(0px, 14px, 14px, 0px);
2006 #urlbar-reload-button[disabled=true] {
2007 -moz-image-region: rect(28px, 14px, 42px, 0px);
2010 #urlbar-reload-button:not([disabled=true]):hover {
2011 -moz-image-region: rect(14px, 14px, 28px, 0px);
2014 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2015 transform: scaleX(-1);
2019 -moz-image-region: rect(0, 42px, 14px, 28px);
2022 #urlbar-go-button:hover,
2023 -moz-image-region: rect(14px, 42px, 28px, 28px);
2026 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2027 transform: scaleX(-1);
2030 #urlbar-stop-button {
2031 -moz-image-region: rect(0px, 28px, 14px, 14px);
2034 #urlbar-stop-button:hover {
2035 -moz-image-region: rect(14px, 28px, 28px, 14px);
2038 /* popup blocker button */
2040 #page-report-button {
2041 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2042 -moz-image-region: rect(0, 16px, 16px, 0);
2045 #page-report-button:hover ,
2046 #page-report-button:hover:active,
2047 #page-report-button[open="true"] {
2048 -moz-image-region: rect(0, 32px, 16px, 16px);
2051 /* social share panel */
2053 #social-share-panel > iframe {
2054 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2059 .social-share-toolbar {
2060 border-right: 1px solid #9C9CFF;
2061 /* background-color: #000000; */
2064 #social-share-provider-buttons {
2068 #social-share-provider-buttons > .share-provider-button {
2069 -moz-appearance: none;
2077 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2078 #social-share-provider-buttons > .share-provider-button:hover,
2079 #social-share-provider-buttons > .share-provider-button:active {
2083 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2086 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2089 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2095 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2102 /* fixup corners for share panel */
2103 .social-panel > .social-panel-frame {
2104 border-radius: inherit;
2107 #social-share-panel {
2114 .social-share-frame {
2115 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2118 /* we resize our panels dynamically, make it look nice */
2119 transition: height 100ms ease-out, width 100ms ease-out;
2122 .social-share-frame:-moz-locale-dir(ltr) {
2123 border-top-left-radius: 0;
2124 border-bottom-left-radius: 0;
2125 border-top-right-radius: inherit;
2126 border-bottom-right-radius: inherit;
2129 .social-share-frame:-moz-locale-dir(rtl) {
2130 border-top-left-radius: inherit;
2131 border-bottom-left-radius: inherit;
2132 border-top-right-radius: 0;
2133 border-bottom-right-radius: 0;
2136 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2137 border-top-left-radius: inherit;
2138 border-bottom-left-radius: inherit;
2141 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2142 border-top-right-radius: inherit;
2143 border-bottom-right-radius: inherit;
2146 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2147 border-top-left-radius: inherit;
2148 border-bottom-left-radius: inherit;
2151 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2152 border-top-right-radius: inherit;
2153 border-bottom-right-radius: inherit;
2156 /* social recommending panel */
2158 #social-mark-button {
2159 -moz-image-region: rect(0, 16px, 16px, 0);
2162 /* bookmarks menu-button */
2164 #bookmarks-menu-button.bookmark-item {
2165 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2166 -moz-image-region: rect(0px 16px 16px 0px);
2169 #bookmarks-menu-button.bookmark-item[starred] {
2170 -moz-image-region: rect(0px 32px 16px 16px);
2173 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2174 -moz-margin-start: 5px;
2177 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2179 padding-bottom: 2px;
2182 #BMB_bookmarksPopup[side="top"],
2183 #BMB_bookmarksPopup[side="bottom"] {
2185 margin-right: -20px;
2188 #BMB_bookmarksPopup[side="left"],
2189 #BMB_bookmarksPopup[side="right"] {
2191 margin-bottom: -20px;
2194 /* bookmarking panel */
2196 #editBookmarkPanelStarIcon {
2197 list-style-image: url("chrome://browser/skin/places/starred48.png");
2202 #editBookmarkPanelStarIcon[unstarred] {
2203 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2206 #editBookmarkPanelTitle {
2210 #editBookmarkPanelHeader,
2211 #editBookmarkPanelContent {
2212 margin-bottom: .5em;
2215 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2216 #editBMPanel_folderTree {
2223 border-top: 1px solid #9C9CFF;
2224 border-bottom-left-radius: 5px;
2225 border-bottom-right-radius: 5px;
2229 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2230 -moz-margin-end: 10px;
2231 vertical-align: middle;
2234 .panel-promo-closebutton {
2235 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2236 -moz-margin-end: -3px;
2240 .panel-promo-closebutton:hover {
2241 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2244 .panel-promo-closebutton:hover:active {
2245 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2248 .panel-promo-closebutton > .toolbarbutton-text {
2253 /* ::::: content area ::::: */
2256 background-color: Window;
2260 -moz-padding-start: 0px;
2263 .browserContainer > findbar {
2265 background-color: -moz-dialog;
2266 color: -moz-DialogText;
2275 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2278 #TabsToolbar .toolbar-holder {
2279 background-color: #000000; /* correct effect of being an actual toolbar */
2282 #main-window[disablechrome] #TabsToolbar,
2283 #TabsToolbar[tabsontop="false"] {
2284 border-bottom: 1px solid #008484;
2287 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2290 #main-window[tabsintitlebar] #TabsToolbar {
2291 background-color: transparent;
2294 /* === BEGIN tabs.inc.css === */
2297 .tabs-newtab-button,
2298 #TabsToolbar > #new-tab-button {
2303 padding: 1px 4px 2px;
2306 .tabbrowser-tab:first-of-type {
2307 -moz-margin-start: 2px;
2310 .tabs-newtab-button,
2311 #TabsToolbar > #new-tab-button {
2312 border-radius: 8px 8px 0px 0px;
2313 -moz-margin-start: 0;
2316 .tabs-newtab-button:not(:hover),
2317 #TabsToolbar > #new-tab-button:not(:hover) {
2318 background-color: #C09070;
2321 .tabbrowser-tab[remote] {
2322 text-decoration: underline;
2325 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2326 .tabbrowser-tab[selected=true] {
2327 /* position: relative;
2331 .tab-background-middle {
2349 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2353 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2356 .tab-throbber[progress] {
2357 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2360 .tab-throbber:not([pinned]),
2361 .tab-icon-image:not([pinned]) {
2362 -moz-margin-end: 3px;
2365 .tab-throbber[pinned],
2366 .tab-icon-image[pinned] {
2367 -moz-margin-start: 2px;
2368 -moz-margin-end: 2px;
2380 .tabs-newtab-button {
2381 /* overlap the tab curves */
2384 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2387 .tab-background-start[selected=true]::after,
2388 .tab-background-start[selected=true]::before,
2389 .tab-background-start,
2390 .tab-background-end,
2391 .tab-background-end[selected=true]::after,
2392 .tab-background-end[selected=true]::before {
2395 .tabbrowser-tab:not([selected=true]),
2396 .tabbrowser-tab:-moz-lwtheme {
2399 /* tabbrowser-tab focus ring */
2400 .tabbrowser-tab:focus {
2401 outline: 1px dotted;
2406 .tabbrowser-tab[selected="true"] {
2409 /* End selected tab */
2411 /* Background tabs */
2413 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2414 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2415 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2416 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2419 /* End background tabs */
2421 /* Tab pointer-events */
2424 pointer-events: none;
2427 .tab-background-middle,
2428 .tabs-newtab-button,
2430 pointer-events: auto;
2435 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2436 background-color: #E7ADE7;
2439 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2440 background-color: #3333FF;
2444 /* New tab button */
2446 .tabs-newtab-button {
2450 /* === END tabs.inc.css === */
2452 /* Tab DnD indicator */
2453 .tab-drop-indicator {
2454 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2455 margin-bottom: -11px;
2458 /* Tab close button */
2460 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2463 .tab-close-button:hover,
2464 .tab-close-button:hover[selected="true"] {
2465 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2468 .tab-close-button:hover:active,
2469 .tab-close-button:hover:active[selected="true"] {
2470 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2473 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2475 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2476 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2480 background-origin: border-box;
2483 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2484 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2485 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2486 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2489 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2490 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2493 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2494 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2495 /* transform: scaleX(-1);*/
2498 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2499 transition: 1s background-color ease-out;
2502 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2503 background-color: #008484;
2506 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2507 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2508 /* border-width: 0 2px 0 0;
2509 border-style: solid;
2510 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2513 .tabs-newtab-button > .toolbarbutton-icon {
2515 margin-bottom: -1px;
2518 .tabs-newtab-button,
2519 #TabsToolbar > #new-tab-button,
2520 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2521 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2522 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2523 -moz-image-region: rect(0, 16px, 18px, 0);
2526 .tabs-newtab-button,
2527 .tabs-newtab-button:hover,
2528 #TabsToolbar > #new-tab-button,
2529 #TabsToolbar > #new-tab-button:hover {
2530 -moz-image-region: rect(0, 32px, 18px, 16px);
2533 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2534 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2535 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2536 .tabs-newtab-button:-moz-lwtheme-brighttext,
2537 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2538 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2541 #TabsToolbar > #new-tab-button {
2546 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2549 #alltabs-button:hover,
2550 #alltabs-button:hover:active,
2551 #alltabs-button[open="true"] {
2552 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2555 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2556 #alltabs-button:-moz-lwtheme-brighttext {
2559 #alltabs-button > .toolbarbutton-icon {
2563 #alltabs-button > .toolbarbutton-menu-dropmarker {
2567 /* All tabs menupopup */
2568 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2569 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2570 -moz-image-region: auto;
2573 .alltabs-item[selected="true"] {
2577 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2578 list-style-image: url("chrome://global/skin/icons/loading.gif");
2581 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2582 background-color: #402800;
2585 /* Tabstrip close button */
2590 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2593 .tabs-closebutton > .toolbarbutton-icon {
2596 .tabs-closebutton > .toolbarbutton-text {
2600 .tabs-closebutton:hover,
2601 .tabs-closebutton:hover:active {
2602 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2605 toolbarbutton.chevron {
2606 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2609 toolbarbutton.chevron:hover {
2610 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2613 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2614 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2615 transform: scaleX(-1);
2618 toolbarbutton.chevron > .toolbarbutton-text,
2619 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2623 toolbarbutton.chevron > .toolbarbutton-icon {
2627 #sidebar-throbber[loading="true"] {
2628 list-style-image: url("chrome://global/skin/icons/loading.gif");
2629 -moz-margin-end: 4px;
2632 /* Bookmarks toolbar */
2633 #PlacesToolbarDropIndicator {
2634 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2637 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2638 background-color: #008484 !important;
2639 color: #FFCF00 !important;
2642 /* rules for menupopup drop indicators */
2643 .menupopup-drop-indicator-bar {
2645 /* these two margins must together compensate the indicator's height */
2647 margin-bottom: -1px;
2650 .menupopup-drop-indicator {
2651 list-style-image: none;
2653 -moz-margin-end: -4em;
2654 background-color: #008484;
2657 /* ::::: Identity Indicator Styling ::::: */
2660 #identity-popup-icon {
2664 list-style-image: url("chrome://browser/skin/identity.png");
2665 -moz-image-region: rect(0px, 64px, 64px, 0px);
2668 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2669 -moz-image-region: rect(64px, 64px, 128px, 0px);
2672 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2673 -moz-image-region: rect(128px, 64px, 192px, 0px);
2676 /* Popup Body Text */
2677 .identity-popup-description {
2678 white-space: pre-wrap;
2679 -moz-padding-start: 15px;
2683 .identity-popup-label {
2684 white-space: pre-wrap;
2685 -moz-padding-start: 15px;
2689 #identity-popup-content-host,
2690 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2694 #identity-popup-content-host {
2701 #identity-popup-content-owner {
2703 margin-bottom: 0 !important;
2708 .verifiedDomain > #identity-popup-content-owner {
2709 font-weight: normal;
2712 #identity-popup-content-verifier {
2716 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2717 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2719 -moz-margin-start: -24px;
2722 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2723 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2724 list-style-image: url("chrome://browser/skin/Secure24.png");
2727 #identity-popup-help-icon {
2729 margin: 7px 0 0 -3px;
2732 list-style-image: url("chrome://global/skin/icons/question-16.png");
2736 #identity-popup-help-icon > .button-box > .button-text {
2740 #identity-popup-help-icon > .button-box > .button-icon {
2745 #identity-popup-more-info-button {
2751 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2755 #identity-popup-container {
2760 #identity-popup-button-container {
2761 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2766 .popup-notification-icon {
2769 -moz-margin-end: 10px;
2772 .popup-notification-icon[popupid="geolocation"] {
2773 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2776 .popup-notification-icon[popupid="xpinstall-disabled"],
2777 .popup-notification-icon[popupid="addon-progress"],
2778 .popup-notification-icon[popupid="addon-install-cancelled"],
2779 .popup-notification-icon[popupid="addon-install-blocked"],
2780 .popup-notification-icon[popupid="addon-install-failed"],
2781 .popup-notification-icon[popupid="addon-install-complete"] {
2782 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2787 .popup-notification-icon[popupid="click-to-play-plugins"] {
2788 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2791 .popup-notification-icon[popupid="plugins-not-found"] {
2792 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2795 .popup-notification-icon[popupid="web-notifications"] {
2796 list-style-image: url("chrome://browser/skin/notification-64.png");
2799 .addon-progress-description {
2804 .popup-progress-label,
2805 .popup-progress-meter {
2806 -moz-margin-start: 0;
2810 .popup-progress-cancel {
2811 -moz-appearance: none;
2812 background: transparent;
2818 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2819 -moz-image-region: rect(0px, 32px, 16px, 16px);
2822 .popup-progress-cancel:hover {
2823 -moz-image-region: rect(16px, 32px, 32px, 16px);
2826 .popup-progress-cancel:active {
2827 -moz-image-region: rect(32px, 32px, 48px, 16px);
2830 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2831 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2832 .popup-notification-icon[popupid*="offline-app-requested"],
2833 .popup-notification-icon[popupid="offline-app-usage"] {
2834 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2837 .popup-notification-icon[popupid="password-save"],
2838 .popup-notification-icon[popupid="password-change"] {
2839 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2842 .popup-notification-icon[popupid="webapps-install-progress"],
2843 .popup-notification-icon[popupid="webapps-install"] {
2844 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2847 .popup-notification-icon[popupid="mixed-content-blocked"] {
2848 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2851 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2852 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2853 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2856 .popup-notification-icon[popupid="pointerLock"] {
2857 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2860 /* Notification icon box */
2861 #notification-popup-box {
2863 background-color: #000000;
2864 background-clip: padding-box;
2867 border-radius: 3px 0 0 3px;
2868 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2869 -moz-margin-end: -8px;
2870 border-right-width: 8px;
2873 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2874 /* padding-left: 5px; */
2877 #notification-popup-box:-moz-locale-dir(rtl),
2878 .notification-anchor-icon:-moz-locale-dir(rtl) {
2879 transform: scaleX(-1);
2882 .notification-anchor-icon {
2888 .notification-anchor-icon:-moz-focusring {
2889 outline: 1px dotted #008484;
2890 /* outline-offset: -3px; */
2893 .default-notification-icon,
2894 #default-notification-icon {
2895 list-style-image: url("chrome://global/skin/icons/information-16.png");
2898 .identity-notification-icon,
2899 #identity-notification-icon {
2900 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2903 .geo-notification-icon,
2904 #geo-notification-icon {
2905 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2908 #addons-notification-icon {
2909 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2912 .indexedDB-notification-icon,
2913 #indexedDB-notification-icon {
2914 list-style-image: url("chrome://global/skin/icons/question-16.png");
2917 #password-notification-icon {
2918 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2921 #webapps-notification-icon {
2922 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2925 #plugins-notification-icon {
2926 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2929 #plugins-notification-icon.plugin-hidden {
2930 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2933 #plugins-notification-icon.plugin-blocked {
2934 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2937 #plugins-notification-icon {
2938 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2941 #plugins-notification-icon:hover {
2942 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2945 #plugin-install-notification-icon {
2946 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2949 #notification-popup-box[hidden] {
2950 /* Override display:none to make the pluginBlockedNotification animation work
2951 when showing the notification repeatedly. */
2953 visibility: collapse;
2956 #plugins-notification-icon.plugin-blocked[showing] {
2957 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
2960 @keyframes pluginBlockedNotification {
2969 .mixed-content-blocked-notification-icon,
2970 #mixed-content-blocked-notification-icon {
2971 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
2974 .webRTC-shareDevices-notification-icon,
2975 #webRTC-shareDevices-notification-icon {
2976 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
2979 .webRTC-sharingDevices-notification-icon,
2980 #webRTC-sharingDevices-notification-icon {
2981 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
2984 .web-notifications-notification-icon,
2985 #web-notifications-notification-icon {
2986 list-style-image: url("chrome://browser/skin/notification-16.png");
2989 #pointerLock-notification-icon {
2990 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
2992 #pointerLock-cancel {
2996 /* Bookmarks roots menu-items */
2997 #subscribeToPageMenuitem:not([disabled]),
2998 #subscribeToPageMenupopup,
2999 #BMB_subscribeToPageMenuitem:not([disabled]),
3000 #BMB_subscribeToPageMenupopup {
3001 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3004 #bookmarksToolbarFolderMenu,
3005 #BMB_bookmarksToolbar,
3006 #panelMenu_bookmarksToolbar {
3007 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3008 -moz-image-region: auto;
3011 #BMB_unsortedBookmarks,
3012 #panelMenu_unsortedBookmarks {
3013 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3014 -moz-image-region: auto;
3017 /* ::::: Keyboard UI Panel ::::: */
3022 border-radius: 20px;
3025 .KUI-panel[level="top"] {
3026 /*background-color: rgba(27%,27%,27%,.65);*/
3032 padding: 20px 10px 10px;
3036 .ctrlTab-favicon[src] {
3037 background-color: #000000;
3043 .ctrlTab-preview-inner > .tabPreview-canvas {
3046 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3050 .ctrlTab-preview-inner {
3051 padding-bottom: 10px;
3054 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3056 background-color: #000000;
3057 border-radius: .5em;
3060 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3062 background-color: #000000;
3065 border: 2px solid #9C9CFF;
3066 border-radius: .5em;
3069 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3070 margin: -10px -10px 0;
3081 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3089 .sync-panel-button-box {
3093 #sync-error-panel-title,
3094 #sync-start-panel-title {
3098 #sync-start-panel-subtitle,
3099 #sync-error-panel-subtitle {
3105 .statuspanel-label {
3108 background: #404000;
3109 border: 1px none #9C9CFF;
3110 border-top-style: solid;
3115 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3116 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3117 border-right-style: solid;
3118 border-top-right-radius: .3em;
3122 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3123 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3124 border-left-style: solid;
3125 border-top-left-radius: .3em;
3129 /* HACK to abolish devily color on main content */
3132 background-color: transparent !important;
3135 /* === BEGIN highlighter.inc.css === */
3139 .highlighter-outline {
3140 box-shadow: 0 0 0 1px black;
3141 outline: 1px dashed #A09090;
3144 /* Highlighter - Node Infobar */
3146 .highlighter-nodeinfobar {
3149 background-color: #000000;
3150 background-clip: padding-box;
3151 border: 1px solid #008484;
3153 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3158 /* Highlighter - Node Infobar - text */
3160 .highlighter-nodeinfobar-text {
3162 /* 100% - size of the buttons and margins */
3163 max-width: calc(100% - 2 * (26px + 6px));
3164 padding-bottom: 1px;
3167 html|*.highlighter-nodeinfobar-tagname {
3171 html|*.highlighter-nodeinfobar-id {
3175 html|*.highlighter-nodeinfobar-pseudo-classes {
3179 /* Highlighter - Node Infobar - box & arrow */
3181 .highlighter-nodeinfobar-arrow {
3184 -moz-margin-start: calc(50% - 7px);
3185 transform: rotate(-45deg);
3186 background-clip: padding-box;
3187 background-repeat: no-repeat;
3190 .highlighter-nodeinfobar-arrow-top {
3191 margin-bottom: -8px;
3193 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3196 .highlighter-nodeinfobar-arrow-bottom {
3199 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3202 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3206 /* === END highlighter.inc.css === */
3208 #full-screen-warning-message {
3209 background-color: #000000;
3214 box-shadow: 0 0 2px #9C9CFF;
3217 #full-screen-warning-container[obscure-browser] {
3218 background-color: rgba(0,0,0,0.3);
3221 .full-screen-description {
3225 #full-screen-domain-text {
3229 .full-screen-approval-button,
3230 #full-screen-remember-decision {
3234 /* === BEGIN commandline.inc.css === */
3236 /* Developer toolbar */
3238 #developer-toolbar {
3239 border-top: 3px solid #000000;
3240 border-bottom: none;
3243 #developer-toolbar .toolbar-holder {
3244 background-color: #8050B0;
3248 #developer-toolbar .toolbar-holder {
3249 background-color: #8050B0;
3253 #developer-toolbar .toolbar-startcap,
3254 #developer-toolbar .toolbar-endcap{
3255 background-color: #6000CF;
3258 #developer-toolbar {
3260 min-height: 32px; */
3263 #developer-toolbar > toolbarbutton {
3269 .developer-toolbar-button > image {
3270 /* margin: auto 10px; */
3273 #developer-toolbar-toolbox-button > label {
3277 #developer-toolbar-toolbox-button {
3278 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3279 -moz-image-region: rect(0px, 16px, 16px, 0px);
3282 #developer-toolbar-toolbox-button > label {
3286 #developer-toolbar-toolbox-button:hover,
3287 #developer-toolbar-toolbox-button:hover:active,
3288 #developer-toolbar-toolbox-button[checked=true] {
3289 -moz-image-region: rect(0px, 32px, 16px, 16px);
3292 #developer-toolbar-closebutton {
3293 list-style-image: url("chrome://browser/skin/devtools/close.png");
3294 -moz-image-region: rect(0px, 16px, 16px, 0px);
3299 #developer-toolbar-closebutton > .toolbarbutton-icon {
3302 #developer-toolbar-closebutton > .toolbarbutton-text {
3306 #developer-toolbar-closebutton:hover,
3307 #developer-toolbar-closebutton:hover:active {
3308 -moz-image-region: rect(0px, 32px, 16px, 16px);
3313 html|*#gcli-tooltip-frame,
3314 html|*#gcli-output-frame {
3317 background-color: transparent;
3323 background-color: transparent;
3326 .gclitoolbar-input-node,
3327 .gclitoolbar-complete-node {
3329 -moz-box-align: center;
3333 background-color: transparent;
3336 .gclitoolbar-input-node {
3338 /* line-height: 32px;
3339 outline-style: none; */
3340 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3341 background-repeat: no-repeat;
3342 background-color: rgba(0, 0, 0, .75);
3345 .gclitoolbar-input-node[focused="true"] {
3346 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3347 background-color: #000000;
3350 .gclitoolbar-input-node:not([focused="true"]) {
3351 border-color: transparent;
3354 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3355 background-color: #008484;
3360 .gclitoolbar-complete-node {
3362 background-color: transparent;
3365 pointer-events: none;
3368 .gcli-in-incomplete,
3372 .gcli-in-closebrace,
3379 .gcli-in-incomplete {
3380 border-bottom: 2px dotted #8050B0;
3384 border-bottom: 2px dotted #FF0000;
3395 .gcli-in-closebrace {
3399 /* === END commandline.inc.css === */
3401 /* === BEGIN responsivedesign.inc.css === */
3403 /* Responsive Mode */
3405 .browserContainer[responsivemode] {
3406 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3407 padding: 0 20px 20px 20px;
3410 .browserStack[responsivemode] {
3411 box-shadow: 0 0 7px #9C9CFF;
3414 .devtools-responsiveui-toolbar {
3415 background: transparent;
3416 /* text color is textColor from dark theme, since no theme is applied to
3417 * the responsive toolbar.
3423 border-bottom-width: 0;
3426 .devtools-responsiveui-menulist,
3427 .devtools-responsiveui-toolbarbutton {
3428 -moz-box-align: center;
3430 /* min-height: 22px;*/
3431 /* margin: 0 3px; */
3434 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3435 -moz-box-orient: horizontal;
3438 .devtools-responsiveui-menulist:-moz-focusring,
3439 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3440 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3441 outline-offset: -4px;*/
3444 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3448 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3449 /* border-color: hsla(210,8%,5%,.6);
3450 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3451 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); */
3454 .devtools-responsiveui-menulist[open=true],
3455 .devtools-responsiveui-toolbarbutton[open=true],
3456 .devtools-responsiveui-toolbarbutton[checked=true] {
3457 /* border-color: hsla(210,8%,5%,.6) !important;
3458 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3459 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); */
3462 .devtools-responsiveui-toolbarbutton[checked=true] {
3463 /* color: hsl(208,100%,60%); */
3466 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3467 /* background-color: transparent !important;*/
3470 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3471 /* background-color: hsla(210,8%,5%,.2) !important;*/
3474 .devtools-responsiveui-menulist > .menulist-label-box {
3478 .devtools-responsiveui-menulist > .menulist-dropmarker {
3479 /* display: -moz-box;
3480 background-color: transparent;
3481 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3482 -moz-box-align: center;
3487 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3490 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3491 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3494 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3495 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3498 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3499 /* padding: 0 1px;*/
3500 -moz-box-align: stretch;
3503 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3504 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3505 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3506 -moz-box-align: center;
3510 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3511 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3515 .devtools-responsiveui-close {
3516 list-style-image: url("chrome://browser/skin/devtools/close.png");
3517 -moz-image-region: rect(0px,16px,16px,0px);
3520 .devtools-responsiveui-close:hover {
3521 -moz-image-region: rect(0px,32px,16px,16px);
3524 .devtools-responsiveui-rotate {
3525 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3526 -moz-image-region: rect(0px,16px,16px,0px);
3529 .devtools-responsiveui-rotate:hover {
3530 -moz-image-region: rect(0px,32px,16px,16px);
3533 .devtools-responsiveui-touch {
3534 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3535 -moz-image-region: rect(0px,16px,16px,0px);
3538 .devtools-responsiveui-touch:hover,
3539 .devtools-responsiveui-touch[checked],
3540 .devtools-responsiveui-touch[checked]:hover {
3541 -moz-image-region: rect(0px,32px,16px,16px);
3544 .devtools-responsiveui-screenshot {
3545 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3546 -moz-image-region: rect(0px,16px,16px,0px);
3549 .devtools-responsiveui-screenshot:hover {
3550 -moz-image-region: rect(0px,32px,16px,16px);
3553 .devtools-responsiveui-resizebarV {
3557 transform: translate(12px, -12px);
3558 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3561 .devtools-responsiveui-resizebarH {
3565 transform: translate(-12px, 12px);
3566 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3569 .devtools-responsiveui-resizehandle {
3573 transform: translate(12px, 12px);
3574 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3577 /* === END responsivedesign.inc.css === */
3579 /* === including indicator.css is done at the start of the file === */
3583 #developer-toolbar-toolbox-button[error-count]:before {
3587 background-color: #FF0000;
3589 -moz-margin-end: 5px;
3592 /* Social toolbar item */
3594 #social-provider-button {
3595 -moz-image-region: rect(0, 16px, 16px, 0);
3596 list-style-image: url("chrome://browser/skin/social/services-16.png");
3599 #social-provider-button > .toolbarbutton-menu-dropmarker {
3603 .toolbarbutton-badge-container {
3609 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3613 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3619 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3623 .toolbarbutton-badge[badge=""] {
3626 .toolbarbutton-badge[badge]:not([badge=""])::after {
3627 /* The |content| property is set in the content stylesheet. */
3632 background-color: #000000;
3633 border: 1px solid #9C9CFF;
3640 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3645 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3650 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3655 #social-notification-icon-mentions {
3656 background-color: #000000;
3658 -moz-margin-start: 2px;
3661 #social-notification-icon-mentions:hover {
3662 background-color: #FFCF00;
3665 #social-notification-icon-mentions[open="true"] {
3666 background-color: #FF9F00;
3669 #social-sidebar-splitter {
3673 .popup-notification-icon[popupid="servicesInstall"] {
3674 list-style-image: url("chrome://browser/skin/social/services-64.png");
3676 #servicesInstall-notification-icon {
3677 list-style-image: url("chrome://browser/skin/social/services-16.png");
3679 #social-undoactivation-button,
3680 #servicesInstall-learnmore-link {
3681 -moz-margin-start: 0; /* override default label margin to match description margin */
3684 #socialActivatedNotification .popup-notification-button-container {
3688 .social-activation-icon {
3695 #social-activation-message {
3699 #social-activation-message > label {
3703 /* social toolbar provider menu */
3704 .social-statusarea-popup {
3707 margin-right: -12px;
3710 .social-statusarea-user {
3711 border-bottom: 1px solid #9C9CFF;
3712 background-color: #000000;
3718 .social-statusarea-user-portrait {
3725 .social-statusarea-loggedInStatus {
3726 background: transparent;
3731 list-style-image: none;
3734 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3735 text-decoration: underline;
3738 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3742 .social-panel-frame {
3743 border-radius: inherit;
3746 /* === BEGIN chat.inc.css === */
3748 #social-sidebar-header {
3752 #social-sidebar-button {
3753 -moz-appearance: none;
3754 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3759 #social-sidebar-button > .toolbarbutton-icon {
3763 #social-sidebar-button:hover,
3764 #social-sidebar-button:hover:active {
3765 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3767 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3771 #social-sidebar-button[loading="true"] {
3772 list-style-image: url("chrome://global/skin/icons/loading.gif");
3775 #social-sidebar-favico {
3788 .chat-toolbarbutton {
3789 -moz-appearance: none;
3797 .chat-toolbarbutton > .toolbarbutton-text {
3801 .chat-toolbarbutton > .toolbarbutton-icon {
3805 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3810 .chat-close-button {
3811 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3812 -moz-image-region: rect(0, 16px, 16px, 0);
3815 .chat-close-button:hover,
3816 .chat-close-button:hover:active {
3817 -moz-image-region: rect(0, 32px, 16px, 16px);
3820 .chat-minimize-button {
3821 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3822 -moz-image-region: rect(16px, 16px, 32px, 0);
3825 .chat-minimize-button:hover:active,
3826 .chat-minimize-button:hover {
3827 -moz-image-region: rect(16px, 32px, 32px, 16px);
3831 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3832 -moz-image-region: rect(48px, 16px, 64px, 0);
3835 .chat-swap-button:hover:active,
3836 .chat-swap-button:hover {
3837 -moz-image-region: rect(48px, 32px, 64px, 16px);
3840 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3841 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3842 -moz-image-region: rect(32px, 16px, 48px, 0);
3845 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3846 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3847 -moz-image-region: rect(32px, 32px, 48px, 16px);
3852 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3858 background-color: #9C9CFF;
3865 -moz-padding-start: 6px;
3867 border-bottom: 1px solid #008484;
3871 .chat-titlebar > .notification-anchor-icon {
3876 .chat-titlebar[minimized="true"] {
3877 border-bottom: none;
3880 .chat-titlebar[selected] {
3881 background-color: #008484;
3884 .chat-titlebar[activity] {
3885 background-color: #E7ADE7;
3895 list-style-image: url("chrome://browser/skin/social/services-16.png");
3896 background-color: #000000;
3902 border-top: 1px solid #008484;
3903 -moz-border-end: 1px solid #008484;
3906 @media (min-resolution: 2dppx) {
3908 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3912 .chatbar-button > .toolbarbutton-icon {
3916 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3923 .chatbar-button > .toolbarbutton-icon {
3927 .chatbar-button:hover > .toolbarbutton-icon,
3928 .chatbar-button[open="true"] > .toolbarbutton-icon {
3932 .chatbar-button:hover,
3933 .chatbar-button[open="true"] {
3936 .chatbar-button > .toolbarbutton-text,
3937 .chatbar-button > .toolbarbutton-menu-dropmarker {
3941 .chatbar-button[activity]:not([open="true"]) {
3942 background-color: #E7ADE7;
3945 .chatbar-button > menupopup > menuitem[activity] {
3950 background: transparent;
3956 -moz-margin-end: 20px;
3962 -moz-margin-start: 4px;
3963 background-color: #000000;
3964 border: 1px solid #9C9CFF;
3965 border-bottom: none;
3966 border-top-left-radius: 2.5px;
3967 border-top-right-radius: 2.5px;
3970 chatbox[minimized="true"] {
3976 -moz-margin-start: 0px;
3982 /* === END chat.inc.css === */
3985 /* background-color: #c4cfde; */
3988 .chat-titlebar[selected] {
3989 /* background-color: #dae3f0; */
3993 -moz-appearance: none;
3994 /* background-color: #c4cfde; */
3997 .chatbar-button > .toolbarbutton-icon {
3998 /* -moz-margin-end: 0; */
4001 .chatbar-button:hover,
4002 .chatbar-button[open="true"] {
4003 /* background-color: #dae3f0; */
4006 .chatbar-button[activity]:not([open="true"]) {
4010 /* border-top-left-radius: 2.5px;
4011 border-top-right-radius: 2.5px; */
4014 /* === BEGIN plugin-doorhanger.inc.css === */
4017 * Plugin Doorhanger Styles
4020 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4021 padding: 6px 1px 2px;
4024 .click-to-play-plugins-notification-center-box {
4027 .plugin-popupnotification-centeritem:nth-child(odd) {
4028 /* background-color: rgba(0,0,0,0.1);*/
4031 .center-item-label {
4033 text-overflow: ellipsis;
4036 .center-item-warning-icon {
4037 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4038 background-repeat: no-repeat;
4041 -moz-margin-start: 6px;
4044 .click-to-play-plugins-notification-button-container {
4047 .click-to-play-popup-button {
4051 .click-to-play-plugins-notification-description-box {
4055 padding-bottom: 3px;
4058 .click-to-play-plugins-outer-description {
4062 .click-to-play-plugins-notification-link,
4067 .messageImage[value="plugin-hidden"] {
4068 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4071 /* Keep any changes to this style in sync with pluginProblem.css */
4072 notification.pluginVulnerable {
4075 notification.pluginVulnerable .messageImage {
4076 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4079 /* === END plugin-doorhanger.inc.css === */
4081 /* === BEGIN customizeMode.inc.css === */
4083 /* Customization mode */
4085 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck {
4089 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4094 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4095 pointer-events: none;
4098 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4099 #PanelUI-contents > .panel-customization-placeholder {
4100 -moz-outline-radius: 2.5px;
4101 outline: 1px dashed transparent;
4104 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4105 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4106 -moz-box-ordinal-group: 0;
4111 outline-offset: -2px;
4112 pointer-events: none;
4118 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4119 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4120 offset from the bottom effectively the same as other targets (-2px). */
4121 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4125 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4126 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4127 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4128 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4132 /* Most target outlines are shown on hover and drag over but the panel menu uses
4133 placeholders instead. */
4134 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4135 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4136 /* nav-bar and panel outlines are always shown */
4137 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4138 outline-color: #A09090;
4141 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4142 transition: outline-color 250ms linear;
4145 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4146 transition: outline-color 250ms linear;
4147 outline-color: #9C9CFF;
4150 #PanelUI-contents > .panel-customization-placeholder {
4152 outline-offset: -5px;
4155 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4157 /* padding-left: 10px;
4158 padding-right: 10px;*/
4161 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4165 #customization-container {
4166 background-color: #000000;
4169 #customization-palette,
4170 #customization-empty {
4171 padding: 0 15px 15px;
4174 #customization-header {
4178 font-weight: lighter;
4180 padding: 15px 15px 0;
4183 #customization-panel-container {
4184 padding: 10px 10px 0px;
4187 #customization-footer {
4188 /*background-color: rgb(236,236,236);*/
4189 border-top: 1px solid #9C9CFF;
4193 .customizationmode-button {
4197 .customizationmode-button:hover {
4200 .customizationmode-button[disabled="true"] {
4203 #customization-titlebar-visibility-button {
4204 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4205 -moz-image-region: rect(0, 24px, 24px, 0);
4207 -moz-margin-end: 10px;
4210 #customization-titlebar-visibility-button > .button-box > .button-text {
4211 /* Sadly, button.css thinks its margins are perfect for everyone. */
4212 -moz-margin-start: 6px !important;
4215 #customization-titlebar-visibility-button[checked] {
4216 -moz-image-region: rect(0, 48px, 24px, 24px);
4217 background-color: #008484;
4220 #customization-undo-reset-button {
4221 -moz-margin-end: 10px;
4224 #main-window[customize-entered] #customization-panel-container {
4225 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4226 background-position: left top;
4227 background-repeat: repeat;
4228 background-size: auto;
4229 background-attachment: fixed;
4232 toolbarpaletteitem[place="toolbar"] {
4233 transition: border-width 250ms ease-in-out;
4236 toolbarpaletteitem[mousedown] {
4237 outline: 1px solid #008484;
4238 cursor: -moz-grabbing;
4242 .panel-customization-placeholder,
4243 toolbarpaletteitem[place="palette"],
4244 toolbarpaletteitem[place="panel"] {
4245 transition: transform .3s ease-in-out;
4248 #customization-palette {
4249 transition: opacity .3s ease-in-out;
4253 #customization-palette[showing="true"] {
4257 toolbarpaletteitem[notransition].panel-customization-placeholder,
4258 toolbarpaletteitem[notransition][place="toolbar"],
4259 toolbarpaletteitem[notransition][place="palette"],
4260 toolbarpaletteitem[notransition][place="panel"] {
4264 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4265 toolbarpaletteitem > toolbaritem.panel-wide-item,
4266 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4267 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4270 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4271 transform: scale(1.3);
4274 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4275 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4276 transform: scale(1.1);
4279 /* Override the toolkit styling for items being dragged over. */
4280 toolbarpaletteitem[place="toolbar"] {
4281 border-left-width: 0;
4282 border-right-width: 0;
4287 #customization-palette:not([hidden]) {
4288 margin-bottom: 25px;
4291 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4292 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4293 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4294 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4298 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4299 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4309 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4310 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4314 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4315 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4318 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4319 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4323 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4324 -moz-box-pack: center;
4328 #customization-palette > toolbarpaletteitem > label {
4334 /* === END customizeMode.inc.css === */
4336 /* === BEGIN customizeTip.inc.css === */
4338 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4345 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4346 border: 1px solid #9C9CFF;
4349 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4350 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4353 .customization-tipPanel-infoBox {
4354 margin: 20px 25px 25px;
4356 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4357 background-repeat: no-repeat;
4360 .customization-tipPanel-content {
4366 .customization-tipPanel-em {
4371 .customization-tipPanel-contentImage {
4373 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4381 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4382 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4385 .customization-tipPanel-link {
4386 -moz-appearance: none;
4387 background: transparent;
4395 .customization-tipPanel-link > .button-box > .button-text {
4396 margin: 0 !important;
4399 .customization-tipPanel-closeBox > .close-icon {
4400 -moz-appearance: none;
4402 -moz-margin-end: -25px;
4405 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4406 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4407 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4410 /* === END customizeTip.inc.css === */
4413 * This next rule is a hack to disable subpixel anti-aliasing on all
4414 * labels during the customize mode transition. Subpixel anti-aliasing
4415 * on Windows with Direct2D layers acceleration is particularly slow to
4416 * paint, so this hack is how we sidestep that performance bottleneck.
4418 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4419 transform: perspective(0.01px);
4422 #main-window[customize-entered] {
4423 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4424 background-attachment: fixed;
4427 #customization-container {
4428 border-left: 1px solid #9C9CFF;
4429 border-right: 1px solid #9C9CFF;
4430 background-clip: padding-box;
4433 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4437 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4441 /* End customization mode */
4443 /* Private browsing indicators */
4446 * Currently, we have two places where we put private browsing indicators on
4447 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4448 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4449 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4450 * want the bottom border of the image to line up with the bottom of the window
4451 * caption buttons. That's why there's so much special-casing going on in here.
4453 .private-browsing-indicator {
4455 pointer-events: none;
4458 #private-browsing-indicator-titlebar {
4463 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4467 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4471 #TabsToolbar > .private-browsing-indicator {
4472 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4473 -moz-margin-start: 4px;
4477 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4478 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4479 * min/max/close window buttons.
4481 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4482 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4483 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4484 -moz-margin-end: 4px;
4490 /* This one is for Linux */
4491 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4492 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4496 /* End private browsing indicators */
4498 /* === BEGIN UITour.inc.css === */
4502 #UITourHighlightContainer {
4503 -moz-appearance: none;
4505 background-color: transparent;
4506 /* This is a buffer to compensate for the movement in the "wobble" effect */
4511 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4512 border-radius: 40px;
4513 border: 1px solid #9C9CFF;
4514 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4515 on Linux without an X compositor where opacity is either 0 or 1. */
4516 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4521 #UITourTooltipBody {
4522 -moz-margin-end: 14px;
4525 #UITourTooltipBody > vbox {
4529 #UITourTooltipIconContainer {
4530 -moz-margin-start: -16px;
4533 #UITourTooltipIcon {
4536 -moz-margin-start: 28px;
4537 -moz-margin-end: 28px;
4540 #UITourTooltipTitle,
4541 #UITourTooltipDescription {
4545 #UITourTooltipTitle {
4548 -moz-margin-start: 0;
4553 #UITourTooltipDescription {
4554 -moz-margin-start: 0;
4557 line-height: 1.8rem;
4558 margin-bottom: 0; /* Override global.css */
4561 #UITourTooltipClose {
4562 -moz-appearance: none;
4564 background-color: transparent;
4566 -moz-margin-start: 4px;
4570 #UITourTooltipClose > .toolbarbutton-text {
4574 #UITourTooltipButtons {
4576 background-color: rgba(0,0,0,.2);
4577 border-top: 1px solid rgba(0,0,0,.4);
4578 margin: 24px -16px -16px;
4582 #UITourTooltipButtons > button {
4586 #UITourTooltipButtons > button:first-child {
4587 -moz-margin-start: 0;
4590 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4593 -moz-margin-end: 5px;
4596 #UITourTooltipButtons > button .button-text {
4600 #UITourTooltipButtons > button:not(.button-link) {
4601 -moz-appearance: none;
4602 background-color: #C09070;
4603 border-radius: 3000px;
4607 transition-property: background-color, color;
4608 transition-duration: 150ms;
4611 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4612 background-color: #FFCF00;
4616 #UITourTooltipButtons > button.button-link {
4617 -moz-appearance: none;
4618 background: transparent;
4621 color: rgba(0,0,0,0.35);
4623 padding-right: 10px;
4626 #UITourTooltipButtons > button.button-link:hover {
4630 /* The primary button gets the same color as the customize button. */
4631 #UITourTooltipButtons > button.button-primary {
4632 background-color: #A06060; /* LCARS default button background color */
4635 padding-right: 30px;
4638 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4639 background-color: #FFCF00;
4643 /* === END UITour.inc.css === */
4645 #UITourTooltipButtons {
4646 margin: 24px -4px -4px;