1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
12 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
15 toolbar[customizable="true"] {
16 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
19 toolbar[type="menubar"][autohide="true"] {
20 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
23 #toolbar-menubar[autohide="true"] {
24 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
32 -moz-box-orient: vertical; /* for flex hack */
36 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
39 /* ::::: primary toolbar ::::: */
41 .toolbar-primary > .toolbar-box > .toolbar-holder {
42 background-color: #A09090;
45 .toolbar-primary > .toolbar-box > .toolbar-startcap,
46 .toolbar-primary > .toolbar-box > .toolbar-endcap {
47 background-color: #9C9CFF;
50 /* Hides the titlebar-placeholder underneath the window caption buttons when we
51 are not autohiding the menubar. */
52 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
56 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
57 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
58 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
59 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
60 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
64 #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
65 #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
66 /* margin-top: 15px;*/
69 #toolbar-menubar:not([autohide="true"]) {
70 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
73 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
74 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
78 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
79 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
80 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
81 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
82 outline-color: #A09090;
88 #navigator-toolbox::after {
91 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
95 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
98 /* indent due to non-applicable aero rule */
100 background-color: transparent !important;
103 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
104 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
106 background-color: #6000CF;
110 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
111 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
112 background-color: #8050B0;
116 #TabsToolbar:-moz-lwtheme {
117 /*background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);*/
120 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
124 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
125 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
129 /* Make the menu inherit the toolbar's color. On non-compositor (Aero Basic, XP modern, classic)
130 * this is defined above. Otherwise (Aero Glass, Windows 8 inactive windows), this is hardcoded
131 * to black in browser-aero.css. */
132 #main-menubar > menu:not(:-moz-lwtheme) {
137 /* Position the toolbar above the bottom of background tabs */
142 #personal-bookmarks {
143 /* min-height: 24px; */
146 #print-preview-toolbar:not(:-moz-lwtheme) {
147 /* -moz-appearance: toolbox; */
150 #browser-bottombox:not(:-moz-lwtheme) {
153 /* ::::: titlebar ::::: */
157 background-color: #6000CF;
160 #titlebar:-moz-window-inactive {
161 background-color: #8050B0;
165 #main-window[sizemode="normal"] > #titlebar {
170 #main-window[sizemode="maximized"] > #titlebar {
174 /* The button box must appear on top of the navigator-toolbox in order for
175 * click and hover mouse events to work properly for the button in the restored
176 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
177 * can swallow those events. It will also place the buttons above the fog on
178 * themes with Aero Glass.
180 #titlebar-buttonbox {
182 -moz-margin-end: 3px;
186 .titlebar-placeholder[type="appmenu-button"] {
190 .titlebar-placeholder[type="caption-buttons"] {
194 /* titlebar command buttons */
197 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
200 #titlebar-min:hover {
201 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
205 list-style-image: url("chrome://browser/skin/win-maximize.gif");
208 #titlebar-max:hover {
209 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
212 #main-window[sizemode="maximized"] #titlebar-max {
213 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
216 #main-window[sizemode="maximized"] #titlebar-max:hover {
217 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
221 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
224 #titlebar-close:hover {
225 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
228 /* ::::: bookmark buttons ::::: */
230 toolbarbutton.bookmark-item:not(.subviewbutton),
231 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
236 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
237 toolbarbutton.bookmark-item[open="true"] {
240 -moz-padding-start: 4px;
241 -moz-padding-end: 2px;*/
244 .bookmark-item > .toolbarbutton-icon,
245 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
250 /* Force the display of the label for bookmarks */
251 .bookmark-item > .toolbarbutton-text,
252 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
253 display: -moz-box !important;
256 .bookmark-item > .toolbarbutton-menu-dropmarker {
260 #bookmarks-toolbar-placeholder {
261 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
264 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
265 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
266 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
269 /* ----- BOOKMARK STAR ANIMATION ----- */
271 @keyframes animation-bookmarkAdded {
272 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
273 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
275 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
278 @keyframes animation-bookmarkPulse {
279 from { transform: scale(1); }
280 50% { transform: scale(1.3); }
281 to { transform: scale(1); }
284 #bookmarked-notification-container {
293 #bookmarked-notification {
294 background-size: 16px;
295 background-position: center;
296 background-repeat: no-repeat;
302 #bookmarked-notification-dropmarker-anchor {
307 #bookmarked-notification-dropmarker-icon {
313 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
314 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
315 animation: animation-bookmarkAdded 800ms;
316 animation-timing-function: ease, ease, ease;
319 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
320 list-style-image: none !important;
323 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
325 animation: animation-bookmarkPulse 300ms;
326 animation-delay: 600ms;
327 animation-timing-function: ease-out;
330 /* ::::: bookmark menus ::::: */
333 menuitem.bookmark-item {
338 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
343 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
344 -moz-padding-start: 0px;
347 /* ::::: bookmark items ::::: */
350 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
351 -moz-image-region: auto;
354 .bookmark-item[container] {
355 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
356 -moz-image-region: auto;
359 .bookmark-item[container][open] {
360 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
361 -moz-image-region: auto;
364 .bookmark-item[container][livemark] {
365 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
366 -moz-image-region: auto;
369 .bookmark-item[container][livemark] .bookmark-item {
370 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
371 -moz-image-region: rect(0px, 16px, 16px, 0px);
374 .bookmark-item[container][livemark] .bookmark-item[visited] {
375 -moz-image-region: rect(0px, 32px, 16px, 16px);
378 .bookmark-item[container][query] {
379 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
380 -moz-image-region: auto;
383 .bookmark-item[query][tagContainer] {
384 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
385 -moz-image-region: auto;
388 .bookmark-item[query][dayContainer] {
389 list-style-image: url("chrome://communicator/skin/history/calendar.png");
390 -moz-image-region: auto;
393 .bookmark-item[query][hostContainer] {
394 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
395 -moz-image-region: auto;
398 .bookmark-item[query][hostContainer][open] {
399 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
400 -moz-image-region: auto;
403 .bookmark-item[cutting] > .toolbarbutton-icon,
404 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
408 .bookmark-item[cutting] > .toolbarbutton-text,
409 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
413 /* ::::: primary toolbar buttons ::::: */
415 /* === BEGIN toolbarbuttons.inc.css === */
417 /* Whole section of this included file: */
418 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
419 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
420 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
421 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
422 #PanelUI-menu-button, #characterencoding-button, #email-link-button),
423 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
424 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
428 -moz-image-region: rect(0, 36px, 18px, 18px);
431 #back-button:hover:not([disabled="true"]) {
432 -moz-image-region: rect(18px, 36px, 36px, 18px);
435 #back-button[disabled="true"] {
436 -moz-image-region: rect(36px, 36px, 54px, 18px);
440 -moz-image-region: rect(0, 72px, 18px, 54px);
443 #forward-button:hover:not([disabled="true"]) {
444 -moz-image-region: rect(18px, 72px, 36px, 54px);
447 #forward-button[disabled="true"] {
448 -moz-image-region: rect(36px, 72px, 54px, 54px);
451 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
452 #forward-button:-moz-locale-dir(rtl) {
453 transform: scaleX(-1);
456 #home-button[cui-areatype="toolbar"] {
457 -moz-image-region: rect(0, 126px, 18px, 108px);
460 #home-button[cui-areatype="toolbar"]:hover {
461 -moz-image-region: rect(18px, 126px, 36px, 108px);
464 #bookmarks-menu-button[cui-areatype="toolbar"] {
465 -moz-image-region: rect(0, 144px, 18px, 126px);
468 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
469 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
470 -moz-image-region: rect(18px, 144px, 36px, 126px);
473 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
474 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
475 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
476 background-color: transparent !important;
479 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
480 -moz-image-region: rect(0, 162px, 18px, 144px);
483 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
484 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
485 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
486 /* When starred and clicked (for edit/delete dialog),
487 * then only the menubutton-button itself is open, but not the whole menubutton. */
488 -moz-image-region: rect(18px, 162px, 36px, 144px);
491 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
492 -moz-image-region: rect(0, 630px, 18px, 612px);
495 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
497 -moz-box-align: center;
500 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
501 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
502 -moz-image-region: rect(18px, 630px, 36px, 612px);
505 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
506 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
509 -moz-padding-start: 2px;
510 -moz-padding-end: 0px;
513 #history-panelmenu[cui-areatype="toolbar"] {
514 -moz-image-region: rect(0, 180px, 18px, 162px);
517 #history-panelmenu[cui-areatype="toolbar"]:hover,
518 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
519 -moz-image-region: rect(18px, 180px, 36px, 162px);
522 #downloads-button[cui-areatype="toolbar"] {
523 -moz-image-region: rect(0, 198px, 18px, 180px);
526 #downloads-button[cui-areatype="toolbar"]:hover,
527 #downloads-button[cui-areatype="toolbar"][open="true"] {
528 -moz-image-region: rect(18px, 198px, 36px, 180px);
531 #add-ons-button[cui-areatype="toolbar"] {
532 -moz-image-region: rect(0, 216px, 18px, 198px);
535 #add-ons-button[cui-areatype="toolbar"]:hover {
536 -moz-image-region: rect(18px, 216px, 36px, 198px);
539 #open-file-button[cui-areatype="toolbar"] {
540 -moz-image-region: rect(0, 234px, 18px, 216px);
543 #open-file-button[cui-areatype="toolbar"]:hover {
544 -moz-image-region: rect(18px, 234px, 36px, 216px);
547 #save-page-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 252px, 18px, 234px);
551 #save-page-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 252px, 36px, 234px);
555 #sync-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 270px, 18px, 252px);
559 #sync-button[cui-areatype="toolbar"]:hover {
560 -moz-image-region: rect(18px, 270px, 36px, 252px);
563 #feed-button[cui-areatype="toolbar"] {
564 -moz-image-region: rect(0, 288px, 18px, 270px);
567 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
568 -moz-image-region: rect(18px, 288px, 36px, 270px);
571 #feed-button[cui-areatype="toolbar"][disabled="true"] {
572 -moz-image-region: rect(36px, 288px, 54px, 270px);
575 #social-share-button[cui-areatype="toolbar"] {
576 -moz-image-region: rect(0px, 306px, 18px, 288px);
579 #social-share-button[cui-areatype="toolbar"]:hover {
580 -moz-image-region: rect(18px, 306px, 36px, 288px);
583 #email-link-button[cui-areatype="toolbar"] {
584 -moz-image-region: rect(0, 306px, 18px, 288px);
585 /* This is temporary until we have an email-link icon (Bug 932235) */
586 transform: scale(-1, -1);
589 #email-link-button[cui-areatype="toolbar"]:hover {
590 -moz-image-region: rect(18px, 306px, 36px, 288px);
593 #characterencoding-button[cui-areatype="toolbar"] {
594 -moz-image-region: rect(0, 324px, 18px, 306px);
597 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
598 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
599 -moz-image-region: rect(18px, 324px, 36px, 306px);
602 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
603 -moz-image-region: rect(36px, 324px, 54px, 306px);
606 #new-window-button[cui-areatype="toolbar"] {
607 -moz-image-region: rect(0, 342px, 18px, 324px);
610 #new-window-button[cui-areatype="toolbar"]:hover {
611 -moz-image-region: rect(18px, 342px, 36px, 324px);
614 #new-tab-button[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 360px, 18px, 342px);
618 #new-tab-button[cui-areatype="toolbar"]:hover {
619 -moz-image-region: rect(18px, 360px, 36px, 342px);
622 #privatebrowsing-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 378px, 18px, 360px);
626 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 378px, 36px, 360px);
630 #find-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 396px, 18px, 378px);
634 #find-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 396px, 36px, 378px);
638 #print-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 414px, 18px, 396px);
642 #print-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 414px, 36px, 396px);
646 #fullscreen-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 432px, 18px, 414px);
650 #fullscreen-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 432px, 36px, 414px);
654 #developer-button[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 450px, 18px, 432px);
658 #developer-button[cui-areatype="toolbar"]:hover,
659 #developer-button[cui-areatype="toolbar"][open="true"] {
660 -moz-image-region: rect(18px, 450px, 36px, 432px);
663 #preferences-button[cui-areatype="toolbar"] {
664 -moz-image-region: rect(0, 468px, 18px, 450px);
667 #preferences-button[cui-areatype="toolbar"]:hover {
668 -moz-image-region: rect(18px, 468px, 36px, 450px);
671 #PanelUI-menu-button {
672 -moz-image-region: rect(0, 486px, 18px, 468px);
675 #PanelUI-menu-button:hover,
676 #PanelUI-menu-button[open="true"] {
677 -moz-image-region: rect(18px, 486px, 36px, 468px);
680 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button {
681 -moz-image-region: rect(0, 504px, 18px, 486px);
684 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button:hover:not([disabled="true"]) {
685 -moz-image-region: rect(18px, 504px, 36px, 486px);
688 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button[disabled="true"] {
689 -moz-image-region: rect(36px, 504px, 54px, 486px);
692 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button {
693 -moz-image-region: rect(0, 522px, 18px, 504px);
696 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button:hover:not([disabled="true"]) {
697 -moz-image-region: rect(18px, 522px, 36px, 504px);
700 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button[disabled="true"] {
701 -moz-image-region: rect(36px, 522px, 54px, 504px);
704 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button {
705 -moz-image-region: rect(0, 540px, 18px, 522px);
708 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button:hover:not([disabled="true"]) {
709 -moz-image-region: rect(18px, 540px, 36px, 522px);
712 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button[disabled="true"] {
713 -moz-image-region: rect(36px, 540px, 54px, 522px);
716 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button {
717 -moz-image-region: rect(0, 558px, 18px, 540px);
720 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button:hover:not([disabled="true"]) {
721 -moz-image-region: rect(18px, 558px, 36px, 540px);
724 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button[disabled="true"] {
725 -moz-image-region: rect(36px, 558px, 54px, 540px);
728 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button {
729 -moz-image-region: rect(0, 576px, 18px, 558px);
732 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button:hover:not([disabled="true"]) {
733 -moz-image-region: rect(18px, 576px, 36px, 558px);
736 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button[disabled="true"] {
737 -moz-image-region: rect(36px, 576px, 54px, 558px);
740 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) {
741 -moz-image-region: rect(0, 594px, 18px, 576px);
744 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)):hover,
745 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem))[open="true"] {
746 -moz-image-region: rect(18px, 594px, 36px, 576px);
749 #nav-bar-overflow-button {
750 -moz-image-region: rect(0, 612px, 18px, 594px);
753 #nav-bar-overflow-button:hover,
754 #nav-bar-overflow-button[open="true"] {
755 -moz-image-region: rect(18px, 612px, 36px, 594px);
759 -moz-image-region: rect(0, 648px, 18px, 630px);
762 #tabview-button:hover {
763 -moz-image-region: rect(18px, 648px, 36px, 630px);
766 #email-link-button[cui-areatype="toolbar"] {
767 -moz-image-region: rect(0, 666px, 18px, 648px);
770 #email-button[cui-areatype="toolbar"]:hover {
771 -moz-image-region: rect(18px, 666px, 36px, 648px);
774 #sidebar-button[cui-areatype="toolbar"] {
775 -moz-image-region: rect(0, 684px, 18px, 666px);
778 #sidebar-button[cui-areatype="toolbar"]:hover {
779 -moz-image-region: rect(18px, 684px, 36px, 666px);
782 /* === END toolbarbuttons.inc.css === */
784 /* === BEGIN menupanel.inc.css === */
786 /* Menu panel and palette styles */
788 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
789 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
790 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
791 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
792 #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="menu-panel"],
793 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button,
794 #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button,
795 #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button,
796 #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button,
797 #PanelUI-menu-button, #characterencoding-button, #email-link-button) {
798 list-style-image: url("chrome://browser/skin/menuPanel.png");
801 #home-button[cui-areatype="menu-panel"],
802 toolbarpaletteitem[place="palette"] > #home-button {
803 -moz-image-region: rect(0px, 128px, 32px, 96px);
806 #home-button[cui-areatype="menu-panel"]:hover,
807 toolbarpaletteitem[place="palette"] > #home-button:hover {
808 -moz-image-region: rect(32px, 128px, 64px, 96px);
811 #bookmarks-menu-button[cui-areatype="menu-panel"],
812 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
813 -moz-image-region: rect(0px, 160px, 32px, 128px);
816 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
817 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
818 -moz-image-region: rect(32px, 160px, 64px, 128px);
821 #history-panelmenu[cui-areatype="menu-panel"],
822 toolbarpaletteitem[place="palette"] > #history-panelmenu {
823 -moz-image-region: rect(0px, 224px, 32px, 192px);
826 #history-panelmenu[cui-areatype="menu-panel"]:hover,
827 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
828 -moz-image-region: rect(32px, 224px, 64px, 192px);
831 #downloads-button[cui-areatype="menu-panel"],
832 toolbarpaletteitem[place="palette"] > #downloads-button {
833 -moz-image-region: rect(0px, 256px, 32px, 224px);
836 #downloads-button[cui-areatype="menu-panel"]:hover,
837 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
838 -moz-image-region: rect(32px, 256px, 64px, 224px);
841 #switch-to-metro-button[cui-areatype="menu-panel"],
842 toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
843 -moz-image-region: rect(0px, 800px, 32px, 768px);
846 #switch-to-metro-button[cui-areatype="menu-panel"]:hover,
847 toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover {
848 -moz-image-region: rect(32px, 800px, 64px, 768px);
851 #add-ons-button[cui-areatype="menu-panel"],
852 toolbarpaletteitem[place="palette"] > #add-ons-button {
853 -moz-image-region: rect(0px, 288px, 32px, 256px);
856 #add-ons-button[cui-areatype="menu-panel"]:hover,
857 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
858 -moz-image-region: rect(32px, 288px, 64px, 256px);
861 #open-file-button[cui-areatype="menu-panel"],
862 toolbarpaletteitem[place="palette"] > #open-file-button {
863 -moz-image-region: rect(0px, 320px, 32px, 288px);
866 #open-file-button[cui-areatype="menu-panel"]:hover,
867 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
868 -moz-image-region: rect(32px, 320px, 64px, 288px);
871 #save-page-button[cui-areatype="menu-panel"],
872 toolbarpaletteitem[place="palette"] > #save-page-button {
873 -moz-image-region: rect(0px, 352px, 32px, 320px);
876 #save-page-button[cui-areatype="menu-panel"]:hover,
877 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
878 -moz-image-region: rect(32px, 352px, 64px, 320px);
881 #sync-button[cui-areatype="menu-panel"],
882 toolbarpaletteitem[place="palette"] > #sync-button {
883 -moz-image-region: rect(0px, 384px, 32px, 352px);
886 #sync-button[cui-areatype="menu-panel"]:hover,
887 toolbarpaletteitem[place="palette"] > #sync-button:hover {
888 -moz-image-region: rect(32px, 384px, 64px, 352px);
891 #feed-button[cui-areatype="menu-panel"],
892 toolbarpaletteitem[place="palette"] > #feed-button {
893 -moz-image-region: rect(0px, 416px, 32px, 384px);
896 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
897 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
898 -moz-image-region: rect(32px, 416px, 64px, 384px);
901 #feed-button[cui-areatype="menu-panel"][disabled="true"],
902 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
903 -moz-image-region: rect(64px, 416px, 96px, 384px);
906 #social-share-button[cui-areatype="menu-panel"],
907 toolbarpaletteitem[place="palette"] > #social-share-button {
908 -moz-image-region: rect(0px, 448px, 32px, 416px);
911 #social-share-button[cui-areatype="menu-panel"]:hover,
912 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
913 -moz-image-region: rect(32px, 448px, 64px, 416px);
916 #email-link-button[cui-areatype="menu-panel"],
917 toolbarpaletteitem[place="palette"] > #email-link-button {
918 -moz-image-region: rect(0, 448px, 32px, 416px);
921 #email-link-button[cui-areatype="menu-panel"]:hover,
922 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
923 -moz-image-region: rect(32px, 448px, 64px, 416px);
926 /* This is temporary until we have an email-link icon (Bug 932235) */
927 #email-link-button[cui-areatype="menu-panel"] > image,
928 toolbarpaletteitem[place="palette"] > #email-link-button > image {
929 transform: scale(-1, -1);
932 #characterencoding-button[cui-areatype="menu-panel"],
933 toolbarpaletteitem[place="palette"] > #characterencoding-button {
934 -moz-image-region: rect(0px, 480px, 32px, 448px);
937 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
938 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
939 -moz-image-region: rect(32px, 480px, 64px, 448px);
942 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
943 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
944 -moz-image-region: rect(64px, 480px, 96px, 448px);
947 #new-window-button[cui-areatype="menu-panel"],
948 toolbarpaletteitem[place="palette"] > #new-window-button {
949 -moz-image-region: rect(0px, 512px, 32px, 480px);
952 #new-window-button[cui-areatype="menu-panel"]:hover,
953 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
954 -moz-image-region: rect(32px, 512px, 64px, 480px);
957 #new-tab-button[cui-areatype="menu-panel"],
958 toolbarpaletteitem[place="palette"] > #new-tab-button {
959 -moz-image-region: rect(0px, 544px, 32px, 512px);
962 #new-tab-button[cui-areatype="menu-panel"]:hover,
963 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
964 -moz-image-region: rect(32px, 544px, 64px, 512px);
967 #privatebrowsing-button[cui-areatype="menu-panel"],
968 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
969 -moz-image-region: rect(0px, 576px, 32px, 544px);
972 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
973 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
974 -moz-image-region: rect(32px, 576px, 64px, 544px);
977 #find-button[cui-areatype="menu-panel"],
978 toolbarpaletteitem[place="palette"] > #find-button {
979 -moz-image-region: rect(0px, 640px, 32px, 608px);
982 #find-button[cui-areatype="menu-panel"]:hover,
983 toolbarpaletteitem[place="palette"] > #find-button:hover {
984 -moz-image-region: rect(32px, 640px, 64px, 608px);
987 #print-button[cui-areatype="menu-panel"],
988 toolbarpaletteitem[place="palette"] > #print-button {
989 -moz-image-region: rect(0px, 672px, 32px, 640px);
992 #print-button[cui-areatype="menu-panel"]:hover,
993 toolbarpaletteitem[place="palette"] > #print-button:hover {
994 -moz-image-region: rect(32px, 672px, 64px, 640px);
997 #fullscreen-button[cui-areatype="menu-panel"],
998 toolbarpaletteitem[place="palette"] > #fullscreen-button {
999 -moz-image-region: rect(0px, 704px, 32px, 672px);
1002 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1003 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1004 -moz-image-region: rect(32px, 704px, 64px, 672px);
1007 #developer-button[cui-areatype="menu-panel"],
1008 toolbarpaletteitem[place="palette"] > #developer-button {
1009 -moz-image-region: rect(0px, 736px, 32px, 704px);
1012 #developer-button[cui-areatype="menu-panel"]:hover,
1013 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1014 -moz-image-region: rect(32px, 736px, 64px, 704px);
1017 #preferences-button[cui-areatype="menu-panel"],
1018 toolbarpaletteitem[place="palette"] > #preferences-button {
1019 -moz-image-region: rect(0px, 768px, 32px, 736px);
1022 #preferences-button[cui-areatype="menu-panel"]:hover,
1023 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1024 -moz-image-region: rect(32px, 768px, 64px, 736px);
1027 /* Wide panel control icons */
1029 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1030 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
1031 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1032 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1033 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1036 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button,
1037 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1038 -moz-image-region: rect(0px, 32px, 16px, 16px);
1041 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:hover:not([disabled="true"]),
1042 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1043 -moz-image-region: rect(16px, 32px, 32px, 16px);
1046 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button[disabled="true"],
1047 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1048 -moz-image-region: rect(32px, 32px, 48px, 16px);
1051 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
1052 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1053 -moz-image-region: rect(0px, 48px, 16px, 32px);
1056 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button:hover:not([disabled="true"]),
1057 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1058 -moz-image-region: rect(16px, 48px, 32px, 32px);
1061 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button[disabled="true"],
1062 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1063 -moz-image-region: rect(32px, 48px, 48px, 32px);
1066 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button,
1067 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1068 -moz-image-region: rect(0px, 64px, 16px, 48px);
1071 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:hover:not([disabled="true"]),
1072 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1073 -moz-image-region: rect(16px, 64px, 32px, 48px);
1076 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button[disabled="true"],
1077 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1078 -moz-image-region: rect(32px, 64px, 48px, 48px);
1081 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button,
1082 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1083 -moz-image-region: rect(0px, 80px, 16px, 64px);
1086 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:hover:not([disabled="true"]),
1087 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1088 -moz-image-region: rect(16px, 80px, 32px, 64px);
1091 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button[disabled="true"],
1092 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1093 -moz-image-region: rect(32px, 80px, 48px, 64px);
1096 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button,
1097 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1098 -moz-image-region: rect(0px, 96px, 16px, 80px);
1101 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:hover:not([disabled="true"]),
1102 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1103 -moz-image-region: rect(16px, 96px, 32px, 80px);
1106 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button[disabled="true"],
1107 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1108 -moz-image-region: rect(32px, 96px, 48px, 80px);
1111 /* === END menupanel.inc.css === */
1113 .toolbarbutton-1:not([type="menu-button"]) {
1114 -moz-box-orient: vertical;
1118 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1124 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1125 .toolbarbutton-1[disabled="true"]:hover:active,
1126 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1130 .toolbarbutton-1:hover:active,
1131 .toolbarbutton-1[open="true"],
1132 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1134 padding-bottom: 0px;
1135 -moz-padding-start: 3px;
1136 -moz-padding-end: 1px;
1139 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1140 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1141 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1142 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1143 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1146 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1147 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1150 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1151 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1154 .toolbarbutton-1 > .toolbarbutton-icon,
1155 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1158 #nav-bar .toolbarbutton-1,
1159 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1162 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1163 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1164 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1167 #nav-bar #PanelUI-menu-button {
1168 /* -moz-padding-start: 7px;
1169 -moz-padding-end: 5px;*/
1172 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1173 /* padding-left: 5px;
1174 padding-right: 5px;*/
1177 #nav-bar .toolbarbutton-1 > menupopup {
1178 /* margin-top: -3px;*/
1181 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1182 /* margin-top: -8px;*/
1185 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1186 /* -moz-padding-end: 0;*/
1189 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1190 /* -moz-padding-start: 0;
1191 -moz-box-align: center;*/
1194 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1195 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1196 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1197 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1198 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1199 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1200 /* padding: 2px 6px;
1202 border-color: transparent;
1203 transition-property: background-color, border-color;
1204 transition-duration: 150ms;*/
1207 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1208 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1209 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1214 /* Help SDK icons fit: */
1215 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1219 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1220 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1224 #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,
1225 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1226 /* -moz-padding-end: 17px;*/
1229 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1232 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1235 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1238 #nav-bar .toolbaritem-combined-buttons {
1239 /* margin-left: 2px;
1240 margin-right: 2px;*/
1243 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1248 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1249 #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 {
1255 -moz-margin-end: -1px;
1259 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1262 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1263 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1264 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1265 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1266 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1267 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
1268 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
1271 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1272 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1273 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1274 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1275 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1278 #TabsToolbar .toolbarbutton-1,
1279 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1280 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1281 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1284 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1285 #TabsToolbar .toolbarbutton-1[open],
1286 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1287 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1288 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1291 /* unified back/forward button */
1296 #forward-button > menupopup {
1297 margin-top: 1px !important;
1300 #forward-button > .toolbarbutton-icon {
1301 background-clip: padding-box !important;
1302 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1303 /*clip-path: url(chrome://browser/content/browser.xul#windows-keyhole-forward-clip-path) !important;*/
1307 -moz-margin-start: -6px !important;
1312 border-radius: 0 10000px 10000px 0;
1315 #forward-button:-moz-locale-dir(rtl) {
1316 border-radius: 10000px 0 0 10000px;
1319 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1320 transition: opacity @forwardTransitionLength@ ease-out;
1323 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled] {
1327 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1332 /* padding-top: 3px !important;
1333 padding-bottom: 3px !important;
1334 -moz-padding-start: 5px !important;
1335 -moz-padding-end: 0 !important;*/
1338 border-radius: 10000px;
1342 margin-bottom: -2px;
1345 #back-button:-moz-locale-dir(rtl) {
1348 #back-button > menupopup {
1349 margin-top: -1px !important;
1352 #back-button > .toolbarbutton-icon {
1353 border-radius: 10000px !important;
1354 background-clip: padding-box !important;
1355 /* background-color: hsla(210,25%,98%,.08) !important;
1356 padding: 6px !important;
1357 border-color: hsla(210,4%,10%,.25) !important;*/
1358 transition-property: background-color, border-color !important;
1359 transition-duration: 250ms !important;
1362 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1363 /* background-color: hsla(210,4%,10%,.08) !important;
1364 box-shadow: none !important;*/
1367 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1368 #back-button[open="true"] > .toolbarbutton-icon {
1369 /* background-color: hsla(210,4%,10%,.12) !important;
1370 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1373 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1374 #forward-button:-moz-locale-dir(rtl) {
1375 transform: scaleX(-1);
1378 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1379 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1380 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1383 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1384 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1385 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1388 #home-button.bookmark-item {
1389 list-style-image: url("chrome://browser/skin/Toolbar.png");
1392 #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),
1393 #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),
1394 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1395 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1396 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1397 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1398 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1401 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1404 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1405 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1406 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1410 #downloads-button > .toolbarbutton-icon {
1414 /* tabview button & menu item */
1417 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1418 -moz-image-region: rect(1px, 89px, 17px, 73px);
1421 #menu_tabview[groups="0"] {
1422 -moz-image-region: rect(1px, 17px, 17px, 1px);
1425 #menu_tabview[groups="1"] {
1426 -moz-image-region: rect(1px, 35px, 17px, 19px);
1429 #menu_tabview[groups="2"] {
1430 -moz-image-region: rect(1px, 53px, 17px, 37px);
1433 #menu_tabview[groups="3"] {
1434 -moz-image-region: rect(1px, 71px, 17px, 55px);
1437 /* ::::: fullscreen window controls ::::: */
1440 -moz-margin-start: 4px;
1446 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1451 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1454 #minimize-button:hover {
1455 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1459 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1462 #restore-button:hover {
1463 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1467 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1470 #close-button:hover {
1471 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1474 /* ::::: Location Bar ::::: */
1477 .searchbar-textbox {
1480 -moz-margin-start: 3px;
1484 /* make color as light as possible to deal with dark non-domain parts */
1488 #urlbar:-moz-lwtheme,
1489 .searchbar-textbox:-moz-lwtheme {
1490 /* background-color: rgba(255,255,255,.8);
1491 @navbarTextboxCustomBorder@
1495 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1496 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1497 /* background-color: rgba(255,255,255,.9);*/
1500 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1501 .searchbar-textbox:-moz-lwtheme[focused] {
1502 /* background-color: white;*/
1505 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1507 -moz-margin-start: -22px;
1509 pointer-events: none;
1512 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1513 /* -moz-border-start: none;
1515 pointer-events: all;
1518 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1519 transition: margin-left 150ms ease-out;
1522 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1523 /* border-top-left-radius: 0;
1524 border-bottom-left-radius: 0; */
1527 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1528 /* border-top-right-radius: 0;
1529 border-bottom-right-radius: 0; */
1532 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1533 /* clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path");*/
1536 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1540 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1541 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1542 transition-delay: 100s;
1545 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1546 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1547 margin-left: -22.01px;
1550 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1551 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1552 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1553 transform: scaleX(-1);
1556 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1557 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1562 -moz-box-orient: horizontal;
1563 -moz-box-align: stretch;
1566 .urlbar-textbox-container {
1567 -moz-box-align: stretch;
1571 -moz-margin-start: 0;
1576 -moz-box-align: center;
1583 .searchbar-engine-button,
1584 .search-go-container {
1588 .search-go-container > .search-go-button {
1592 .urlbar-icon:hover {
1595 .urlbar-icon[open="true"],
1596 .urlbar-icon:hover:active {
1599 #urlbar-search-splitter {
1601 -moz-margin-start: -3px;
1603 background: transparent;
1606 #urlbar-search-splitter + #urlbar-container > #urlbar,
1607 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1608 -moz-margin-start: 0;
1611 #urlbar-display-box {
1615 -moz-border-end: 1px solid #9C9CFF;
1616 -moz-margin-end: 3px;
1619 -moz-margin-start: 0;
1624 min-width: calc(54px + 11ch);
1634 #identity-box:-moz-locale-dir(ltr) {
1635 /* border-top-left-radius: 1.5px;
1636 border-bottom-left-radius: 1.5px;*/
1639 #identity-box:-moz-locale-dir(rtl) {
1640 /* border-top-right-radius: 1.5px;
1641 border-bottom-right-radius: 1.5px;*/
1644 #notification-popup-box:not([hidden]) + #identity-box {
1645 -moz-padding-start: 10px !important;
1649 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1650 /* border-radius: 0; */
1651 -moz-padding-start: 2px;
1652 -moz-padding-end: 2px;
1653 -moz-margin-end: 1px;
1656 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1657 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1659 transition: padding-left;
1662 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1663 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1665 transition: padding-right;
1668 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1669 #notification-popup-box[hidden] + #identity-box {
1670 /* forward button hiding is delayed when hovered */
1671 transition-delay: 100s;
1674 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1675 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1676 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1677 padding-left: 2.01px;
1680 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1681 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1682 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1683 padding-right: 2.01px;
1686 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1687 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1688 -moz-margin-end: 3px;
1691 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1692 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1693 border-top-right-radius: 0;
1694 border-bottom-right-radius: 0;
1697 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1698 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1699 border-top-left-radius: 0;
1700 border-bottom-left-radius: 0;
1703 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1704 background-color: #000000;
1707 #identity-box:-moz-focusring {
1708 outline: 1px dotted #008484;
1709 outline-offset: -1px;
1712 #identity-box.verifiedDomain:-moz-focusring,
1713 #identity-box.verifiedIdentity:-moz-focusring {
1714 outline-color: #000000;
1717 #identity-icon-labels {
1718 -moz-margin-start: 1px;
1719 -moz-margin-end: 3px;
1722 /* Location bar dropmarker */
1724 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1725 background-color: transparent;
1728 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1729 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1734 .urlbar-history-dropmarker:hover {
1737 .urlbar-history-dropmarker:hover:active,
1738 .urlbar-history-dropmarker[open="true"] {
1741 /* page proxy icon */
1743 /* === BEGIN identity-block.inc.css === */
1745 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1746 /* Default theme does different color per channel, we can't as they do it build-time. */
1748 -moz-border-end: 1px solid #9C9CFF;
1751 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1753 -moz-border-end: 1px solid #008484;
1756 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1757 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1758 background-position: right;
1759 background-size: 1px;
1760 background-repeat: no-repeat;
1763 /* page proxy icon */
1765 #page-proxy-favicon {
1768 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1772 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1773 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1776 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1777 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1780 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1781 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1784 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1785 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1788 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1789 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1792 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1793 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1796 #page-proxy-favicon[pageproxystate="invalid"] {
1800 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1801 list-style-image: url("chrome://branding/content/icon64.png");
1804 #identity-popup-brandName {
1808 margin-bottom: .5em;
1811 #identity-popup-content-box {
1815 /* === END identity-block.inc.css === */
1817 #page-proxy-favicon {
1818 -moz-image-region: rect(0, 16px, 16px, 0);
1821 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1822 /* -moz-margin-end: 1px;*/
1825 #identity-box:hover > #page-proxy-favicon {
1826 -moz-image-region: rect(0, 32px, 16px, 16px);
1829 #identity-box:hover:active > #page-proxy-favicon,
1830 #identity-box[open=true] > #page-proxy-favicon {
1831 -moz-image-region: rect(0, 48px, 16px, 32px);
1834 #identity-box:hover {
1835 background-color: #FFCF00;
1839 #identity-box:hover:active,
1840 #identity-box[open=true] {
1841 background-color: #FF9F00;
1845 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1846 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1847 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1848 background-color: #9C9CFF;
1852 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1853 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1854 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1855 background-color: #008484;
1861 #treecolAutoCompleteImage {
1865 .ac-result-type-bookmark,
1866 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1867 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1868 -moz-image-region: rect(0px 16px 16px 0px);
1873 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1874 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1875 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1878 .ac-result-type-keyword,
1879 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1880 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1881 -moz-image-region: rect(0px 32px 16px 16px);
1886 .ac-result-type-tag,
1887 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1888 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1897 .ac-extra > .ac-comment {
1907 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1908 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1909 -moz-image-region: rect(0, 16px, 16px, 0);
1913 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1914 -moz-image-region: rect(16px, 16px, 32px, 0);
1917 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1921 .ac-comment[selected="true"],
1922 .ac-url-text[selected="true"],
1923 .ac-action-text[selected="true"] {
1924 color: inherit !important;
1927 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1928 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1934 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1935 border-top: 1px solid #9C9CFF;
1938 /* combined go/reload/stop button in location bar */
1940 #urlbar > toolbarbutton {
1941 -moz-margin-start: 0;
1943 background-origin: border-box;
1945 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1946 -moz-border-start: 1px solid #9C9CFF;
1949 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
1950 border-top-left-radius: 0px;
1951 border-bottom-left-radius: 0px;
1954 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
1955 border-top-right-radius: 0px;
1956 border-bottom-right-radius: 0px;
1959 #urlbar > toolbarbutton:not([disabled]):active:hover,
1960 #urlbar-reload-button:not(:hover) {
1961 -moz-border-start-style: none;
1962 -moz-padding-start: 3px;
1965 #urlbar-reload-button {
1966 -moz-image-region: rect(0px, 14px, 14px, 0px);
1969 #urlbar-reload-button[disabled] {
1970 -moz-image-region: rect(28px, 14px, 42px, 0px);
1973 #urlbar-reload-button:not([disabled]):hover {
1974 -moz-image-region: rect(14px, 14px, 28px, 0px);
1977 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1978 transform: scaleX(-1);
1982 -moz-image-region: rect(0, 42px, 14px, 28px);
1985 #urlbar-go-button:hover,
1986 -moz-image-region: rect(14px, 42px, 28px, 28px);
1989 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1990 transform: scaleX(-1);
1993 #urlbar-stop-button {
1994 -moz-image-region: rect(0px, 28px, 14px, 14px);
1997 #urlbar-stop-button:hover {
1998 -moz-image-region: rect(14px, 28px, 28px, 14px);
2001 /* popup blocker button */
2003 #page-report-button {
2004 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2005 -moz-image-region: rect(0, 16px, 16px, 0);
2008 #page-report-button:hover ,
2009 #page-report-button:hover:active,
2010 #page-report-button[open="true"] {
2011 -moz-image-region: rect(0, 32px, 16px, 16px);
2014 /* social share panel */
2016 #social-share-panel > iframe {
2017 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2022 .social-share-toolbar {
2023 border-right: 1px solid #9C9CFF;
2024 /* background-color: #000000; */
2027 #social-share-provider-buttons {
2031 #social-share-provider-buttons > .share-provider-button {
2032 -moz-appearance: none;
2040 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2041 #social-share-provider-buttons > .share-provider-button:hover,
2042 #social-share-provider-buttons > .share-provider-button:active {
2046 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2049 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2052 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2058 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2065 /* fixup corners for share panel */
2066 .social-panel > .social-panel-frame {
2067 border-radius: inherit;
2070 #social-share-panel {
2077 .social-share-frame {
2078 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2081 /* we resize our panels dynamically, make it look nice */
2082 transition: height 100ms ease-out, width 100ms ease-out;
2085 .social-share-frame:-moz-locale-dir(ltr) {
2086 border-top-left-radius: 0;
2087 border-bottom-left-radius: 0;
2088 border-top-right-radius: inherit;
2089 border-bottom-right-radius: inherit;
2092 .social-share-frame:-moz-locale-dir(rtl) {
2093 border-top-left-radius: inherit;
2094 border-bottom-left-radius: inherit;
2095 border-top-right-radius: 0;
2096 border-bottom-right-radius: 0;
2099 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2100 border-top-left-radius: inherit;
2101 border-bottom-left-radius: inherit;
2104 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2105 border-top-right-radius: inherit;
2106 border-bottom-right-radius: inherit;
2109 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2110 border-top-left-radius: inherit;
2111 border-bottom-left-radius: inherit;
2114 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2115 border-top-right-radius: inherit;
2116 border-bottom-right-radius: inherit;
2119 /* social recommending panel */
2121 #social-mark-button {
2122 -moz-image-region: rect(0, 16px, 16px, 0);
2125 /* bookmarks menu-button */
2127 #bookmarks-menu-button.bookmark-item {
2128 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2129 -moz-image-region: rect(0px 16px 16px 0px);
2132 #bookmarks-menu-button.bookmark-item[starred] {
2133 -moz-image-region: rect(0px 32px 16px 16px);
2136 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2137 -moz-margin-start: 5px;
2140 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2142 padding-bottom: 2px;
2145 #BMB_bookmarksPopup[side="top"],
2146 #BMB_bookmarksPopup[side="bottom"] {
2148 margin-right: -20px;
2151 #BMB_bookmarksPopup[side="left"],
2152 #BMB_bookmarksPopup[side="right"] {
2154 margin-bottom: -20px;
2157 /* bookmarking panel */
2159 #editBookmarkPanelStarIcon {
2160 list-style-image: url("chrome://browser/skin/places/starred48.png");
2165 #editBookmarkPanelStarIcon[unstarred] {
2166 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2169 #editBookmarkPanelTitle {
2173 #editBookmarkPanelHeader,
2174 #editBookmarkPanelContent {
2175 margin-bottom: .5em;
2178 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2179 #editBMPanel_folderTree {
2184 margin: 5px -6px -6px;
2186 border-top: 1px solid #9C9CFF;
2187 border-bottom-left-radius: 5px;
2188 border-bottom-right-radius: 5px;
2192 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2193 -moz-margin-end: 10px;
2194 vertical-align: middle;
2197 .panel-promo-closebutton {
2198 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2199 -moz-margin-end: -3px;
2203 .panel-promo-closebutton:hover {
2204 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2207 .panel-promo-closebutton:hover:active {
2208 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2211 .panel-promo-closebutton > .toolbarbutton-text {
2216 /* ::::: content area ::::: */
2219 background-color: Window;
2223 -moz-padding-start: 0px;
2226 .browserContainer > findbar {
2228 background-color: -moz-dialog;
2229 color: -moz-DialogText;
2238 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2241 #TabsToolbar .toolbar-holder {
2242 background-color: #000000; /* correct effect of being an actual toolbar */
2245 #main-window[disablechrome] #TabsToolbar,
2246 #TabsToolbar[tabsontop="false"] {
2247 border-bottom: 1px solid #008484;
2250 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2253 #main-window[tabsintitlebar] #TabsToolbar {
2254 background-color: transparent;
2257 /* === BEGIN tabs.inc.css === */
2260 .tabs-newtab-button,
2261 #TabsToolbar > #new-tab-button {
2266 padding: 1px 4px 2px;
2269 .tabbrowser-tab:first-of-type {
2270 -moz-margin-start: 2px;
2273 .tabs-newtab-button,
2274 #TabsToolbar > #new-tab-button {
2275 border-radius: 8px 8px 0px 0px;
2276 -moz-margin-start: 0;
2279 .tabs-newtab-button:not(:hover),
2280 #TabsToolbar > #new-tab-button:not(:hover) {
2281 background-color: #C09070;
2284 .tabbrowser-tab[remote] {
2285 text-decoration: underline;
2288 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2289 .tabbrowser-tab[selected=true] {
2290 /* position: relative;
2294 .tab-background-middle {
2312 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2316 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2319 .tab-throbber[progress] {
2320 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2323 .tab-throbber:not([pinned]),
2324 .tab-icon-image:not([pinned]) {
2325 -moz-margin-end: 3px;
2328 .tab-throbber[pinned],
2329 .tab-icon-image[pinned] {
2330 -moz-margin-start: 2px;
2331 -moz-margin-end: 2px;
2343 .tabs-newtab-button {
2344 /* overlap the tab curves */
2347 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2350 .tab-background-start[selected=true]::after,
2351 .tab-background-start[selected=true]::before,
2352 .tab-background-start,
2353 .tab-background-end,
2354 .tab-background-end[selected=true]::after,
2355 .tab-background-end[selected=true]::before {
2358 .tabbrowser-tab:not([selected=true]),
2359 .tabbrowser-tab:-moz-lwtheme {
2362 /* tabbrowser-tab focus ring */
2363 .tabbrowser-tab:focus {
2364 outline: 1px dotted;
2369 .tabbrowser-tab[selected="true"] {
2372 /* End selected tab */
2374 /* Background tabs */
2376 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2377 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2378 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2379 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2382 /* End background tabs */
2384 /* Tab pointer-events */
2387 pointer-events: none;
2390 .tab-background-middle,
2391 .tabs-newtab-button,
2393 pointer-events: auto;
2398 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2399 background-color: #E7ADE7;
2402 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2403 background-color: #3333FF;
2407 /* New tab button */
2409 .tabs-newtab-button {
2413 /* === END tabs.inc.css === */
2415 /* Tab DnD indicator */
2416 .tab-drop-indicator {
2417 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2418 margin-bottom: -11px;
2421 /* Tab close button */
2423 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2426 .tab-close-button:hover,
2427 .tab-close-button:hover[selected="true"] {
2428 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2431 .tab-close-button:hover:active,
2432 .tab-close-button:hover:active[selected="true"] {
2433 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2436 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2438 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2439 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2443 background-origin: border-box;
2446 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2447 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2448 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2449 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2452 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2453 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2456 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2457 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2458 /* transform: scaleX(-1);*/
2461 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2462 transition: 1s background-color ease-out;
2465 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2466 background-color: #008484;
2469 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2470 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2471 /* border-width: 0 2px 0 0;
2472 border-style: solid;
2473 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2476 .tabs-newtab-button > .toolbarbutton-icon {
2478 margin-bottom: -1px;
2481 .tabs-newtab-button,
2482 #TabsToolbar > #new-tab-button,
2483 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2484 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2485 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2486 -moz-image-region: rect(0, 16px, 18px, 0);
2489 .tabs-newtab-button,
2490 .tabs-newtab-button:hover,
2491 #TabsToolbar > #new-tab-button,
2492 #TabsToolbar > #new-tab-button:hover {
2493 -moz-image-region: rect(0, 32px, 18px, 16px);
2496 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2497 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2498 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2499 .tabs-newtab-button:-moz-lwtheme-brighttext,
2500 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2501 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2504 #TabsToolbar > #new-tab-button {
2509 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2512 #alltabs-button:hover,
2513 #alltabs-button:hover:active,
2514 #alltabs-button[open="true"] {
2515 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2518 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2519 #alltabs-button:-moz-lwtheme-brighttext {
2522 #alltabs-button > .toolbarbutton-icon {
2526 #alltabs-button > .toolbarbutton-menu-dropmarker {
2530 /* All tabs menupopup */
2531 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2532 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2533 -moz-image-region: auto;
2536 .alltabs-item[selected="true"] {
2540 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2541 list-style-image: url("chrome://global/skin/icons/loading.gif");
2544 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2545 background-color: #402800;
2548 /* Tabstrip close button */
2553 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2556 .tabs-closebutton > .toolbarbutton-icon {
2559 .tabs-closebutton > .toolbarbutton-text {
2563 .tabs-closebutton:hover,
2564 .tabs-closebutton:hover:active {
2565 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2568 toolbarbutton.chevron {
2569 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2572 toolbarbutton.chevron:hover {
2573 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2576 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2577 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2578 transform: scaleX(-1);
2581 toolbarbutton.chevron > .toolbarbutton-text,
2582 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2586 toolbarbutton.chevron > .toolbarbutton-icon {
2590 #sidebar-throbber[loading="true"] {
2591 list-style-image: url("chrome://global/skin/icons/loading.gif");
2592 -moz-margin-end: 4px;
2595 /* Bookmarks toolbar */
2596 #PlacesToolbarDropIndicator {
2597 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2600 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2601 background-color: #008484 !important;
2602 color: #FFCF00 !important;
2605 /* rules for menupopup drop indicators */
2606 .menupopup-drop-indicator-bar {
2608 /* these two margins must together compensate the indicator's height */
2610 margin-bottom: -1px;
2613 .menupopup-drop-indicator {
2614 list-style-image: none;
2616 -moz-margin-end: -4em;
2617 background-color: #008484;
2620 /* ::::: Identity Indicator Styling ::::: */
2623 #identity-popup-icon {
2627 list-style-image: url("chrome://browser/skin/identity.png");
2628 -moz-image-region: rect(0px, 64px, 64px, 0px);
2631 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2632 -moz-image-region: rect(64px, 64px, 128px, 0px);
2635 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2636 -moz-image-region: rect(128px, 64px, 192px, 0px);
2639 /* Popup Body Text */
2640 .identity-popup-description {
2641 white-space: pre-wrap;
2642 -moz-padding-start: 15px;
2646 .identity-popup-label {
2647 white-space: pre-wrap;
2648 -moz-padding-start: 15px;
2652 #identity-popup-content-host,
2653 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2657 #identity-popup-content-host {
2664 #identity-popup-content-owner {
2666 margin-bottom: 0 !important;
2671 .verifiedDomain > #identity-popup-content-owner {
2672 font-weight: normal;
2675 #identity-popup-content-verifier {
2679 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2680 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2682 -moz-margin-start: -24px;
2685 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2686 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2687 list-style-image: url("chrome://browser/skin/Secure24.png");
2690 #identity-popup-help-icon {
2692 margin: 7px 0 0 -3px;
2695 list-style-image: url("chrome://global/skin/icons/question-16.png");
2699 #identity-popup-help-icon > .button-box > .button-text {
2703 #identity-popup-help-icon > .button-box > .button-icon {
2708 #identity-popup-more-info-button {
2714 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2718 #identity-popup-container {
2723 #identity-popup-button-container {
2724 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2729 .popup-notification-icon {
2732 -moz-margin-end: 10px;
2735 .popup-notification-icon[popupid="geolocation"] {
2736 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2739 .popup-notification-icon[popupid="xpinstall-disabled"],
2740 .popup-notification-icon[popupid="addon-progress"],
2741 .popup-notification-icon[popupid="addon-install-cancelled"],
2742 .popup-notification-icon[popupid="addon-install-blocked"],
2743 .popup-notification-icon[popupid="addon-install-failed"],
2744 .popup-notification-icon[popupid="addon-install-complete"] {
2745 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2750 .popup-notification-icon[popupid="click-to-play-plugins"] {
2751 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2754 .popup-notification-icon[popupid="plugins-not-found"] {
2755 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2758 .popup-notification-icon[popupid="web-notifications"] {
2759 list-style-image: url("chrome://browser/skin/notification-64.png");
2762 .addon-progress-description {
2767 .popup-progress-label,
2768 .popup-progress-meter {
2769 -moz-margin-start: 0;
2773 .popup-progress-cancel {
2774 -moz-appearance: none;
2775 background: transparent;
2781 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2782 -moz-image-region: rect(0px, 32px, 16px, 16px);
2785 .popup-progress-cancel:hover {
2786 -moz-image-region: rect(16px, 32px, 32px, 16px);
2789 .popup-progress-cancel:active {
2790 -moz-image-region: rect(32px, 32px, 48px, 16px);
2793 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2794 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2795 .popup-notification-icon[popupid*="offline-app-requested"],
2796 .popup-notification-icon[popupid="offline-app-usage"] {
2797 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2800 .popup-notification-icon[popupid="password-save"],
2801 .popup-notification-icon[popupid="password-change"] {
2802 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2805 .popup-notification-icon[popupid="webapps-install-progress"],
2806 .popup-notification-icon[popupid="webapps-install"] {
2807 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2810 .popup-notification-icon[popupid="mixed-content-blocked"] {
2811 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2814 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2815 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2816 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2819 .popup-notification-icon[popupid="pointerLock"] {
2820 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2823 /* Notification icon box */
2824 #notification-popup-box {
2826 background-color: #000000;
2827 background-clip: padding-box;
2830 border-radius: 3px 0 0 3px;
2831 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2832 -moz-margin-end: -8px;
2833 border-right-width: 8px;
2836 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2837 /* padding-left: 5px; */
2840 #notification-popup-box:-moz-locale-dir(rtl),
2841 .notification-anchor-icon:-moz-locale-dir(rtl) {
2842 transform: scaleX(-1);
2845 .notification-anchor-icon {
2851 .notification-anchor-icon:-moz-focusring {
2852 outline: 1px dotted #008484;
2853 /* outline-offset: -3px; */
2856 .default-notification-icon,
2857 #default-notification-icon {
2858 list-style-image: url("chrome://global/skin/icons/information-16.png");
2861 .identity-notification-icon,
2862 #identity-notification-icon {
2863 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2866 .geo-notification-icon,
2867 #geo-notification-icon {
2868 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2871 #addons-notification-icon {
2872 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2875 .indexedDB-notification-icon,
2876 #indexedDB-notification-icon {
2877 list-style-image: url("chrome://global/skin/icons/question-16.png");
2880 #password-notification-icon {
2881 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2884 #webapps-notification-icon {
2885 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2888 #plugins-notification-icon {
2889 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2892 #plugins-notification-icon.plugin-hidden {
2893 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2896 #plugins-notification-icon.plugin-blocked {
2897 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2900 #plugins-notification-icon {
2901 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2904 #plugins-notification-icon:hover {
2905 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2908 #plugin-install-notification-icon {
2909 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2912 #notification-popup-box[hidden] {
2913 /* Override display:none to make the pluginBlockedNotification animation work
2914 when showing the notification repeatedly. */
2916 visibility: collapse;
2919 #plugins-notification-icon.plugin-blocked[showing] {
2920 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
2923 @keyframes pluginBlockedNotification {
2932 .mixed-content-blocked-notification-icon,
2933 #mixed-content-blocked-notification-icon {
2934 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
2937 .webRTC-shareDevices-notification-icon,
2938 #webRTC-shareDevices-notification-icon {
2939 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
2942 .webRTC-sharingDevices-notification-icon,
2943 #webRTC-sharingDevices-notification-icon {
2944 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
2947 .web-notifications-notification-icon,
2948 #web-notifications-notification-icon {
2949 list-style-image: url("chrome://browser/skin/notification-16.png");
2952 #pointerLock-notification-icon {
2953 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
2955 #pointerLock-cancel {
2959 /* Bookmarks roots menu-items */
2960 #subscribeToPageMenuitem:not([disabled]),
2961 #subscribeToPageMenupopup,
2962 #BMB_subscribeToPageMenuitem:not([disabled]),
2963 #BMB_subscribeToPageMenupopup {
2964 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
2967 #bookmarksToolbarFolderMenu,
2968 #BMB_bookmarksToolbar,
2969 #panelMenu_bookmarksToolbar {
2970 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
2971 -moz-image-region: auto;
2974 #BMB_unsortedBookmarks,
2975 #panelMenu_unsortedBookmarks {
2976 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
2977 -moz-image-region: auto;
2980 /* ::::: Keyboard UI Panel ::::: */
2985 border-radius: 20px;
2988 .KUI-panel[level="top"] {
2989 /*background-color: rgba(27%,27%,27%,.65);*/
2995 padding: 20px 10px 10px;
2999 .ctrlTab-favicon[src] {
3000 background-color: #000000;
3006 .ctrlTab-preview-inner > .tabPreview-canvas {
3009 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3013 .ctrlTab-preview-inner {
3014 padding-bottom: 10px;
3017 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3019 background-color: #000000;
3020 border-radius: .5em;
3023 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3025 background-color: #000000;
3028 border: 2px solid #9C9CFF;
3029 border-radius: .5em;
3032 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3033 margin: -10px -10px 0;
3044 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3052 .sync-panel-button-box {
3056 #sync-error-panel-title,
3057 #sync-start-panel-title {
3061 #sync-start-panel-subtitle,
3062 #sync-error-panel-subtitle {
3068 .statuspanel-label {
3071 background: #404000;
3072 border: 1px none #9C9CFF;
3073 border-top-style: solid;
3078 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3079 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3080 border-right-style: solid;
3081 border-top-right-radius: .3em;
3085 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3086 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3087 border-left-style: solid;
3088 border-top-left-radius: .3em;
3092 /* HACK to abolish devily color on main content */
3095 background-color: transparent !important;
3098 /* === BEGIN highlighter.inc.css === */
3102 .highlighter-outline {
3103 box-shadow: 0 0 0 1px black;
3104 outline: 1px dashed #A09090;
3107 /* Highlighter - Node Infobar */
3109 .highlighter-nodeinfobar {
3112 background-color: #000000;
3113 background-clip: padding-box;
3114 border: 1px solid #008484;
3116 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3121 /* Highlighter - Node Infobar - text */
3123 .highlighter-nodeinfobar-text {
3125 /* 100% - size of the buttons and margins */
3126 max-width: calc(100% - 2 * (26px + 6px));
3127 padding-bottom: 1px;
3130 html|*.highlighter-nodeinfobar-tagname {
3134 html|*.highlighter-nodeinfobar-id {
3138 html|*.highlighter-nodeinfobar-pseudo-classes {
3142 /* Highlighter - Node Infobar - box & arrow */
3144 .highlighter-nodeinfobar-arrow {
3147 -moz-margin-start: calc(50% - 7px);
3148 transform: rotate(-45deg);
3149 background-clip: padding-box;
3150 background-repeat: no-repeat;
3153 .highlighter-nodeinfobar-arrow-top {
3154 margin-bottom: -8px;
3156 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3159 .highlighter-nodeinfobar-arrow-bottom {
3162 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3165 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3169 /* === END highlighter.inc.css === */
3171 #full-screen-warning-message {
3172 background-color: #000000;
3177 box-shadow: 0 0 2px #9C9CFF;
3180 #full-screen-warning-container[obscure-browser] {
3181 background-color: rgba(0,0,0,0.3);
3184 .full-screen-description {
3188 #full-screen-domain-text {
3192 .full-screen-approval-button,
3193 #full-screen-remember-decision {
3197 /* === BEGIN commandline.inc.css === */
3199 /* Developer toolbar */
3201 #developer-toolbar {
3202 border-top: 3px solid #000000;
3203 border-bottom: none;
3206 #developer-toolbar .toolbar-holder {
3207 background-color: #8050B0;
3211 #developer-toolbar .toolbar-holder {
3212 background-color: #8050B0;
3216 #developer-toolbar .toolbar-startcap,
3217 #developer-toolbar .toolbar-endcap{
3218 background-color: #6000CF;
3221 #developer-toolbar {
3223 min-height: 32px; */
3226 #developer-toolbar > toolbarbutton {
3232 .developer-toolbar-button > image {
3233 /* margin: auto 10px; */
3236 #developer-toolbar-toolbox-button > label {
3240 #developer-toolbar-toolbox-button {
3241 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3242 -moz-image-region: rect(0px, 16px, 16px, 0px);
3245 #developer-toolbar-toolbox-button > label {
3249 #developer-toolbar-toolbox-button:hover,
3250 #developer-toolbar-toolbox-button:hover:active,
3251 #developer-toolbar-toolbox-button[checked=true] {
3252 -moz-image-region: rect(0px, 32px, 16px, 16px);
3255 #developer-toolbar-closebutton {
3256 list-style-image: url("chrome://browser/skin/devtools/close.png");
3257 -moz-image-region: rect(0px, 16px, 16px, 0px);
3262 #developer-toolbar-closebutton > .toolbarbutton-icon {
3265 #developer-toolbar-closebutton > .toolbarbutton-text {
3269 #developer-toolbar-closebutton:hover,
3270 #developer-toolbar-closebutton:hover:active {
3271 -moz-image-region: rect(0px, 32px, 16px, 16px);
3276 html|*#gcli-tooltip-frame,
3277 html|*#gcli-output-frame {
3280 background-color: transparent;
3286 background-color: transparent;
3289 .gclitoolbar-input-node,
3290 .gclitoolbar-complete-node {
3292 -moz-box-align: center;
3296 background-color: transparent;
3299 .gclitoolbar-input-node {
3301 /* line-height: 32px;
3302 outline-style: none; */
3303 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3304 background-repeat: no-repeat;
3305 background-color: rgba(0, 0, 0, .75);
3308 .gclitoolbar-input-node[focused="true"] {
3309 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3310 background-color: #000000;
3313 .gclitoolbar-input-node:not([focused="true"]) {
3314 border-color: transparent;
3317 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3318 background-color: #008484;
3323 .gclitoolbar-complete-node {
3325 background-color: transparent;
3328 pointer-events: none;
3331 .gcli-in-incomplete,
3335 .gcli-in-closebrace,
3342 .gcli-in-incomplete {
3343 border-bottom: 2px dotted #8050B0;
3347 border-bottom: 2px dotted #FF0000;
3358 .gcli-in-closebrace {
3362 /* === END commandline.inc.css === */
3364 /* === BEGIN responsivedesign.inc.css === */
3366 /* Responsive Mode */
3368 .browserContainer[responsivemode] {
3369 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3370 padding: 0 20px 20px 20px;
3373 .browserStack[responsivemode] {
3374 box-shadow: 0 0 7px #9C9CFF;
3377 .devtools-responsiveui-toolbar {
3378 background: transparent;
3379 /* text color is textColor from dark theme, since no theme is applied to
3380 * the responsive toolbar.
3386 border-bottom-width: 0;
3389 .devtools-responsiveui-menulist,
3390 .devtools-responsiveui-toolbarbutton {
3391 -moz-box-align: center;
3393 /* min-height: 22px;*/
3394 /* margin: 0 3px; */
3397 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3398 -moz-box-orient: horizontal;
3401 .devtools-responsiveui-menulist:-moz-focusring,
3402 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3403 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3404 outline-offset: -4px;*/
3407 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3411 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3412 /* border-color: hsla(210,8%,5%,.6);
3413 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3414 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); */
3417 .devtools-responsiveui-menulist[open=true],
3418 .devtools-responsiveui-toolbarbutton[open=true],
3419 .devtools-responsiveui-toolbarbutton[checked=true] {
3420 /* border-color: hsla(210,8%,5%,.6) !important;
3421 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3422 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); */
3425 .devtools-responsiveui-toolbarbutton[checked=true] {
3426 /* color: hsl(208,100%,60%); */
3429 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3430 /* background-color: transparent !important;*/
3433 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3434 /* background-color: hsla(210,8%,5%,.2) !important;*/
3437 .devtools-responsiveui-menulist > .menulist-label-box {
3441 .devtools-responsiveui-menulist > .menulist-dropmarker {
3442 /* display: -moz-box;
3443 background-color: transparent;
3444 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3445 -moz-box-align: center;
3450 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3453 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3454 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3457 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3458 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3461 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3462 /* padding: 0 1px;*/
3463 -moz-box-align: stretch;
3466 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3467 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3468 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3469 -moz-box-align: center;
3473 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3474 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3478 .devtools-responsiveui-close {
3479 list-style-image: url("chrome://browser/skin/devtools/close.png");
3480 -moz-image-region: rect(0px,16px,16px,0px);
3483 .devtools-responsiveui-close:hover {
3484 -moz-image-region: rect(0px,32px,16px,16px);
3487 .devtools-responsiveui-rotate {
3488 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3489 -moz-image-region: rect(0px,16px,16px,0px);
3492 .devtools-responsiveui-rotate:hover {
3493 -moz-image-region: rect(0px,32px,16px,16px);
3496 .devtools-responsiveui-touch {
3497 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3498 -moz-image-region: rect(0px,16px,16px,0px);
3501 .devtools-responsiveui-touch:hover,
3502 .devtools-responsiveui-touch[checked],
3503 .devtools-responsiveui-touch[checked]:hover {
3504 -moz-image-region: rect(0px,32px,16px,16px);
3507 .devtools-responsiveui-screenshot {
3508 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3509 -moz-image-region: rect(0px,16px,16px,0px);
3512 .devtools-responsiveui-screenshot:hover {
3513 -moz-image-region: rect(0px,32px,16px,16px);
3516 .devtools-responsiveui-resizebarV {
3520 transform: translate(12px, -12px);
3521 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3524 .devtools-responsiveui-resizebarH {
3528 transform: translate(-12px, 12px);
3529 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3532 .devtools-responsiveui-resizehandle {
3536 transform: translate(12px, 12px);
3537 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3540 /* === END responsivedesign.inc.css === */
3542 /* === including indicator.css is done at the start of the file === */
3546 #developer-toolbar-toolbox-button[error-count]:before {
3550 background-color: #FF0000;
3552 -moz-margin-end: 5px;
3555 /* Social toolbar item */
3557 #social-provider-button {
3558 -moz-image-region: rect(0, 16px, 16px, 0);
3559 list-style-image: url("chrome://browser/skin/social/services-16.png");
3562 #social-provider-button > .toolbarbutton-menu-dropmarker {
3566 .toolbarbutton-badge-container {
3572 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3576 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3582 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3586 .toolbarbutton-badge[badge=""] {
3589 .toolbarbutton-badge[badge]:not([badge=""])::after {
3590 /* The |content| property is set in the content stylesheet. */
3595 background-color: #000000;
3596 border: 1px solid #9C9CFF;
3603 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3608 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3613 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3618 #social-notification-icon-mentions {
3619 background-color: #000000;
3621 -moz-margin-start: 2px;
3624 #social-notification-icon-mentions:hover {
3625 background-color: #FFCF00;
3628 #social-notification-icon-mentions[open="true"] {
3629 background-color: #FF9F00;
3632 #social-sidebar-splitter {
3636 .popup-notification-icon[popupid="servicesInstall"] {
3637 list-style-image: url("chrome://browser/skin/social/services-64.png");
3639 #servicesInstall-notification-icon {
3640 list-style-image: url("chrome://browser/skin/social/services-16.png");
3642 #social-undoactivation-button,
3643 #servicesInstall-learnmore-link {
3644 -moz-margin-start: 0; /* override default label margin to match description margin */
3647 #socialActivatedNotification .popup-notification-button-container {
3651 .social-activation-icon {
3658 #social-activation-message {
3662 #social-activation-message > label {
3666 /* social toolbar provider menu */
3667 .social-statusarea-popup {
3670 margin-right: -12px;
3673 .social-statusarea-user {
3674 border-bottom: 1px solid #9C9CFF;
3675 background-color: #000000;
3681 .social-statusarea-user-portrait {
3688 .social-statusarea-loggedInStatus {
3689 background: transparent;
3694 list-style-image: none;
3697 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3698 text-decoration: underline;
3701 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3705 .social-panel-frame {
3706 border-radius: inherit;
3709 /* === BEGIN chat.inc.css === */
3711 #social-sidebar-header {
3715 #social-sidebar-button {
3716 -moz-appearance: none;
3717 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3722 #social-sidebar-button > .toolbarbutton-icon {
3726 #social-sidebar-button:hover,
3727 #social-sidebar-button:hover:active {
3728 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3730 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3734 #social-sidebar-button[loading="true"] {
3735 list-style-image: url("chrome://global/skin/icons/loading.gif");
3738 #social-sidebar-favico {
3751 .chat-toolbarbutton {
3752 -moz-appearance: none;
3760 .chat-toolbarbutton > .toolbarbutton-text {
3764 .chat-toolbarbutton > .toolbarbutton-icon {
3768 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3773 .chat-close-button {
3774 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3775 -moz-image-region: rect(0, 16px, 16px, 0);
3778 .chat-close-button:hover,
3779 .chat-close-button:hover:active {
3780 -moz-image-region: rect(0, 32px, 16px, 16px);
3783 .chat-minimize-button {
3784 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3785 -moz-image-region: rect(16px, 16px, 32px, 0);
3788 .chat-minimize-button:hover:active,
3789 .chat-minimize-button:hover {
3790 -moz-image-region: rect(16px, 32px, 32px, 16px);
3794 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3795 -moz-image-region: rect(48px, 16px, 64px, 0);
3798 .chat-swap-button:hover:active,
3799 .chat-swap-button:hover {
3800 -moz-image-region: rect(48px, 32px, 64px, 16px);
3803 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3804 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3805 -moz-image-region: rect(32px, 16px, 48px, 0);
3808 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3809 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3810 -moz-image-region: rect(32px, 32px, 48px, 16px);
3815 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3821 background-color: #9C9CFF;
3828 -moz-padding-start: 6px;
3830 border-bottom: 1px solid #008484;
3834 .chat-titlebar > .notification-anchor-icon {
3839 .chat-titlebar[minimized="true"] {
3840 border-bottom: none;
3843 .chat-titlebar[selected] {
3844 background-color: #008484;
3847 .chat-titlebar[activity] {
3848 background-color: #E7ADE7;
3858 list-style-image: url("chrome://browser/skin/social/services-16.png");
3859 background-color: #000000;
3865 border-top: 1px solid #008484;
3866 -moz-border-end: 1px solid #008484;
3869 @media (min-resolution: 2dppx) {
3871 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3875 .chatbar-button > .toolbarbutton-icon {
3879 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3886 .chatbar-button > .toolbarbutton-icon {
3890 .chatbar-button:hover > .toolbarbutton-icon,
3891 .chatbar-button[open="true"] > .toolbarbutton-icon {
3895 .chatbar-button:hover,
3896 .chatbar-button[open="true"] {
3899 .chatbar-button > .toolbarbutton-text,
3900 .chatbar-button > .toolbarbutton-menu-dropmarker {
3904 .chatbar-button[activity]:not([open="true"]) {
3905 background-color: #E7ADE7;
3908 .chatbar-button > menupopup > menuitem[activity] {
3913 background: transparent;
3919 -moz-margin-end: 20px;
3925 -moz-margin-start: 4px;
3926 background-color: #000000;
3927 border: 1px solid #9C9CFF;
3928 border-bottom: none;
3929 border-top-left-radius: 2.5px;
3930 border-top-right-radius: 2.5px;
3933 chatbox[minimized="true"] {
3939 -moz-margin-start: 0px;
3945 /* === END chat.inc.css === */
3948 /* background-color: #c4cfde; */
3951 .chat-titlebar[selected] {
3952 /* background-color: #dae3f0; */
3956 -moz-appearance: none;
3957 /* background-color: #c4cfde; */
3960 .chatbar-button > .toolbarbutton-icon {
3961 /* -moz-margin-end: 0; */
3964 .chatbar-button:hover,
3965 .chatbar-button[open="true"] {
3966 /* background-color: #dae3f0; */
3969 .chatbar-button[activity]:not([open="true"]) {
3973 /* border-top-left-radius: 2.5px;
3974 border-top-right-radius: 2.5px; */
3977 /* === BEGIN plugin-doorhanger.inc.css === */
3980 * Plugin Doorhanger Styles
3983 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
3984 padding: 6px 1px 2px;
3987 .click-to-play-plugins-notification-center-box {
3990 .plugin-popupnotification-centeritem:nth-child(odd) {
3991 /* background-color: rgba(0,0,0,0.1);*/
3994 .center-item-label {
3996 text-overflow: ellipsis;
3999 .center-item-warning-icon {
4000 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4001 background-repeat: no-repeat;
4004 -moz-margin-start: 6px;
4007 .click-to-play-plugins-notification-button-container {
4010 .click-to-play-popup-button {
4014 .click-to-play-plugins-notification-description-box {
4018 padding-bottom: 3px;
4021 .click-to-play-plugins-outer-description {
4025 .click-to-play-plugins-notification-link,
4030 .messageImage[value="plugin-hidden"] {
4031 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4034 /* Keep any changes to this style in sync with pluginProblem.css */
4035 notification.pluginVulnerable {
4038 notification.pluginVulnerable .messageImage {
4039 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4042 /* === END plugin-doorhanger.inc.css === */
4044 /* === BEGIN customizeMode.inc.css === */
4046 /* Customization mode */
4048 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck {
4052 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4057 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4058 pointer-events: none;
4061 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4062 #PanelUI-contents > .panel-customization-placeholder {
4063 -moz-outline-radius: 2.5px;
4064 outline: 1px dashed transparent;
4067 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4068 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4069 -moz-box-ordinal-group: 0;
4074 outline-offset: -2px;
4075 pointer-events: none;
4081 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4082 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4083 offset from the bottom effectively the same as other targets (-2px). */
4084 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4088 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4089 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4090 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4091 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4095 /* Most target outlines are shown on hover and drag over but the panel menu uses
4096 placeholders instead. */
4097 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4098 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4099 /* nav-bar and panel outlines are always shown */
4100 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4101 outline-color: #A09090;
4104 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4105 transition: outline-color 250ms linear;
4108 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4109 transition: outline-color 250ms linear;
4110 outline-color: #9C9CFF;
4113 #PanelUI-contents > .panel-customization-placeholder {
4115 outline-offset: -5px;
4118 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4120 /* padding-left: 10px;
4121 padding-right: 10px;*/
4124 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4128 #customization-container {
4129 background-color: #000000;
4132 #customization-palette,
4133 #customization-empty {
4134 padding: 0 15px 15px;
4137 #customization-header {
4141 font-weight: lighter;
4143 padding: 15px 15px 0;
4146 #customization-panel-container {
4147 padding: 10px 10px 0px;
4150 #customization-footer {
4151 /*background-color: rgb(236,236,236);*/
4152 border-top: 1px solid #9C9CFF;
4156 .customizationmode-button {
4160 .customizationmode-button:hover {
4163 .customizationmode-button[disabled="true"] {
4166 #customization-titlebar-visibility-button {
4167 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4168 -moz-image-region: rect(0, 24px, 24px, 0);
4170 -moz-margin-end: 10px;
4173 #customization-titlebar-visibility-button > .button-box > .button-text {
4174 /* Sadly, button.css thinks its margins are perfect for everyone. */
4175 -moz-margin-start: 6px !important;
4178 #customization-titlebar-visibility-button[checked] {
4179 -moz-image-region: rect(0, 48px, 24px, 24px);
4180 background-color: #008484;
4183 #customization-undo-reset-button {
4184 -moz-margin-end: 10px;
4187 #main-window[customize-entered] #customization-panel-container {
4188 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4189 background-position: left top;
4190 background-repeat: repeat;
4191 background-size: auto;
4192 background-attachment: fixed;
4195 toolbarpaletteitem[place="toolbar"] {
4196 transition: border-width 250ms ease-in-out;
4199 toolbarpaletteitem[mousedown] {
4200 outline: 1px solid #008484;
4201 cursor: -moz-grabbing;
4205 .panel-customization-placeholder,
4206 toolbarpaletteitem[place="palette"],
4207 toolbarpaletteitem[place="panel"] {
4208 transition: transform .3s ease-in-out;
4211 #customization-palette {
4212 transition: opacity .3s ease-in-out;
4216 #customization-palette[showing="true"] {
4220 toolbarpaletteitem[notransition].panel-customization-placeholder,
4221 toolbarpaletteitem[notransition][place="toolbar"],
4222 toolbarpaletteitem[notransition][place="palette"],
4223 toolbarpaletteitem[notransition][place="panel"] {
4227 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4228 toolbarpaletteitem > toolbaritem.panel-wide-item,
4229 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4230 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4233 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4234 transform: scale(1.3);
4237 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4238 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4239 transform: scale(1.1);
4242 /* Override the toolkit styling for items being dragged over. */
4243 toolbarpaletteitem[place="toolbar"] {
4244 border-left-width: 0;
4245 border-right-width: 0;
4250 #customization-palette:not([hidden]) {
4251 margin-bottom: 25px;
4254 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4255 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4256 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4257 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4261 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4262 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4272 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4273 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4277 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4278 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4281 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4282 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4286 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4287 -moz-box-pack: center;
4291 #customization-palette > toolbarpaletteitem > label {
4297 /* === END customizeMode.inc.css === */
4299 /* === BEGIN customizeTip.inc.css === */
4301 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4308 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4309 border: 1px solid #9C9CFF;
4312 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4313 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4316 .customization-tipPanel-infoBox {
4317 margin: 20px 25px 25px;
4319 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4320 background-repeat: no-repeat;
4323 .customization-tipPanel-content {
4329 .customization-tipPanel-em {
4334 .customization-tipPanel-contentImage {
4336 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4344 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4345 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4348 .customization-tipPanel-link {
4349 -moz-appearance: none;
4350 background: transparent;
4358 .customization-tipPanel-link > .button-box > .button-text {
4359 margin: 0 !important;
4362 .customization-tipPanel-closeBox > .close-icon {
4363 -moz-appearance: none;
4365 -moz-margin-end: -25px;
4368 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4369 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4370 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4373 /* === END customizeTip.inc.css === */
4376 * This next rule is a hack to disable subpixel anti-aliasing on all
4377 * labels during the customize mode transition. Subpixel anti-aliasing
4378 * on Windows with Direct2D layers acceleration is particularly slow to
4379 * paint, so this hack is how we sidestep that performance bottleneck.
4381 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4382 transform: perspective(0.01px);
4385 #main-window[customize-entered] {
4386 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4387 background-attachment: fixed;
4390 #customization-container {
4391 border-left: 1px solid #9C9CFF;
4392 border-right: 1px solid #9C9CFF;
4393 background-clip: padding-box;
4396 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4400 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4404 /* End customization mode */
4406 #main-window[privatebrowsingmode=temporary] #toolbar-menubar {
4407 background-image: url("chrome://browser/skin/privatebrowsing-dark.png");
4408 background-position: top right;
4409 background-repeat: no-repeat;
4412 #main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) {
4413 background-position: top left;
4416 #main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon {
4417 list-style-image: url("chrome://browser/skin/privatebrowsing-light.png");
4422 #main-window[privatebrowsingmode=temporary] #TabsToolbar::after {
4426 background: url("chrome://browser/skin/privatebrowsing-indicator.png") no-repeat center center;
4429 /* === BEGIN UITour.inc.css === */
4433 #UITourHighlightContainer {
4434 -moz-appearance: none;
4436 background-color: transparent;
4437 /* This is a buffer to compensate for the movement in the "wobble" effect */
4442 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4443 border-radius: 40px;
4444 border: 1px solid #9C9CFF;
4445 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4446 on Linux without an X compositor where opacity is either 0 or 1. */
4447 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4452 #UITourTooltipBody {
4453 -moz-margin-end: 14px;
4456 #UITourTooltipBody > vbox {
4460 #UITourTooltipIconContainer {
4461 -moz-margin-start: -16px;
4464 #UITourTooltipIcon {
4467 -moz-margin-start: 28px;
4468 -moz-margin-end: 28px;
4471 #UITourTooltipTitle,
4472 #UITourTooltipDescription {
4476 #UITourTooltipTitle {
4479 -moz-margin-start: 0;
4484 #UITourTooltipDescription {
4485 -moz-margin-start: 0;
4488 line-height: 1.8rem;
4489 margin-bottom: 0; /* Override global.css */
4492 #UITourTooltipClose {
4493 -moz-appearance: none;
4495 background-color: transparent;
4497 -moz-margin-start: 4px;
4501 #UITourTooltipClose > .toolbarbutton-text {
4505 #UITourTooltipButtons {
4507 background-color: rgba(0,0,0,.2);
4508 border-top: 1px solid rgba(0,0,0,.4);
4509 margin: 24px -16px -16px;
4513 #UITourTooltipButtons > button {
4517 #UITourTooltipButtons > button:first-child {
4518 -moz-margin-start: 0;
4521 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4524 -moz-margin-end: 5px;
4527 #UITourTooltipButtons > button .button-text {
4531 #UITourTooltipButtons > button:not(.button-link) {
4532 -moz-appearance: none;
4533 background-color: #C09070;
4534 border-radius: 3000px;
4538 transition-property: background-color, color;
4539 transition-duration: 150ms;
4542 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4543 background-color: #FFCF00;
4547 #UITourTooltipButtons > button.button-link {
4548 -moz-appearance: none;
4549 background: transparent;
4552 color: rgba(0,0,0,0.35);
4554 padding-right: 10px;
4557 #UITourTooltipButtons > button.button-link:hover {
4561 /* The primary button gets the same color as the customize button. */
4562 #UITourTooltipButtons > button.button-primary {
4563 background-color: #A06060; /* LCARS default button background color */
4566 padding-right: 30px;
4569 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4570 background-color: #FFCF00;
4574 /* === END UITour.inc.css === */
4576 #UITourTooltipButtons {
4577 margin: 24px -4px -4px;