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 {
181 -moz-appearance: none;
184 -moz-margin-end: 3px;
188 .titlebar-placeholder[type="appmenu-button"] {
192 .titlebar-placeholder[type="caption-buttons"] {
196 /* titlebar command buttons */
199 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
202 #titlebar-min:hover {
203 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
207 list-style-image: url("chrome://browser/skin/win-maximize.gif");
210 #titlebar-max:hover {
211 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
214 #main-window[sizemode="maximized"] #titlebar-max {
215 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
218 #main-window[sizemode="maximized"] #titlebar-max:hover {
219 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
223 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
226 #titlebar-close:hover {
227 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
230 /* ::::: bookmark buttons ::::: */
232 toolbarbutton.bookmark-item:not(.subviewbutton),
233 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
238 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
239 toolbarbutton.bookmark-item[open="true"] {
242 -moz-padding-start: 4px;
243 -moz-padding-end: 2px;*/
246 .bookmark-item > .toolbarbutton-icon,
247 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
252 /* Force the display of the label for bookmarks */
253 .bookmark-item > .toolbarbutton-text,
254 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
255 display: -moz-box !important;
258 .bookmark-item > .toolbarbutton-menu-dropmarker {
262 #bookmarks-toolbar-placeholder {
263 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
266 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
267 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
268 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
271 /* ----- BOOKMARK STAR ANIMATION ----- */
273 @keyframes animation-bookmarkAdded {
274 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
275 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
277 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
280 @keyframes animation-bookmarkPulse {
281 from { transform: scale(1); }
282 50% { transform: scale(1.3); }
283 to { transform: scale(1); }
286 #bookmarked-notification-container {
295 #bookmarked-notification {
296 background-size: 16px;
297 background-position: center;
298 background-repeat: no-repeat;
304 #bookmarked-notification-dropmarker-anchor {
309 #bookmarked-notification-dropmarker-icon {
315 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
316 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
317 animation: animation-bookmarkAdded 800ms;
318 animation-timing-function: ease, ease, ease;
321 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
322 list-style-image: none !important;
325 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
327 animation: animation-bookmarkPulse 300ms;
328 animation-delay: 600ms;
329 animation-timing-function: ease-out;
332 /* ::::: bookmark menus ::::: */
335 menuitem.bookmark-item {
340 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
345 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
346 -moz-padding-start: 0px;
349 /* ::::: bookmark items ::::: */
352 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
353 -moz-image-region: auto;
356 .bookmark-item[container] {
357 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
358 -moz-image-region: auto;
361 .bookmark-item[container][open] {
362 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
363 -moz-image-region: auto;
366 .bookmark-item[container][livemark] {
367 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
368 -moz-image-region: auto;
371 .bookmark-item[container][livemark] .bookmark-item {
372 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
373 -moz-image-region: rect(0px, 16px, 16px, 0px);
376 .bookmark-item[container][livemark] .bookmark-item[visited] {
377 -moz-image-region: rect(0px, 32px, 16px, 16px);
380 .bookmark-item[container][query] {
381 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
382 -moz-image-region: auto;
385 .bookmark-item[query][tagContainer] {
386 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
387 -moz-image-region: auto;
390 .bookmark-item[query][dayContainer] {
391 list-style-image: url("chrome://communicator/skin/history/calendar.png");
392 -moz-image-region: auto;
395 .bookmark-item[query][hostContainer] {
396 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
397 -moz-image-region: auto;
400 .bookmark-item[query][hostContainer][open] {
401 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
402 -moz-image-region: auto;
405 .bookmark-item[cutting] > .toolbarbutton-icon,
406 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
410 .bookmark-item[cutting] > .toolbarbutton-text,
411 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
415 /* ::::: primary toolbar buttons ::::: */
417 /* === BEGIN toolbarbuttons.inc.css === */
419 /* Whole section of this included file: */
420 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
421 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
422 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
423 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
424 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
425 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
426 #copy-button, #paste-button, #e10s-button),
428 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
429 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
433 -moz-image-region: rect(0, 36px, 18px, 18px);
436 #back-button:hover:not([disabled="true"]) {
437 -moz-image-region: rect(18px, 36px, 36px, 18px);
440 #back-button[disabled="true"] {
441 -moz-image-region: rect(36px, 36px, 54px, 18px);
445 -moz-image-region: rect(0, 72px, 18px, 54px);
448 #forward-button:hover:not([disabled="true"]) {
449 -moz-image-region: rect(18px, 72px, 36px, 54px);
452 #forward-button[disabled="true"] {
453 -moz-image-region: rect(36px, 72px, 54px, 54px);
456 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
457 #forward-button:-moz-locale-dir(rtl) {
458 transform: scaleX(-1);
461 #home-button[cui-areatype="toolbar"] {
462 -moz-image-region: rect(0, 126px, 18px, 108px);
465 #home-button[cui-areatype="toolbar"]:hover {
466 -moz-image-region: rect(18px, 126px, 36px, 108px);
469 #bookmarks-menu-button[cui-areatype="toolbar"] {
470 -moz-image-region: rect(0, 144px, 18px, 126px);
473 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
474 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
475 -moz-image-region: rect(18px, 144px, 36px, 126px);
478 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
479 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
480 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
481 background-color: transparent !important;
484 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
485 -moz-image-region: rect(0, 162px, 18px, 144px);
488 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
489 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
490 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
491 /* When starred and clicked (for edit/delete dialog),
492 * then only the menubutton-button itself is open, but not the whole menubutton. */
493 -moz-image-region: rect(18px, 162px, 36px, 144px);
496 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
497 -moz-image-region: rect(0, 630px, 18px, 612px);
500 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
502 -moz-box-align: center;
505 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
506 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
507 -moz-image-region: rect(18px, 630px, 36px, 612px);
510 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
511 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
514 -moz-padding-start: 2px;
515 -moz-padding-end: 0px;
518 #history-panelmenu[cui-areatype="toolbar"] {
519 -moz-image-region: rect(0, 180px, 18px, 162px);
522 #history-panelmenu[cui-areatype="toolbar"]:hover,
523 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
524 -moz-image-region: rect(18px, 180px, 36px, 162px);
527 #downloads-button[cui-areatype="toolbar"] {
528 -moz-image-region: rect(0, 198px, 18px, 180px);
531 #downloads-button[cui-areatype="toolbar"]:hover,
532 #downloads-button[cui-areatype="toolbar"][open="true"] {
533 -moz-image-region: rect(18px, 198px, 36px, 180px);
536 #add-ons-button[cui-areatype="toolbar"] {
537 -moz-image-region: rect(0, 216px, 18px, 198px);
540 #add-ons-button[cui-areatype="toolbar"]:hover {
541 -moz-image-region: rect(18px, 216px, 36px, 198px);
544 #open-file-button[cui-areatype="toolbar"] {
545 -moz-image-region: rect(0, 234px, 18px, 216px);
548 #open-file-button[cui-areatype="toolbar"]:hover {
549 -moz-image-region: rect(18px, 234px, 36px, 216px);
552 #save-page-button[cui-areatype="toolbar"] {
553 -moz-image-region: rect(0, 252px, 18px, 234px);
556 #save-page-button[cui-areatype="toolbar"]:hover {
557 -moz-image-region: rect(18px, 252px, 36px, 234px);
560 #sync-button[cui-areatype="toolbar"] {
561 -moz-image-region: rect(0, 270px, 18px, 252px);
564 #sync-button[cui-areatype="toolbar"]:hover {
565 -moz-image-region: rect(18px, 270px, 36px, 252px);
568 #sync-button[cui-areatype="toolbar"][status="active"],
569 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
570 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
571 -moz-image-region: rect(0, 18px, 18px, 0px);
575 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
576 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
577 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
581 #feed-button[cui-areatype="toolbar"] {
582 -moz-image-region: rect(0, 288px, 18px, 270px);
585 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
586 -moz-image-region: rect(18px, 288px, 36px, 270px);
589 #feed-button[cui-areatype="toolbar"][disabled="true"] {
590 -moz-image-region: rect(36px, 288px, 54px, 270px);
593 #social-share-button[cui-areatype="toolbar"] {
594 -moz-image-region: rect(0px, 306px, 18px, 288px);
597 #social-share-button[cui-areatype="toolbar"]:hover {
598 -moz-image-region: rect(18px, 306px, 36px, 288px);
601 #characterencoding-button[cui-areatype="toolbar"] {
602 -moz-image-region: rect(0, 324px, 18px, 306px);
605 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
606 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
607 -moz-image-region: rect(18px, 324px, 36px, 306px);
610 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
611 -moz-image-region: rect(36px, 324px, 54px, 306px);
614 #new-window-button[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 342px, 18px, 324px);
618 #new-window-button[cui-areatype="toolbar"]:hover {
619 -moz-image-region: rect(18px, 342px, 36px, 324px);
622 #e10s-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 342px, 18px, 324px);
626 #e10s-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 342px, 36px, 324px);
630 #e10s-button > .toolbarbutton-icon {
631 transform: scaleY(-1);
634 #new-tab-button[cui-areatype="toolbar"] {
635 -moz-image-region: rect(0, 360px, 18px, 342px);
638 #new-tab-button[cui-areatype="toolbar"]:hover {
639 -moz-image-region: rect(18px, 360px, 36px, 342px);
642 #privatebrowsing-button[cui-areatype="toolbar"] {
643 -moz-image-region: rect(0, 378px, 18px, 360px);
646 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
647 -moz-image-region: rect(18px, 378px, 36px, 360px);
650 #find-button[cui-areatype="toolbar"] {
651 -moz-image-region: rect(0, 396px, 18px, 378px);
654 #find-button[cui-areatype="toolbar"]:hover {
655 -moz-image-region: rect(18px, 396px, 36px, 378px);
658 #print-button[cui-areatype="toolbar"] {
659 -moz-image-region: rect(0, 414px, 18px, 396px);
662 #print-button[cui-areatype="toolbar"]:hover {
663 -moz-image-region: rect(18px, 414px, 36px, 396px);
666 #fullscreen-button[cui-areatype="toolbar"] {
667 -moz-image-region: rect(0, 432px, 18px, 414px);
670 #fullscreen-button[cui-areatype="toolbar"]:hover {
671 -moz-image-region: rect(18px, 432px, 36px, 414px);
674 #developer-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 450px, 18px, 432px);
678 #developer-button[cui-areatype="toolbar"]:hover,
679 #developer-button[cui-areatype="toolbar"][open="true"] {
680 -moz-image-region: rect(18px, 450px, 36px, 432px);
683 #preferences-button[cui-areatype="toolbar"] {
684 -moz-image-region: rect(0, 468px, 18px, 450px);
687 #preferences-button[cui-areatype="toolbar"]:hover {
688 -moz-image-region: rect(18px, 468px, 36px, 450px);
691 #PanelUI-menu-button {
692 -moz-image-region: rect(0, 486px, 18px, 468px);
695 #PanelUI-menu-button:hover,
696 #PanelUI-menu-button[open="true"] {
697 -moz-image-region: rect(18px, 486px, 36px, 468px);
700 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
701 -moz-image-region: rect(0, 504px, 18px, 486px);
704 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
705 -moz-image-region: rect(18px, 504px, 36px, 486px);
708 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
709 -moz-image-region: rect(36px, 504px, 54px, 486px);
712 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
713 -moz-image-region: rect(0, 522px, 18px, 504px);
716 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
717 -moz-image-region: rect(18px, 522px, 36px, 504px);
720 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
721 -moz-image-region: rect(36px, 522px, 54px, 504px);
724 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
725 -moz-image-region: rect(0, 540px, 18px, 522px);
728 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
729 -moz-image-region: rect(18px, 540px, 36px, 522px);
732 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
733 -moz-image-region: rect(36px, 540px, 54px, 522px);
736 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
737 -moz-image-region: rect(0, 558px, 18px, 540px);
740 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
741 -moz-image-region: rect(18px, 558px, 36px, 540px);
744 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
745 -moz-image-region: rect(36px, 558px, 54px, 540px);
748 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
749 -moz-image-region: rect(0, 576px, 18px, 558px);
752 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
753 -moz-image-region: rect(18px, 576px, 36px, 558px);
756 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
757 -moz-image-region: rect(36px, 576px, 54px, 558px);
760 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) {
761 -moz-image-region: rect(0, 594px, 18px, 576px);
764 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])):hover,
765 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]))[open="true"] {
766 -moz-image-region: rect(18px, 594px, 36px, 576px);
769 #nav-bar-overflow-button {
770 -moz-image-region: rect(0, 612px, 18px, 594px);
773 #nav-bar-overflow-button:hover,
774 #nav-bar-overflow-button[open="true"] {
775 -moz-image-region: rect(18px, 612px, 36px, 594px);
778 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
779 transform: scaleX(-1);
783 -moz-image-region: rect(0, 648px, 18px, 630px);
786 #tabview-button:hover {
787 -moz-image-region: rect(18px, 648px, 36px, 630px);
790 #email-link-button[cui-areatype="toolbar"] {
791 -moz-image-region: rect(0, 666px, 18px, 648px);
794 #email-button[cui-areatype="toolbar"]:hover {
795 -moz-image-region: rect(18px, 666px, 36px, 648px);
798 #sidebar-button[cui-areatype="toolbar"] {
799 -moz-image-region: rect(0, 684px, 18px, 666px);
802 #sidebar-button[cui-areatype="toolbar"]:hover {
803 -moz-image-region: rect(18px, 684px, 36px, 666px);
806 /* === END toolbarbuttons.inc.css === */
808 /* === BEGIN menupanel.inc.css === */
810 /* Menu panel and palette styles */
812 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
813 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
814 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
815 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
816 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
817 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
818 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
819 #copy-button, #paste-button, #e10s-button)[cui-areatype="menu-panel"],
820 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
821 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
822 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
823 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
824 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
825 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
826 #copy-button, #paste-button, #e10s-button) {
827 list-style-image: url("chrome://browser/skin/menuPanel.png");
830 #home-button[cui-areatype="menu-panel"],
831 toolbarpaletteitem[place="palette"] > #home-button {
832 -moz-image-region: rect(0px, 128px, 32px, 96px);
835 #home-button[cui-areatype="menu-panel"]:hover,
836 toolbarpaletteitem[place="palette"] > #home-button:hover {
837 -moz-image-region: rect(32px, 128px, 64px, 96px);
840 #bookmarks-menu-button[cui-areatype="menu-panel"],
841 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
842 -moz-image-region: rect(0px, 192px, 32px, 160px);
845 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
846 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
847 -moz-image-region: rect(32px, 192px, 64px, 160px);
850 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
851 -moz-image-region: rect(32px, 192px, 64px, 160px);
854 #history-panelmenu[cui-areatype="menu-panel"],
855 toolbarpaletteitem[place="palette"] > #history-panelmenu {
856 -moz-image-region: rect(0px, 224px, 32px, 192px);
859 #history-panelmenu[cui-areatype="menu-panel"]:hover,
860 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
861 -moz-image-region: rect(32px, 224px, 64px, 192px);
864 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
865 -moz-image-region: rect(32px, 224px, 64px, 192px);
868 #downloads-button[cui-areatype="menu-panel"],
869 toolbarpaletteitem[place="palette"] > #downloads-button {
870 -moz-image-region: rect(0px, 256px, 32px, 224px);
873 #downloads-button[cui-areatype="menu-panel"]:hover,
874 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
875 -moz-image-region: rect(32px, 256px, 64px, 224px);
878 #add-ons-button[cui-areatype="menu-panel"],
879 toolbarpaletteitem[place="palette"] > #add-ons-button {
880 -moz-image-region: rect(0px, 288px, 32px, 256px);
883 #add-ons-button[cui-areatype="menu-panel"]:hover,
884 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
885 -moz-image-region: rect(32px, 288px, 64px, 256px);
888 #open-file-button[cui-areatype="menu-panel"],
889 toolbarpaletteitem[place="palette"] > #open-file-button {
890 -moz-image-region: rect(0px, 320px, 32px, 288px);
893 #open-file-button[cui-areatype="menu-panel"]:hover,
894 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
895 -moz-image-region: rect(32px, 320px, 64px, 288px);
898 #save-page-button[cui-areatype="menu-panel"],
899 toolbarpaletteitem[place="palette"] > #save-page-button {
900 -moz-image-region: rect(0px, 352px, 32px, 320px);
903 #save-page-button[cui-areatype="menu-panel"]:hover,
904 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
905 -moz-image-region: rect(32px, 352px, 64px, 320px);
908 #sync-button[cui-areatype="menu-panel"],
909 toolbarpaletteitem[place="palette"] > #sync-button {
910 -moz-image-region: rect(0px, 384px, 32px, 352px);
913 #sync-button[cui-areatype="menu-panel"]:hover,
914 toolbarpaletteitem[place="palette"] > #sync-button:hover {
915 -moz-image-region: rect(32px, 384px, 64px, 352px);
918 #sync-button[cui-areatype="menu-panel"][status="active"] {
919 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
920 -moz-image-region: rect(0px, 32px, 32px, 0px);
923 #feed-button[cui-areatype="menu-panel"],
924 toolbarpaletteitem[place="palette"] > #feed-button {
925 -moz-image-region: rect(0px, 416px, 32px, 384px);
928 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
929 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
930 -moz-image-region: rect(32px, 416px, 64px, 384px);
933 #feed-button[cui-areatype="menu-panel"][disabled="true"],
934 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
935 -moz-image-region: rect(64px, 416px, 96px, 384px);
938 #social-share-button[cui-areatype="menu-panel"],
939 toolbarpaletteitem[place="palette"] > #social-share-button {
940 -moz-image-region: rect(0px, 448px, 32px, 416px);
943 #social-share-button[cui-areatype="menu-panel"]:hover,
944 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
945 -moz-image-region: rect(32px, 448px, 64px, 416px);
948 #characterencoding-button[cui-areatype="menu-panel"],
949 toolbarpaletteitem[place="palette"] > #characterencoding-button {
950 -moz-image-region: rect(0px, 480px, 32px, 448px);
953 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
954 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
955 -moz-image-region: rect(32px, 480px, 64px, 448px);
958 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
959 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
960 -moz-image-region: rect(64px, 480px, 96px, 448px);
963 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
964 -moz-image-region: rect(32px, 480px, 64px, 448px);
967 #new-window-button[cui-areatype="menu-panel"],
968 toolbarpaletteitem[place="palette"] > #new-window-button {
969 -moz-image-region: rect(0px, 512px, 32px, 480px);
972 #new-window-button[cui-areatype="menu-panel"]:hover,
973 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
974 -moz-image-region: rect(32px, 512px, 64px, 480px);
977 #e10s-button[cui-areatype="menu-panel"],
978 toolbarpaletteitem[place="palette"] > #e10s-button {
979 -moz-image-region: rect(0px, 512px, 32px, 480px);
982 #e10s-button[cui-areatype="menu-panel"]:hover,
983 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
984 -moz-image-region: rect(32px, 512px, 64px, 480px);
987 #new-tab-button[cui-areatype="menu-panel"],
988 toolbarpaletteitem[place="palette"] > #new-tab-button {
989 -moz-image-region: rect(0px, 544px, 32px, 512px);
992 #new-tab-button[cui-areatype="menu-panel"]:hover,
993 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
994 -moz-image-region: rect(32px, 544px, 64px, 512px);
997 #privatebrowsing-button[cui-areatype="menu-panel"],
998 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
999 -moz-image-region: rect(0px, 576px, 32px, 544px);
1002 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1003 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1004 -moz-image-region: rect(32px, 576px, 64px, 544px);
1007 #tabview-button[cui-areatype="menu-panel"],
1008 toolbarpaletteitem[place="palette"] > #tabview-button {
1009 -moz-image-region: rect(0px, 608px, 32px, 576px);
1012 #tabview-button[cui-areatype="menu-panel"]:hover,
1013 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1014 -moz-image-region: rect(32px, 608px, 64px, 576px);
1017 #find-button[cui-areatype="menu-panel"],
1018 toolbarpaletteitem[place="palette"] > #find-button {
1019 -moz-image-region: rect(0px, 640px, 32px, 608px);
1022 #find-button[cui-areatype="menu-panel"]:hover,
1023 toolbarpaletteitem[place="palette"] > #find-button:hover {
1024 -moz-image-region: rect(32px, 640px, 64px, 608px);
1027 #print-button[cui-areatype="menu-panel"],
1028 toolbarpaletteitem[place="palette"] > #print-button {
1029 -moz-image-region: rect(0px, 672px, 32px, 640px);
1032 #print-button[cui-areatype="menu-panel"]:hover,
1033 toolbarpaletteitem[place="palette"] > #print-button:hover {
1034 -moz-image-region: rect(32px, 672px, 64px, 640px);
1037 #fullscreen-button[cui-areatype="menu-panel"],
1038 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1039 -moz-image-region: rect(0px, 704px, 32px, 672px);
1042 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1043 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1044 -moz-image-region: rect(32px, 704px, 64px, 672px);
1047 #developer-button[cui-areatype="menu-panel"],
1048 toolbarpaletteitem[place="palette"] > #developer-button {
1049 -moz-image-region: rect(0px, 736px, 32px, 704px);
1052 #developer-button[cui-areatype="menu-panel"]:hover,
1053 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1054 -moz-image-region: rect(32px, 736px, 64px, 704px);
1057 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1058 -moz-image-region: rect(32px, 736px, 64px, 704px);
1061 #preferences-button[cui-areatype="menu-panel"],
1062 toolbarpaletteitem[place="palette"] > #preferences-button {
1063 -moz-image-region: rect(0px, 768px, 32px, 736px);
1066 #preferences-button[cui-areatype="menu-panel"]:hover,
1067 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1068 -moz-image-region: rect(32px, 768px, 64px, 736px);
1071 #email-link-button[cui-areatype="menu-panel"],
1072 toolbarpaletteitem[place="palette"] > #email-link-button {
1073 -moz-image-region: rect(0, 800px, 32px, 768px);
1076 #email-link-button[cui-areatype="menu-panel"]:hover,
1077 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
1078 -moz-image-region: rect(32px, 800px, 64px, 768px);
1081 #sidebar-button[cui-areatype="menu-panel"],
1082 toolbarpaletteitem[place="palette"] > #sidebar-button {
1083 -moz-image-region: rect(0, 864px, 32px, 832px);
1086 #sidebar-button[cui-areatype="menu-panel"]:hover,
1087 toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
1088 -moz-image-region: rect(32px, 864px, 64px, 832px);
1091 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1092 -moz-image-region: rect(32px, 864px, 64px, 832px);
1095 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1096 -moz-image-region: rect(0, 832px, 32px, 800px);
1099 /* Wide panel control icons */
1101 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1102 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1103 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1104 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1105 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1108 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1109 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1110 -moz-image-region: rect(0px, 32px, 16px, 16px);
1113 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1115 -moz-image-region: rect(16px, 32px, 32px, 16px);
1118 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1120 -moz-image-region: rect(32px, 32px, 48px, 16px);
1123 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1124 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1125 -moz-image-region: rect(0px, 48px, 16px, 32px);
1128 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1130 -moz-image-region: rect(16px, 48px, 32px, 32px);
1133 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1135 -moz-image-region: rect(32px, 48px, 48px, 32px);
1138 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1139 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1140 -moz-image-region: rect(0px, 64px, 16px, 48px);
1143 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1144 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1145 -moz-image-region: rect(16px, 64px, 32px, 48px);
1148 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1149 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1150 -moz-image-region: rect(32px, 64px, 48px, 48px);
1153 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1154 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1155 -moz-image-region: rect(0px, 80px, 16px, 64px);
1158 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1159 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1160 -moz-image-region: rect(16px, 80px, 32px, 64px);
1163 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1164 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1165 -moz-image-region: rect(32px, 80px, 48px, 64px);
1168 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1169 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1170 -moz-image-region: rect(0px, 96px, 16px, 80px);
1173 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1174 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1175 -moz-image-region: rect(16px, 96px, 32px, 80px);
1178 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1179 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1180 -moz-image-region: rect(32px, 96px, 48px, 80px);
1183 /* === END menupanel.inc.css === */
1185 .toolbarbutton-1:not([type="menu-button"]) {
1186 -moz-box-orient: vertical;
1190 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1196 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1197 .toolbarbutton-1[disabled="true"]:hover:active,
1198 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1202 .toolbarbutton-1:hover:active,
1203 .toolbarbutton-1[open="true"],
1204 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1206 padding-bottom: 0px;
1207 -moz-padding-start: 3px;
1208 -moz-padding-end: 1px;
1211 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1212 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1213 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1214 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1215 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1218 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1219 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1222 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1223 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1226 .toolbarbutton-1 > .toolbarbutton-icon,
1227 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1230 #nav-bar .toolbarbutton-1,
1231 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1234 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1235 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1236 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1239 #nav-bar #PanelUI-menu-button {
1240 /* -moz-padding-start: 7px;
1241 -moz-padding-end: 5px;*/
1244 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1245 /* padding-left: 5px;
1246 padding-right: 5px;*/
1249 #nav-bar .toolbarbutton-1 > menupopup {
1250 /* margin-top: -3px;*/
1253 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1254 /* margin-top: -8px;*/
1257 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1258 /* -moz-padding-end: 0;*/
1261 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1262 /* -moz-padding-start: 0;
1263 -moz-box-align: center;*/
1266 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1267 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1268 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1269 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1270 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1271 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1272 /* padding: 2px 6px;
1274 border-color: transparent;
1275 transition-property: background-color, border-color;
1276 transition-duration: 150ms;*/
1279 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1280 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1281 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1286 /* Help SDK icons fit: */
1287 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1291 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1292 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1296 #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,
1297 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1298 /* -moz-padding-end: 17px;*/
1301 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1304 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1307 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1310 #nav-bar .toolbaritem-combined-buttons {
1311 /* margin-left: 2px;
1312 margin-right: 2px;*/
1315 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1320 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1321 #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 {
1327 -moz-margin-end: -1px;
1331 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1334 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1335 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1336 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1337 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1338 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1339 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1340 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1343 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1344 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1345 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1346 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1347 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1350 #TabsToolbar .toolbarbutton-1,
1351 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1352 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1353 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1356 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1357 #TabsToolbar .toolbarbutton-1[open],
1358 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1359 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1360 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1363 /* unified back/forward button */
1368 #forward-button > menupopup {
1369 margin-top: 1px !important;
1372 #forward-button > .toolbarbutton-icon {
1373 background-clip: padding-box !important;
1374 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1375 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1379 -moz-margin-start: -6px !important;
1384 border-radius: 0 10000px 10000px 0;
1387 #forward-button:-moz-locale-dir(rtl) {
1388 border-radius: 10000px 0 0 10000px;
1391 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
1392 transition: opacity 150ms ease-out;
1395 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] {
1399 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
1404 /* padding-top: 3px !important;
1405 padding-bottom: 3px !important;
1406 -moz-padding-start: 5px !important;
1407 -moz-padding-end: 0 !important;*/
1410 border-radius: 10000px;
1414 margin-bottom: -2px;
1417 #back-button:-moz-locale-dir(rtl) {
1420 #back-button > menupopup {
1421 margin-top: -1px !important;
1424 #back-button > .toolbarbutton-icon {
1425 border-radius: 10000px !important;
1426 background-clip: padding-box !important;
1427 /* background-color: hsla(210,25%,98%,.08) !important;
1428 padding: 6px !important;
1429 border-color: hsla(210,4%,10%,.25) !important;*/
1430 transition-property: background-color, border-color !important;
1431 transition-duration: 250ms !important;
1434 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1435 /* background-color: hsla(210,4%,10%,.08) !important;
1436 box-shadow: none !important;*/
1439 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1440 #back-button[open="true"] > .toolbarbutton-icon {
1441 /* background-color: hsla(210,4%,10%,.12) !important;
1442 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1445 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1446 #forward-button:-moz-locale-dir(rtl) {
1447 transform: scaleX(-1);
1450 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1451 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1452 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1455 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1456 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1457 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1460 #home-button.bookmark-item {
1461 list-style-image: url("chrome://browser/skin/Toolbar.png");
1464 #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),
1465 #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),
1466 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1467 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1468 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1469 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1470 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1473 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1476 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1477 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1478 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1482 #downloads-button > .toolbarbutton-icon {
1486 /* tabview button & menu item */
1489 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1490 -moz-image-region: rect(1px, 89px, 17px, 73px);
1493 #menu_tabview[groups="0"] {
1494 -moz-image-region: rect(1px, 17px, 17px, 1px);
1497 #menu_tabview[groups="1"] {
1498 -moz-image-region: rect(1px, 35px, 17px, 19px);
1501 #menu_tabview[groups="2"] {
1502 -moz-image-region: rect(1px, 53px, 17px, 37px);
1505 #menu_tabview[groups="3"] {
1506 -moz-image-region: rect(1px, 71px, 17px, 55px);
1509 /* zoom control text (reset) button special case: */
1511 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1512 /* To make this line up with the icons, it needs the same height (18px) +
1513 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1514 * increase in text sizes would break things...
1519 /* ::::: fullscreen window controls ::::: */
1522 -moz-margin-start: 4px;
1528 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1533 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1536 #minimize-button:hover {
1537 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1541 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1544 #restore-button:hover {
1545 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1549 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1552 #close-button:hover {
1553 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1556 /* ::::: Location Bar ::::: */
1559 .searchbar-textbox {
1562 -moz-margin-start: 3px;
1566 /* make color as light as possible to deal with dark non-domain parts */
1570 #urlbar:-moz-lwtheme,
1571 .searchbar-textbox:-moz-lwtheme {
1572 /* background-color: rgba(255,255,255,.8);
1573 @navbarTextboxCustomBorder@
1577 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1578 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1579 /* background-color: rgba(255,255,255,.9);*/
1582 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1583 .searchbar-textbox:-moz-lwtheme[focused] {
1584 /* background-color: white;*/
1587 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
1589 -moz-margin-start: -22px;
1591 pointer-events: none;
1594 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
1595 /* -moz-border-start: none;
1597 pointer-events: all;
1600 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1601 transition: margin-left 150ms ease-out;
1604 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1605 /* border-top-left-radius: 0;
1606 border-bottom-left-radius: 0; */
1609 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1610 /* border-top-right-radius: 0;
1611 border-bottom-right-radius: 0; */
1614 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
1615 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1618 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
1622 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
1623 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1624 transition-delay: 100s;
1627 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
1628 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1629 margin-left: -22.01px;
1632 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1633 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1634 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1635 transform: scaleX(-1);
1638 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1639 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1644 -moz-box-orient: horizontal;
1645 -moz-box-align: stretch;
1648 .urlbar-textbox-container {
1649 -moz-box-align: stretch;
1653 -moz-margin-start: 0;
1657 -moz-box-align: center;
1664 .searchbar-engine-button,
1665 .search-go-container {
1669 .search-go-container > .search-go-button {
1673 .urlbar-icon:hover {
1676 .urlbar-icon[open="true"],
1677 .urlbar-icon:hover:active {
1680 #urlbar-search-splitter {
1682 -moz-margin-start: -3px;
1684 background: transparent;
1687 #urlbar-search-splitter + #urlbar-container > #urlbar,
1688 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1689 -moz-margin-start: 0;
1692 #urlbar-display-box {
1696 -moz-border-end: 1px solid #9C9CFF;
1697 -moz-margin-end: 3px;
1700 -moz-margin-start: 0;
1705 min-width: calc(54px + 11ch);
1715 #identity-box:-moz-locale-dir(ltr) {
1716 /* border-top-left-radius: 1.5px;
1717 border-bottom-left-radius: 1.5px;*/
1720 #identity-box:-moz-locale-dir(rtl) {
1721 /* border-top-right-radius: 1.5px;
1722 border-bottom-right-radius: 1.5px;*/
1725 #notification-popup-box:not([hidden]) + #identity-box {
1726 -moz-padding-start: 10px !important;
1730 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
1731 /* border-radius: 0; */
1732 -moz-padding-start: 2px;
1733 -moz-padding-end: 2px;
1734 -moz-margin-end: 1px;
1737 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1738 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1740 transition: padding-left;
1743 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1744 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1746 transition: padding-right;
1749 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1750 #notification-popup-box[hidden] + #identity-box {
1751 /* forward button hiding is delayed when hovered */
1752 transition-delay: 100s;
1755 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1756 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1757 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1758 padding-left: 2.01px;
1761 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1762 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1763 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1764 padding-right: 2.01px;
1767 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1768 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1769 -moz-margin-end: 3px;
1772 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1773 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1774 border-top-right-radius: 0;
1775 border-bottom-right-radius: 0;
1778 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1779 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1780 border-top-left-radius: 0;
1781 border-bottom-left-radius: 0;
1784 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1785 background-color: #000000;
1788 #identity-box:-moz-focusring {
1789 outline: 1px dotted #008484;
1790 outline-offset: -1px;
1793 #identity-box.verifiedDomain:-moz-focusring,
1794 #identity-box.verifiedIdentity:-moz-focusring {
1795 outline-color: #000000;
1798 #identity-icon-labels {
1799 -moz-margin-start: 1px;
1800 -moz-margin-end: 3px;
1803 /* Location bar dropmarker */
1805 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1806 background-color: transparent;
1809 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1810 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1815 .urlbar-history-dropmarker:hover {
1818 .urlbar-history-dropmarker:hover:active,
1819 .urlbar-history-dropmarker[open="true"] {
1822 /* page proxy icon */
1824 /* === BEGIN identity-block.inc.css === */
1826 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1827 /* Default theme does different color per channel, we can't as they do it build-time. */
1829 -moz-border-end: 1px solid #9C9CFF;
1832 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1834 -moz-border-end: 1px solid #008484;
1837 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1838 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1839 background-position: right;
1840 background-size: 1px;
1841 background-repeat: no-repeat;
1844 /* page proxy icon */
1846 #page-proxy-favicon {
1849 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1853 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1854 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1857 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1858 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1861 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1862 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1865 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1866 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1869 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1870 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1873 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1874 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1877 #page-proxy-favicon[pageproxystate="invalid"] {
1881 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1882 list-style-image: url("chrome://branding/content/icon64.png");
1885 #identity-popup-brandName {
1889 margin-bottom: .5em;
1892 #identity-popup-content-box {
1896 /* === END identity-block.inc.css === */
1898 #page-proxy-favicon {
1899 -moz-image-region: rect(0, 16px, 16px, 0);
1902 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1903 /* -moz-margin-end: 1px;*/
1906 #identity-box:hover > #page-proxy-favicon {
1907 -moz-image-region: rect(0, 32px, 16px, 16px);
1910 #identity-box:hover:active > #page-proxy-favicon,
1911 #identity-box[open=true] > #page-proxy-favicon {
1912 -moz-image-region: rect(0, 48px, 16px, 32px);
1915 #identity-box:hover {
1916 background-color: #FFCF00;
1920 #identity-box:hover:active,
1921 #identity-box[open=true] {
1922 background-color: #FF9F00;
1926 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1927 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1928 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1929 background-color: #9C9CFF;
1933 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1934 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1935 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1936 background-color: #008484;
1942 #treecolAutoCompleteImage {
1946 .ac-result-type-bookmark,
1947 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1948 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1949 -moz-image-region: rect(0px 16px 16px 0px);
1954 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1955 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1956 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1959 .ac-result-type-keyword,
1960 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1961 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1962 -moz-image-region: rect(0px 32px 16px 16px);
1967 .ac-result-type-tag,
1968 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1969 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1978 .ac-extra > .ac-comment {
1988 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1989 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1990 -moz-image-region: rect(0, 16px, 16px, 0);
1994 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1995 -moz-image-region: rect(16px, 16px, 32px, 0);
1998 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2002 .ac-comment[selected="true"],
2003 .ac-url-text[selected="true"],
2004 .ac-action-text[selected="true"] {
2005 color: inherit !important;
2008 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2009 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2015 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2016 border-top: 1px solid #9C9CFF;
2019 /* combined go/reload/stop button in location bar */
2021 #urlbar > toolbarbutton {
2022 -moz-margin-start: 0;
2024 background-origin: border-box;
2026 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2027 -moz-border-start: 1px solid #9C9CFF;
2030 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2031 border-top-left-radius: 0px;
2032 border-bottom-left-radius: 0px;
2035 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2036 border-top-right-radius: 0px;
2037 border-bottom-right-radius: 0px;
2040 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2041 #urlbar-reload-button:not(:hover) {
2042 -moz-border-start-style: none;
2043 -moz-padding-start: 3px;
2046 #urlbar-reload-button {
2047 -moz-image-region: rect(0px, 14px, 14px, 0px);
2050 #urlbar-reload-button[disabled=true] {
2051 -moz-image-region: rect(28px, 14px, 42px, 0px);
2054 #urlbar-reload-button:not([disabled=true]):hover {
2055 -moz-image-region: rect(14px, 14px, 28px, 0px);
2058 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2059 transform: scaleX(-1);
2063 -moz-image-region: rect(0, 42px, 14px, 28px);
2066 #urlbar-go-button:hover,
2067 -moz-image-region: rect(14px, 42px, 28px, 28px);
2070 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2071 transform: scaleX(-1);
2074 #urlbar-stop-button {
2075 -moz-image-region: rect(0px, 28px, 14px, 14px);
2078 #urlbar-stop-button:hover {
2079 -moz-image-region: rect(14px, 28px, 28px, 14px);
2082 /* popup blocker button */
2084 #page-report-button {
2085 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2086 -moz-image-region: rect(0, 16px, 16px, 0);
2089 #page-report-button:hover ,
2090 #page-report-button:hover:active,
2091 #page-report-button[open="true"] {
2092 -moz-image-region: rect(0, 32px, 16px, 16px);
2095 /* social share panel */
2097 #social-share-panel > iframe {
2098 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2103 .social-share-toolbar {
2104 border-right: 1px solid #9C9CFF;
2105 /* background-color: #000000; */
2108 #social-share-provider-buttons {
2112 #social-share-provider-buttons > .share-provider-button {
2113 -moz-appearance: none;
2121 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2122 #social-share-provider-buttons > .share-provider-button:hover,
2123 #social-share-provider-buttons > .share-provider-button:active {
2127 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2130 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2133 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2139 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2146 /* fixup corners for share panel */
2147 .social-panel > .social-panel-frame {
2148 border-radius: inherit;
2151 #social-share-panel {
2158 .social-share-frame {
2159 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2162 /* we resize our panels dynamically, make it look nice */
2163 transition: height 100ms ease-out, width 100ms ease-out;
2166 .social-share-frame:-moz-locale-dir(ltr) {
2167 border-top-left-radius: 0;
2168 border-bottom-left-radius: 0;
2169 border-top-right-radius: inherit;
2170 border-bottom-right-radius: inherit;
2173 .social-share-frame:-moz-locale-dir(rtl) {
2174 border-top-left-radius: inherit;
2175 border-bottom-left-radius: inherit;
2176 border-top-right-radius: 0;
2177 border-bottom-right-radius: 0;
2180 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2181 border-top-left-radius: inherit;
2182 border-bottom-left-radius: inherit;
2185 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2186 border-top-right-radius: inherit;
2187 border-bottom-right-radius: inherit;
2190 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2191 border-top-left-radius: inherit;
2192 border-bottom-left-radius: inherit;
2195 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2196 border-top-right-radius: inherit;
2197 border-bottom-right-radius: inherit;
2200 /* social recommending panel */
2202 #social-mark-button {
2203 -moz-image-region: rect(0, 16px, 16px, 0);
2206 /* bookmarks menu-button */
2208 #bookmarks-menu-button.bookmark-item {
2209 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2210 -moz-image-region: rect(0px 16px 16px 0px);
2213 #bookmarks-menu-button.bookmark-item[starred] {
2214 -moz-image-region: rect(0px 32px 16px 16px);
2217 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2218 -moz-margin-start: 5px;
2221 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2223 padding-bottom: 2px;
2226 #BMB_bookmarksPopup[side="top"],
2227 #BMB_bookmarksPopup[side="bottom"] {
2229 margin-right: -20px;
2232 #BMB_bookmarksPopup[side="left"],
2233 #BMB_bookmarksPopup[side="right"] {
2235 margin-bottom: -20px;
2238 /* bookmarking panel */
2240 #editBookmarkPanelStarIcon {
2241 list-style-image: url("chrome://browser/skin/places/starred48.png");
2246 #editBookmarkPanelStarIcon[unstarred] {
2247 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2250 #editBookmarkPanelTitle {
2254 #editBookmarkPanelHeader,
2255 #editBookmarkPanelContent {
2256 margin-bottom: .5em;
2259 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2260 #editBMPanel_folderTree {
2267 border-top: 1px solid #9C9CFF;
2268 border-bottom-left-radius: 5px;
2269 border-bottom-right-radius: 5px;
2273 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2274 -moz-margin-end: 10px;
2275 vertical-align: middle;
2278 .panel-promo-closebutton {
2279 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2280 -moz-margin-end: -3px;
2284 .panel-promo-closebutton:hover {
2285 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2288 .panel-promo-closebutton:hover:active {
2289 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2292 .panel-promo-closebutton > .toolbarbutton-text {
2297 /* ::::: content area ::::: */
2300 background-color: Window;
2304 -moz-padding-start: 0px;
2307 .browserContainer > findbar {
2309 background-color: -moz-dialog;
2310 color: -moz-DialogText;
2319 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2322 #TabsToolbar .toolbar-holder {
2323 background-color: #000000; /* correct effect of being an actual toolbar */
2326 #main-window[disablechrome] #TabsToolbar,
2327 #TabsToolbar[tabsontop="false"] {
2328 border-bottom: 1px solid #008484;
2331 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2334 #main-window[tabsintitlebar] #TabsToolbar {
2335 background-color: transparent;
2338 /* === BEGIN tabs.inc.css === */
2341 .tabs-newtab-button,
2342 #TabsToolbar > #new-tab-button {
2347 padding: 1px 4px 2px;
2350 .tabbrowser-tab:first-of-type {
2351 -moz-margin-start: 2px;
2354 .tabs-newtab-button,
2355 #TabsToolbar > #new-tab-button {
2356 border-radius: 8px 8px 0px 0px;
2357 -moz-margin-start: 0;
2360 .tabs-newtab-button:not(:hover),
2361 #TabsToolbar > #new-tab-button:not(:hover) {
2362 background-color: #C09070;
2365 .tabbrowser-tab[remote] {
2366 text-decoration: underline;
2369 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2370 .tabbrowser-tab[selected=true] {
2371 /* position: relative;
2375 .tab-background-middle {
2393 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2397 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2400 .tab-throbber[progress] {
2401 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2404 .tab-throbber:not([pinned]),
2405 .tab-icon-image:not([pinned]) {
2406 -moz-margin-end: 3px;
2409 .tab-throbber[pinned],
2410 .tab-icon-image[pinned] {
2411 -moz-margin-start: 2px;
2412 -moz-margin-end: 2px;
2424 .tabs-newtab-button {
2425 /* overlap the tab curves */
2428 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2431 .tab-background-start[selected=true]::after,
2432 .tab-background-start[selected=true]::before,
2433 .tab-background-start,
2434 .tab-background-end,
2435 .tab-background-end[selected=true]::after,
2436 .tab-background-end[selected=true]::before {
2439 .tabbrowser-tab:not([selected=true]),
2440 .tabbrowser-tab:-moz-lwtheme {
2443 /* tabbrowser-tab focus ring */
2444 .tabbrowser-tab:focus {
2445 outline: 1px dotted;
2450 .tabbrowser-tab[selected="true"] {
2453 /* End selected tab */
2455 /* Background tabs */
2457 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2458 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2459 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2460 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2463 /* End background tabs */
2465 /* Tab pointer-events */
2468 pointer-events: none;
2471 .tab-background-middle,
2472 .tabs-newtab-button,
2474 pointer-events: auto;
2479 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2480 background-color: #E7ADE7;
2483 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2484 background-color: #3333FF;
2488 /* New tab button */
2490 .tabs-newtab-button {
2494 /* === END tabs.inc.css === */
2496 /* Tab DnD indicator */
2497 .tab-drop-indicator {
2498 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2499 margin-bottom: -11px;
2502 /* Tab close button */
2504 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2507 .tab-close-button:hover,
2508 .tab-close-button:hover[selected="true"] {
2509 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2512 .tab-close-button:hover:active,
2513 .tab-close-button:hover:active[selected="true"] {
2514 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2517 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2519 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2520 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2524 background-origin: border-box;
2527 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2528 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2529 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2530 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2533 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2534 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2537 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2538 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2539 /* transform: scaleX(-1);*/
2542 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2543 transition: 1s background-color ease-out;
2546 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2547 background-color: #008484;
2550 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2551 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2552 /* border-width: 0 2px 0 0;
2553 border-style: solid;
2554 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2557 .tabs-newtab-button > .toolbarbutton-icon {
2559 margin-bottom: -1px;
2562 .tabs-newtab-button,
2563 #TabsToolbar > #new-tab-button,
2564 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2565 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2566 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2567 -moz-image-region: rect(0, 16px, 18px, 0);
2570 .tabs-newtab-button,
2571 .tabs-newtab-button:hover,
2572 #TabsToolbar > #new-tab-button,
2573 #TabsToolbar > #new-tab-button:hover {
2574 -moz-image-region: rect(0, 32px, 18px, 16px);
2577 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2578 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2579 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2580 .tabs-newtab-button:-moz-lwtheme-brighttext,
2581 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2582 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2585 #TabsToolbar > #new-tab-button {
2590 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2593 #alltabs-button:hover,
2594 #alltabs-button:hover:active,
2595 #alltabs-button[open="true"] {
2596 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2599 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2600 #alltabs-button:-moz-lwtheme-brighttext {
2603 #alltabs-button > .toolbarbutton-icon {
2607 #alltabs-button > .toolbarbutton-menu-dropmarker {
2611 /* All tabs menupopup */
2612 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2613 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2614 -moz-image-region: auto;
2617 .alltabs-item[selected="true"] {
2621 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2622 list-style-image: url("chrome://global/skin/icons/loading.gif");
2625 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2626 background-color: #402800;
2629 /* Tabstrip close button */
2634 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2637 .tabs-closebutton > .toolbarbutton-icon {
2640 .tabs-closebutton > .toolbarbutton-text {
2644 .tabs-closebutton:hover,
2645 .tabs-closebutton:hover:active {
2646 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2649 toolbarbutton.chevron {
2650 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2653 toolbarbutton.chevron:hover {
2654 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2657 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2658 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2659 transform: scaleX(-1);
2662 toolbarbutton.chevron > .toolbarbutton-text,
2663 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2667 toolbarbutton.chevron > .toolbarbutton-icon {
2671 #sidebar-throbber[loading="true"] {
2672 list-style-image: url("chrome://global/skin/icons/loading.gif");
2673 -moz-margin-end: 4px;
2676 /* Bookmarks toolbar */
2677 #PlacesToolbarDropIndicator {
2678 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2681 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2682 background-color: #008484 !important;
2683 color: #FFCF00 !important;
2686 /* rules for menupopup drop indicators */
2687 .menupopup-drop-indicator-bar {
2689 /* these two margins must together compensate the indicator's height */
2691 margin-bottom: -1px;
2694 .menupopup-drop-indicator {
2695 list-style-image: none;
2697 -moz-margin-end: -4em;
2698 background-color: #008484;
2701 /* ::::: Identity Indicator Styling ::::: */
2704 #identity-popup-icon {
2708 list-style-image: url("chrome://browser/skin/identity.png");
2709 -moz-image-region: rect(0px, 64px, 64px, 0px);
2712 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2713 -moz-image-region: rect(64px, 64px, 128px, 0px);
2716 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2717 -moz-image-region: rect(128px, 64px, 192px, 0px);
2720 /* Popup Body Text */
2721 .identity-popup-description {
2722 white-space: pre-wrap;
2723 -moz-padding-start: 15px;
2727 .identity-popup-label {
2728 white-space: pre-wrap;
2729 -moz-padding-start: 15px;
2733 #identity-popup-content-host,
2734 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2738 #identity-popup-content-host {
2745 #identity-popup-content-owner {
2747 margin-bottom: 0 !important;
2752 .verifiedDomain > #identity-popup-content-owner {
2753 font-weight: normal;
2756 #identity-popup-content-verifier {
2760 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2761 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2763 -moz-margin-start: -24px;
2766 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2767 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2768 list-style-image: url("chrome://browser/skin/Secure24.png");
2771 #identity-popup-help-icon {
2773 margin: 7px 0 0 -3px;
2776 list-style-image: url("chrome://global/skin/icons/question-16.png");
2780 #identity-popup-help-icon > .button-box > .button-text {
2784 #identity-popup-help-icon > .button-box > .button-icon {
2789 #identity-popup-more-info-button {
2795 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2799 #identity-popup-container {
2804 #identity-popup-button-container {
2805 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2810 .popup-notification-icon {
2813 -moz-margin-end: 10px;
2816 .popup-notification-icon[popupid="geolocation"] {
2817 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2820 .popup-notification-icon[popupid="xpinstall-disabled"],
2821 .popup-notification-icon[popupid="addon-progress"],
2822 .popup-notification-icon[popupid="addon-install-cancelled"],
2823 .popup-notification-icon[popupid="addon-install-blocked"],
2824 .popup-notification-icon[popupid="addon-install-failed"],
2825 .popup-notification-icon[popupid="addon-install-complete"] {
2826 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2831 .popup-notification-icon[popupid="click-to-play-plugins"] {
2832 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2835 .popup-notification-icon[popupid="plugins-not-found"] {
2836 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2839 .popup-notification-icon[popupid="web-notifications"] {
2840 list-style-image: url("chrome://browser/skin/notification-64.png");
2843 .addon-progress-description {
2848 .popup-progress-label,
2849 .popup-progress-meter {
2850 -moz-margin-start: 0;
2854 .popup-progress-cancel {
2855 -moz-appearance: none;
2856 background: transparent;
2862 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2863 -moz-image-region: rect(0px, 32px, 16px, 16px);
2866 .popup-progress-cancel:hover {
2867 -moz-image-region: rect(16px, 32px, 32px, 16px);
2870 .popup-progress-cancel:active {
2871 -moz-image-region: rect(32px, 32px, 48px, 16px);
2874 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2875 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2876 .popup-notification-icon[popupid*="offline-app-requested"],
2877 .popup-notification-icon[popupid="offline-app-usage"] {
2878 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2881 .popup-notification-icon[popupid="password-save"],
2882 .popup-notification-icon[popupid="password-change"] {
2883 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2886 .popup-notification-icon[popupid="webapps-install-progress"],
2887 .popup-notification-icon[popupid="webapps-install"] {
2888 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2891 .popup-notification-icon[popupid="mixed-content-blocked"] {
2892 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2895 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2896 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2897 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2900 .popup-notification-icon[popupid="pointerLock"] {
2901 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2904 /* Notification icon box */
2905 #notification-popup-box {
2907 background-color: #000000;
2908 background-clip: padding-box;
2911 border-radius: 3px 0 0 3px;
2912 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2913 -moz-margin-end: -8px;
2914 border-right-width: 8px;
2917 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
2918 /* padding-left: 5px; */
2921 #notification-popup-box:-moz-locale-dir(rtl),
2922 .notification-anchor-icon:-moz-locale-dir(rtl) {
2923 transform: scaleX(-1);
2926 .notification-anchor-icon {
2932 .notification-anchor-icon:-moz-focusring {
2933 outline: 1px dotted #008484;
2934 /* outline-offset: -3px; */
2937 .default-notification-icon,
2938 #default-notification-icon {
2939 list-style-image: url("chrome://global/skin/icons/information-16.png");
2942 .identity-notification-icon,
2943 #identity-notification-icon {
2944 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2947 .geo-notification-icon,
2948 #geo-notification-icon {
2949 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2952 #addons-notification-icon {
2953 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2956 .indexedDB-notification-icon,
2957 #indexedDB-notification-icon {
2958 list-style-image: url("chrome://global/skin/icons/question-16.png");
2961 #password-notification-icon {
2962 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2965 #webapps-notification-icon {
2966 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2969 #plugins-notification-icon {
2970 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
2973 #plugins-notification-icon.plugin-hidden {
2974 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
2977 #plugins-notification-icon.plugin-blocked {
2978 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
2981 #plugins-notification-icon {
2982 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
2985 #plugins-notification-icon:hover {
2986 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
2989 #plugin-install-notification-icon {
2990 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
2993 #notification-popup-box[hidden] {
2994 /* Override display:none to make the pluginBlockedNotification animation work
2995 when showing the notification repeatedly. */
2997 visibility: collapse;
3000 #plugins-notification-icon.plugin-blocked[showing] {
3001 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3004 @keyframes pluginBlockedNotification {
3013 .mixed-content-blocked-notification-icon,
3014 #mixed-content-blocked-notification-icon {
3015 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3018 .webRTC-shareDevices-notification-icon,
3019 #webRTC-shareDevices-notification-icon {
3020 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3023 .webRTC-sharingDevices-notification-icon,
3024 #webRTC-sharingDevices-notification-icon {
3025 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3028 .web-notifications-notification-icon,
3029 #web-notifications-notification-icon {
3030 list-style-image: url("chrome://browser/skin/notification-16.png");
3033 #pointerLock-notification-icon {
3034 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3036 #pointerLock-cancel {
3040 /* Bookmarks roots menu-items */
3041 #subscribeToPageMenuitem:not([disabled]),
3042 #subscribeToPageMenupopup,
3043 #BMB_subscribeToPageMenuitem:not([disabled]),
3044 #BMB_subscribeToPageMenupopup {
3045 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3048 #bookmarksToolbarFolderMenu,
3049 #BMB_bookmarksToolbar,
3050 #panelMenu_bookmarksToolbar {
3051 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3052 -moz-image-region: auto;
3055 #BMB_unsortedBookmarks,
3056 #panelMenu_unsortedBookmarks {
3057 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3058 -moz-image-region: auto;
3061 /* ::::: Keyboard UI Panel ::::: */
3066 border-radius: 20px;
3069 .KUI-panel[level="top"] {
3070 /*background-color: rgba(27%,27%,27%,.65);*/
3076 padding: 20px 10px 10px;
3080 .ctrlTab-favicon[src] {
3081 background-color: #000000;
3087 .ctrlTab-preview-inner > .tabPreview-canvas {
3090 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3094 .ctrlTab-preview-inner {
3095 padding-bottom: 10px;
3098 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3100 background-color: #000000;
3101 border-radius: .5em;
3104 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3106 background-color: #000000;
3109 border: 2px solid #9C9CFF;
3110 border-radius: .5em;
3113 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3114 margin: -10px -10px 0;
3125 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3133 .sync-panel-button-box {
3137 #sync-error-panel-title,
3138 #sync-start-panel-title {
3142 #sync-start-panel-subtitle,
3143 #sync-error-panel-subtitle {
3149 .statuspanel-label {
3152 background: #404000;
3153 border: 1px none #9C9CFF;
3154 border-top-style: solid;
3159 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3160 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3161 border-right-style: solid;
3162 border-top-right-radius: .3em;
3166 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3167 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3168 border-left-style: solid;
3169 border-top-left-radius: .3em;
3173 /* HACK to abolish devily color on main content */
3176 background-color: transparent !important;
3179 /* === BEGIN highlighter.inc.css === */
3183 .highlighter-outline {
3184 box-shadow: 0 0 0 1px black;
3185 outline: 1px dashed #A09090;
3188 /* Highlighter - Node Infobar */
3190 .highlighter-nodeinfobar {
3193 background-color: #000000;
3194 background-clip: padding-box;
3195 border: 1px solid #008484;
3197 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3202 /* Highlighter - Node Infobar - text */
3204 .highlighter-nodeinfobar-text {
3206 /* 100% - size of the buttons and margins */
3207 max-width: calc(100% - 2 * (26px + 6px));
3208 padding-bottom: 1px;
3211 html|*.highlighter-nodeinfobar-tagname {
3215 html|*.highlighter-nodeinfobar-id {
3219 html|*.highlighter-nodeinfobar-pseudo-classes {
3223 /* Highlighter - Node Infobar - box & arrow */
3225 .highlighter-nodeinfobar-arrow {
3228 -moz-margin-start: calc(50% - 7px);
3229 transform: rotate(-45deg);
3230 background-clip: padding-box;
3231 background-repeat: no-repeat;
3234 .highlighter-nodeinfobar-arrow-top {
3235 margin-bottom: -8px;
3237 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3240 .highlighter-nodeinfobar-arrow-bottom {
3243 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3246 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3250 /* === END highlighter.inc.css === */
3252 #full-screen-warning-message {
3253 background-color: #000000;
3258 box-shadow: 0 0 2px #9C9CFF;
3261 #full-screen-warning-container[obscure-browser] {
3262 background-color: rgba(0,0,0,0.3);
3265 .full-screen-description {
3269 #full-screen-domain-text {
3273 .full-screen-approval-button,
3274 #full-screen-remember-decision {
3278 /* === BEGIN commandline.inc.css === */
3280 /* Developer toolbar */
3282 #developer-toolbar {
3283 border-top: 3px solid #000000;
3284 border-bottom: none;
3287 #developer-toolbar .toolbar-holder {
3288 background-color: #8050B0;
3292 #developer-toolbar .toolbar-holder {
3293 background-color: #8050B0;
3297 #developer-toolbar .toolbar-startcap,
3298 #developer-toolbar .toolbar-endcap{
3299 background-color: #6000CF;
3302 #developer-toolbar {
3304 min-height: 32px; */
3307 #developer-toolbar > toolbarbutton {
3313 .developer-toolbar-button > image {
3314 /* margin: auto 10px; */
3317 #developer-toolbar-toolbox-button > label {
3321 #developer-toolbar-toolbox-button {
3322 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3323 -moz-image-region: rect(0px, 16px, 16px, 0px);
3326 #developer-toolbar-toolbox-button > label {
3330 #developer-toolbar-toolbox-button:hover,
3331 #developer-toolbar-toolbox-button:hover:active,
3332 #developer-toolbar-toolbox-button[checked=true] {
3333 -moz-image-region: rect(0px, 32px, 16px, 16px);
3336 #developer-toolbar-closebutton {
3337 list-style-image: url("chrome://browser/skin/devtools/close.png");
3338 -moz-image-region: rect(0px, 16px, 16px, 0px);
3343 #developer-toolbar-closebutton > .toolbarbutton-icon {
3346 #developer-toolbar-closebutton > .toolbarbutton-text {
3350 #developer-toolbar-closebutton:hover,
3351 #developer-toolbar-closebutton:hover:active {
3352 -moz-image-region: rect(0px, 32px, 16px, 16px);
3357 html|*#gcli-tooltip-frame,
3358 html|*#gcli-output-frame {
3361 background-color: transparent;
3367 background-color: transparent;
3370 .gclitoolbar-input-node,
3371 .gclitoolbar-complete-node {
3373 -moz-box-align: center;
3377 background-color: transparent;
3380 .gclitoolbar-input-node {
3382 /* line-height: 32px;
3383 outline-style: none; */
3384 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3385 background-repeat: no-repeat;
3386 background-color: rgba(0, 0, 0, .75);
3389 .gclitoolbar-input-node[focused="true"] {
3390 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3391 background-color: #000000;
3394 .gclitoolbar-input-node:not([focused="true"]) {
3395 border-color: transparent;
3398 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3399 background-color: #008484;
3404 .gclitoolbar-complete-node {
3406 background-color: transparent;
3409 pointer-events: none;
3412 .gcli-in-incomplete,
3416 .gcli-in-closebrace,
3423 .gcli-in-incomplete {
3424 border-bottom: 2px dotted #8050B0;
3428 border-bottom: 2px dotted #FF0000;
3439 .gcli-in-closebrace {
3443 /* === END commandline.inc.css === */
3445 /* === BEGIN responsivedesign.inc.css === */
3447 /* Responsive Mode */
3449 .browserContainer[responsivemode] {
3450 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3451 padding: 0 20px 20px 20px;
3454 .browserStack[responsivemode] {
3455 box-shadow: 0 0 7px #9C9CFF;
3458 .devtools-responsiveui-toolbar {
3459 background: transparent;
3460 /* text color is textColor from dark theme, since no theme is applied to
3461 * the responsive toolbar.
3467 border-bottom-width: 0;
3470 .devtools-responsiveui-menulist,
3471 .devtools-responsiveui-toolbarbutton {
3472 -moz-box-align: center;
3474 /* min-height: 22px;*/
3475 /* margin: 0 3px; */
3478 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3479 -moz-box-orient: horizontal;
3482 .devtools-responsiveui-menulist:-moz-focusring,
3483 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3484 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3485 outline-offset: -4px;*/
3488 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3492 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3493 /* border-color: hsla(210,8%,5%,.6);
3494 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3495 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); */
3498 .devtools-responsiveui-menulist[open=true],
3499 .devtools-responsiveui-toolbarbutton[open=true],
3500 .devtools-responsiveui-toolbarbutton[checked=true] {
3501 /* border-color: hsla(210,8%,5%,.6) !important;
3502 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3503 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); */
3506 .devtools-responsiveui-toolbarbutton[checked=true] {
3507 /* color: hsl(208,100%,60%); */
3510 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3511 /* background-color: transparent !important;*/
3514 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3515 /* background-color: hsla(210,8%,5%,.2) !important;*/
3518 .devtools-responsiveui-menulist > .menulist-label-box {
3522 .devtools-responsiveui-menulist > .menulist-dropmarker {
3523 /* display: -moz-box;
3524 background-color: transparent;
3525 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3526 -moz-box-align: center;
3531 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3534 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3535 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3538 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3539 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3542 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3543 /* padding: 0 1px;*/
3544 -moz-box-align: stretch;
3547 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3548 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3549 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3550 -moz-box-align: center;
3554 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3555 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3559 .devtools-responsiveui-close {
3560 list-style-image: url("chrome://browser/skin/devtools/close.png");
3561 -moz-image-region: rect(0px,16px,16px,0px);
3564 .devtools-responsiveui-close:hover {
3565 -moz-image-region: rect(0px,32px,16px,16px);
3568 .devtools-responsiveui-rotate {
3569 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3570 -moz-image-region: rect(0px,16px,16px,0px);
3573 .devtools-responsiveui-rotate:hover {
3574 -moz-image-region: rect(0px,32px,16px,16px);
3577 .devtools-responsiveui-touch {
3578 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3579 -moz-image-region: rect(0px,16px,16px,0px);
3582 .devtools-responsiveui-touch:hover,
3583 .devtools-responsiveui-touch[checked],
3584 .devtools-responsiveui-touch[checked]:hover {
3585 -moz-image-region: rect(0px,32px,16px,16px);
3588 .devtools-responsiveui-screenshot {
3589 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3590 -moz-image-region: rect(0px,16px,16px,0px);
3593 .devtools-responsiveui-screenshot:hover {
3594 -moz-image-region: rect(0px,32px,16px,16px);
3597 .devtools-responsiveui-resizebarV {
3601 transform: translate(12px, -12px);
3602 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3605 .devtools-responsiveui-resizebarH {
3609 transform: translate(-12px, 12px);
3610 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3613 .devtools-responsiveui-resizehandle {
3617 transform: translate(12px, 12px);
3618 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3621 /* === END responsivedesign.inc.css === */
3623 /* === including indicator.css is done at the start of the file === */
3627 #developer-toolbar-toolbox-button[error-count]:before {
3631 background-color: #FF0000;
3633 -moz-margin-end: 5px;
3636 /* Social toolbar item */
3638 #social-provider-button {
3639 -moz-image-region: rect(0, 16px, 16px, 0);
3640 list-style-image: url("chrome://browser/skin/social/services-16.png");
3643 #social-provider-button > .toolbarbutton-menu-dropmarker {
3647 .toolbarbutton-badge-container {
3653 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3657 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3663 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3667 .toolbarbutton-badge[badge=""] {
3670 .toolbarbutton-badge[badge]:not([badge=""])::after {
3671 /* The |content| property is set in the content stylesheet. */
3676 background-color: #000000;
3677 border: 1px solid #9C9CFF;
3684 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3689 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3694 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3699 #social-notification-icon-mentions {
3700 background-color: #000000;
3702 -moz-margin-start: 2px;
3705 #social-notification-icon-mentions:hover {
3706 background-color: #FFCF00;
3709 #social-notification-icon-mentions[open="true"] {
3710 background-color: #FF9F00;
3713 #social-sidebar-splitter {
3717 .popup-notification-icon[popupid="servicesInstall"] {
3718 list-style-image: url("chrome://browser/skin/social/services-64.png");
3720 #servicesInstall-notification-icon {
3721 list-style-image: url("chrome://browser/skin/social/services-16.png");
3723 #social-undoactivation-button,
3724 #servicesInstall-learnmore-link {
3725 -moz-margin-start: 0; /* override default label margin to match description margin */
3728 #socialActivatedNotification .popup-notification-button-container {
3732 .social-activation-icon {
3739 #social-activation-message {
3743 #social-activation-message > label {
3747 /* social toolbar provider menu */
3748 .social-statusarea-popup {
3751 margin-right: -12px;
3754 .social-statusarea-user {
3755 border-bottom: 1px solid #9C9CFF;
3756 background-color: #000000;
3762 .social-statusarea-user-portrait {
3769 .social-statusarea-loggedInStatus {
3770 background: transparent;
3775 list-style-image: none;
3778 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3779 text-decoration: underline;
3782 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3786 .social-panel-frame {
3787 border-radius: inherit;
3790 /* === BEGIN chat.inc.css === */
3792 #social-sidebar-header {
3796 #social-sidebar-button {
3797 -moz-appearance: none;
3798 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3803 #social-sidebar-button > .toolbarbutton-icon {
3807 #social-sidebar-button:hover,
3808 #social-sidebar-button:hover:active {
3809 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3811 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3815 #social-sidebar-button[loading="true"] {
3816 list-style-image: url("chrome://global/skin/icons/loading.gif");
3819 #social-sidebar-favico {
3832 .chat-toolbarbutton {
3833 -moz-appearance: none;
3841 .chat-toolbarbutton > .toolbarbutton-text {
3845 .chat-toolbarbutton > .toolbarbutton-icon {
3849 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3854 .chat-close-button {
3855 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3856 -moz-image-region: rect(0, 16px, 16px, 0);
3859 .chat-close-button:hover,
3860 .chat-close-button:hover:active {
3861 -moz-image-region: rect(0, 32px, 16px, 16px);
3864 .chat-minimize-button {
3865 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3866 -moz-image-region: rect(16px, 16px, 32px, 0);
3869 .chat-minimize-button:hover:active,
3870 .chat-minimize-button:hover {
3871 -moz-image-region: rect(16px, 32px, 32px, 16px);
3875 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3876 -moz-image-region: rect(48px, 16px, 64px, 0);
3879 .chat-swap-button:hover:active,
3880 .chat-swap-button:hover {
3881 -moz-image-region: rect(48px, 32px, 64px, 16px);
3884 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3885 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3886 -moz-image-region: rect(32px, 16px, 48px, 0);
3889 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3890 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3891 -moz-image-region: rect(32px, 32px, 48px, 16px);
3896 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3902 background-color: #9C9CFF;
3909 -moz-padding-start: 6px;
3911 border-bottom: 1px solid #008484;
3915 .chat-titlebar > .notification-anchor-icon {
3920 .chat-titlebar[minimized="true"] {
3921 border-bottom: none;
3924 .chat-titlebar[selected] {
3925 background-color: #008484;
3928 .chat-titlebar[activity] {
3929 background-color: #E7ADE7;
3939 list-style-image: url("chrome://browser/skin/social/services-16.png");
3940 background-color: #000000;
3946 border-top: 1px solid #008484;
3947 -moz-border-end: 1px solid #008484;
3950 @media (min-resolution: 2dppx) {
3952 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3956 .chatbar-button > .toolbarbutton-icon {
3960 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3967 .chatbar-button > .toolbarbutton-icon {
3971 .chatbar-button:hover > .toolbarbutton-icon,
3972 .chatbar-button[open="true"] > .toolbarbutton-icon {
3976 .chatbar-button:hover,
3977 .chatbar-button[open="true"] {
3980 .chatbar-button > .toolbarbutton-text,
3981 .chatbar-button > .toolbarbutton-menu-dropmarker {
3985 .chatbar-button[activity]:not([open="true"]) {
3986 background-color: #E7ADE7;
3989 .chatbar-button > menupopup > menuitem[activity] {
3994 background: transparent;
4000 -moz-margin-end: 20px;
4006 -moz-margin-start: 4px;
4007 background-color: #000000;
4008 border: 1px solid #9C9CFF;
4009 border-bottom: none;
4010 border-top-left-radius: 2.5px;
4011 border-top-right-radius: 2.5px;
4014 chatbox[minimized="true"] {
4020 -moz-margin-start: 0px;
4026 /* === END chat.inc.css === */
4029 /* background-color: #c4cfde; */
4032 .chat-titlebar[selected] {
4033 /* background-color: #dae3f0; */
4037 -moz-appearance: none;
4038 /* background-color: #c4cfde; */
4041 .chatbar-button > .toolbarbutton-icon {
4042 /* -moz-margin-end: 0; */
4045 .chatbar-button:hover,
4046 .chatbar-button[open="true"] {
4047 /* background-color: #dae3f0; */
4050 .chatbar-button[activity]:not([open="true"]) {
4054 /* border-top-left-radius: 2.5px;
4055 border-top-right-radius: 2.5px; */
4058 /* === BEGIN plugin-doorhanger.inc.css === */
4061 * Plugin Doorhanger Styles
4064 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4065 padding: 6px 1px 2px;
4068 .click-to-play-plugins-notification-center-box {
4071 .plugin-popupnotification-centeritem:nth-child(odd) {
4072 /* background-color: rgba(0,0,0,0.1);*/
4075 .center-item-label {
4077 text-overflow: ellipsis;
4080 .center-item-warning-icon {
4081 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4082 background-repeat: no-repeat;
4085 -moz-margin-start: 6px;
4088 .click-to-play-plugins-notification-button-container {
4091 .click-to-play-popup-button {
4095 .click-to-play-plugins-notification-description-box {
4099 padding-bottom: 3px;
4102 .click-to-play-plugins-outer-description {
4106 .click-to-play-plugins-notification-link,
4111 .messageImage[value="plugin-hidden"] {
4112 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4115 /* Keep any changes to this style in sync with pluginProblem.css */
4116 notification.pluginVulnerable {
4119 notification.pluginVulnerable .messageImage {
4120 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4123 /* === END plugin-doorhanger.inc.css === */
4125 /* === BEGIN customizeMode.inc.css === */
4127 /* Customization mode */
4129 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4133 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4134 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4135 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4140 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4141 pointer-events: none;
4144 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4145 #PanelUI-contents > .panel-customization-placeholder {
4146 -moz-outline-radius: 2.5px;
4147 outline: 1px dashed transparent;
4150 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4151 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4152 -moz-box-ordinal-group: 0;
4157 outline-offset: -2px;
4158 pointer-events: none;
4164 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4165 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4166 offset from the bottom effectively the same as other targets (-2px). */
4167 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4171 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4172 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4173 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4174 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4178 /* Most target outlines are shown on hover and drag over but the panel menu uses
4179 placeholders instead. */
4180 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4181 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4182 /* nav-bar and panel outlines are always shown */
4183 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4184 outline-color: #A09090;
4187 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4188 transition: outline-color 250ms linear;
4191 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4192 transition: outline-color 250ms linear;
4193 outline-color: #9C9CFF;
4196 #PanelUI-contents > .panel-customization-placeholder {
4198 outline-offset: -5px;
4201 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4203 /* padding-left: 10px;
4204 padding-right: 10px;*/
4207 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4211 #customization-container {
4212 background-color: #000000;
4215 #customization-palette,
4216 #customization-empty {
4217 padding: 0 15px 15px;
4220 #customization-header {
4224 font-weight: lighter;
4226 padding: 15px 15px 0;
4229 #customization-panel-container {
4230 padding: 10px 10px 0px;
4233 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4234 #customization-footer {
4235 /*background-color: rgb(236,236,236);*/
4238 #customization-footer {
4239 border-top: 1px solid #9C9CFF;
4243 .customizationmode-button {
4247 .customizationmode-button:hover {
4250 .customizationmode-button[disabled="true"] {
4253 #customization-titlebar-visibility-button {
4254 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4255 -moz-image-region: rect(0, 16px, 16px, 0);
4257 -moz-margin-end: 10px;
4260 #customization-titlebar-visibility-button:hover {
4261 -moz-image-region: rect(16px, 16px, 32px, 0);
4264 #customization-titlebar-visibility-button > .button-box {
4266 padding-bottom: 1px;
4269 #customization-titlebar-visibility-button:hover:active > .button-box {
4274 #customization-titlebar-visibility-button > .button-box > .button-text {
4275 /* Sadly, button.css thinks its margins are perfect for everyone. */
4276 -moz-margin-start: 5px !important;
4279 #customization-titlebar-visibility-button[checked] {
4280 -moz-image-region: rect(0, 32px, 16px, 16px);
4281 background-color: #008484;
4284 #customization-titlebar-visibility-button[checked]:hover {
4285 -moz-image-region: rect(16px, 32px, 32px, 16px);
4286 background-color: #FFCF00;
4289 #customization-titlebar-visibility-button[checked]:hover:active {
4290 background-color: #FF9F00;
4293 #customization-undo-reset-button {
4294 -moz-margin-end: 10px;
4297 #main-window[customize-entered] #customization-panel-container {
4298 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4299 background-position: left top;
4300 background-repeat: repeat;
4301 background-size: auto;
4302 background-attachment: fixed;
4305 toolbarpaletteitem[place="toolbar"] {
4306 transition: border-width 250ms ease-in-out;
4309 toolbarpaletteitem[mousedown] {
4310 outline: 1px solid #008484;
4311 cursor: -moz-grabbing;
4315 .panel-customization-placeholder,
4316 toolbarpaletteitem[place="palette"],
4317 toolbarpaletteitem[place="panel"] {
4318 transition: transform .3s ease-in-out;
4321 #customization-palette {
4322 transition: opacity .3s ease-in-out;
4326 #customization-palette[showing="true"] {
4330 toolbarpaletteitem[notransition].panel-customization-placeholder,
4331 toolbarpaletteitem[notransition][place="toolbar"],
4332 toolbarpaletteitem[notransition][place="palette"],
4333 toolbarpaletteitem[notransition][place="panel"] {
4337 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4338 toolbarpaletteitem > toolbaritem.panel-wide-item,
4339 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4340 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4343 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4344 transform: scale(1.3);
4347 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4348 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4349 transform: scale(1.1);
4352 /* Override the toolkit styling for items being dragged over. */
4353 toolbarpaletteitem[place="toolbar"] {
4354 border-left-width: 0;
4355 border-right-width: 0;
4360 #customization-palette:not([hidden]) {
4361 margin-bottom: 25px;
4364 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4365 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4366 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4367 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4371 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4372 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4382 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4383 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4387 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4388 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4391 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4392 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4396 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4397 -moz-box-pack: center;
4401 #customization-palette > toolbarpaletteitem > label {
4407 /* === END customizeMode.inc.css === */
4409 /* === BEGIN customizeTip.inc.css === */
4411 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4418 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4419 border: 1px solid #9C9CFF;
4422 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4423 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4426 .customization-tipPanel-infoBox {
4427 margin: 20px 25px 25px;
4429 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4430 background-repeat: no-repeat;
4433 .customization-tipPanel-content {
4439 .customization-tipPanel-em {
4444 .customization-tipPanel-contentImage {
4446 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4454 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4455 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4458 .customization-tipPanel-link {
4459 -moz-appearance: none;
4460 background: transparent;
4468 .customization-tipPanel-link > .button-box > .button-text {
4469 margin: 0 !important;
4472 .customization-tipPanel-closeBox > .close-icon {
4473 -moz-appearance: none;
4475 -moz-margin-end: -25px;
4478 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4479 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4480 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4483 /* === END customizeTip.inc.css === */
4486 * This next rule is a hack to disable subpixel anti-aliasing on all
4487 * labels during the customize mode transition. Subpixel anti-aliasing
4488 * on Windows with Direct2D layers acceleration is particularly slow to
4489 * paint, so this hack is how we sidestep that performance bottleneck.
4491 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4492 transform: perspective(0.01px);
4495 #main-window[customize-entered] {
4496 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4497 background-attachment: fixed;
4500 #main-window[customize-entered] #browser-bottombox,
4501 #main-window[customize-entered] #customization-container {
4502 border-left: 1px solid #9C9CFF;
4503 border-right: 1px solid #9C9CFF;
4504 background-clip: padding-box;
4507 #main-window[customize-entered] #browser-bottombox {
4508 border-bottom: 1px solid #9C9CFF;
4511 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4515 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4519 /* End customization mode */
4521 /* Private browsing indicators */
4524 * Currently, we have two places where we put private browsing indicators on
4525 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4526 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4527 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4528 * want the bottom border of the image to line up with the bottom of the window
4529 * caption buttons. That's why there's so much special-casing going on in here.
4531 .private-browsing-indicator {
4533 pointer-events: none;
4536 #private-browsing-indicator-titlebar {
4541 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4545 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4549 #TabsToolbar > .private-browsing-indicator {
4550 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4551 -moz-margin-start: 4px;
4555 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4556 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4557 * min/max/close window buttons.
4559 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4560 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4561 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4562 -moz-margin-end: 4px;
4568 /* This one is for Linux */
4569 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4570 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4574 /* End private browsing indicators */
4576 /* === BEGIN UITour.inc.css === */
4580 #UITourHighlightContainer {
4581 -moz-appearance: none;
4583 background-color: transparent;
4584 /* This is a buffer to compensate for the movement in the "wobble" effect */
4589 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4590 border-radius: 40px;
4591 border: 1px solid #9C9CFF;
4592 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4593 on Linux without an X compositor where opacity is either 0 or 1. */
4594 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4599 #UITourTooltipBody {
4600 -moz-margin-end: 14px;
4603 #UITourTooltipBody > vbox {
4607 #UITourTooltipIconContainer {
4608 -moz-margin-start: -16px;
4611 #UITourTooltipIcon {
4614 -moz-margin-start: 28px;
4615 -moz-margin-end: 28px;
4618 #UITourTooltipTitle,
4619 #UITourTooltipDescription {
4623 #UITourTooltipTitle {
4626 -moz-margin-start: 0;
4631 #UITourTooltipDescription {
4632 -moz-margin-start: 0;
4635 line-height: 1.8rem;
4636 margin-bottom: 0; /* Override global.css */
4639 #UITourTooltipClose {
4640 -moz-appearance: none;
4642 background-color: transparent;
4644 -moz-margin-start: 4px;
4648 #UITourTooltipClose > .toolbarbutton-text {
4652 #UITourTooltipButtons {
4654 background-color: rgba(0,0,0,.2);
4655 border-top: 1px solid rgba(0,0,0,.4);
4656 margin: 24px -16px -16px;
4660 #UITourTooltipButtons > button {
4664 #UITourTooltipButtons > button:first-child {
4665 -moz-margin-start: 0;
4668 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4671 -moz-margin-end: 5px;
4674 #UITourTooltipButtons > button .button-text {
4678 #UITourTooltipButtons > button:not(.button-link) {
4679 -moz-appearance: none;
4680 background-color: #C09070;
4681 border-radius: 3000px;
4685 transition-property: background-color, color;
4686 transition-duration: 150ms;
4689 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4690 background-color: #FFCF00;
4694 #UITourTooltipButtons > button.button-link {
4695 -moz-appearance: none;
4696 background: transparent;
4699 color: rgba(0,0,0,0.35);
4701 padding-right: 10px;
4704 #UITourTooltipButtons > button.button-link:hover {
4708 /* The primary button gets the same color as the customize button. */
4709 #UITourTooltipButtons > button.button-primary {
4710 background-color: #A06060; /* LCARS default button background color */
4713 padding-right: 30px;
4716 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4717 background-color: #FFCF00;
4721 /* === END UITour.inc.css === */
4723 #UITourTooltipButtons {
4724 margin: 24px -4px -4px;