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, but only for tabsintitlebar. Otherwise (Aero Glass, Windows 8),
131 * this is hardcoded to black in browser-aero.css, even without tabsintitlebar. */
132 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
133 /* color: inherit; */
137 /* Position the toolbar above the bottom of background tabs */
142 #personal-bookmarks {
143 /* min-height: 24px; */
146 #print-preview-toolbar:not(:-moz-lwtheme) {
147 /* -moz-appearance: toolbox; */
150 #browser-bottombox:not(:-moz-lwtheme) {
153 /* ::::: titlebar ::::: */
157 background-color: #6000CF;
160 #titlebar:-moz-window-inactive {
161 background-color: #8050B0;
165 #main-window[sizemode="normal"] > #titlebar {
170 #main-window[sizemode="maximized"] > #titlebar {
174 /* The button box must appear on top of the navigator-toolbox in order for
175 * click and hover mouse events to work properly for the button in the restored
176 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
177 * can swallow those events. It will also place the buttons above the fog on
178 * themes with Aero Glass.
180 #titlebar-buttonbox {
182 -moz-margin-end: 3px;
186 .titlebar-placeholder[type="appmenu-button"] {
190 .titlebar-placeholder[type="caption-buttons"] {
194 /* titlebar command buttons */
197 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
200 #titlebar-min:hover {
201 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
205 list-style-image: url("chrome://browser/skin/win-maximize.gif");
208 #titlebar-max:hover {
209 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
212 #main-window[sizemode="maximized"] #titlebar-max {
213 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
216 #main-window[sizemode="maximized"] #titlebar-max:hover {
217 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
221 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
224 #titlebar-close:hover {
225 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
228 /* ::::: bookmark buttons ::::: */
230 toolbarbutton.bookmark-item:not(.subviewbutton),
231 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
236 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
237 toolbarbutton.bookmark-item[open="true"] {
240 -moz-padding-start: 4px;
241 -moz-padding-end: 2px;*/
244 .bookmark-item > .toolbarbutton-icon,
245 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
250 /* Force the display of the label for bookmarks */
251 .bookmark-item > .toolbarbutton-text,
252 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
253 display: -moz-box !important;
256 .bookmark-item > .toolbarbutton-menu-dropmarker {
260 #bookmarks-toolbar-placeholder {
261 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
264 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
265 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
266 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
269 /* ----- BOOKMARK STAR ANIMATION ----- */
271 @keyframes animation-bookmarkAdded {
272 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
273 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
275 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
278 @keyframes animation-bookmarkPulse {
279 from { transform: scale(1); }
280 50% { transform: scale(1.3); }
281 to { transform: scale(1); }
284 #bookmarked-notification-container {
293 #bookmarked-notification {
294 background-size: 16px;
295 background-position: center;
296 background-repeat: no-repeat;
302 #bookmarked-notification-dropmarker-anchor {
307 #bookmarked-notification-dropmarker-icon {
313 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
314 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
315 animation: animation-bookmarkAdded 800ms;
316 animation-timing-function: ease, ease, ease;
319 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
320 list-style-image: none !important;
323 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
325 animation: animation-bookmarkPulse 300ms;
326 animation-delay: 600ms;
327 animation-timing-function: ease-out;
330 /* ::::: bookmark menus ::::: */
333 menuitem.bookmark-item {
338 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
343 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
344 -moz-padding-start: 0px;
347 /* ::::: bookmark items ::::: */
350 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
351 -moz-image-region: auto;
354 .bookmark-item[container] {
355 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
356 -moz-image-region: auto;
359 .bookmark-item[container][open] {
360 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
361 -moz-image-region: auto;
364 .bookmark-item[container][livemark] {
365 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
366 -moz-image-region: auto;
369 .bookmark-item[container][livemark] .bookmark-item {
370 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
371 -moz-image-region: rect(0px, 16px, 16px, 0px);
374 .bookmark-item[container][livemark] .bookmark-item[visited] {
375 -moz-image-region: rect(0px, 32px, 16px, 16px);
378 .bookmark-item[container][query] {
379 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
380 -moz-image-region: auto;
383 .bookmark-item[query][tagContainer] {
384 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
385 -moz-image-region: auto;
388 .bookmark-item[query][dayContainer] {
389 list-style-image: url("chrome://communicator/skin/history/calendar.png");
390 -moz-image-region: auto;
393 .bookmark-item[query][hostContainer] {
394 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
395 -moz-image-region: auto;
398 .bookmark-item[query][hostContainer][open] {
399 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
400 -moz-image-region: auto;
403 .bookmark-item[cutting] > .toolbarbutton-icon,
404 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
408 .bookmark-item[cutting] > .toolbarbutton-text,
409 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
413 /* ::::: primary toolbar buttons ::::: */
415 /* === BEGIN toolbarbuttons.inc.css === */
417 /* Whole section of this included file: */
418 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
419 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
420 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
421 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
422 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
423 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
424 #copy-button, #paste-button, #e10s-button),
426 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
427 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
431 -moz-image-region: rect(0, 36px, 18px, 18px);
434 #back-button:hover:not([disabled="true"]) {
435 -moz-image-region: rect(18px, 36px, 36px, 18px);
438 #back-button[disabled="true"] {
439 -moz-image-region: rect(36px, 36px, 54px, 18px);
443 -moz-image-region: rect(0, 72px, 18px, 54px);
446 #forward-button:hover:not([disabled="true"]) {
447 -moz-image-region: rect(18px, 72px, 36px, 54px);
450 #forward-button[disabled="true"] {
451 -moz-image-region: rect(36px, 72px, 54px, 54px);
454 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
455 #forward-button:-moz-locale-dir(rtl) {
456 transform: scaleX(-1);
459 #home-button[cui-areatype="toolbar"] {
460 -moz-image-region: rect(0, 126px, 18px, 108px);
463 #home-button[cui-areatype="toolbar"]:hover {
464 -moz-image-region: rect(18px, 126px, 36px, 108px);
467 #bookmarks-menu-button[cui-areatype="toolbar"] {
468 -moz-image-region: rect(0, 144px, 18px, 126px);
471 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
472 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
473 -moz-image-region: rect(18px, 144px, 36px, 126px);
476 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
477 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
478 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
479 background-color: transparent !important;
482 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
483 -moz-image-region: rect(0, 162px, 18px, 144px);
486 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
487 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
488 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
489 /* When starred and clicked (for edit/delete dialog),
490 * then only the menubutton-button itself is open, but not the whole menubutton. */
491 -moz-image-region: rect(18px, 162px, 36px, 144px);
494 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
495 -moz-image-region: rect(0, 630px, 18px, 612px);
498 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
500 -moz-box-align: center;
503 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
504 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
505 -moz-image-region: rect(18px, 630px, 36px, 612px);
508 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
509 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
512 -moz-padding-start: 2px;
513 -moz-padding-end: 0px;
516 #history-panelmenu[cui-areatype="toolbar"] {
517 -moz-image-region: rect(0, 180px, 18px, 162px);
520 #history-panelmenu[cui-areatype="toolbar"]:hover,
521 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
522 -moz-image-region: rect(18px, 180px, 36px, 162px);
525 #downloads-button[cui-areatype="toolbar"] {
526 -moz-image-region: rect(0, 198px, 18px, 180px);
529 #downloads-button[cui-areatype="toolbar"]:hover,
530 #downloads-button[cui-areatype="toolbar"][open="true"] {
531 -moz-image-region: rect(18px, 198px, 36px, 180px);
534 #add-ons-button[cui-areatype="toolbar"] {
535 -moz-image-region: rect(0, 216px, 18px, 198px);
538 #add-ons-button[cui-areatype="toolbar"]:hover {
539 -moz-image-region: rect(18px, 216px, 36px, 198px);
542 #open-file-button[cui-areatype="toolbar"] {
543 -moz-image-region: rect(0, 234px, 18px, 216px);
546 #open-file-button[cui-areatype="toolbar"]:hover {
547 -moz-image-region: rect(18px, 234px, 36px, 216px);
550 #save-page-button[cui-areatype="toolbar"] {
551 -moz-image-region: rect(0, 252px, 18px, 234px);
554 #save-page-button[cui-areatype="toolbar"]:hover {
555 -moz-image-region: rect(18px, 252px, 36px, 234px);
558 #sync-button[cui-areatype="toolbar"] {
559 -moz-image-region: rect(0, 270px, 18px, 252px);
562 #sync-button[cui-areatype="toolbar"]:hover {
563 -moz-image-region: rect(18px, 270px, 36px, 252px);
566 #sync-button[cui-areatype="toolbar"][status="active"],
567 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
568 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
569 -moz-image-region: rect(0, 18px, 18px, 0px);
573 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
574 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
575 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
579 #feed-button[cui-areatype="toolbar"] {
580 -moz-image-region: rect(0, 288px, 18px, 270px);
583 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
584 -moz-image-region: rect(18px, 288px, 36px, 270px);
587 #feed-button[cui-areatype="toolbar"][disabled="true"] {
588 -moz-image-region: rect(36px, 288px, 54px, 270px);
591 #social-share-button[cui-areatype="toolbar"] {
592 -moz-image-region: rect(0px, 306px, 18px, 288px);
595 #social-share-button[cui-areatype="toolbar"]:hover {
596 -moz-image-region: rect(18px, 306px, 36px, 288px);
599 #characterencoding-button[cui-areatype="toolbar"] {
600 -moz-image-region: rect(0, 324px, 18px, 306px);
603 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
604 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
605 -moz-image-region: rect(18px, 324px, 36px, 306px);
608 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
609 -moz-image-region: rect(36px, 324px, 54px, 306px);
612 #new-window-button[cui-areatype="toolbar"] {
613 -moz-image-region: rect(0, 342px, 18px, 324px);
616 #new-window-button[cui-areatype="toolbar"]:hover {
617 -moz-image-region: rect(18px, 342px, 36px, 324px);
620 #e10s-button[cui-areatype="toolbar"] {
621 -moz-image-region: rect(0, 342px, 18px, 324px);
624 #e10s-button[cui-areatype="toolbar"]:hover {
625 -moz-image-region: rect(18px, 342px, 36px, 324px);
628 #e10s-button > .toolbarbutton-icon {
629 transform: scaleY(-1);
632 #new-tab-button[cui-areatype="toolbar"] {
633 -moz-image-region: rect(0, 360px, 18px, 342px);
636 #new-tab-button[cui-areatype="toolbar"]:hover {
637 -moz-image-region: rect(18px, 360px, 36px, 342px);
640 #privatebrowsing-button[cui-areatype="toolbar"] {
641 -moz-image-region: rect(0, 378px, 18px, 360px);
644 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
645 -moz-image-region: rect(18px, 378px, 36px, 360px);
648 #find-button[cui-areatype="toolbar"] {
649 -moz-image-region: rect(0, 396px, 18px, 378px);
652 #find-button[cui-areatype="toolbar"]:hover {
653 -moz-image-region: rect(18px, 396px, 36px, 378px);
656 #print-button[cui-areatype="toolbar"] {
657 -moz-image-region: rect(0, 414px, 18px, 396px);
660 #print-button[cui-areatype="toolbar"]:hover {
661 -moz-image-region: rect(18px, 414px, 36px, 396px);
664 #fullscreen-button[cui-areatype="toolbar"] {
665 -moz-image-region: rect(0, 432px, 18px, 414px);
668 #fullscreen-button[cui-areatype="toolbar"]:hover {
669 -moz-image-region: rect(18px, 432px, 36px, 414px);
672 #developer-button[cui-areatype="toolbar"] {
673 -moz-image-region: rect(0, 450px, 18px, 432px);
676 #developer-button[cui-areatype="toolbar"]:hover,
677 #developer-button[cui-areatype="toolbar"][open="true"] {
678 -moz-image-region: rect(18px, 450px, 36px, 432px);
681 #preferences-button[cui-areatype="toolbar"] {
682 -moz-image-region: rect(0, 468px, 18px, 450px);
685 #preferences-button[cui-areatype="toolbar"]:hover {
686 -moz-image-region: rect(18px, 468px, 36px, 450px);
689 #PanelUI-menu-button {
690 -moz-image-region: rect(0, 486px, 18px, 468px);
693 #PanelUI-menu-button:hover,
694 #PanelUI-menu-button[open="true"] {
695 -moz-image-region: rect(18px, 486px, 36px, 468px);
698 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
699 -moz-image-region: rect(0, 504px, 18px, 486px);
702 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
703 -moz-image-region: rect(18px, 504px, 36px, 486px);
706 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
707 -moz-image-region: rect(36px, 504px, 54px, 486px);
710 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
711 -moz-image-region: rect(0, 522px, 18px, 504px);
714 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
715 -moz-image-region: rect(18px, 522px, 36px, 504px);
718 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
719 -moz-image-region: rect(36px, 522px, 54px, 504px);
722 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
723 -moz-image-region: rect(0, 540px, 18px, 522px);
726 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
727 -moz-image-region: rect(18px, 540px, 36px, 522px);
730 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
731 -moz-image-region: rect(36px, 540px, 54px, 522px);
734 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
735 -moz-image-region: rect(0, 558px, 18px, 540px);
738 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
739 -moz-image-region: rect(18px, 558px, 36px, 540px);
742 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
743 -moz-image-region: rect(36px, 558px, 54px, 540px);
746 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
747 -moz-image-region: rect(0, 576px, 18px, 558px);
750 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
751 -moz-image-region: rect(18px, 576px, 36px, 558px);
754 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
755 -moz-image-region: rect(36px, 576px, 54px, 558px);
758 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) {
759 -moz-image-region: rect(0, 594px, 18px, 576px);
762 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])):hover,
763 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]))[open="true"] {
764 -moz-image-region: rect(18px, 594px, 36px, 576px);
767 #nav-bar-overflow-button {
768 -moz-image-region: rect(0, 612px, 18px, 594px);
771 #nav-bar-overflow-button:hover,
772 #nav-bar-overflow-button[open="true"] {
773 -moz-image-region: rect(18px, 612px, 36px, 594px);
776 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
777 transform: scaleX(-1);
781 -moz-image-region: rect(0, 648px, 18px, 630px);
784 #tabview-button:hover {
785 -moz-image-region: rect(18px, 648px, 36px, 630px);
788 #email-link-button[cui-areatype="toolbar"] {
789 -moz-image-region: rect(0, 666px, 18px, 648px);
792 #email-button[cui-areatype="toolbar"]:hover {
793 -moz-image-region: rect(18px, 666px, 36px, 648px);
796 #sidebar-button[cui-areatype="toolbar"] {
797 -moz-image-region: rect(0, 684px, 18px, 666px);
800 #sidebar-button[cui-areatype="toolbar"]:hover {
801 -moz-image-region: rect(18px, 684px, 36px, 666px);
804 /* === END toolbarbuttons.inc.css === */
806 /* === BEGIN menupanel.inc.css === */
808 /* Menu panel and palette styles */
810 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
811 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
812 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
813 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
814 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
815 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
816 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
817 #copy-button, #paste-button, #e10s-button)[cui-areatype="menu-panel"],
818 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
819 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
820 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
821 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
822 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
823 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
824 #copy-button, #paste-button, #e10s-button) {
825 list-style-image: url("chrome://browser/skin/menuPanel.png");
828 #home-button[cui-areatype="menu-panel"],
829 toolbarpaletteitem[place="palette"] > #home-button {
830 -moz-image-region: rect(0px, 128px, 32px, 96px);
833 #home-button[cui-areatype="menu-panel"]:hover,
834 toolbarpaletteitem[place="palette"] > #home-button:hover {
835 -moz-image-region: rect(32px, 128px, 64px, 96px);
838 #bookmarks-menu-button[cui-areatype="menu-panel"],
839 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
840 -moz-image-region: rect(0px, 192px, 32px, 160px);
843 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
844 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
845 -moz-image-region: rect(32px, 192px, 64px, 160px);
848 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
849 -moz-image-region: rect(32px, 192px, 64px, 160px);
852 #history-panelmenu[cui-areatype="menu-panel"],
853 toolbarpaletteitem[place="palette"] > #history-panelmenu {
854 -moz-image-region: rect(0px, 224px, 32px, 192px);
857 #history-panelmenu[cui-areatype="menu-panel"]:hover,
858 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
859 -moz-image-region: rect(32px, 224px, 64px, 192px);
862 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
863 -moz-image-region: rect(32px, 224px, 64px, 192px);
866 #downloads-button[cui-areatype="menu-panel"],
867 toolbarpaletteitem[place="palette"] > #downloads-button {
868 -moz-image-region: rect(0px, 256px, 32px, 224px);
871 #downloads-button[cui-areatype="menu-panel"]:hover,
872 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
873 -moz-image-region: rect(32px, 256px, 64px, 224px);
876 #add-ons-button[cui-areatype="menu-panel"],
877 toolbarpaletteitem[place="palette"] > #add-ons-button {
878 -moz-image-region: rect(0px, 288px, 32px, 256px);
881 #add-ons-button[cui-areatype="menu-panel"]:hover,
882 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
883 -moz-image-region: rect(32px, 288px, 64px, 256px);
886 #open-file-button[cui-areatype="menu-panel"],
887 toolbarpaletteitem[place="palette"] > #open-file-button {
888 -moz-image-region: rect(0px, 320px, 32px, 288px);
891 #open-file-button[cui-areatype="menu-panel"]:hover,
892 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
893 -moz-image-region: rect(32px, 320px, 64px, 288px);
896 #save-page-button[cui-areatype="menu-panel"],
897 toolbarpaletteitem[place="palette"] > #save-page-button {
898 -moz-image-region: rect(0px, 352px, 32px, 320px);
901 #save-page-button[cui-areatype="menu-panel"]:hover,
902 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
903 -moz-image-region: rect(32px, 352px, 64px, 320px);
906 #sync-button[cui-areatype="menu-panel"],
907 toolbarpaletteitem[place="palette"] > #sync-button {
908 -moz-image-region: rect(0px, 384px, 32px, 352px);
911 #sync-button[cui-areatype="menu-panel"]:hover,
912 toolbarpaletteitem[place="palette"] > #sync-button:hover {
913 -moz-image-region: rect(32px, 384px, 64px, 352px);
916 #sync-button[cui-areatype="menu-panel"][status="active"] {
917 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
918 -moz-image-region: rect(0px, 32px, 32px, 0px);
921 #feed-button[cui-areatype="menu-panel"],
922 toolbarpaletteitem[place="palette"] > #feed-button {
923 -moz-image-region: rect(0px, 416px, 32px, 384px);
926 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
927 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
928 -moz-image-region: rect(32px, 416px, 64px, 384px);
931 #feed-button[cui-areatype="menu-panel"][disabled="true"],
932 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
933 -moz-image-region: rect(64px, 416px, 96px, 384px);
936 #social-share-button[cui-areatype="menu-panel"],
937 toolbarpaletteitem[place="palette"] > #social-share-button {
938 -moz-image-region: rect(0px, 448px, 32px, 416px);
941 #social-share-button[cui-areatype="menu-panel"]:hover,
942 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
943 -moz-image-region: rect(32px, 448px, 64px, 416px);
946 #characterencoding-button[cui-areatype="menu-panel"],
947 toolbarpaletteitem[place="palette"] > #characterencoding-button {
948 -moz-image-region: rect(0px, 480px, 32px, 448px);
951 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
952 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
953 -moz-image-region: rect(32px, 480px, 64px, 448px);
956 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
957 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
958 -moz-image-region: rect(64px, 480px, 96px, 448px);
961 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
962 -moz-image-region: rect(32px, 480px, 64px, 448px);
965 #new-window-button[cui-areatype="menu-panel"],
966 toolbarpaletteitem[place="palette"] > #new-window-button {
967 -moz-image-region: rect(0px, 512px, 32px, 480px);
970 #new-window-button[cui-areatype="menu-panel"]:hover,
971 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
972 -moz-image-region: rect(32px, 512px, 64px, 480px);
975 #e10s-button[cui-areatype="menu-panel"],
976 toolbarpaletteitem[place="palette"] > #e10s-button {
977 -moz-image-region: rect(0px, 512px, 32px, 480px);
980 #e10s-button[cui-areatype="menu-panel"]:hover,
981 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
982 -moz-image-region: rect(32px, 512px, 64px, 480px);
985 #new-tab-button[cui-areatype="menu-panel"],
986 toolbarpaletteitem[place="palette"] > #new-tab-button {
987 -moz-image-region: rect(0px, 544px, 32px, 512px);
990 #new-tab-button[cui-areatype="menu-panel"]:hover,
991 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
992 -moz-image-region: rect(32px, 544px, 64px, 512px);
995 #privatebrowsing-button[cui-areatype="menu-panel"],
996 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
997 -moz-image-region: rect(0px, 576px, 32px, 544px);
1000 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1001 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1002 -moz-image-region: rect(32px, 576px, 64px, 544px);
1005 #tabview-button[cui-areatype="menu-panel"],
1006 toolbarpaletteitem[place="palette"] > #tabview-button {
1007 -moz-image-region: rect(0px, 608px, 32px, 576px);
1010 #tabview-button[cui-areatype="menu-panel"]:hover,
1011 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1012 -moz-image-region: rect(32px, 608px, 64px, 576px);
1015 #find-button[cui-areatype="menu-panel"],
1016 toolbarpaletteitem[place="palette"] > #find-button {
1017 -moz-image-region: rect(0px, 640px, 32px, 608px);
1020 #find-button[cui-areatype="menu-panel"]:hover,
1021 toolbarpaletteitem[place="palette"] > #find-button:hover {
1022 -moz-image-region: rect(32px, 640px, 64px, 608px);
1025 #print-button[cui-areatype="menu-panel"],
1026 toolbarpaletteitem[place="palette"] > #print-button {
1027 -moz-image-region: rect(0px, 672px, 32px, 640px);
1030 #print-button[cui-areatype="menu-panel"]:hover,
1031 toolbarpaletteitem[place="palette"] > #print-button:hover {
1032 -moz-image-region: rect(32px, 672px, 64px, 640px);
1035 #fullscreen-button[cui-areatype="menu-panel"],
1036 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1037 -moz-image-region: rect(0px, 704px, 32px, 672px);
1040 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1041 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1042 -moz-image-region: rect(32px, 704px, 64px, 672px);
1045 #developer-button[cui-areatype="menu-panel"],
1046 toolbarpaletteitem[place="palette"] > #developer-button {
1047 -moz-image-region: rect(0px, 736px, 32px, 704px);
1050 #developer-button[cui-areatype="menu-panel"]:hover,
1051 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1052 -moz-image-region: rect(32px, 736px, 64px, 704px);
1055 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1056 -moz-image-region: rect(32px, 736px, 64px, 704px);
1059 #preferences-button[cui-areatype="menu-panel"],
1060 toolbarpaletteitem[place="palette"] > #preferences-button {
1061 -moz-image-region: rect(0px, 768px, 32px, 736px);
1064 #preferences-button[cui-areatype="menu-panel"]:hover,
1065 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1066 -moz-image-region: rect(32px, 768px, 64px, 736px);
1069 #email-link-button[cui-areatype="menu-panel"],
1070 toolbarpaletteitem[place="palette"] > #email-link-button {
1071 -moz-image-region: rect(0, 800px, 32px, 768px);
1074 #email-link-button[cui-areatype="menu-panel"]:hover,
1075 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
1076 -moz-image-region: rect(32px, 800px, 64px, 768px);
1079 #sidebar-button[cui-areatype="menu-panel"],
1080 toolbarpaletteitem[place="palette"] > #sidebar-button {
1081 -moz-image-region: rect(0, 864px, 32px, 832px);
1084 #sidebar-button[cui-areatype="menu-panel"]:hover,
1085 toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
1086 -moz-image-region: rect(32px, 864px, 64px, 832px);
1089 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1090 -moz-image-region: rect(32px, 864px, 64px, 832px);
1093 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1094 -moz-image-region: rect(0, 832px, 32px, 800px);
1097 /* Wide panel control icons */
1099 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1100 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1101 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1102 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1103 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1106 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1107 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1108 -moz-image-region: rect(0px, 32px, 16px, 16px);
1111 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1112 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1113 -moz-image-region: rect(16px, 32px, 32px, 16px);
1116 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1117 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1118 -moz-image-region: rect(32px, 32px, 48px, 16px);
1121 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1122 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1123 -moz-image-region: rect(0px, 48px, 16px, 32px);
1126 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1127 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1128 -moz-image-region: rect(16px, 48px, 32px, 32px);
1131 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1132 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1133 -moz-image-region: rect(32px, 48px, 48px, 32px);
1136 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1137 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1138 -moz-image-region: rect(0px, 64px, 16px, 48px);
1141 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1142 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1143 -moz-image-region: rect(16px, 64px, 32px, 48px);
1146 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1147 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1148 -moz-image-region: rect(32px, 64px, 48px, 48px);
1151 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1152 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1153 -moz-image-region: rect(0px, 80px, 16px, 64px);
1156 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1157 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1158 -moz-image-region: rect(16px, 80px, 32px, 64px);
1161 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1162 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1163 -moz-image-region: rect(32px, 80px, 48px, 64px);
1166 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1167 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1168 -moz-image-region: rect(0px, 96px, 16px, 80px);
1171 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1172 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1173 -moz-image-region: rect(16px, 96px, 32px, 80px);
1176 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1177 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1178 -moz-image-region: rect(32px, 96px, 48px, 80px);
1181 /* === END menupanel.inc.css === */
1183 .toolbarbutton-1:not([type="menu-button"]) {
1184 -moz-box-orient: vertical;
1188 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1194 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1195 .toolbarbutton-1[disabled="true"]:hover:active,
1196 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1200 .toolbarbutton-1:hover:active,
1201 .toolbarbutton-1[open="true"],
1202 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1204 padding-bottom: 0px;
1205 -moz-padding-start: 3px;
1206 -moz-padding-end: 1px;
1209 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1210 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1211 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1212 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1213 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1216 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1217 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1220 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1221 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1224 .toolbarbutton-1 > .toolbarbutton-icon,
1225 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1228 #nav-bar .toolbarbutton-1,
1229 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1232 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1233 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1234 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1237 #nav-bar #PanelUI-menu-button {
1238 /* -moz-padding-start: 7px;
1239 -moz-padding-end: 5px;*/
1242 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1243 /* padding-left: 5px;
1244 padding-right: 5px;*/
1247 #nav-bar .toolbarbutton-1 > menupopup {
1248 /* margin-top: -3px;*/
1251 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1252 /* margin-top: -8px;*/
1255 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1256 /* -moz-padding-end: 0;*/
1259 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1260 /* -moz-padding-start: 0;
1261 -moz-box-align: center;*/
1264 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1265 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1266 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1267 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1268 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1269 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1270 /* padding: 2px 6px;
1272 border-color: transparent;
1273 transition-property: background-color, border-color;
1274 transition-duration: 150ms;*/
1277 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1278 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1279 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1284 /* Help SDK icons fit: */
1285 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1289 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1290 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1294 #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,
1295 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1296 /* -moz-padding-end: 17px;*/
1299 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1302 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1305 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1308 #nav-bar .toolbaritem-combined-buttons {
1309 /* margin-left: 2px;
1310 margin-right: 2px;*/
1313 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1318 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1319 #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 {
1325 -moz-margin-end: -1px;
1329 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1332 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1333 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1334 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1335 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1336 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1337 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1338 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1341 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1342 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1343 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1344 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1345 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1348 #TabsToolbar .toolbarbutton-1,
1349 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1351 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1354 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1355 #TabsToolbar .toolbarbutton-1[open],
1356 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1357 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1358 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1361 /* unified back/forward button */
1366 #forward-button > menupopup {
1367 margin-top: 1px !important;
1370 #forward-button > .toolbarbutton-icon {
1371 background-clip: padding-box !important;
1372 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1373 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1377 -moz-margin-start: -6px !important;
1382 border-radius: 0 10000px 10000px 0;
1385 #forward-button:-moz-locale-dir(rtl) {
1386 border-radius: 10000px 0 0 10000px;
1389 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1390 transition: opacity 150ms ease-out;
1393 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] {
1397 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1402 /* padding-top: 3px !important;
1403 padding-bottom: 3px !important;
1404 -moz-padding-start: 5px !important;
1405 -moz-padding-end: 0 !important;*/
1408 border-radius: 10000px;
1412 margin-bottom: -2px;
1415 #back-button:-moz-locale-dir(rtl) {
1418 #back-button > menupopup {
1419 margin-top: -1px !important;
1422 #back-button > .toolbarbutton-icon {
1423 border-radius: 10000px !important;
1424 background-clip: padding-box !important;
1425 /* background-color: hsla(210,25%,98%,.08) !important;
1426 padding: 6px !important;
1427 border-color: hsla(210,4%,10%,.25) !important;*/
1428 transition-property: background-color, border-color !important;
1429 transition-duration: 250ms !important;
1432 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1433 /* background-color: hsla(210,4%,10%,.08) !important;
1434 box-shadow: none !important;*/
1437 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1438 #back-button[open="true"] > .toolbarbutton-icon {
1439 /* background-color: hsla(210,4%,10%,.12) !important;
1440 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1443 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1444 #forward-button:-moz-locale-dir(rtl) {
1445 transform: scaleX(-1);
1448 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1449 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1450 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1453 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1454 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1455 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1458 #home-button.bookmark-item {
1459 list-style-image: url("chrome://browser/skin/Toolbar.png");
1462 #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),
1463 #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),
1464 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1465 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1466 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1467 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1468 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1471 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1474 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1475 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1476 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1480 #downloads-button > .toolbarbutton-icon {
1484 /* tabview button & menu item */
1487 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1488 -moz-image-region: rect(1px, 89px, 17px, 73px);
1491 #menu_tabview[groups="0"] {
1492 -moz-image-region: rect(1px, 17px, 17px, 1px);
1495 #menu_tabview[groups="1"] {
1496 -moz-image-region: rect(1px, 35px, 17px, 19px);
1499 #menu_tabview[groups="2"] {
1500 -moz-image-region: rect(1px, 53px, 17px, 37px);
1503 #menu_tabview[groups="3"] {
1504 -moz-image-region: rect(1px, 71px, 17px, 55px);
1507 /* zoom control text (reset) button special case: */
1509 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1510 /* To make this line up with the icons, it needs the same height (18px) +
1511 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1512 * increase in text sizes would break things...
1517 /* ::::: fullscreen window controls ::::: */
1520 -moz-margin-start: 4px;
1526 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1531 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1534 #minimize-button:hover {
1535 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1539 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1542 #restore-button:hover {
1543 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1547 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1550 #close-button:hover {
1551 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1554 /* ::::: Location Bar ::::: */
1557 .searchbar-textbox {
1560 -moz-margin-start: 3px;
1564 /* make color as light as possible to deal with dark non-domain parts */
1568 #urlbar:-moz-lwtheme,
1569 .searchbar-textbox:-moz-lwtheme {
1570 /* background-color: rgba(255,255,255,.8);
1571 @navbarTextboxCustomBorder@
1575 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1576 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1577 /* background-color: rgba(255,255,255,.9);*/
1580 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1581 .searchbar-textbox:-moz-lwtheme[focused] {
1582 /* background-color: white;*/
1585 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1587 -moz-margin-start: -22px;
1589 pointer-events: none;
1592 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1593 /* -moz-border-start: none;
1595 pointer-events: all;
1598 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1599 transition: margin-left 150ms ease-out;
1602 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1603 /* border-top-left-radius: 0;
1604 border-bottom-left-radius: 0; */
1607 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1608 /* border-top-right-radius: 0;
1609 border-bottom-right-radius: 0; */
1612 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1613 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1616 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1620 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1621 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1622 transition-delay: 100s;
1625 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1626 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1627 margin-left: -22.01px;
1630 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1631 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1632 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1633 transform: scaleX(-1);
1636 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1637 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1642 -moz-box-orient: horizontal;
1643 -moz-box-align: stretch;
1646 .urlbar-textbox-container {
1647 -moz-box-align: stretch;
1651 -moz-margin-start: 0;
1655 -moz-box-align: center;
1662 .searchbar-engine-button,
1663 .search-go-container {
1667 .search-go-container > .search-go-button {
1671 .urlbar-icon:hover {
1674 .urlbar-icon[open="true"],
1675 .urlbar-icon:hover:active {
1678 #urlbar-search-splitter {
1680 -moz-margin-start: -3px;
1682 background: transparent;
1685 #urlbar-search-splitter + #urlbar-container > #urlbar,
1686 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1687 -moz-margin-start: 0;
1690 #urlbar-display-box {
1694 -moz-border-end: 1px solid #9C9CFF;
1695 -moz-margin-end: 3px;
1698 -moz-margin-start: 0;
1703 min-width: calc(54px + 11ch);
1713 #identity-box:-moz-locale-dir(ltr) {
1714 /* border-top-left-radius: 1.5px;
1715 border-bottom-left-radius: 1.5px;*/
1718 #identity-box:-moz-locale-dir(rtl) {
1719 /* border-top-right-radius: 1.5px;
1720 border-bottom-right-radius: 1.5px;*/
1723 #notification-popup-box:not([hidden]) + #identity-box {
1724 -moz-padding-start: 10px !important;
1728 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1729 /* border-radius: 0; */
1730 -moz-padding-start: 2px;
1731 -moz-padding-end: 2px;
1732 -moz-margin-end: 1px;
1735 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1736 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1738 transition: padding-left;
1741 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1742 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1744 transition: padding-right;
1747 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1748 #notification-popup-box[hidden] + #identity-box {
1749 /* forward button hiding is delayed when hovered */
1750 transition-delay: 100s;
1753 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1754 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1755 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1756 padding-left: 2.01px;
1759 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1760 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1761 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1762 padding-right: 2.01px;
1765 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1766 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1767 -moz-margin-end: 3px;
1770 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1771 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1772 border-top-right-radius: 0;
1773 border-bottom-right-radius: 0;
1776 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1777 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1778 border-top-left-radius: 0;
1779 border-bottom-left-radius: 0;
1782 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1783 background-color: #000000;
1786 #identity-box:-moz-focusring {
1787 outline: 1px dotted #008484;
1788 outline-offset: -1px;
1791 #identity-box.verifiedDomain:-moz-focusring,
1792 #identity-box.verifiedIdentity:-moz-focusring {
1793 outline-color: #000000;
1796 #identity-icon-labels {
1797 -moz-margin-start: 1px;
1798 -moz-margin-end: 3px;
1801 /* Location bar dropmarker */
1803 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1804 background-color: transparent;
1807 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1808 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1813 .urlbar-history-dropmarker:hover {
1816 .urlbar-history-dropmarker:hover:active,
1817 .urlbar-history-dropmarker[open="true"] {
1820 /* page proxy icon */
1822 /* === BEGIN identity-block.inc.css === */
1824 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1825 /* Default theme does different color per channel, we can't as they do it build-time. */
1827 -moz-border-end: 1px solid #9C9CFF;
1830 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1832 -moz-border-end: 1px solid #008484;
1835 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1836 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1837 background-position: right;
1838 background-size: 1px;
1839 background-repeat: no-repeat;
1842 /* page proxy icon */
1844 #page-proxy-favicon {
1847 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1851 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1852 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1855 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1856 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1859 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1860 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1863 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1864 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1867 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1868 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1871 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1872 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1875 #page-proxy-favicon[pageproxystate="invalid"] {
1879 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1880 list-style-image: url("chrome://branding/content/icon64.png");
1883 #identity-popup-brandName {
1887 margin-bottom: .5em;
1890 #identity-popup-content-box {
1894 /* === END identity-block.inc.css === */
1896 #page-proxy-favicon {
1897 -moz-image-region: rect(0, 16px, 16px, 0);
1900 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1901 /* -moz-margin-end: 1px;*/
1904 #identity-box:hover > #page-proxy-favicon {
1905 -moz-image-region: rect(0, 32px, 16px, 16px);
1908 #identity-box:hover:active > #page-proxy-favicon,
1909 #identity-box[open=true] > #page-proxy-favicon {
1910 -moz-image-region: rect(0, 48px, 16px, 32px);
1913 #identity-box:hover {
1914 background-color: #FFCF00;
1918 #identity-box:hover:active,
1919 #identity-box[open=true] {
1920 background-color: #FF9F00;
1924 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1925 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1926 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1927 background-color: #9C9CFF;
1931 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1932 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1933 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1934 background-color: #008484;
1940 #treecolAutoCompleteImage {
1944 .ac-result-type-bookmark,
1945 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1946 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1947 -moz-image-region: rect(0px 16px 16px 0px);
1952 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1953 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1954 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1957 .ac-result-type-keyword,
1958 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1959 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1960 -moz-image-region: rect(0px 32px 16px 16px);
1965 .ac-result-type-tag,
1966 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1967 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1976 .ac-extra > .ac-comment {
1986 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1987 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1988 -moz-image-region: rect(0, 16px, 16px, 0);
1992 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1993 -moz-image-region: rect(16px, 16px, 32px, 0);
1996 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2000 .ac-comment[selected="true"],
2001 .ac-url-text[selected="true"],
2002 .ac-action-text[selected="true"] {
2003 color: inherit !important;
2006 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2007 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2013 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2014 border-top: 1px solid #9C9CFF;
2017 /* combined go/reload/stop button in location bar */
2019 #urlbar > toolbarbutton {
2020 -moz-margin-start: 0;
2022 background-origin: border-box;
2024 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2025 -moz-border-start: 1px solid #9C9CFF;
2028 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2029 border-top-left-radius: 0px;
2030 border-bottom-left-radius: 0px;
2033 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2034 border-top-right-radius: 0px;
2035 border-bottom-right-radius: 0px;
2038 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2039 #urlbar-reload-button:not(:hover) {
2040 -moz-border-start-style: none;
2041 -moz-padding-start: 3px;
2044 #urlbar-reload-button {
2045 -moz-image-region: rect(0px, 14px, 14px, 0px);
2048 #urlbar-reload-button[disabled=true] {
2049 -moz-image-region: rect(28px, 14px, 42px, 0px);
2052 #urlbar-reload-button:not([disabled=true]):hover {
2053 -moz-image-region: rect(14px, 14px, 28px, 0px);
2056 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2057 transform: scaleX(-1);
2061 -moz-image-region: rect(0, 42px, 14px, 28px);
2064 #urlbar-go-button:hover,
2065 -moz-image-region: rect(14px, 42px, 28px, 28px);
2068 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2069 transform: scaleX(-1);
2072 #urlbar-stop-button {
2073 -moz-image-region: rect(0px, 28px, 14px, 14px);
2076 #urlbar-stop-button:hover {
2077 -moz-image-region: rect(14px, 28px, 28px, 14px);
2080 /* popup blocker button */
2082 #page-report-button {
2083 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2084 -moz-image-region: rect(0, 16px, 16px, 0);
2087 #page-report-button:hover ,
2088 #page-report-button:hover:active,
2089 #page-report-button[open="true"] {
2090 -moz-image-region: rect(0, 32px, 16px, 16px);
2093 /* social share panel */
2095 #social-share-panel > iframe {
2096 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2101 .social-share-toolbar {
2102 border-right: 1px solid #9C9CFF;
2103 /* background-color: #000000; */
2106 #social-share-provider-buttons {
2110 #social-share-provider-buttons > .share-provider-button {
2111 -moz-appearance: none;
2119 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2120 #social-share-provider-buttons > .share-provider-button:hover,
2121 #social-share-provider-buttons > .share-provider-button:active {
2125 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2128 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2131 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2137 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2144 /* fixup corners for share panel */
2145 .social-panel > .social-panel-frame {
2146 border-radius: inherit;
2149 #social-share-panel {
2156 .social-share-frame {
2157 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2160 /* we resize our panels dynamically, make it look nice */
2161 transition: height 100ms ease-out, width 100ms ease-out;
2164 .social-share-frame:-moz-locale-dir(ltr) {
2165 border-top-left-radius: 0;
2166 border-bottom-left-radius: 0;
2167 border-top-right-radius: inherit;
2168 border-bottom-right-radius: inherit;
2171 .social-share-frame:-moz-locale-dir(rtl) {
2172 border-top-left-radius: inherit;
2173 border-bottom-left-radius: inherit;
2174 border-top-right-radius: 0;
2175 border-bottom-right-radius: 0;
2178 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2179 border-top-left-radius: inherit;
2180 border-bottom-left-radius: inherit;
2183 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2184 border-top-right-radius: inherit;
2185 border-bottom-right-radius: inherit;
2188 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2189 border-top-left-radius: inherit;
2190 border-bottom-left-radius: inherit;
2193 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2194 border-top-right-radius: inherit;
2195 border-bottom-right-radius: inherit;
2198 /* social recommending panel */
2200 #social-mark-button {
2201 -moz-image-region: rect(0, 16px, 16px, 0);
2204 /* bookmarks menu-button */
2206 #bookmarks-menu-button.bookmark-item {
2207 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2208 -moz-image-region: rect(0px 16px 16px 0px);
2211 #bookmarks-menu-button.bookmark-item[starred] {
2212 -moz-image-region: rect(0px 32px 16px 16px);
2215 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2216 -moz-margin-start: 5px;
2219 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2221 padding-bottom: 2px;
2224 #BMB_bookmarksPopup[side="top"],
2225 #BMB_bookmarksPopup[side="bottom"] {
2227 margin-right: -20px;
2230 #BMB_bookmarksPopup[side="left"],
2231 #BMB_bookmarksPopup[side="right"] {
2233 margin-bottom: -20px;
2236 /* bookmarking panel */
2238 #editBookmarkPanelStarIcon {
2239 list-style-image: url("chrome://browser/skin/places/starred48.png");
2244 #editBookmarkPanelStarIcon[unstarred] {
2245 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2248 #editBookmarkPanelTitle {
2252 #editBookmarkPanelHeader,
2253 #editBookmarkPanelContent {
2254 margin-bottom: .5em;
2257 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2258 #editBMPanel_folderTree {
2265 border-top: 1px solid #9C9CFF;
2266 border-bottom-left-radius: 5px;
2267 border-bottom-right-radius: 5px;
2271 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2272 -moz-margin-end: 10px;
2273 vertical-align: middle;
2276 .panel-promo-closebutton {
2277 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2278 -moz-margin-end: -3px;
2282 .panel-promo-closebutton:hover {
2283 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2286 .panel-promo-closebutton:hover:active {
2287 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2290 .panel-promo-closebutton > .toolbarbutton-text {
2295 /* ::::: content area ::::: */
2298 background-color: Window;
2302 -moz-padding-start: 0px;
2305 .browserContainer > findbar {
2307 background-color: -moz-dialog;
2308 color: -moz-DialogText;
2317 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2320 #TabsToolbar .toolbar-holder {
2321 background-color: #000000; /* correct effect of being an actual toolbar */
2324 #main-window[disablechrome] #TabsToolbar,
2325 #TabsToolbar[tabsontop="false"] {
2326 border-bottom: 1px solid #008484;
2329 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2332 #main-window[tabsintitlebar] #TabsToolbar {
2333 background-color: transparent;
2336 /* === BEGIN tabs.inc.css === */
2339 .tabs-newtab-button,
2340 #TabsToolbar > #new-tab-button {
2345 padding: 1px 4px 2px;
2348 .tabbrowser-tab:first-of-type {
2349 -moz-margin-start: 2px;
2352 .tabs-newtab-button,
2353 #TabsToolbar > #new-tab-button {
2354 border-radius: 8px 8px 0px 0px;
2355 -moz-margin-start: 0;
2358 .tabs-newtab-button:not(:hover),
2359 #TabsToolbar > #new-tab-button:not(:hover) {
2360 background-color: #C09070;
2363 .tabbrowser-tab[remote] {
2364 text-decoration: underline;
2367 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2368 .tabbrowser-tab[selected=true] {
2369 /* position: relative;
2373 .tab-background-middle {
2391 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2395 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2398 .tab-throbber[progress] {
2399 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2402 .tab-throbber:not([pinned]),
2403 .tab-icon-image:not([pinned]) {
2404 -moz-margin-end: 3px;
2407 .tab-throbber[pinned],
2408 .tab-icon-image[pinned] {
2409 -moz-margin-start: 2px;
2410 -moz-margin-end: 2px;
2422 .tabs-newtab-button {
2423 /* overlap the tab curves */
2426 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2429 .tab-background-start[selected=true]::after,
2430 .tab-background-start[selected=true]::before,
2431 .tab-background-start,
2432 .tab-background-end,
2433 .tab-background-end[selected=true]::after,
2434 .tab-background-end[selected=true]::before {
2437 .tabbrowser-tab:not([selected=true]),
2438 .tabbrowser-tab:-moz-lwtheme {
2441 /* tabbrowser-tab focus ring */
2442 .tabbrowser-tab:focus {
2443 outline: 1px dotted;
2448 .tabbrowser-tab[selected="true"] {
2451 /* End selected tab */
2453 /* Background tabs */
2455 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2456 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2457 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2458 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2461 /* End background tabs */
2463 /* Tab pointer-events */
2466 pointer-events: none;
2469 .tab-background-middle,
2470 .tabs-newtab-button,
2472 pointer-events: auto;
2477 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2478 background-color: #E7ADE7;
2481 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2482 background-color: #3333FF;
2486 /* New tab button */
2488 .tabs-newtab-button {
2492 /* === END tabs.inc.css === */
2494 /* Tab DnD indicator */
2495 .tab-drop-indicator {
2496 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2497 margin-bottom: -11px;
2500 /* Tab close button */
2502 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2505 .tab-close-button:hover,
2506 .tab-close-button:hover[selected="true"] {
2507 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2510 .tab-close-button:hover:active,
2511 .tab-close-button:hover:active[selected="true"] {
2512 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2515 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2517 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2518 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2522 background-origin: border-box;
2525 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2526 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2527 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2528 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2531 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2532 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2535 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2536 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2537 /* transform: scaleX(-1);*/
2540 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2541 transition: 1s background-color ease-out;
2544 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2545 background-color: #008484;
2548 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2549 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2550 /* border-width: 0 2px 0 0;
2551 border-style: solid;
2552 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2555 .tabs-newtab-button > .toolbarbutton-icon {
2557 margin-bottom: -1px;
2560 .tabs-newtab-button,
2561 #TabsToolbar > #new-tab-button,
2562 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2563 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2564 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2565 -moz-image-region: rect(0, 16px, 18px, 0);
2568 .tabs-newtab-button,
2569 .tabs-newtab-button:hover,
2570 #TabsToolbar > #new-tab-button,
2571 #TabsToolbar > #new-tab-button:hover {
2572 -moz-image-region: rect(0, 32px, 18px, 16px);
2575 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2576 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2577 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2578 .tabs-newtab-button:-moz-lwtheme-brighttext,
2579 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2580 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2583 #TabsToolbar > #new-tab-button {
2588 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2591 #alltabs-button:hover,
2592 #alltabs-button:hover:active,
2593 #alltabs-button[open="true"] {
2594 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2597 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2598 #alltabs-button:-moz-lwtheme-brighttext {
2601 #alltabs-button > .toolbarbutton-icon {
2605 #alltabs-button > .toolbarbutton-menu-dropmarker {
2609 /* All tabs menupopup */
2610 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2611 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2612 -moz-image-region: auto;
2615 .alltabs-item[selected="true"] {
2619 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2620 list-style-image: url("chrome://global/skin/icons/loading.gif");
2623 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2624 background-color: #402800;
2627 /* Tabstrip close button */
2632 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2635 .tabs-closebutton > .toolbarbutton-icon {
2638 .tabs-closebutton > .toolbarbutton-text {
2642 .tabs-closebutton:hover,
2643 .tabs-closebutton:hover:active {
2644 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2647 toolbarbutton.chevron {
2648 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2651 toolbarbutton.chevron:hover {
2652 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2655 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2656 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2657 transform: scaleX(-1);
2660 toolbarbutton.chevron > .toolbarbutton-text,
2661 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2665 toolbarbutton.chevron > .toolbarbutton-icon {
2669 #sidebar-throbber[loading="true"] {
2670 list-style-image: url("chrome://global/skin/icons/loading.gif");
2671 -moz-margin-end: 4px;
2674 /* Bookmarks toolbar */
2675 #PlacesToolbarDropIndicator {
2676 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2679 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2680 background-color: #008484 !important;
2681 color: #FFCF00 !important;
2684 /* rules for menupopup drop indicators */
2685 .menupopup-drop-indicator-bar {
2687 /* these two margins must together compensate the indicator's height */
2689 margin-bottom: -1px;
2692 .menupopup-drop-indicator {
2693 list-style-image: none;
2695 -moz-margin-end: -4em;
2696 background-color: #008484;
2699 /* ::::: Identity Indicator Styling ::::: */
2702 #identity-popup-icon {
2706 list-style-image: url("chrome://browser/skin/identity.png");
2707 -moz-image-region: rect(0px, 64px, 64px, 0px);
2710 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2711 -moz-image-region: rect(64px, 64px, 128px, 0px);
2714 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2715 -moz-image-region: rect(128px, 64px, 192px, 0px);
2718 /* Popup Body Text */
2719 .identity-popup-description {
2720 white-space: pre-wrap;
2721 -moz-padding-start: 15px;
2725 .identity-popup-label {
2726 white-space: pre-wrap;
2727 -moz-padding-start: 15px;
2731 #identity-popup-content-host,
2732 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2736 #identity-popup-content-host {
2743 #identity-popup-content-owner {
2745 margin-bottom: 0 !important;
2750 .verifiedDomain > #identity-popup-content-owner {
2751 font-weight: normal;
2754 #identity-popup-content-verifier {
2758 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2759 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2761 -moz-margin-start: -24px;
2764 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2765 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2766 list-style-image: url("chrome://browser/skin/Secure24.png");
2769 #identity-popup-help-icon {
2771 margin: 7px 0 0 -3px;
2774 list-style-image: url("chrome://global/skin/icons/question-16.png");
2778 #identity-popup-help-icon > .button-box > .button-text {
2782 #identity-popup-help-icon > .button-box > .button-icon {
2787 #identity-popup-more-info-button {
2793 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2797 #identity-popup-container {
2802 #identity-popup-button-container {
2803 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2808 .popup-notification-icon {
2811 -moz-margin-end: 10px;
2814 .popup-notification-icon[popupid="geolocation"] {
2815 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2818 .popup-notification-icon[popupid="xpinstall-disabled"],
2819 .popup-notification-icon[popupid="addon-progress"],
2820 .popup-notification-icon[popupid="addon-install-cancelled"],
2821 .popup-notification-icon[popupid="addon-install-blocked"],
2822 .popup-notification-icon[popupid="addon-install-failed"],
2823 .popup-notification-icon[popupid="addon-install-complete"] {
2824 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2829 .popup-notification-icon[popupid="click-to-play-plugins"] {
2830 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2833 .popup-notification-icon[popupid="plugins-not-found"] {
2834 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2837 .popup-notification-icon[popupid="web-notifications"] {
2838 list-style-image: url("chrome://browser/skin/notification-64.png");
2841 .addon-progress-description {
2846 .popup-progress-label,
2847 .popup-progress-meter {
2848 -moz-margin-start: 0;
2852 .popup-progress-cancel {
2853 -moz-appearance: none;
2854 background: transparent;
2860 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2861 -moz-image-region: rect(0px, 32px, 16px, 16px);
2864 .popup-progress-cancel:hover {
2865 -moz-image-region: rect(16px, 32px, 32px, 16px);
2868 .popup-progress-cancel:active {
2869 -moz-image-region: rect(32px, 32px, 48px, 16px);
2872 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2873 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2874 .popup-notification-icon[popupid*="offline-app-requested"],
2875 .popup-notification-icon[popupid="offline-app-usage"] {
2876 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2879 .popup-notification-icon[popupid="password-save"],
2880 .popup-notification-icon[popupid="password-change"] {
2881 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2884 .popup-notification-icon[popupid="webapps-install-progress"],
2885 .popup-notification-icon[popupid="webapps-install"] {
2886 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2889 .popup-notification-icon[popupid="mixed-content-blocked"] {
2890 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2893 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2894 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2895 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2898 .popup-notification-icon[popupid="pointerLock"] {
2899 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2902 /* Notification icon box */
2903 #notification-popup-box {
2905 background-color: #000000;
2906 background-clip: padding-box;
2909 border-radius: 3px 0 0 3px;
2910 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2911 -moz-margin-end: -8px;
2912 border-right-width: 8px;
2915 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2916 /* padding-left: 5px; */
2919 #notification-popup-box:-moz-locale-dir(rtl),
2920 .notification-anchor-icon:-moz-locale-dir(rtl) {
2921 transform: scaleX(-1);
2924 .notification-anchor-icon {
2930 .notification-anchor-icon:-moz-focusring {
2931 outline: 1px dotted #008484;
2932 /* outline-offset: -3px; */
2935 .default-notification-icon,
2936 #default-notification-icon {
2937 list-style-image: url("chrome://global/skin/icons/information-16.png");
2940 .identity-notification-icon,
2941 #identity-notification-icon {
2942 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2945 .geo-notification-icon,
2946 #geo-notification-icon {
2947 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2950 #addons-notification-icon {
2951 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2954 .indexedDB-notification-icon,
2955 #indexedDB-notification-icon {
2956 list-style-image: url("chrome://global/skin/icons/question-16.png");
2959 #password-notification-icon {
2960 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2963 #webapps-notification-icon {
2964 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2967 #plugins-notification-icon {
2968 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2971 #plugins-notification-icon.plugin-hidden {
2972 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2975 #plugins-notification-icon.plugin-blocked {
2976 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2979 #plugins-notification-icon {
2980 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2983 #plugins-notification-icon:hover {
2984 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2987 #plugin-install-notification-icon {
2988 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2991 #notification-popup-box[hidden] {
2992 /* Override display:none to make the pluginBlockedNotification animation work
2993 when showing the notification repeatedly. */
2995 visibility: collapse;
2998 #plugins-notification-icon.plugin-blocked[showing] {
2999 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3002 @keyframes pluginBlockedNotification {
3011 .mixed-content-blocked-notification-icon,
3012 #mixed-content-blocked-notification-icon {
3013 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3016 .webRTC-shareDevices-notification-icon,
3017 #webRTC-shareDevices-notification-icon {
3018 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3021 .webRTC-sharingDevices-notification-icon,
3022 #webRTC-sharingDevices-notification-icon {
3023 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3026 .web-notifications-notification-icon,
3027 #web-notifications-notification-icon {
3028 list-style-image: url("chrome://browser/skin/notification-16.png");
3031 #pointerLock-notification-icon {
3032 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3034 #pointerLock-cancel {
3038 /* Bookmarks roots menu-items */
3039 #subscribeToPageMenuitem:not([disabled]),
3040 #subscribeToPageMenupopup,
3041 #BMB_subscribeToPageMenuitem:not([disabled]),
3042 #BMB_subscribeToPageMenupopup {
3043 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3046 #bookmarksToolbarFolderMenu,
3047 #BMB_bookmarksToolbar,
3048 #panelMenu_bookmarksToolbar {
3049 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3050 -moz-image-region: auto;
3053 #BMB_unsortedBookmarks,
3054 #panelMenu_unsortedBookmarks {
3055 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3056 -moz-image-region: auto;
3059 /* ::::: Keyboard UI Panel ::::: */
3064 border-radius: 20px;
3067 .KUI-panel[level="top"] {
3068 /*background-color: rgba(27%,27%,27%,.65);*/
3074 padding: 20px 10px 10px;
3078 .ctrlTab-favicon[src] {
3079 background-color: #000000;
3085 .ctrlTab-preview-inner > .tabPreview-canvas {
3088 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3092 .ctrlTab-preview-inner {
3093 padding-bottom: 10px;
3096 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3098 background-color: #000000;
3099 border-radius: .5em;
3102 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3104 background-color: #000000;
3107 border: 2px solid #9C9CFF;
3108 border-radius: .5em;
3111 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3112 margin: -10px -10px 0;
3123 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3131 .sync-panel-button-box {
3135 #sync-error-panel-title,
3136 #sync-start-panel-title {
3140 #sync-start-panel-subtitle,
3141 #sync-error-panel-subtitle {
3147 .statuspanel-label {
3150 background: #404000;
3151 border: 1px none #9C9CFF;
3152 border-top-style: solid;
3157 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3158 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3159 border-right-style: solid;
3160 border-top-right-radius: .3em;
3164 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3165 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3166 border-left-style: solid;
3167 border-top-left-radius: .3em;
3171 /* HACK to abolish devily color on main content */
3174 background-color: transparent !important;
3177 /* === BEGIN highlighter.inc.css === */
3181 .highlighter-outline {
3182 box-shadow: 0 0 0 1px black;
3183 outline: 1px dashed #A09090;
3186 /* Highlighter - Node Infobar */
3188 .highlighter-nodeinfobar {
3191 background-color: #000000;
3192 background-clip: padding-box;
3193 border: 1px solid #008484;
3195 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3200 /* Highlighter - Node Infobar - text */
3202 .highlighter-nodeinfobar-text {
3204 /* 100% - size of the buttons and margins */
3205 max-width: calc(100% - 2 * (26px + 6px));
3206 padding-bottom: 1px;
3209 html|*.highlighter-nodeinfobar-tagname {
3213 html|*.highlighter-nodeinfobar-id {
3217 html|*.highlighter-nodeinfobar-pseudo-classes {
3221 /* Highlighter - Node Infobar - box & arrow */
3223 .highlighter-nodeinfobar-arrow {
3226 -moz-margin-start: calc(50% - 7px);
3227 transform: rotate(-45deg);
3228 background-clip: padding-box;
3229 background-repeat: no-repeat;
3232 .highlighter-nodeinfobar-arrow-top {
3233 margin-bottom: -8px;
3235 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3238 .highlighter-nodeinfobar-arrow-bottom {
3241 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3244 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3248 /* === END highlighter.inc.css === */
3250 #full-screen-warning-message {
3251 background-color: #000000;
3256 box-shadow: 0 0 2px #9C9CFF;
3259 #full-screen-warning-container[obscure-browser] {
3260 background-color: rgba(0,0,0,0.3);
3263 .full-screen-description {
3267 #full-screen-domain-text {
3271 .full-screen-approval-button,
3272 #full-screen-remember-decision {
3276 /* === BEGIN commandline.inc.css === */
3278 /* Developer toolbar */
3280 #developer-toolbar {
3281 border-top: 3px solid #000000;
3282 border-bottom: none;
3285 #developer-toolbar .toolbar-holder {
3286 background-color: #8050B0;
3290 #developer-toolbar .toolbar-holder {
3291 background-color: #8050B0;
3295 #developer-toolbar .toolbar-startcap,
3296 #developer-toolbar .toolbar-endcap{
3297 background-color: #6000CF;
3300 #developer-toolbar {
3302 min-height: 32px; */
3305 #developer-toolbar > toolbarbutton {
3311 .developer-toolbar-button > image {
3312 /* margin: auto 10px; */
3315 #developer-toolbar-toolbox-button > label {
3319 #developer-toolbar-toolbox-button {
3320 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3321 -moz-image-region: rect(0px, 16px, 16px, 0px);
3324 #developer-toolbar-toolbox-button > label {
3328 #developer-toolbar-toolbox-button:hover,
3329 #developer-toolbar-toolbox-button:hover:active,
3330 #developer-toolbar-toolbox-button[checked=true] {
3331 -moz-image-region: rect(0px, 32px, 16px, 16px);
3334 #developer-toolbar-closebutton {
3335 list-style-image: url("chrome://browser/skin/devtools/close.png");
3336 -moz-image-region: rect(0px, 16px, 16px, 0px);
3341 #developer-toolbar-closebutton > .toolbarbutton-icon {
3344 #developer-toolbar-closebutton > .toolbarbutton-text {
3348 #developer-toolbar-closebutton:hover,
3349 #developer-toolbar-closebutton:hover:active {
3350 -moz-image-region: rect(0px, 32px, 16px, 16px);
3355 html|*#gcli-tooltip-frame,
3356 html|*#gcli-output-frame {
3359 background-color: transparent;
3365 background-color: transparent;
3368 .gclitoolbar-input-node,
3369 .gclitoolbar-complete-node {
3371 -moz-box-align: center;
3375 background-color: transparent;
3378 .gclitoolbar-input-node {
3380 /* line-height: 32px;
3381 outline-style: none; */
3382 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3383 background-repeat: no-repeat;
3384 background-color: rgba(0, 0, 0, .75);
3387 .gclitoolbar-input-node[focused="true"] {
3388 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3389 background-color: #000000;
3392 .gclitoolbar-input-node:not([focused="true"]) {
3393 border-color: transparent;
3396 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3397 background-color: #008484;
3402 .gclitoolbar-complete-node {
3404 background-color: transparent;
3407 pointer-events: none;
3410 .gcli-in-incomplete,
3414 .gcli-in-closebrace,
3421 .gcli-in-incomplete {
3422 border-bottom: 2px dotted #8050B0;
3426 border-bottom: 2px dotted #FF0000;
3437 .gcli-in-closebrace {
3441 /* === END commandline.inc.css === */
3443 /* === BEGIN responsivedesign.inc.css === */
3445 /* Responsive Mode */
3447 .browserContainer[responsivemode] {
3448 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3449 padding: 0 20px 20px 20px;
3452 .browserStack[responsivemode] {
3453 box-shadow: 0 0 7px #9C9CFF;
3456 .devtools-responsiveui-toolbar {
3457 background: transparent;
3458 /* text color is textColor from dark theme, since no theme is applied to
3459 * the responsive toolbar.
3465 border-bottom-width: 0;
3468 .devtools-responsiveui-menulist,
3469 .devtools-responsiveui-toolbarbutton {
3470 -moz-box-align: center;
3472 /* min-height: 22px;*/
3473 /* margin: 0 3px; */
3476 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3477 -moz-box-orient: horizontal;
3480 .devtools-responsiveui-menulist:-moz-focusring,
3481 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3482 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3483 outline-offset: -4px;*/
3486 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3490 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3491 /* border-color: hsla(210,8%,5%,.6);
3492 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3493 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); */
3496 .devtools-responsiveui-menulist[open=true],
3497 .devtools-responsiveui-toolbarbutton[open=true],
3498 .devtools-responsiveui-toolbarbutton[checked=true] {
3499 /* border-color: hsla(210,8%,5%,.6) !important;
3500 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3501 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); */
3504 .devtools-responsiveui-toolbarbutton[checked=true] {
3505 /* color: hsl(208,100%,60%); */
3508 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3509 /* background-color: transparent !important;*/
3512 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3513 /* background-color: hsla(210,8%,5%,.2) !important;*/
3516 .devtools-responsiveui-menulist > .menulist-label-box {
3520 .devtools-responsiveui-menulist > .menulist-dropmarker {
3521 /* display: -moz-box;
3522 background-color: transparent;
3523 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3524 -moz-box-align: center;
3529 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3532 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3533 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3536 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3537 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3540 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3541 /* padding: 0 1px;*/
3542 -moz-box-align: stretch;
3545 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3546 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3547 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3548 -moz-box-align: center;
3552 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3553 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3557 .devtools-responsiveui-close {
3558 list-style-image: url("chrome://browser/skin/devtools/close.png");
3559 -moz-image-region: rect(0px,16px,16px,0px);
3562 .devtools-responsiveui-close:hover {
3563 -moz-image-region: rect(0px,32px,16px,16px);
3566 .devtools-responsiveui-rotate {
3567 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3568 -moz-image-region: rect(0px,16px,16px,0px);
3571 .devtools-responsiveui-rotate:hover {
3572 -moz-image-region: rect(0px,32px,16px,16px);
3575 .devtools-responsiveui-touch {
3576 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3577 -moz-image-region: rect(0px,16px,16px,0px);
3580 .devtools-responsiveui-touch:hover,
3581 .devtools-responsiveui-touch[checked],
3582 .devtools-responsiveui-touch[checked]:hover {
3583 -moz-image-region: rect(0px,32px,16px,16px);
3586 .devtools-responsiveui-screenshot {
3587 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3588 -moz-image-region: rect(0px,16px,16px,0px);
3591 .devtools-responsiveui-screenshot:hover {
3592 -moz-image-region: rect(0px,32px,16px,16px);
3595 .devtools-responsiveui-resizebarV {
3599 transform: translate(12px, -12px);
3600 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3603 .devtools-responsiveui-resizebarH {
3607 transform: translate(-12px, 12px);
3608 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3611 .devtools-responsiveui-resizehandle {
3615 transform: translate(12px, 12px);
3616 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3619 /* === END responsivedesign.inc.css === */
3621 /* === including indicator.css is done at the start of the file === */
3625 #developer-toolbar-toolbox-button[error-count]:before {
3629 background-color: #FF0000;
3631 -moz-margin-end: 5px;
3634 /* Social toolbar item */
3636 #social-provider-button {
3637 -moz-image-region: rect(0, 16px, 16px, 0);
3638 list-style-image: url("chrome://browser/skin/social/services-16.png");
3641 #social-provider-button > .toolbarbutton-menu-dropmarker {
3645 .toolbarbutton-badge-container {
3651 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3655 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3661 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3665 .toolbarbutton-badge[badge=""] {
3668 .toolbarbutton-badge[badge]:not([badge=""])::after {
3669 /* The |content| property is set in the content stylesheet. */
3674 background-color: #000000;
3675 border: 1px solid #9C9CFF;
3682 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3687 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3692 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3697 #social-notification-icon-mentions {
3698 background-color: #000000;
3700 -moz-margin-start: 2px;
3703 #social-notification-icon-mentions:hover {
3704 background-color: #FFCF00;
3707 #social-notification-icon-mentions[open="true"] {
3708 background-color: #FF9F00;
3711 #social-sidebar-splitter {
3715 .popup-notification-icon[popupid="servicesInstall"] {
3716 list-style-image: url("chrome://browser/skin/social/services-64.png");
3718 #servicesInstall-notification-icon {
3719 list-style-image: url("chrome://browser/skin/social/services-16.png");
3721 #social-undoactivation-button,
3722 #servicesInstall-learnmore-link {
3723 -moz-margin-start: 0; /* override default label margin to match description margin */
3726 #socialActivatedNotification .popup-notification-button-container {
3730 .social-activation-icon {
3737 #social-activation-message {
3741 #social-activation-message > label {
3745 /* social toolbar provider menu */
3746 .social-statusarea-popup {
3749 margin-right: -12px;
3752 .social-statusarea-user {
3753 border-bottom: 1px solid #9C9CFF;
3754 background-color: #000000;
3760 .social-statusarea-user-portrait {
3767 .social-statusarea-loggedInStatus {
3768 background: transparent;
3773 list-style-image: none;
3776 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3777 text-decoration: underline;
3780 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3784 .social-panel-frame {
3785 border-radius: inherit;
3788 /* === BEGIN chat.inc.css === */
3790 #social-sidebar-header {
3794 #social-sidebar-button {
3795 -moz-appearance: none;
3796 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3801 #social-sidebar-button > .toolbarbutton-icon {
3805 #social-sidebar-button:hover,
3806 #social-sidebar-button:hover:active {
3807 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3809 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3813 #social-sidebar-button[loading="true"] {
3814 list-style-image: url("chrome://global/skin/icons/loading.gif");
3817 #social-sidebar-favico {
3830 .chat-toolbarbutton {
3831 -moz-appearance: none;
3839 .chat-toolbarbutton > .toolbarbutton-text {
3843 .chat-toolbarbutton > .toolbarbutton-icon {
3847 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3852 .chat-close-button {
3853 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3854 -moz-image-region: rect(0, 16px, 16px, 0);
3857 .chat-close-button:hover,
3858 .chat-close-button:hover:active {
3859 -moz-image-region: rect(0, 32px, 16px, 16px);
3862 .chat-minimize-button {
3863 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3864 -moz-image-region: rect(16px, 16px, 32px, 0);
3867 .chat-minimize-button:hover:active,
3868 .chat-minimize-button:hover {
3869 -moz-image-region: rect(16px, 32px, 32px, 16px);
3873 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3874 -moz-image-region: rect(48px, 16px, 64px, 0);
3877 .chat-swap-button:hover:active,
3878 .chat-swap-button:hover {
3879 -moz-image-region: rect(48px, 32px, 64px, 16px);
3882 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3883 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3884 -moz-image-region: rect(32px, 16px, 48px, 0);
3887 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3888 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3889 -moz-image-region: rect(32px, 32px, 48px, 16px);
3894 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3900 background-color: #9C9CFF;
3907 -moz-padding-start: 6px;
3909 border-bottom: 1px solid #008484;
3913 .chat-titlebar > .notification-anchor-icon {
3918 .chat-titlebar[minimized="true"] {
3919 border-bottom: none;
3922 .chat-titlebar[selected] {
3923 background-color: #008484;
3926 .chat-titlebar[activity] {
3927 background-color: #E7ADE7;
3937 list-style-image: url("chrome://browser/skin/social/services-16.png");
3938 background-color: #000000;
3944 border-top: 1px solid #008484;
3945 -moz-border-end: 1px solid #008484;
3948 @media (min-resolution: 2dppx) {
3950 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3954 .chatbar-button > .toolbarbutton-icon {
3958 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3965 .chatbar-button > .toolbarbutton-icon {
3969 .chatbar-button:hover > .toolbarbutton-icon,
3970 .chatbar-button[open="true"] > .toolbarbutton-icon {
3974 .chatbar-button:hover,
3975 .chatbar-button[open="true"] {
3978 .chatbar-button > .toolbarbutton-text,
3979 .chatbar-button > .toolbarbutton-menu-dropmarker {
3983 .chatbar-button[activity]:not([open="true"]) {
3984 background-color: #E7ADE7;
3987 .chatbar-button > menupopup > menuitem[activity] {
3992 background: transparent;
3998 -moz-margin-end: 20px;
4004 -moz-margin-start: 4px;
4005 background-color: #000000;
4006 border: 1px solid #9C9CFF;
4007 border-bottom: none;
4008 border-top-left-radius: 2.5px;
4009 border-top-right-radius: 2.5px;
4012 chatbox[minimized="true"] {
4018 -moz-margin-start: 0px;
4024 /* === END chat.inc.css === */
4027 /* background-color: #c4cfde; */
4030 .chat-titlebar[selected] {
4031 /* background-color: #dae3f0; */
4035 -moz-appearance: none;
4036 /* background-color: #c4cfde; */
4039 .chatbar-button > .toolbarbutton-icon {
4040 /* -moz-margin-end: 0; */
4043 .chatbar-button:hover,
4044 .chatbar-button[open="true"] {
4045 /* background-color: #dae3f0; */
4048 .chatbar-button[activity]:not([open="true"]) {
4052 /* border-top-left-radius: 2.5px;
4053 border-top-right-radius: 2.5px; */
4056 /* === BEGIN plugin-doorhanger.inc.css === */
4059 * Plugin Doorhanger Styles
4062 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4063 padding: 6px 1px 2px;
4066 .click-to-play-plugins-notification-center-box {
4069 .plugin-popupnotification-centeritem:nth-child(odd) {
4070 /* background-color: rgba(0,0,0,0.1);*/
4073 .center-item-label {
4075 text-overflow: ellipsis;
4078 .center-item-warning-icon {
4079 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4080 background-repeat: no-repeat;
4083 -moz-margin-start: 6px;
4086 .click-to-play-plugins-notification-button-container {
4089 .click-to-play-popup-button {
4093 .click-to-play-plugins-notification-description-box {
4097 padding-bottom: 3px;
4100 .click-to-play-plugins-outer-description {
4104 .click-to-play-plugins-notification-link,
4109 .messageImage[value="plugin-hidden"] {
4110 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4113 /* Keep any changes to this style in sync with pluginProblem.css */
4114 notification.pluginVulnerable {
4117 notification.pluginVulnerable .messageImage {
4118 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4121 /* === END plugin-doorhanger.inc.css === */
4123 /* === BEGIN customizeMode.inc.css === */
4125 /* Customization mode */
4127 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4131 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4132 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4133 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4138 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4139 pointer-events: none;
4142 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4143 #PanelUI-contents > .panel-customization-placeholder {
4144 -moz-outline-radius: 2.5px;
4145 outline: 1px dashed transparent;
4148 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4149 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4150 -moz-box-ordinal-group: 0;
4155 outline-offset: -2px;
4156 pointer-events: none;
4162 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4163 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4164 offset from the bottom effectively the same as other targets (-2px). */
4165 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4169 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4170 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4171 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4172 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4176 /* Most target outlines are shown on hover and drag over but the panel menu uses
4177 placeholders instead. */
4178 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4179 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4180 /* nav-bar and panel outlines are always shown */
4181 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4182 outline-color: #A09090;
4185 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4186 transition: outline-color 250ms linear;
4189 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4190 transition: outline-color 250ms linear;
4191 outline-color: #9C9CFF;
4194 #PanelUI-contents > .panel-customization-placeholder {
4196 outline-offset: -5px;
4199 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4201 /* padding-left: 10px;
4202 padding-right: 10px;*/
4205 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4209 #customization-container {
4210 background-color: #000000;
4213 #customization-palette,
4214 #customization-empty {
4215 padding: 0 15px 15px;
4218 #customization-header {
4222 font-weight: lighter;
4224 padding: 15px 15px 0;
4227 #customization-panel-container {
4228 padding: 10px 10px 0px;
4231 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4232 #customization-footer {
4233 /*background-color: rgb(236,236,236);*/
4236 #customization-footer {
4237 border-top: 1px solid #9C9CFF;
4241 .customizationmode-button {
4245 .customizationmode-button:hover {
4248 .customizationmode-button[disabled="true"] {
4251 #customization-titlebar-visibility-button {
4252 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4253 -moz-image-region: rect(0, 24px, 24px, 0);
4255 -moz-margin-end: 10px;
4258 #customization-titlebar-visibility-button > .button-box > .button-text {
4259 /* Sadly, button.css thinks its margins are perfect for everyone. */
4260 -moz-margin-start: 6px !important;
4263 #customization-titlebar-visibility-button[checked] {
4264 -moz-image-region: rect(0, 48px, 24px, 24px);
4265 background-color: #008484;
4268 #customization-undo-reset-button {
4269 -moz-margin-end: 10px;
4272 #main-window[customize-entered] #customization-panel-container {
4273 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4274 background-position: left top;
4275 background-repeat: repeat;
4276 background-size: auto;
4277 background-attachment: fixed;
4280 toolbarpaletteitem[place="toolbar"] {
4281 transition: border-width 250ms ease-in-out;
4284 toolbarpaletteitem[mousedown] {
4285 outline: 1px solid #008484;
4286 cursor: -moz-grabbing;
4290 .panel-customization-placeholder,
4291 toolbarpaletteitem[place="palette"],
4292 toolbarpaletteitem[place="panel"] {
4293 transition: transform .3s ease-in-out;
4296 #customization-palette {
4297 transition: opacity .3s ease-in-out;
4301 #customization-palette[showing="true"] {
4305 toolbarpaletteitem[notransition].panel-customization-placeholder,
4306 toolbarpaletteitem[notransition][place="toolbar"],
4307 toolbarpaletteitem[notransition][place="palette"],
4308 toolbarpaletteitem[notransition][place="panel"] {
4312 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4313 toolbarpaletteitem > toolbaritem.panel-wide-item,
4314 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4315 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4318 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4319 transform: scale(1.3);
4322 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4323 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4324 transform: scale(1.1);
4327 /* Override the toolkit styling for items being dragged over. */
4328 toolbarpaletteitem[place="toolbar"] {
4329 border-left-width: 0;
4330 border-right-width: 0;
4335 #customization-palette:not([hidden]) {
4336 margin-bottom: 25px;
4339 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4340 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4341 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4342 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4346 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4347 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4357 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4358 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4362 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4363 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4366 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4367 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4371 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4372 -moz-box-pack: center;
4376 #customization-palette > toolbarpaletteitem > label {
4382 /* === END customizeMode.inc.css === */
4384 /* === BEGIN customizeTip.inc.css === */
4386 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4393 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4394 border: 1px solid #9C9CFF;
4397 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4398 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4401 .customization-tipPanel-infoBox {
4402 margin: 20px 25px 25px;
4404 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4405 background-repeat: no-repeat;
4408 .customization-tipPanel-content {
4414 .customization-tipPanel-em {
4419 .customization-tipPanel-contentImage {
4421 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4429 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4430 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4433 .customization-tipPanel-link {
4434 -moz-appearance: none;
4435 background: transparent;
4443 .customization-tipPanel-link > .button-box > .button-text {
4444 margin: 0 !important;
4447 .customization-tipPanel-closeBox > .close-icon {
4448 -moz-appearance: none;
4450 -moz-margin-end: -25px;
4453 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4454 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4455 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4458 /* === END customizeTip.inc.css === */
4461 * This next rule is a hack to disable subpixel anti-aliasing on all
4462 * labels during the customize mode transition. Subpixel anti-aliasing
4463 * on Windows with Direct2D layers acceleration is particularly slow to
4464 * paint, so this hack is how we sidestep that performance bottleneck.
4466 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4467 transform: perspective(0.01px);
4470 #main-window[customize-entered] {
4471 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4472 background-attachment: fixed;
4475 #main-window[customize-entered] #browser-bottombox,
4476 #main-window[customize-entered] #customization-container {
4477 border-left: 1px solid #9C9CFF;
4478 border-right: 1px solid #9C9CFF;
4479 background-clip: padding-box;
4482 #main-window[customize-entered] #browser-bottombox {
4483 border-bottom: 1px solid #9C9CFF;
4486 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4490 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4494 /* End customization mode */
4496 /* Private browsing indicators */
4499 * Currently, we have two places where we put private browsing indicators on
4500 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4501 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4502 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4503 * want the bottom border of the image to line up with the bottom of the window
4504 * caption buttons. That's why there's so much special-casing going on in here.
4506 .private-browsing-indicator {
4508 pointer-events: none;
4511 #private-browsing-indicator-titlebar {
4516 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4520 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4524 #TabsToolbar > .private-browsing-indicator {
4525 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4526 -moz-margin-start: 4px;
4530 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4531 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4532 * min/max/close window buttons.
4534 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4535 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4536 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4537 -moz-margin-end: 4px;
4543 /* This one is for Linux */
4544 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4545 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4549 /* End private browsing indicators */
4551 /* === BEGIN UITour.inc.css === */
4555 #UITourHighlightContainer {
4556 -moz-appearance: none;
4558 background-color: transparent;
4559 /* This is a buffer to compensate for the movement in the "wobble" effect */
4564 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4565 border-radius: 40px;
4566 border: 1px solid #9C9CFF;
4567 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4568 on Linux without an X compositor where opacity is either 0 or 1. */
4569 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4574 #UITourTooltipBody {
4575 -moz-margin-end: 14px;
4578 #UITourTooltipBody > vbox {
4582 #UITourTooltipIconContainer {
4583 -moz-margin-start: -16px;
4586 #UITourTooltipIcon {
4589 -moz-margin-start: 28px;
4590 -moz-margin-end: 28px;
4593 #UITourTooltipTitle,
4594 #UITourTooltipDescription {
4598 #UITourTooltipTitle {
4601 -moz-margin-start: 0;
4606 #UITourTooltipDescription {
4607 -moz-margin-start: 0;
4610 line-height: 1.8rem;
4611 margin-bottom: 0; /* Override global.css */
4614 #UITourTooltipClose {
4615 -moz-appearance: none;
4617 background-color: transparent;
4619 -moz-margin-start: 4px;
4623 #UITourTooltipClose > .toolbarbutton-text {
4627 #UITourTooltipButtons {
4629 background-color: rgba(0,0,0,.2);
4630 border-top: 1px solid rgba(0,0,0,.4);
4631 margin: 24px -16px -16px;
4635 #UITourTooltipButtons > button {
4639 #UITourTooltipButtons > button:first-child {
4640 -moz-margin-start: 0;
4643 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4646 -moz-margin-end: 5px;
4649 #UITourTooltipButtons > button .button-text {
4653 #UITourTooltipButtons > button:not(.button-link) {
4654 -moz-appearance: none;
4655 background-color: #C09070;
4656 border-radius: 3000px;
4660 transition-property: background-color, color;
4661 transition-duration: 150ms;
4664 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4665 background-color: #FFCF00;
4669 #UITourTooltipButtons > button.button-link {
4670 -moz-appearance: none;
4671 background: transparent;
4674 color: rgba(0,0,0,0.35);
4676 padding-right: 10px;
4679 #UITourTooltipButtons > button.button-link:hover {
4683 /* The primary button gets the same color as the customize button. */
4684 #UITourTooltipButtons > button.button-primary {
4685 background-color: #A06060; /* LCARS default button background color */
4688 padding-right: 30px;
4691 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4692 background-color: #FFCF00;
4696 /* === END UITour.inc.css === */
4698 #UITourTooltipButtons {
4699 margin: 24px -4px -4px;