1d798428 |
1 | /* |
2 | * The contents of this file are subject to the Netscape Public |
3 | * License Version 1.1 (the "License"); you may not use this file |
4 | * except in compliance with the License. You may obtain a copy of |
5 | * the License at http://www.mozilla.org/NPL/ |
6 | * |
7 | * Software distributed under the License is distributed on an "AS |
8 | * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or |
9 | * implied. See the License for the specific language governing |
10 | * rights and limitations under the License. |
11 | * |
12 | * The Original Code is Mozilla Communicator client code, released |
13 | * March 31, 1998. |
14 | * |
15 | * The Initial Developer of the Original Code is Netscape |
16 | * Communications Corporation. Portions created by Netscape are |
17 | * Copyright (C) 1998-1999 Netscape Communications Corporation. All |
18 | * Rights Reserved. |
19 | * |
20 | * Contributor(s): |
21 | */ |
22 | |
23 | /* This contains CSS just for editor toolbars */ |
24 | |
25 | #EditorToolbox { |
26 | min-width: 1px; |
27 | } |
28 | |
29 | #FormatToolbar > .toolbar-holder { |
30 | background-image: url(chrome://editor/skin/images/format-toolbar-endcap.gif); |
31 | } |
32 | |
33 | .separator_small { |
34 | width: 1em; |
35 | } |
36 | |
37 | .margin-left-right { |
38 | margin-left: 3px; |
39 | margin-right: 3px; |
40 | } |
41 | |
42 | /* From button.css: */ |
43 | /* margin: 4px 7px 1px 1px; */ |
44 | /* We have too many buttons - must be closer! */ |
45 | |
46 | .toolbar, .key-toolbar { |
47 | margin-right: 2px; |
48 | } |
49 | |
50 | .inset-border { |
51 | border: 1px inset FF9F00; |
52 | } |
53 | |
54 | /* THIS DOESN'T WORK ON <text>! */ |
55 | .center { |
56 | text-align: center; |
57 | } |
58 | |
59 | /* end of SHOULD GO IN GLOBAL */ |
60 | |
61 | #EditModeToolbar { |
62 | padding: 0px; |
63 | /* Same as "standard" toolbar background */ |
64 | border-top: 1px solid #9C9CFF; |
65 | min-width: 1px; |
66 | overflow: hidden; |
67 | } |
68 | |
69 | /* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */ |
70 | /* !important in for now as a workaround to above problem! */ |
71 | tab.edit-mode:hover, button.edit-mode:hover:active, |
72 | tab.edit-mode { |
73 | -moz-border-radius: 0px 0px 7px 7px ; |
74 | padding: 0px 4px 1px 4px; |
75 | margin: 0px; |
76 | border-top: 0px solid black !important; /* Must be same as background */ |
77 | border-bottom: 1px solid #9C9CFF !important; |
78 | border-left: 1px solid #9C9CFF !important; |
79 | border-right: 1px solid #9C9CFF !important; |
80 | } |
81 | |
82 | tab.edit-mode > .button-internal-box, |
83 | tab.edit-mode:hover > .button-internal-box, |
84 | tab.edit-mode:hover:active > .button-internal-box { |
85 | border: none; |
86 | } |
87 | |
88 | tab.edit-mode:hover { |
89 | /* border: 1px solid #3366FF !important; */ |
90 | } |
91 | |
92 | tab.edit-mode:hover:active { |
93 | padding: 1px 5px 0px 3px; |
94 | /* border: 1px solid #99CCFF !important; */ |
95 | } |
96 | |
97 | /* selected="1" is from old times when edit-mode was a <button> - still left in xul */ |
98 | |
99 | tab.edit-mode[selected="1"], |
100 | tab.edit-mode[selected="true"] { |
101 | padding: 0px 4px 1px 4px; |
102 | margin: -1px 0px 0px 0px; |
103 | /* Not resizing well! - use color instead |
104 | font-weight: bold; |
105 | */ |
106 | background-color: #008484; |
107 | color: #000000; |
108 | } |
109 | |
110 | tab.edit-mode[selected="1"]:active, |
111 | tab.edit-mode[selected="1"]:hover:active, |
112 | tab.edit-mode[selected="true"]:active, |
113 | tab.edit-mode[selected="true"]:hover:active { |
114 | padding: 1px 5px 0px 3px; |
115 | } |
116 | |
117 | #NormalModeButton[type="image"] { |
118 | list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); |
119 | } |
120 | |
121 | #TagModeButton[type="image"] { |
122 | list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); |
123 | } |
124 | |
125 | #SourceModeButton[type="image"] { |
126 | list-style-image:url(chrome://editor/skin/images/editmode-html.gif); |
127 | } |
128 | |
129 | #PreviewModeButton[type="image"] { |
130 | list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); |
131 | } |
132 | |
133 | #ToggleEditModeType { |
134 | list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); |
135 | border: 1px outset #CCCCDD; |
136 | } |
137 | |
138 | #ToggleEditModeType:hover { |
139 | border: 1px solid #99CCFF; |
140 | } |
141 | |
142 | #ToggleEditModeType:hover:active { |
143 | border: 1px inset #99CCFF; |
144 | } |
145 | |
146 | /* Image URLs for all Editor toolbar buttons */ |
147 | |
148 | #boldButton { |
149 | list-style-image:url(chrome://editor/skin/images/bold.gif); |
150 | } |
151 | |
152 | #boldButton:hover { |
153 | list-style-image:url(chrome://editor/skin/images/bold-hover.gif); |
154 | } |
155 | |
156 | #italicButton { |
157 | list-style-image:url(chrome://editor/skin/images/italic.gif); |
158 | } |
159 | |
160 | #italicButton:hover { |
161 | list-style-image:url(chrome://editor/skin/images/italic-hover.gif); |
162 | } |
163 | |
164 | #underlineButton { |
165 | list-style-image:url(chrome://editor/skin/images/underline.gif); |
166 | } |
167 | |
168 | #underlineButton:hover { |
169 | list-style-image:url(chrome://editor/skin/images/underline-hover.gif); |
170 | } |
171 | |
172 | #newButton { |
173 | list-style-image:url("chrome://editor/skin/images/newfile.gif"); |
174 | } |
175 | |
176 | #newButton:hover { |
177 | list-style-image:url("chrome://editor/skin/images/newfile-hover.gif"); |
178 | } |
179 | |
180 | #newButton[disabled="true"] { |
181 | list-style-image:url("chrome://editor/skin/images/newfile_dis.gif"); |
182 | } |
183 | |
184 | #openButton { |
185 | list-style-image:url("chrome://editor/skin/images/openfile.gif"); |
186 | } |
187 | |
188 | #openButton:hover { |
189 | list-style-image:url("chrome://editor/skin/images/openfile-hover.gif"); |
190 | } |
191 | |
192 | #openButton[disabled="true"] { |
193 | list-style-image:url("chrome://editor/skin/images/openfile_dis.gif"); |
194 | } |
195 | |
196 | #saveButton { |
197 | list-style-image:url("chrome://editor/skin/images/savefile.gif"); |
198 | } |
199 | |
200 | #saveButton:hover { |
201 | list-style-image:url("chrome://editor/skin/images/savefile-hover.gif"); |
202 | } |
203 | |
204 | #saveButton[disabled="true"] { |
205 | list-style-image:url("chrome://editor/skin/images/savefile_dis.gif"); |
206 | } |
207 | |
208 | #saveButton[dirty="true"] { |
209 | list-style-image:url(chrome://editor/skin/images/savemod.gif); |
210 | } |
211 | |
212 | #saveButton[dirty="true"]:hover { |
213 | list-style-image:url(chrome://editor/skin/images/savemod-hover.gif); |
214 | } |
215 | |
216 | #publishButton { |
217 | list-style-image:url("chrome://editor/skin/images/publish.gif"); |
218 | } |
219 | |
220 | #previewButton { |
221 | list-style-image:url("chrome://editor/skin/images/preview.gif"); |
222 | } |
223 | |
224 | #previewButton:hover { |
225 | list-style-image:url("chrome://editor/skin/images/preview-hover.gif"); |
226 | } |
227 | |
228 | #previewButton[disabled="true"] { |
229 | list-style-image:url("chrome://editor/skin/images/preview_dis.gif"); |
230 | } |
231 | |
232 | #printButton { |
233 | list-style-image:url("chrome://editor/skin/images/print.gif"); |
234 | } |
235 | |
236 | #printButton:hover, |
237 | #printButton > .menubutton-internal-box > button:hover { |
238 | list-style-image:url("chrome://editor/skin/images/print-hover.gif"); |
239 | } |
240 | |
241 | #printButton[disabled="true"], |
242 | #printButton[disabled="true"]:hover, |
243 | #printButton[disabled="true"] > .menubutton-internal-box > button:hover { |
244 | list-style-image:url("chrome://editor/skin/images/print_dis.gif"); |
245 | } |
246 | |
247 | #findButton { |
248 | list-style-image:url("chrome://editor/skin/images/find.gif"); |
249 | } |
250 | |
251 | #findButton[disabled="true"] { |
252 | list-style-image:url("chrome://editor/skin/images/find_dis.gif"); |
253 | } |
254 | |
255 | #linkButton { |
256 | list-style-image:url("chrome://editor/skin/images/link.gif"); |
257 | } |
258 | |
259 | #linkButton:hover { |
260 | list-style-image:url("chrome://editor/skin/images/link-hover.gif"); |
261 | } |
262 | |
263 | #linkButton[disabled="true"] { |
264 | list-style-image:url("chrome://editor/skin/images/link_dis.gif"); |
265 | } |
266 | |
267 | #imageButton { |
268 | list-style-image:url("chrome://editor/skin/images/image.gif"); |
269 | } |
270 | |
271 | #imageButton:hover { |
272 | list-style-image:url("chrome://editor/skin/images/image-hover.gif"); |
273 | } |
274 | |
275 | #imageButton[disabled="true"] { |
276 | list-style-image:url("chrome://editor/skin/images/image_dis.gif"); |
277 | } |
278 | |
279 | #namedAnchorButton { |
280 | list-style-image:url("chrome://editor/skin/images/anchor.gif"); |
281 | } |
282 | |
283 | #namedAnchorButton:hover { |
284 | list-style-image:url("chrome://editor/skin/images/anchor-hover.gif"); |
285 | } |
286 | |
287 | #namedAnchorButton[disabled="true"] { |
288 | list-style-image:url("chrome://editor/skin/images/anchor_dis.gif"); |
289 | } |
290 | |
291 | #hlineButton { |
292 | list-style-image:url("chrome://editor/skin/images/hline.gif"); |
293 | } |
294 | |
295 | #hlineButton:hover { |
296 | list-style-image:url("chrome://editor/skin/images/hline-hover.gif"); |
297 | } |
298 | |
299 | #hlineButton[disabled="true"] { |
300 | list-style-image:url("chrome://editor/skin/images/hline_dis.gif"); |
301 | } |
302 | |
303 | #tableButton { |
304 | list-style-image:url("chrome://editor/skin/images/table.gif"); |
305 | } |
306 | |
307 | #tableButton:hover { |
308 | list-style-image:url("chrome://editor/skin/images/table-hover.gif"); |
309 | } |
310 | |
311 | #tableButton[disabled="true"] { |
312 | list-style-image:url("chrome://editor/skin/images/table_dis.gif"); |
313 | } |
314 | |
315 | #linkButton-dark { |
316 | list-style-image:url("chrome://editor/skin/images/link.gif"); |
317 | } |
318 | #imageButton-dark { |
319 | list-style-image:url("chrome://editor/skin/images/image.gif"); |
320 | } |
321 | #namedAnchorButton-dark { |
322 | list-style-image:url("chrome://editor/skin/images/anchor.gif"); |
323 | } |
324 | #hlineButton-dark { |
325 | list-style-image:url("chrome://editor/skin/images/hline.gif"); |
326 | } |
327 | #tableButton-dark { |
328 | list-style-image:url("chrome://editor/skin/images/table.gif"); |
329 | } |
330 | #spellingButton { |
331 | list-style-image:url("chrome://editor/skin/images/spell.gif"); |
332 | } |
333 | |
334 | #DecreaseFontSizeButton { |
335 | list-style-image:url("chrome://editor/skin/images/dec-font-size.gif"); |
336 | } |
337 | |
338 | #DecreaseFontSizeButton:hover { |
339 | list-style-image:url("chrome://editor/skin/images/dec-font-size-hover.gif"); |
340 | } |
341 | |
342 | #IncreaseFontSizeButton { |
343 | list-style-image:url("chrome://editor/skin/images/inc-font-size.gif"); |
344 | } |
345 | |
346 | #IncreaseFontSizeButton:hover { |
347 | list-style-image:url("chrome://editor/skin/images/inc-font-size-hover.gif"); |
348 | } |
349 | |
350 | #ulButton { |
351 | list-style-image:url("chrome://editor/skin/images/bullets.gif"); |
352 | } |
353 | |
354 | #ulButton:hover { |
355 | list-style-image:url("chrome://editor/skin/images/bullets-hover.gif"); |
356 | } |
357 | |
358 | #olButton { |
359 | list-style-image:url("chrome://editor/skin/images/numbers.gif"); |
360 | } |
361 | |
362 | #olButton:hover { |
363 | list-style-image:url("chrome://editor/skin/images/numbers-hover.gif"); |
364 | } |
365 | |
366 | #outdentButton { |
367 | list-style-image:url("chrome://editor/skin/images/outdent.gif"); |
368 | } |
369 | |
370 | #outdentButton:hover { |
371 | list-style-image:url("chrome://editor/skin/images/outdent-hover.gif"); |
372 | } |
373 | |
374 | #outdentButton[disabled="true"] { |
375 | list-style-image:url("chrome://editor/skin/images/outdent_dis.gif"); |
376 | } |
377 | |
378 | #indentButton { |
379 | list-style-image:url("chrome://editor/skin/images/indent.gif"); |
380 | } |
381 | |
382 | #indentButton:hover { |
383 | list-style-image:url("chrome://editor/skin/images/indent-hover.gif"); |
384 | } |
385 | |
386 | #FormatToolbar > button, |
387 | #FormatToolbar > button:hover, |
388 | #FormatToolbar > button:active, |
389 | #FormatToolbar > button[disabled="true"] { |
390 | min-width: 23px; |
391 | min-height: 23px; |
392 | } |
393 | |
394 | #FormatToolbar > button > .button-internal-box { |
395 | margin: 0px; |
396 | padding: 1px; |
397 | text-align: center; |
398 | } |
399 | |
400 | #FormatToolbar > button:active > .button-internal-box { |
401 | padding: 2px 0px 0px 2px; |
402 | } |
403 | |
404 | #FormatToolbar > button > .button-internal-box > .button-text-container |
405 | { |
406 | display : none; |
407 | } |
408 | |
409 | #ParagraphSelect { |
410 | margin-top: 2px; |
411 | } |
412 | |
413 | #AlignPopupButton { |
414 | list-style-image:url("chrome://editor/skin/images/align.gif"); |
415 | } |
416 | |
417 | #AlignPopupButton:hover { |
418 | list-style-image:url("chrome://editor/skin/images/align-hover.gif"); |
419 | } |
420 | |
421 | #AlignPopupButton > .button-internal-box { |
422 | border:1px solid transparent; |
423 | } |
424 | #AlignPopupButton:hover > .button-internal-box { |
425 | border:1px outset #CCCCDD; |
426 | } |
427 | #AlignPopupButton:active > .button-internal-box, |
428 | #AlignPopupButton[open="true"] > .button-internal-box { |
429 | border:1px inset #CCCCDD; |
430 | } |
431 | |
432 | #InsertPopupButton { |
433 | list-style-image:url("chrome://editor/skin/images/object-popup.gif"); |
434 | } |
435 | |
436 | #text-align-left, |
437 | #align-left-button |
438 | { |
439 | list-style-image : url("chrome://editor/skin/images/left.gif"); |
440 | } |
441 | |
442 | #text-align-left:hover, |
443 | #align-left-button:hover |
444 | { |
445 | list-style-image : url("chrome://editor/skin/images/left-hover.gif"); |
446 | } |
447 | |
448 | #text-align-left[disabled="true"], |
449 | #text-align-left[disabled="true"]:hover, |
450 | #text-align-left[disabled="true"]:hover:active, |
451 | #align-left-button[disabled="true"], |
452 | #align-left-button[disabled="true"]:hover, |
453 | #align-left-button[disabled="true"]:hover:active, |
454 | { |
455 | list-style-image : url("chrome://editor/skin/images/left-disabled.gif"); |
456 | } |
457 | |
458 | #text-align-center, |
459 | #align-center-button |
460 | { |
461 | list-style-image : url("chrome://editor/skin/images/center.gif"); |
462 | } |
463 | |
464 | #text-align-center:hover, |
465 | #align-center-button:hover |
466 | { |
467 | list-style-image : url("chrome://editor/skin/images/center-hover.gif"); |
468 | } |
469 | |
470 | #text-align-center[disabled="true"], |
471 | #text-align-center[disabled="true"]:hover, |
472 | #text-align-center[disabled="true"]:hover:active, |
473 | #align-center-button[disabled="true"], |
474 | #align-center-button[disabled="true"]:hover, |
475 | #align-center-button[disabled="true"]:hover:active |
476 | { |
477 | list-style-image : url("chrome://editor/skin/images/center-disabled.gif"); |
478 | } |
479 | |
480 | #text-align-right, |
481 | #align-right-button |
482 | { |
483 | list-style-image : url("chrome://editor/skin/images/right.gif"); |
484 | } |
485 | |
486 | #text-align-right:hover, |
487 | #align-right-button:hover |
488 | { |
489 | list-style-image : url("chrome://editor/skin/images/right-hover.gif"); |
490 | } |
491 | |
492 | #text-align-right[disabled="true"], |
493 | #text-align-right[disabled="true"]:hover, |
494 | #text-align-right[disabled="true"]:hover:active |
495 | #align-right-button[disabled="true"], |
496 | #align-right-button[disabled="true"]:hover, |
497 | #align-right-button[disabled="true"]:hover:active |
498 | { |
499 | list-style-image : url("chrome://editor/skin/images/right-disabled.gif"); |
500 | } |
501 | |
502 | #text-align-justify, |
503 | #align-justify-button |
504 | { |
505 | list-style-image : url("chrome://editor/skin/images/justify.gif"); |
506 | } |
507 | |
508 | #text-align-justify:hover, |
509 | #align-justify-button:hover |
510 | { |
511 | list-style-image : url("chrome://editor/skin/images/justify-hover.gif"); |
512 | } |
513 | |
514 | #text-align-justify[disabled="true"], |
515 | #text-align-justify[disabled="true"]:hover, |
516 | #text-align-justify[disabled="true"]:hover:active |
517 | #align-justify-button[disabled="true"], |
518 | #align-justify-button[disabled="true"]:hover, |
519 | #align-justify-button[disabled="true"]:hover:active |
520 | { |
521 | list-style-image : url("chrome://editor/skin/images/justify-disabled.gif"); |
522 | } |
523 | |
524 | .ColorPickerLabel { |
525 | border: 1px inset white; |
526 | margin: 0px; |
527 | padding: 2px; |
528 | text-align: center; |
529 | } |
530 | |
531 | /* TODO: How to make inset color skinable? */ |
532 | .color-button { |
533 | border: 1px inset #FF9F00; |
534 | padding: 0px; |
535 | width: 15px; |
536 | height: 15px; |
537 | margin: 1px; |
538 | } |
539 | |
540 | .color-button:hover { |
541 | border: 1px solid #FFCF00; |
542 | } |
543 | |
544 | #ColorButtons { |
545 | margin-right: 5px; |
546 | } |
547 | |
548 | #TextColorButton { |
549 | margin: 1px 7px 7px 1px; |
550 | /* TEMP: Set color here. TODO: Set color from page */ |
551 | background-color: #AA0000; |
552 | } |
553 | |
554 | #BackgroundColorButton { |
555 | margin: 7px 1px 1px 7px; |
556 | /* TEMP: Set color here. TODO: Set color from page */ |
557 | background-color: #FFFF00; |
558 | } |
559 | |
560 | |