afe91d6d |
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 { |
30 | border-bottom: 1px solid #9999CC; |
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 CCCCDD; |
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 #9999CC; |
65 | border-bottom: none; |
66 | margin-bottom: 0px; |
67 | min-width: 1px; |
68 | color: #000000; |
69 | background-color: #CCD0DD; |
70 | overflow: hidden; |
71 | } |
72 | /* |
73 | #EditModeToolbar > toolbargrippy { |
74 | height: 100%; |
75 | } |
76 | */ |
77 | /* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */ |
78 | /* !important in for now as a workaround to above problem! */ |
79 | button.edit-mode:hover, button.edit-mode:hover:active, |
80 | button.edit-mode { |
81 | -moz-border-radius: 0px 0px 7px 7px; |
82 | padding: 0px 4px 1px 4px; |
83 | margin: 0px; |
84 | color: #CCD0DD; |
85 | background-color: #666699; |
86 | border-top: 1px solid #666699 !important; /* Must be same as background */ |
87 | border-bottom: 1px solid #9999CC !important; |
88 | border-left: 1px solid #9999CC !important; |
89 | border-right: 1px solid #9999CC !important; |
90 | } |
91 | |
92 | button.edit-mode > .button-internal-box, |
93 | button.edit-mode:hover > .button-internal-box, |
94 | button.edit-mode:hover:active > .button-internal-box { |
95 | border: none; |
96 | } |
97 | |
98 | button.edit-mode:hover { |
99 | border: 1px solid #3366FF !important; |
100 | } |
101 | |
102 | button.edit-mode:hover:active { |
103 | padding: 1px 5px 0px 3px; |
104 | border: 1px solid #99CCFF !important; |
105 | } |
106 | |
107 | button.edit-mode[selected="1"] { |
108 | padding: 0px 4px 1px 4px; |
109 | margin: -1px 0px 0px 0px; |
110 | /* Not resizing well! - use color instead |
111 | font-weight: bold; |
112 | */ |
113 | background-color: #FFFFFF; |
114 | color: #000000; |
115 | } |
116 | |
117 | button.edit-mode[selected="1"]:active, |
118 | button.edit-mode[selected="1"]:hover:active { |
119 | padding: 1px 5px 0px 3px; |
120 | } |
121 | |
122 | #NormalModeButton[type="image"] { |
123 | list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); |
124 | } |
125 | |
126 | #TagModeButton[type="image"] { |
127 | list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); |
128 | } |
129 | #SourceModeButton[type="image"] { |
130 | list-style-image:url(chrome://editor/skin/images/editmode-html.gif); |
131 | } |
132 | #PreviewModeButton[type="image"] { |
133 | list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); |
134 | } |
135 | #ToggleEditModeType { |
136 | list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); |
137 | border: 1px outset #CCD0DD; |
138 | } |
139 | |
140 | #ToggleEditModeType:hover { |
141 | border: 1px solid #99CCFF; |
142 | } |
143 | |
144 | #ToggleEditModeType:hover:active { |
145 | border: 1px inset #99CCFF; |
146 | } |
147 | |
148 | /* Image URLs for all Editor toolbar buttons */ |
149 | |
150 | #boldButton { |
151 | list-style-image:url(chrome://editor/skin/images/bold.gif); |
152 | } |
153 | |
154 | #italicButton { |
155 | list-style-image:url(chrome://editor/skin/images/italic.gif); |
156 | } |
157 | |
158 | #underlineButton { |
159 | list-style-image:url(chrome://editor/skin/images/underline.gif); |
160 | } |
161 | |
162 | #newButton { |
163 | list-style-image:url("chrome://editor/skin/images/newfile.gif"); |
164 | } |
165 | #newButton[disabled="true"] { |
166 | list-style-image:url("chrome://editor/skin/images/newfile_dis.gif"); |
167 | } |
168 | |
169 | #openButton { |
170 | list-style-image:url("chrome://editor/skin/images/openfile.gif"); |
171 | } |
172 | #openButton[disabled="true"] { |
173 | list-style-image:url("chrome://editor/skin/images/openfile_dis.gif"); |
174 | } |
175 | |
176 | #saveButton { |
177 | list-style-image:url("chrome://editor/skin/images/savefile.gif"); |
178 | } |
179 | #saveButton[disabled="true"] { |
180 | list-style-image:url("chrome://editor/skin/images/savefile_dis.gif"); |
181 | } |
182 | #saveButton[dirty="true"] { |
183 | list-style-image:url(chrome://editor/skin/images/savemod.gif); |
184 | } |
185 | |
186 | #publishButton { |
187 | list-style-image:url("chrome://editor/skin/images/publish.gif"); |
188 | } |
189 | |
190 | #previewButton { |
191 | list-style-image:url("chrome://editor/skin/images/preview.gif"); |
192 | } |
193 | #previewButton[disabled="true"] { |
194 | list-style-image:url("chrome://editor/skin/images/preview_dis.gif"); |
195 | } |
196 | |
197 | #printButton |
198 | { |
199 | list-style-image : url("chrome://editor/skin/images/print.gif"); |
200 | } |
201 | #printButton[disabled="true"] { |
202 | list-style-image:url("chrome://editor/skin/images/print_dis.gif"); |
203 | } |
204 | |
205 | #findButton { |
206 | list-style-image:url("chrome://editor/skin/images/find.gif"); |
207 | } |
208 | #findButton[disabled="true"] { |
209 | list-style-image:url("chrome://editor/skin/images/find_dis.gif"); |
210 | } |
211 | |
212 | #linkButton { |
213 | list-style-image:url("chrome://editor/skin/images/link.gif"); |
214 | } |
215 | #linkButton[disabled="true"] { |
216 | list-style-image:url("chrome://editor/skin/images/link_dis.gif"); |
217 | } |
218 | |
219 | #imageButton { |
220 | list-style-image:url("chrome://editor/skin/images/image.gif"); |
221 | } |
222 | #imageButton[disabled="true"] { |
223 | list-style-image:url("chrome://editor/skin/images/image_dis.gif"); |
224 | } |
225 | |
226 | #namedAnchorButton { |
227 | list-style-image:url("chrome://editor/skin/images/anchor.gif"); |
228 | } |
229 | #namedAnchorButton[disabled="true"] { |
230 | list-style-image:url("chrome://editor/skin/images/anchor_dis.gif"); |
231 | } |
232 | |
233 | #hlineButton { |
234 | list-style-image:url("chrome://editor/skin/images/hline.gif"); |
235 | } |
236 | #hlineButton[disabled="true"] { |
237 | list-style-image:url("chrome://editor/skin/images/hline_dis.gif"); |
238 | } |
239 | |
240 | #tableButton { |
241 | list-style-image:url("chrome://editor/skin/images/table.gif"); |
242 | } |
243 | #tableButton[disabled="true"] { |
244 | list-style-image:url("chrome://editor/skin/images/table_dis.gif"); |
245 | } |
246 | |
247 | #linkButton-dark { |
248 | list-style-image:url("chrome://editor/skin/images/link.gif"); |
249 | } |
250 | #imageButton-dark { |
251 | list-style-image:url("chrome://editor/skin/images/image.gif"); |
252 | } |
253 | #namedAnchorButton-dark { |
254 | list-style-image:url("chrome://editor/skin/images/anchor.gif"); |
255 | } |
256 | #hlineButton-dark { |
257 | list-style-image:url("chrome://editor/skin/images/hline.gif"); |
258 | } |
259 | #tableButton-dark { |
260 | list-style-image:url("chrome://editor/skin/images/table.gif"); |
261 | } |
262 | #spellingButton { |
263 | list-style-image:url("chrome://editor/skin/images/spell.gif"); |
264 | } |
265 | |
266 | #DecreaseFontSizeButton { |
267 | list-style-image:url("chrome://editor/skin/images/dec-font-size.gif"); |
268 | } |
269 | |
270 | #IncreaseFontSizeButton { |
271 | list-style-image:url("chrome://editor/skin/images/inc-font-size.gif"); |
272 | } |
273 | |
274 | #ulButton { |
275 | list-style-image:url("chrome://editor/skin/images/bullets.gif"); |
276 | } |
277 | #olButton { |
278 | list-style-image:url("chrome://editor/skin/images/numbers.gif"); |
279 | } |
280 | #outdentButton { |
281 | list-style-image:url("chrome://editor/skin/images/outdent.gif"); |
282 | } |
283 | #outdentButton[disabled="true"] { |
284 | list-style-image:url("chrome://editor/skin/images/outdent_dis.gif"); |
285 | } |
286 | |
287 | #indentButton { |
288 | list-style-image:url("chrome://editor/skin/images/indent.gif"); |
289 | } |
290 | |
291 | #FormatToolbar > button, |
292 | #FormatToolbar > button:hover, |
293 | #FormatToolbar > button:active, |
294 | #FormatToolbar > button[disabled="true"] { |
295 | margin: 0px 3px 0px 0px; |
296 | border: none; |
297 | min-width: 23px; |
298 | min-height: 23px; |
299 | } |
300 | #FormatToolbar > button > .button-internal-box { |
301 | margin: 0px; |
302 | padding: 1px; |
303 | border: 1px solid transparent; |
304 | -moz-box-pack: center; |
305 | } |
306 | #FormatToolbar > button:hover > .button-internal-box { |
307 | border: 1px outset #CCD0DD; |
308 | } |
309 | #FormatToolbar > button:active > .button-internal-box { |
310 | padding: 2px 0px 0px 2px; |
311 | border: 1px inset #CCD0DD; |
312 | } |
313 | #FormatToolbar > button[disabled="true"] > .button-internal-box { |
314 | border: 1px solid transparent; |
315 | } |
316 | |
317 | #FormatToolbar > button > .button-internal-box > .button-text-container |
318 | { |
319 | display : none; |
320 | } |
321 | |
322 | #ParagraphSelect { |
323 | margin-top: 2px; |
324 | } |
325 | |
326 | #AlignPopupButton { |
327 | list-style-image:url("chrome://editor/skin/images/align.gif"); |
328 | } |
329 | |
330 | #AlignPopupButton > .button-internal-box { |
331 | border:1px solid transparent; |
332 | } |
333 | #AlignPopupButton:hover > .button-internal-box { |
334 | border:1px outset #CCD0DD; |
335 | } |
336 | #AlignPopupButton:active > .button-internal-box, |
337 | #AlignPopupButton[open="true"] > .button-internal-box { |
338 | border:1px inset #CCD0DD; |
339 | } |
340 | |
341 | #InsertPopupButton { |
342 | list-style-image:url("chrome://editor/skin/images/object-popup.gif"); |
343 | } |
344 | |
345 | #text-align-left, |
346 | #align-left-button |
347 | { |
348 | list-style-image : url("chrome://editor/skin/images/left.gif"); |
349 | } |
350 | |
351 | #text-align-left[disabled="true"], |
352 | #text-align-left[disabled="true"]:hover, |
353 | #text-align-left[disabled="true"]:hover:active, |
354 | #align-left-button[disabled="true"], |
355 | #align-left-button[disabled="true"]:hover, |
356 | #align-left-button[disabled="true"]:hover:active, |
357 | { |
358 | list-style-image : url("chrome://editor/skin/images/left-disabled.gif"); |
359 | } |
360 | |
361 | #text-align-center, |
362 | #align-center-button |
363 | { |
364 | list-style-image : url("chrome://editor/skin/images/center.gif"); |
365 | } |
366 | |
367 | #text-align-center[disabled="true"], |
368 | #text-align-center[disabled="true"]:hover, |
369 | #text-align-center[disabled="true"]:hover:active, |
370 | #align-center-button[disabled="true"], |
371 | #align-center-button[disabled="true"]:hover, |
372 | #align-center-button[disabled="true"]:hover:active |
373 | { |
374 | list-style-image : url("chrome://editor/skin/images/center-disabled.gif"); |
375 | } |
376 | |
377 | #text-align-right, |
378 | #align-right-button |
379 | { |
380 | list-style-image : url("chrome://editor/skin/images/right.gif"); |
381 | } |
382 | |
383 | #text-align-right[disabled="true"], |
384 | #text-align-right[disabled="true"]:hover, |
385 | #text-align-right[disabled="true"]:hover:active |
386 | #align-right-button[disabled="true"], |
387 | #align-right-button[disabled="true"]:hover, |
388 | #align-right-button[disabled="true"]:hover:active |
389 | { |
390 | list-style-image : url("chrome://editor/skin/images/right-disabled.gif"); |
391 | } |
392 | |
393 | #text-align-justify, #align-justify-button |
394 | { |
395 | list-style-image : url("chrome://editor/skin/images/justify.gif"); |
396 | } |
397 | |
398 | #text-align-justify[disabled="true"], |
399 | #text-align-justify[disabled="true"]:hover, |
400 | #text-align-justify[disabled="true"]:hover:active |
401 | #align-justify-button[disabled="true"], |
402 | #align-justify-button[disabled="true"]:hover, |
403 | #align-justify-button[disabled="true"]:hover:active |
404 | { |
405 | list-style-image : url("chrome://editor/skin/images/justify-disabled.gif"); |
406 | } |
407 | |
408 | .ColorPickerLabel { |
409 | border: 1px inset white; |
410 | margin: 0px; |
411 | padding: 2px; |
412 | -moz-box-pack: center; |
413 | } |
414 | |
415 | /* TODO: How to make inset color skinable? */ |
416 | .color-button { |
417 | border: 1px inset #CCD0DD; |
418 | padding: 0px; |
419 | width: 19px; |
420 | height: 19px; |
421 | margin: 1px; |
422 | } |
423 | |
424 | .color-button:hover { |
425 | border: 1px solid #666699; |
426 | } |
427 | |
428 | #TextColorPopupButton { |
429 | margin: 2px 9px 9px 2px; |
430 | /* TEMP: Set color here. TODO: Set color from page */ |
431 | background-color: #AA0000; |
432 | } |
433 | |
434 | #BackColorPopupButton { |
435 | margin: 9px 2px 2px 9px; |
436 | /* TEMP: Set color here. TODO: Set color from page */ |
437 | background-color: #FFFF00; |
438 | } |