try even more mac-specific toolbar adjustments
[themes.git] / EarlyBlue / navigator / navigator.css
... / ...
CommitLineData
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/. */
4
5/** Contains style definitions for the navigator application
6 **/
7
8@import url("chrome://navigator/content/navigator.css");
9@import url("chrome://communicator/skin/");
10@import url("chrome://communicator/skin/bookmarks/bookmarksToolbar.css");
11
12@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
13
14/* ::::: primary toolbar buttons ::::: */
15
16#back-button {
17 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
18 -moz-image-region: rect(42px 25px 63px 0px);
19}
20
21#back-button[disabled="true"] {
22 -moz-image-region: rect(42px 50px 63px 25px);
23}
24
25#forward-button {
26 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
27 -moz-image-region: rect(63px 25px 84px 0px);
28}
29
30#forward-button[disabled="true"] {
31 -moz-image-region: rect(63px 50px 84px 25px);
32}
33
34#reload-button {
35 list-style-image: url("chrome://navigator/skin/icons/navigatoricons.png");
36 -moz-image-region: rect(0px 25px 21px 0px);
37}
38
39#reload-button[disabled="true"] {
40 -moz-image-region: rect(0px 50px 21px 25px);
41}
42
43#stop-button {
44 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
45 -moz-image-region: rect(21px 25px 42px 0px);
46}
47
48#stop-button[disabled="true"] {
49 -moz-image-region: rect(21px 50px 42px 25px);
50}
51
52#home-button {
53 list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
54 -moz-image-region: rect(84px 25px 105px 0px);
55}
56
57#home-button[disabled="true"] {
58 -moz-image-region: rect(84px 50px 105px 25px);
59}
60
61#sync-button {
62 list-style-image: url("chrome://communicator/skin/sync/sync-32.png");
63}
64
65#sync-button[status=active] {
66 list-style-image: url("chrome://communicator/skin/sync/sync-32-throbber.png");
67}
68
69#clear-button {
70 list-style-image: url("chrome://global/skin/icons/close-button.gif");
71}
72
73/* ::::: small primary toolbar buttons ::::: */
74
75toolbar[iconsize="small"] > #back-button {
76 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
77 -moz-image-region: rect(32px 16px 48px 0);
78}
79
80toolbar[iconsize="small"] > #back-button[disabled="true"] {
81 -moz-image-region: rect(32px 32px 48px 16px) !important;
82}
83
84toolbar[iconsize="small"] > #forward-button {
85 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
86 -moz-image-region: rect(48px 16px 64px 0);
87}
88
89toolbar[iconsize="small"] > #forward-button[disabled="true"] {
90 -moz-image-region: rect(48px 32px 64px 16px) !important;
91}
92
93toolbar[iconsize="small"] > #reload-button {
94 list-style-image: url("chrome://navigator/skin/icons/navigatoricons-small.png");
95 -moz-image-region: rect(0 16px 16px 0);
96}
97
98toolbar[iconsize="small"] > #reload-button[disabled="true"] {
99 -moz-image-region: rect(0 32px 16px 16px) !important;
100}
101
102toolbar[iconsize="small"] > #stop-button {
103 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
104 -moz-image-region: rect(16px 16px 32px 0);
105}
106
107toolbar[iconsize="small"] > #stop-button[disabled="true"] {
108 -moz-image-region: rect(16px 32px 32px 16px) !important;
109}
110
111toolbar[iconsize="small"] > #home-button {
112 list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
113 -moz-image-region: rect(64px 16px 80px 0);
114}
115
116toolbar[iconsize="small"] > #home-button[disabled="true"] {
117 -moz-image-region: rect(64px 32px 80px 16px) !important;
118}
119
120toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button,
121toolbar[iconsize="small"] > #sync-button {
122 list-style-image: url("chrome://communicator/skin/sync/sync-16.png");
123}
124
125toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button[status=active],
126toolbar[iconsize="small"] > #sync-button[status=active] {
127 list-style-image: url("chrome://communicator/skin/sync/sync-16-throbber.png");
128}
129
130#FindToolbar:-moz-lwtheme {
131/* -moz-border-top-colors: transparent;
132 -moz-border-bottom-colors: transparent; */
133}
134
135/* ::::: fullscreen window controls ::::: */
136
137#window-controls {
138 -moz-box-align: center;
139 padding: 0 2px;
140 border-left: 1px solid #9999CC;
141 -moz-margin-start: 2px;
142}
143
144#window-controls > toolbarbutton {
145 padding: 3px;
146 -moz-padding-start: 2px;
147 -moz-padding-end: 1px;
148}
149
150toolbar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-icon {
151 display: -moz-box;
152}
153
154#minimize-button {
155 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
156}
157
158#restore-button {
159 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
160}
161
162#close-button {
163 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
164}
165
166/* ::::: nav-bar-inner ::::: */
167
168.nav-bar-class {
169 -moz-padding-start: 1px;
170 -moz-padding-end: 1px;
171 min-width: 0px;
172 -moz-box-align: center;
173}
174
175#urlbar {
176 margin: 0;
177 -moz-margin-start: 3px;
178}
179
180.urlbar-security-level {
181 padding: 2px;
182}
183
184.urlbar-security-level[level="high"] {
185 background-color: #FFFFCC;
186}
187
188#wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > .button-toolbar,
189#wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > #urlbar > .urlbar-icons {
190 display: none;
191}
192
193/* ::::: notification popups ::::: */
194
195.popup-notification-icon {
196 width: 64px;
197 height: 64px;
198 -moz-margin-end: 10px;
199}
200
201.popup-notification-icon[popupid="geolocation"] {
202 list-style-image: url("chrome://communicator/skin/icons/geolocation-64.png");
203}
204
205.popup-notification-icon[popupid="web-notifications"] {
206 list-style-image: url("chrome://communicator/skin/icons/notification-64.png");
207}
208
209.popup-notification-icon[popupid="addon-install-disabled"],
210.popup-notification-icon[popupid="addon-install-blocked"],
211.popup-notification-icon[popupid="addon-install-started"],
212.popup-notification-icon[popupid="addon-install-cancelled"],
213.popup-notification-icon[popupid="addon-install-failed"],
214.popup-notification-icon[popupid="addon-install-complete"],
215.popup-notification-icon[popupid="lwtheme-install-request"],
216.popup-notification-icon[popupid="lwtheme-install-notification"] {
217 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
218 width: 32px;
219 height: 32px;
220}
221
222.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
223.popup-notification-icon[popupid="indexedDB-quota-prompt"] {
224 list-style-image: url("chrome://global/skin/icons/question-64.png");
225}
226
227.popup-notification-icon[popupid="password-change"],
228.popup-notification-icon[popupid="password-save"] {
229 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
230}
231
232.popup-notification-icon[popupid="click-to-play-plugins"] {
233 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
234 margin: 0px;
235 width: 32px;
236 height: 32px;
237}
238
239.addon-progress-description {
240 width: 350px;
241 max-width: 350px;
242}
243
244/* Notification icon box */
245#notification-popup-box {
246 -moz-margin-end: 3px;
247}
248
249.notification-anchor-icon:-moz-focusring {
250 outline: 1px dotted;
251}
252
253#default-notification-icon {
254 list-style-image: url("chrome://global/skin/icons/information-16.png");
255 width: 16px;
256 height: 16px;
257}
258
259#geo-notification-icon {
260 list-style-image: url("chrome://communicator/skin/icons/geolocation-16.png");
261 width: 16px;
262 height: 16px;
263}
264
265#web-notifications-notification-icon {
266 list-style-image: url("chrome://communicator/skin/icons/notification-16.png");
267 width: 16px;
268 height: 16px;
269}
270
271#addons-notification-icon {
272 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
273 width: 16px;
274 height: 16px;
275}
276
277#indexedDB-notification-icon {
278 list-style-image: url("chrome://global/skin/icons/question-16.png");
279 width: 16px;
280 height: 16px;
281}
282
283#password-notification-icon {
284 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
285 width: 16px;
286 height: 16px;
287}
288
289#plugins-notification-icon {
290 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
291 width: 16px;
292 height: 16px;
293}
294
295.click-to-play-plugins-notification-content {
296 margin: -10px;
297 border-radius: 4px;
298}
299
300.click-to-play-plugins-notification-icon-box {
301 background-color: #CCD0DD;
302 -moz-border-end: 1px solid #666699;
303 padding: 24px;
304}
305
306.click-to-play-plugins-notification-separator {
307 -moz-border-start: 1px solid #666699;
308 border-top: 1px solid #666699;
309}
310
311.click-to-play-plugins-notification-description-box {
312 padding-top: 12px;
313 -moz-padding-end: 11px;
314 padding-bottom: 9px;
315 -moz-padding-start: 10px;
316}
317
318.click-to-play-plugins-notification-center-box {
319 background-color: #CCD0DD;
320}
321
322.click-to-play-plugins-notification-button-container {
323 padding: 12px;
324}
325
326.center-item-box {
327 padding: 8px 16px 0px 16px;
328}
329
330.center-item-box[padbottom="true"] {
331 padding-bottom: 8px;
332}
333
334.center-item-icon {
335 background-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
336 background-repeat: no-repeat;
337 height: 16px;
338 width: 16px;
339 margin-bottom: 4px;
340}
341
342.center-item-box[warn="true"] {
343/* background-image: url("chrome://navigator/skin/click-to-play-warning-stripes.png");*/
344 background-repeat: repeat-x;
345 padding: 8px 16px 6px 16px;
346}
347
348.center-item-box[padbottom="true"][warn="true"] {
349 padding-bottom: 4px;
350}
351
352.center-item-box[showseparator="true"] {
353 border-top: 1px solid #666699;
354}
355
356.center-item-box[warn="false"] > .center-item-warning {
357 display: none;
358}
359
360.center-item-warning > .text-link[href=""] {
361 display: none;
362}
363
364.center-item-warning-icon {
365 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
366 background-repeat: no-repeat;
367 width: 16px;
368 height: 15px;
369 margin-bottom: 4px;
370}
371
372.center-item-warning-description {
373 color: #808080;
374}
375
376.center-item-button {
377 min-width: 0px;
378}
379
380/* ::::: page proxy icon ::::: */
381
382#page-proxy-deck,
383#page-proxy-favicon,
384#page-proxy-button {
385 width: 16px;
386 height: 16px;
387}
388
389#page-proxy-deck {
390 cursor: grab;
391 margin: 0;
392}
393
394#page-proxy-button {
395 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-item.gif");
396}
397
398#page-proxy-favicon {
399 list-style-image: none;
400}
401
402/* ::::: autocomplete ::::: */
403
404.autocomplete-treebody::-moz-tree-cell-text(value) {
405 -moz-padding-start: 13px;
406}
407
408.autocomplete-treebody::-moz-tree-cell-text(comment) {
409 color: #808080;
410/* font-style: italic; */
411}
412
413.autocomplete-search-box {
414 border-top: 1px solid #9999CC;
415 background-color: #666699;
416 color: #000000;
417}
418
419.autocomplete-result-popup[nomatch] > .autocomplete-search-box {
420 border-top: 1px solid #666699;
421}
422
423.autocomplete-search-engine {
424 padding: 2px;
425}
426
427.autocomplete-search-engine[menuactive="true"] {
428 background-color: #9999CC;
429 color: #000000;
430}
431
432.autocomplete-search-engine-img {
433 -moz-margin-end: 4px;
434}
435
436.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
437 color: #808080;
438}
439
440/* ::::: go and searchbuttons ::::: */
441
442#search-button,
443#go-button {
444 margin: 0;
445 padding: 1px 0;
446 -moz-margin-start: 2px;
447 background-color: #9999CC;
448}
449
450/* care that those buttons base on the same min height of 16px that the urlbar
451 autocomplete box gets through site icon and urlbar icons at the right */
452#search-button > .button-box,
453#go-button > .button-box {
454 min-height: 16px;
455}
456
457#search-button {
458/* list-style-image: url("chrome://communicator/skin/icons/search.gif"); */
459 font-weight: bold;
460}
461
462#search-button > .button-box > .button-icon {
463 display: -moz-box;
464}
465
466/*
467toolbar[mode="text"] #search-button > .button-box > .button-icon,
468toolbar[mode="icons"] #search-button > .button-box > .button-text {
469 display: none;
470}
471*/
472
473/* ::::: search bar ::::: */
474
475.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
476.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) {
477 color: #808080;
478 font-size: smaller;
479}
480
481.autocomplete-treebody::-moz-tree-cell(suggesthint) {
482 border-top: 1px solid #808080;
483}
484
485/* ::::: security button ::::: */
486
487#security-button {
488 -moz-margin-start: 2px;
489}
490
491#security-button {
492 list-style-image: url("chrome://communicator/skin/icons/lock-insecure.gif");
493}
494
495/* |high| and |low| styles could be different, to better reflect the secure level... */
496#security-button[level="high"] > .statusbarpanel-contentbox {
497 list-style-image: url("chrome://communicator/skin/icons/lock-secure.gif");
498 background-color: #FFFFCC;
499}
500
501#security-button[level="broken"] > .statusbarpanel-contentbox {
502 list-style-image: url("chrome://communicator/skin/icons/lock-broken.gif");
503 background-color: #FFCCCC;
504}
505
506#security-button[label] > .statusbarpanel-contentbox {
507 background-color: #33FF33;
508}
509
510#security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
511 margin: 0px;
512 color: #000000;
513}
514
515/* make same background-color translucent on lwthemes */
516#security-button[level="high"] > .statusbarpanel-contentbox:-moz-lwtheme {
517 background-color: rgba(255, 255, 204, .8);
518}
519
520#security-button[level="broken"] > .statusbarpanel-contentbox:-moz-lwtheme {
521 background-color: rgba(255, 204, 204, .8);
522}
523
524#security-button[label] > .statusbarpanel-contentbox:-moz-lwtheme {
525 background-color: rgba(51, 255, 51, .8);
526}
527
528#ev-button {
529 list-style-image: url("chrome://communicator/skin/icons/identity.png");
530}
531
532#popupIcon {
533 list-style-image:url("chrome://navigator/skin/icons/popup-blocked.gif");
534}
535
536#invalid-form-popup {
537 border : 1px outset #FFFFCC;
538 padding: 2px 3px 0px 3px;
539 max-width: 40em;
540 background-color : #FFFFCC;
541 color: #000000;
542 font-weight: bold;
543}
544
545/* ::::: personal toolbar ::::: */
546
547#bookmarks-button {
548 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
549}
550
551#bookmarks-button[open="true"] {
552 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
553}
554
555#toolbarbutton.chevron {
556 list-style-image: url("chrome://navigator/skin/icons/chevron.gif") !important;
557}
558
559#toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
560 display: none;
561}
562
563toolbarbutton.chevron > .toolbarbutton-text {
564 display: none; /* hide chevron label which has a width even if blank */
565}
566
567toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
568 display: -moz-box; /* display chevron icon in text mode */
569}
570
571/* Prevent [mode="icons"|"text"] from hiding the label and icon */
572#bookmarks-ptf .bookmark-item > .toolbarbutton-text,
573#bookmarks-ptf .bookmark-item > .toolbarbutton-icon {
574 display: -moz-box !important;
575}
576
577#PersonalToolbar[iconsize="small"] > toolbarpaletteitem > #home-button > .toolbarbutton-icon,
578#PersonalToolbar[iconsize="small"] > #home-button > .toolbarbutton-icon {
579 /* width: 16px;
580 height: 16px; */
581}
582
583#PersonalToolbar > #home-button {
584 cursor: pointer;
585}
586
587#PersonalToolbar > #home-button[disabled="true"] {
588 cursor: default !important;
589}
590
591/*
592 In customize mode we hide the normal bookmark items and show a placeholder
593 for the drag/drop UI.
594*/
595.bookmarks-toolbar-customize {
596 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
597 display: none;
598 max-width: 15em !important;
599}
600
601#wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
602 width: 16px;
603 height: 16px;
604 background: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") no-repeat;
605}
606
607/* ::::: star button ::::: */
608
609#star-button {
610 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
611 -moz-image-region: rect(16px 16px 32px 0px);
612}
613
614#star-button:hover {
615 -moz-image-region: rect(16px 32px 32px 16px);
616}
617
618#star-button:hover:active {
619 -moz-image-region: rect(16px 48px 32px 32px);
620}
621
622#star-button[starred="true"] {
623 -moz-image-region: rect(0px 16px 16px 0px);
624}
625
626#star-button[starred="true"]:hover {
627 -moz-image-region: rect(0px 32px 16px 16px);
628}
629
630#star-button[starred="true"]:hover:active {
631 -moz-image-region: rect(0px 48px 16px 32px);
632}
633
634#editBookmarkPanelStarIcon {
635 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
636 -moz-image-region: rect(0px 16px 16px 0px);
637}
638
639/* ::::: feeds ::::: */
640
641.feedsMenu {
642 list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
643 -moz-image-region: rect(0px 16px 16px 0px);
644}
645
646.feedsMenu[disabled="true"] {
647 -moz-image-region: rect(32px 16px 48px 0px);
648}
649
650.feedsButton {
651 list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
652 -moz-image-region: rect(0px 32px 16px 16px);
653}
654
655.feedsButton:hover {
656 -moz-image-region: rect(16px 32px 32px 16px);
657}
658
659.feedsButton:hover:active {
660 -moz-image-region: rect(48px 32px 64px 16px);
661}