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