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 /** Contains style definitions for the navigator application
8 @import url("chrome://navigator/content/navigator.css");
9 @import url("chrome://communicator/skin/");
10 @import url("chrome://communicator/skin/bookmarks/bookmarksToolbar.css");
12 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
14 /* ::::: primary toolbar buttons ::::: */
17 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
18 -moz-image-region: rect(42px 25px 63px 0px);
21 #back-button[disabled="true"] {
22 -moz-image-region: rect(42px 50px 63px 25px);
25 #back-button:not([disabled="true"]):hover,
26 #back-button:not([disabled="true"]):hover:active,
27 #back-button[open="true"] {
28 -moz-image-region: rect(42px 75px 63px 50px);
32 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
33 -moz-image-region: rect(63px 25px 84px 0px);
36 #forward-button[disabled="true"] {
37 -moz-image-region: rect(63px 50px 84px 25px);
40 #forward-button:not([disabled="true"]):hover,
41 #forward-button:not([disabled="true"]):hover:active,
42 #forward-button[open="true"] {
43 -moz-image-region: rect(63px 75px 84px 50px);
47 list-style-image: url("chrome://navigator/skin/icons/navigatoricons.png");
48 -moz-image-region: rect(0px 25px 21px 0px);
51 #reload-button[disabled="true"] {
52 -moz-image-region: rect(0px 50px 21px 25px);
55 #reload-button:not([disabled="true"]):hover,
56 #reload-button:not([disabled="true"]):hover:active {
57 -moz-image-region: rect(0px 75px 21px 50px);
61 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
62 -moz-image-region: rect(21px 25px 42px 0px);
65 #stop-button[disabled="true"] {
66 -moz-image-region: rect(21px 50px 42px 25px);
69 #stop-button:not([disabled="true"]):hover,
70 #stop-button:not([disabled="true"]):hover:active {
71 -moz-image-region: rect(21px 75px 42px 50px);
75 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
76 -moz-image-region: rect(84px 25px 105px 0px);
79 #home-button[disabled="true"] {
80 -moz-image-region: rect(84px 50px 105px 25px);
83 #home-button:not([disabled="true"]):hover,
84 #home-button:not([disabled="true"]):hover:active {
85 -moz-image-region: rect(84px 75px 105px 50px);
89 list-style-image: url("chrome://communicator/skin/sync/sync-32.png");
92 #sync-button[status=active] {
93 list-style-image: url("chrome://communicator/skin/sync/sync-32-throbber.png");
97 list-style-image: url("chrome://global/skin/icons/close-button.gif");
100 #clear-button:hover {
101 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
104 /* ::::: small primary toolbar buttons ::::: */
106 toolbar[iconsize="small"] > #back-button {
107 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
108 -moz-image-region: rect(32px 16px 48px 0);
111 toolbar[iconsize="small"] > #back-button[disabled="true"] {
112 -moz-image-region: rect(32px 32px 48px 16px) !important;
115 toolbar[iconsize="small"] > #back-button:not([disabled="true"]):hover,
116 toolbar[iconsize="small"] > #back-button:not([disabled="true"]):hover:active {
117 -moz-image-region: rect(32px 48px 48px 32px);
120 toolbar[iconsize="small"] > #forward-button {
121 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
122 -moz-image-region: rect(48px 16px 64px 0);
125 toolbar[iconsize="small"] > #forward-button[disabled="true"] {
126 -moz-image-region: rect(48px 32px 64px 16px) !important;
129 toolbar[iconsize="small"] > #forward-button:not([disabled="true"]):hover,
130 toolbar[iconsize="small"] > #forward-button:not([disabled="true"]):hover:active {
131 -moz-image-region: rect(48px 48px 64px 32px);
134 toolbar[iconsize="small"] > #reload-button {
135 list-style-image: url("chrome://navigator/skin/icons/navigatoricons-small.png");
136 -moz-image-region: rect(0 16px 16px 0);
139 toolbar[iconsize="small"] > #reload-button[disabled="true"] {
140 -moz-image-region: rect(0 32px 16px 16px) !important;
143 toolbar[iconsize="small"] > #reload-button:not([disabled="true"]):hover,
144 toolbar[iconsize="small"] > #reload-button:not([disabled="true"]):hover:active {
145 -moz-image-region: rect(0 48px 16px 32px);
148 toolbar[iconsize="small"] > #stop-button {
149 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
150 -moz-image-region: rect(16px 16px 32px 0);
153 toolbar[iconsize="small"] > #stop-button[disabled="true"] {
154 -moz-image-region: rect(16px 32px 32px 16px) !important;
157 toolbar[iconsize="small"] > #stop-button:not([disabled="true"]):hover,
158 toolbar[iconsize="small"] > #stop-button:not([disabled="true"]):hover:active {
159 -moz-image-region: rect(16px 48px 32px 32px);
162 toolbar[iconsize="small"] > #home-button {
163 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
164 -moz-image-region: rect(64px 16px 80px 0);
167 toolbar[iconsize="small"] > #home-button[disabled="true"] {
168 -moz-image-region: rect(64px 32px 80px 16px) !important;
171 toolbar[iconsize="small"] > #home-button:not([disabled="true"]):hover,
172 toolbar[iconsize="small"] > #home-button:not([disabled="true"]):hover:active {
173 -moz-image-region: rect(64px 48px 80px 32px);
176 toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button,
177 toolbar[iconsize="small"] > #sync-button {
178 list-style-image: url("chrome://communicator/skin/sync/sync-16.png");
181 toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button[status=active],
182 toolbar[iconsize="small"] > #sync-button[status=active] {
183 list-style-image: url("chrome://communicator/skin/sync/sync-16-throbber.png");
186 #FindToolbar:-moz-lwtheme {
187 /* -moz-border-top-colors: transparent;
188 -moz-border-bottom-colors: transparent; */
191 /* ::::: fullscreen window controls ::::: */
194 -moz-box-align: center;
196 border-left: 3px solid #000000;
197 -moz-margin-start: 2px;
200 #window-controls > toolbarbutton {
202 -moz-padding-start: 2px;
203 -moz-padding-end: 1px;
206 toolbar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-icon {
211 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
214 #minimize-button:hover {
215 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
219 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
222 #restore-button:hover {
223 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
227 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
230 #close-button:hover {
231 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
234 /* ::::: nav-bar-inner ::::: */
237 -moz-padding-start: 1px;
238 -moz-padding-end: 1px;
240 -moz-box-align: center;
246 -moz-margin-start: 3px;
247 /* make color as light as possible to deal with dark non-domain parts */
251 .urlbar-security-level {
252 border-radius: 3px 0 0 3px;
256 .urlbar-security-level[level="high"] {
257 background-color: #FFCF00;
261 #wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > .button-toolbar,
262 #wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > #urlbar > .urlbar-icons {
266 #urlbar-search-splitter {
267 -moz-appearance: none;
271 background-color: transparent;
274 /* ::::: notification popups ::::: */
276 .popup-notification-icon {
279 -moz-margin-end: 10px;
282 .popup-notification-icon[popupid="geolocation"] {
283 list-style-image: url("chrome://communicator/skin/icons/geolocation-64.png");
286 .popup-notification-icon[popupid="web-notifications"] {
287 list-style-image: url("chrome://communicator/skin/icons/notification-64.png");
290 .popup-notification-icon[popupid="addon-install-disabled"],
291 .popup-notification-icon[popupid="addon-install-blocked"],
292 .popup-notification-icon[popupid="addon-install-started"],
293 .popup-notification-icon[popupid="addon-install-cancelled"],
294 .popup-notification-icon[popupid="addon-install-failed"],
295 .popup-notification-icon[popupid="addon-install-complete"],
296 .popup-notification-icon[popupid="lwtheme-install-request"],
297 .popup-notification-icon[popupid="lwtheme-install-notification"] {
298 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
303 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
304 .popup-notification-icon[popupid="indexedDB-quota-prompt"] {
305 list-style-image: url("chrome://global/skin/icons/question-64.png");
308 .popup-notification-icon[popupid="password"] {
309 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
312 .popup-notification-icon[popupid="click-to-play-plugins"] {
313 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
319 .addon-progress-description {
324 /* Notification icon box */
325 #notification-popup-box {
326 -moz-margin-end: 3px;
329 .notification-anchor-icon:-moz-focusring {
333 #default-notification-icon {
334 list-style-image: url("chrome://global/skin/icons/information-16.png");
339 #geo-notification-icon {
340 list-style-image: url("chrome://communicator/skin/icons/geolocation-16.png");
345 #web-notifications-notification-icon {
346 list-style-image: url("chrome://communicator/skin/icons/notification-16.png");
351 #addons-notification-icon {
352 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
357 #indexedDB-notification-icon {
358 list-style-image: url("chrome://global/skin/icons/question-16.png");
363 #password-notification-icon {
364 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
369 #plugins-notification-icon {
370 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
375 .click-to-play-plugins-notification-content {
380 .click-to-play-plugins-notification-icon-box {
381 background-color: #000000;
382 -moz-border-end: 1px solid #FF9F00;
384 -moz-padding-end: 16px;
385 -moz-padding-start: 24px;
386 -moz-margin-start: 4px;
391 .click-to-play-plugins-notification-icon-box:-moz-locale-dir(ltr) {
392 border-bottom-left-radius: 4px;
393 border-top-left-radius: 4px;
396 .click-to-play-plugins-notification-icon-box:-moz-locale-dir(rtl) {
397 border-bottom-right-radius: 4px;
398 border-top-right-radius: 4px;
401 .click-to-play-plugins-notification-separator {
404 .click-to-play-plugins-notification-description-box {
406 -moz-padding-end: 11px;
408 -moz-padding-start: 10px;
411 .click-to-play-plugins-notification-center-box {
412 border-top: 1px solid #FF9F00;
413 border-bottom: 1px solid #FF9F00;
414 background-color: #000000;
415 -moz-margin-end: 4px;
418 .click-to-play-plugins-notification-button-container {
424 padding: 12px 16px 0px 16px;
427 .center-item-box[padbottom="true"] {
428 padding-bottom: 12px;
432 background-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
433 background-repeat: no-repeat;
439 .center-item-box[warn="true"] {
440 background-image: url("chrome://navigator/skin/click-to-play-warning-stripes.png");
441 background-repeat: repeat-x;
442 padding: 8px 16px 6px 16px;
445 .center-item-box[padbottom="true"][warn="true"] {
449 .center-item-box[showseparator="true"] {
450 border-top: 1px solid #9C9CFF;
453 .center-item-box[warn="false"] > .center-item-warning {
457 .center-item-warning > .text-link[href=""] {
461 .center-item-warning-icon {
462 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
463 background-repeat: no-repeat;
469 .center-item-warning-description {
473 .center-item-button {
477 /* ::::: page proxy icon ::::: */
492 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-item.gif");
495 #page-proxy-favicon {
496 list-style-image: none;
499 /* ::::: autocomplete ::::: */
501 .autocomplete-treebody::-moz-tree-cell-text(value) {
502 -moz-padding-start: 13px;
505 .autocomplete-treebody::-moz-tree-cell-text(comment) {
507 /* font-style: italic; */
510 .autocomplete-search-box {
511 border-top: 1px solid #FF9F00;
512 background-color: #9C9CFF;
516 .autocomplete-result-popup[nomatch] > .autocomplete-search-box {
517 border-top: 1px solid #9C9CFF;
520 .autocomplete-search-engine {
524 .autocomplete-search-engine[menuactive="true"] {
525 background-color: #008484;
529 .autocomplete-search-engine-img {
530 -moz-margin-end: 4px;
533 .autocomplete-history-dropmarker:hover {
534 background-color: #FFCF00;
537 .autocomplete-history-dropmarker:hover:active,
538 .autocomplete-history-dropmarker[open="true"] {
539 background-color: #FF9F00;
542 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
546 /* ::::: go and searchbuttons ::::: */
552 -moz-margin-start: 2px;
553 background-color: #000000;
556 #search-button:hover,
558 background-color: #FFCF00;
561 /* care that those buttons base on the same min height of 16px that the urlbar
562 autocomplete box gets through site icon and urlbar icons at the right */
563 #search-button > .button-box,
564 #go-button > .button-box {
569 /* list-style-image: url("chrome://communicator/skin/icons/search.gif"); */
572 #search-button > .button-box > .button-icon {
577 toolbar[mode="text"] #search-button > .button-box > .button-icon,
578 toolbar[mode="icons"] #search-button > .button-box > .button-text {
583 /* ::::: search bar ::::: */
585 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
586 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) {
591 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
592 border-top: 1px solid #E7ADE7;
595 /* ::::: throbber ::::: */
598 -moz-margin-start: 2px;
601 /* ::::: security button ::::: */
604 list-style-image: url("chrome://communicator/skin/icons/lock-insecure.gif");
607 #security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
611 /* |high| and |low| styles could be different, to better reflect the secure level... */
612 #security-button[level="high"] > .statusbarpanel-contentbox {
613 list-style-image: url("chrome://communicator/skin/icons/lock-secure-hover.png");
614 background-color: #FFCF00;
617 #security-button[level="broken"] > .statusbarpanel-contentbox {
618 list-style-image: url("chrome://communicator/skin/icons/lock-broken.gif");
619 background-color: #FF0000;
622 #security-button[label][level="high"] > .statusbarpanel-contentbox {
623 list-style-image: url("chrome://communicator/skin/icons/lock-secure.gif");
624 background-color: #008484;
629 list-style-image: url("chrome://communicator/skin/icons/identity.png");
633 list-style-image:url("chrome://navigator/skin/icons/popup-blocked.gif");
636 #invalid-form-popup {
637 border: 1px solid #FFCF00;
638 border : 1px outset #FFFFCC;
639 padding: 2px 3px 0px 3px;
641 background-color: #9C9CFF;
646 /* ::::: personal toolbar ::::: */
649 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
652 #bookmarks-button[open="true"] {
653 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
656 toolbarbutton.chevron {
657 list-style-image: url("chrome://navigator/skin/icons/chevron.gif") !important;
660 toolbarbutton.chevron:hover,
661 toolbarbutton.chevron[open="true"] {
662 list-style-image: url("chrome://navigator/skin/icons/chevron-hover.gif") !important;
665 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
669 toolbarbutton.chevron > .toolbarbutton-text {
670 display: none; /* hide chevron label which has a width even if blank */
673 toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
674 display: -moz-box; /* display chevron icon in text mode */
677 /* Prevent [mode="icons"|"text"] from hiding the label and icon */
678 #bookmarks-ptf .bookmark-item > .toolbarbutton-text,
679 #bookmarks-ptf .bookmark-item > .toolbarbutton-icon {
680 display: -moz-box !important;
683 #PersonalToolbar[iconsize="small"] > toolbarpaletteitem > #home-button > .toolbarbutton-icon,
684 #PersonalToolbar[iconsize="small"] > #home-button > .toolbarbutton-icon {
689 #PersonalToolbar > #home-button {
693 #PersonalToolbar > #home-button[disabled="true"] {
694 cursor: default !important;
698 In customize mode we hide the normal bookmark items and show a placeholder
699 for the drag/drop UI.
701 .bookmarks-toolbar-customize {
702 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
704 max-width: 15em !important;
707 #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
710 background: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") no-repeat;
713 /* ::::: star button ::::: */
716 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
717 -moz-image-region: rect(16px 16px 32px 0px);
721 -moz-image-region: rect(16px 32px 32px 16px);
724 #star-button:hover:active {
725 -moz-image-region: rect(16px 48px 32px 32px);
728 #star-button[starred="true"] {
729 -moz-image-region: rect(0px 16px 16px 0px);
732 #star-button[starred="true"]:hover {
733 -moz-image-region: rect(0px 32px 16px 16px);
736 #star-button[starred="true"]:hover:active {
737 -moz-image-region: rect(0px 48px 16px 32px);
740 #editBookmarkPanelStarIcon {
741 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
742 -moz-image-region: rect(0px 16px 16px 0px);
745 /* ::::: feeds ::::: */
748 list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
749 -moz-image-region: rect(0px 16px 16px 0px);
752 .feedsMenu[disabled="true"] {
753 -moz-image-region: rect(32px 16px 48px 0px);
757 list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
758 -moz-image-region: rect(0px 32px 16px 16px);
762 -moz-image-region: rect(16px 32px 32px 16px);
765 .feedsButton:hover:active {
766 -moz-image-region: rect(48px 32px 64px 16px);