2646bf431a72ac69e00ad2e1fb801f8c0258b855
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / rtehtmlarea / htmlarea.css
1 /* Selectors for the htmlArea RTE editor */
2 .htmlarea {
3 margin: 0 2px 0 0;
4 padding: 0;
5 }
6 .pleasewait {
7 position: relative;
8 margin-top:30px;
9 padding: 20px 0 20px 50px;
10 font-size: 11px !important;
11 text-align: left;
12 background: url("images/status/loading.gif") no-repeat 10px center;
13 vertical-align: middle;
14 color: #7F8083;
15 }
16 .editorWrap {
17 margin: 0;
18 margin-top: 2px;
19 padding: 0;
20 }
21 .editorWrap textarea {
22 border-style:solid;
23 border-color:#C7C7C7;
24 border-width:0px 1px 1px 1px;
25 padding:0px 1px;
26 margin:0;
27 }
28 .editorWrap .resizable .statusBar,
29 .editorWrap .resizable .noStatusBar {
30 background-image: url("images/status/resizable.gif");
31 background-position: bottom right;
32 background-repeat: no-repeat;
33 }
34 .editorWrap .resizable .noStatusBar {
35 padding-bottom: 10px;
36 }
37 /* Selectors for the editor toolbar */
38 .htmlarea .toolbar {
39 cursor: default;
40 margin: 0;
41 padding: 2px;
42 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
43 }
44 .htmlarea .toolbar .tb-group {
45 clear:none;
46 float:left;
47 margin:1px 2px 0px 0px;
48 padding:0;
49 }
50 .htmlarea .toolbar .x-form-item {
51 float: left;
52 height: 26px;
53 margin: 0 2px;
54 }
55 .htmlarea .toolbar .x-form-item-label {
56 vertical-align:middle;
57 background-color:transparent;
58 border-style:none;
59 margin:0;
60 padding:2px 3px 0px 3px;
61 min-width: 110px;
62 }
63 .htmlarea .toolbar .button {
64 background-color: transparent;
65 color: ButtonText;
66 border-style: solid;
67 border-width: 1px;
68 border-color: transparent;
69 border-collapse: separate;
70 height: 23px;
71 margin: 0 0 3px 0;
72 padding: 0;
73 float: left;
74 }
75 .htmlarea .toolbar .x-btn-mc {
76 background-color: transparent;
77 background-image: none;
78 border-style: none;
79 margin: 0;
80 padding: 0;
81 }
82 .htmlarea .toolbar .x-btn-tl,
83 .htmlarea .toolbar .x-btn-tc,
84 .htmlarea .toolbar .x-btn-tr,
85 .htmlarea .toolbar .x-btn-ml,
86 .htmlarea .toolbar .x-btn-mr,
87 .htmlarea .toolbar .x-btn-bl,
88 .htmlarea .toolbar .x-btn-bc,
89 .htmlarea .toolbar .x-btn-br {
90 display: none;
91 }
92 .htmlarea .toolbar .x-btn-text {
93 background-image: url("images/sprites/actions.png");
94 background-repeat: no-repeat;
95 width: 20px;
96 height: 18px;
97 padding: 0;
98 margin: 1px 0 1px 2px;
99 }
100 .htmlarea .toolbar .buttonHover {
101 opacity: 1.00;
102 }
103 .htmlarea .toolbar .buttonActive,
104 .htmlarea .toolbar .buttonPressed,
105 .htmlarea-context-menu .buttonActive {
106 border-style: solid;
107 border-width: 1px;
108 border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
109 background-color: ButtonHighlight;
110 text-decoration: none;
111 opacity: 1.00;
112 }
113 .htmlarea .toolbar .indicator {
114 cursor: default;
115 background-color: white;
116 width: 24px;
117 height: 18px;
118 overflow: hidden;
119 text-align: center;
120 border: 1px solid ButtonShadow;
121 margin: 3px 1px 5px 1px;
122 float: left;
123 }
124 .htmlarea .toolbar .buttonDisabled {
125 filter: gray() alpha(opacity=25);
126 opacity: 0.25;
127 }
128 .htmlarea .toolbar .separator {
129 background-color: rgb(115, 115, 115);
130 float: left;
131 height: 18px;
132 margin: 3px 2px 2px 2px;
133 width: 1px;
134 }
135 .htmlarea .toolbar .space {
136 background-color:transparent;
137 height:22px;
138 border-style:none;
139 margin:0;
140 padding:0 1px;
141 float:left;
142 }
143 .htmlarea .toolbar .select {
144 color: WindowText;
145 height: 17px;
146 }
147 .htmlarea .toolbar .x-form-item label.x-form-item-label {
148 padding-right: 0;
149 }
150 .htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
151 right: 0;
152 }
153 .htmlarea .toolbar .select, .htmlarea .toolbar .select:hover, .htmlarea .toolbar .select:active {
154 background-color:Window;
155 }
156 .htmlarea .toolbar .select .buttonDisabled {
157 color:GrayText;
158 background-color:#EFEFF4;
159 }
160 .htmlarea .editorIframe {
161 clear:both;
162 border:1px solid #c7c7c7;
163 border-bottom: none;
164 margin:0;
165 padding:0;
166 }
167 .editorWrap .resizable .editorIframe {
168 margin-bottom: -3px;
169 }
170 .htmlarea .noStatusBar {
171 border-bottom:1px solid #A2AAB8;
172 }
173 .htmlarea .statusBar {
174 background-color: #666;
175 color: #FFFFFF;
176 font-size: 10px;
177 border: 1px solid #c7c7c7;
178 margin: 0;
179 padding: 0 3px;
180 line-height: 20px;
181 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
182 }
183 .htmlarea .statusBar .statusBarTree a {
184 color:#FFFFFF;
185 text-decoration:none;
186 font-weight:bold;
187 padding:0px 5px;
188 }
189 .htmlarea .statusBar .statusBarTree a:visited {
190 color:#FFFFFF;
191 }
192 .htmlarea .statusBar .statusBarTree a:hover {
193 text-decoration: underline;
194 }
195 .htmlarea .statusBar .statusBarWordCount {
196 float: right;
197 padding-right: 8px;
198 }
199 /* Selectors for dialogue windows */
200 .htmlarea-window .x-panel-icon {
201 background-image: url("images/sprites/actions.png");
202 background-repeat: no-repeat;
203 margin-top: 2px;
204 height: 22px;
205 }
206 .htmlarea-window .x-window-header-text {
207 display: inline-block;
208 margin-top: -4px !important;
209 vertical-align: top;
210 }
211 .htmlarea-window .x-window-header .t3-help-link {
212 color: #fff;
213 }
214 .htmlarea-window ul.x-tab-strip {
215 list-style: none;
216 }
217 .htmlarea-window .x-tab-panel-body {
218 background-color: #EFEFF4;
219 padding-bottom: 10px;
220 padding-left: 3px;
221 }
222 .htmlarea-window .x-fieldset {
223 margin: 3px;
224 padding-top: 5px;
225 }
226 .htmlarea-window .x-fieldset legend {
227 border: none;
228 font-size: 12px;
229 margin: 0;
230 padding: 0 2px;
231 text-align: left;
232 }
233 /* IE legend positioning bug */
234 .ext-ie .htmlarea-window .x-fieldset legend,
235 .ext-ie .htmlarea-window .x-fieldset legend span {
236 display: block;
237 float: left;
238 }
239 .ext-ie .htmlarea-window .x-fieldset-bwrap {
240 clear: left;
241 }
242 /* Selector htmlarea-window-table is used in the element browsers */
243 #typo3-curUrl {
244 margin-left: 10px;
245 }
246 .htmlarea-window-table td {
247 padding: 0 2px;
248 }
249 .htmlarea-window-table td label {
250 display: inline-block;
251 height: 100%;
252 vertical-align: top;
253 }
254 .htmlarea-window-table input[type="checkbox"] {
255 margin-bottom: 10px;
256 margin-top: 7px;
257 }
258 .htmlarea-window-table select {
259 border: solid 1px #888;
260 height: 23px;
261 margin-bottom: 5px;
262 padding-left: 3px;
263 }
264 .htmlarea-window-table option {
265 line-height: normal;
266 padding-bottom: 3px;
267 padding-top: 3px;
268 }
269 .htmlarea-window .x-form-item-label {
270 font-size: 10px;
271 text-align: right;
272 margin: 0;
273 padding: 3px 5px 0 5px;
274 }
275 .htmlarea-window .x-btn-text {
276 font-weight: normal;
277 color: #000000;
278 }
279 .htmlarea-window .x-form-check-wrap {
280 padding-top: 3px;
281 }
282 .htmlarea-window iframe {
283 background-color: #FFF;
284 color: #000;
285 border: 1px solid #A2AAB8;
286 }
287 .htmlarea-window iframe.content-iframe {
288 background-color: #EFEFF4;
289 }
290 .htmlarea-window .show-color {
291 margin-top: 10px;
292 border-style: solid;
293 border-width: 1px;
294 border-color: white;
295 }
296 .htmlarea-color-menu .htmlarea-custom-colors {
297 height: 170px;
298 overflow: auto;
299 }
300 .htmlarea-window .htmlarea-custom-colors {
301 height: auto;
302 overflow: inherit;
303 }
304 .htmlarea-custom-colors a {
305 border-color: transparent;
306 float: none;
307 display: block;
308 width: 90%;
309 }
310 .htmlarea-window .htmlarea-custom-colors a {
311 width: 100%;
312 }
313 .htmlarea-custom-colors em {
314 display: block;
315 border: 1px solid;
316 border-color: #C5C5D5;
317 width: 100%;
318 }
319 .htmlarea-custom-colors em span {
320 width: 100%;
321 }
322 /* Selectors for the About dialogue */
323 .htmlarea-window .about-plugins .x-list-body dt {
324 overflow: auto;
325 white-space: normal;
326 }
327 /* Selectors for the default image dialogue */
328 .htmlarea-window .image-preview {
329 height: 300px;
330 width: 99%;
331 float: right;
332 }
333 /* Selectors for the InsertSmiley plugin */
334 .htmlarea-window .emoticon-array {
335 padding: 10px;
336 }
337 .htmlarea-window .emoticon {
338 display: block;
339 float: left;
340 height: 28px;
341 padding: 0 5px 10px 5px;
342 vertical-align: middle;
343 width: 20px;
344 }
345 /* Selectors for the CharacterMap dialogue */
346 .htmlarea-window .character-map .character {
347 display: block;
348 float: left;
349 height: 26px;
350 font-size: 14px;
351 font-weight: bold;
352 text-align: center;
353 padding-bottom: 3px;
354 border: 1px solid transparent;
355 width: 20px;
356 }
357 .htmlarea-window .character-map .character:hover {
358 background-color: #FFFFFF;
359 border: 1px solid #A2AAB8;
360 }
361 /* Selectors for the SpellChecker dialogue */
362 .htmlarea-window .spell-check .controls {
363 text-align: center;
364 width: 175px;
365 margin: 3px;
366 }
367 .htmlarea-window .spell-check .controls .x-btn {
368 margin-top: 3px;
369 margin-left: 8px;
370 }
371 .htmlarea-window .spell-check .contentframe {
372 float: right;
373 height: 450px;
374 margin: 9px 0px;
375 }
376 /* Selectors for the ContextMenu plugin */
377 .htmlarea-context-menu {
378 background-color:#EFEFF4;
379 color:#212424;
380 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
381 font-size:10px;
382 }
383 .htmlarea-context-menu ul {
384 list-style: none;
385 margin: 0;
386 }
387 .htmlarea-context-menu li {
388 margin: 0;
389 padding: 0;
390 border-width: 0;
391 }
392 .htmlarea-context-menu a {
393 font-weight: normal;
394 }
395 .htmlarea-context-menu .button {
396 background-color: transparent;
397 margin: 0 2px 0 0;
398 padding-top: 1px;
399 }
400 .htmlarea-context-menu .separator {
401 border-top: 1px solid #A2AAB8;
402 }
403 .htmlarea-context-menu .hover {
404 background-image: url("images/alt_menu_mainitem_bg.gif");
405 background-repeat: repeat-x;
406 color: #FFF;
407 margin: 0 2px 0 0;
408 padding-top: 1px;
409 border-color: #A2AAB8;
410 }
411 .htmlarea-context-menu .x-menu-item-icon {
412 background-image: url("images/sprites/actions.png");
413 background-repeat: no-repeat;
414 margin-top: -2px;
415 margin-left: -2px;
416 width: 18px;
417 height: 18px;
418 }
419 /* Window status bar selectors */
420 .htmlarea-window .status-ready {
421 padding-left: 21px !important;
422 background-repeat: no-repeat;
423 background-image: url("images/status/dialog-ok.png");
424 background-position: 0px 2px;
425 }
426 .htmlarea-window .status-info {
427 padding-left: 21px !important;
428 background-repeat: no-repeat;
429 background-image: url("images/status/dialog-information.png");
430 background-position: 0px 2px;
431 }
432 .htmlarea-window .status-wait {
433 padding-left: 45px !important;
434 background-repeat: no-repeat;
435 background-image: url("images/status/loading-balls.gif");
436 background-position: 0px 6px;
437 }
438 .htmlarea-window .x-toolbar .x-btn {
439 margin-left: 5px;
440 }
441 .htmlarea-window .x-toolbar .xtb-text {
442 cursor: default;
443 }
444 /* Button background positioning in window status bar*/
445 .htmlarea-window .x-toolbar .x-btn-tl{
446 background-position: 0 0;
447 }
448 .htmlarea-window .x-toolbar .x-btn-tr{
449 background-position: -3px 0;
450 }
451 .htmlarea-window .x-toolbar .x-btn-tc{
452 background-position: 0 -6px;
453 }
454 .htmlarea-window .x-toolbar .x-btn-ml{
455 background-position: 0 -24px;
456 }
457 .htmlarea-window .x-toolbar .x-btn-mr{
458 background-position: -3px -24px;
459 }
460 .htmlarea-window .x-toolbar .x-btn-mc{
461 background-position: 0 -1096px;
462 }
463 .htmlarea-window .x-toolbar .x-btn-bl{
464 background-position: 0 -3px;
465 }
466 .htmlarea-window .x-toolbar .x-btn-br{
467 background-position: -3px -3px;
468 }
469 .htmlarea-window .x-toolbar .x-btn-bc{
470 background-position: 0 -15px;
471 }
472 /* Action icon selectors for toolbar, context menu and window headers */
473 .htmlarea-action-abbreviation-edit { background-position: 0 0 !important; }
474 .htmlarea-action-bidi-override { background-position: 0 -58px !important; }
475 .htmlarea-action-big { background-position: 0 -116px !important; }
476 .htmlarea-action-blockquote { background-position: 0 -174px !important; }
477 .htmlarea-action-bold { background-position: 0 -232px !important; }
478 .htmlarea-action-cell-delete { background-position: 0 -290px !important; }
479 .htmlarea-action-cell-edit-properties { background-position: 0 -348px !important; }
480 .htmlarea-action-cell-insert-after { background-position: 0 -406px !important; }
481 .htmlarea-action-cell-insert-before { background-position: 0 -464px !important; }
482 .htmlarea-action-cell-merge { background-position: 0 -522px !important; }
483 .htmlarea-action-cell-split { background-position: 0 -580px !important; }
484 .htmlarea-action-character-insert-from-map { background-position: 0 -638px !important; }
485 .htmlarea-action-citation { background-position: 0 -696px !important; }
486 .htmlarea-action-code { background-position: 0 -754px !important; }
487 .htmlarea-action-color-background { background-position: 0 -812px !important; }
488 .htmlarea-action-color-foreground { background-position: 0 -870px !important; }
489 .htmlarea-action-column-delete { background-position: 0 -928px !important; }
490 .htmlarea-action-column-edit-properties { background-position: 0 -986px !important; }
491 .htmlarea-action-column-insert-after { background-position: 0 -1044px !important; }
492 .htmlarea-action-column-insert-before { background-position: 0 -1102px !important; }
493 .htmlarea-action-column-split { background-position: 0 -1160px !important; }
494 .htmlarea-action-copy { background-position: 0 -1218px !important; }
495 .htmlarea-action-cut { background-position: 0 -1276px !important; }
496 .htmlarea-action-definition-list-item { background-position: 0 -1334px !important; }
497 .htmlarea-action-definition-list { background-position: 0 -1392px !important; }
498 .htmlarea-action-definition { background-position: 0 -1450px !important; }
499 .htmlarea-action-delete-item { background-position: 0 -1508px !important; }
500 .htmlarea-action-deleted-text { background-position: 0 -1566px !important; }
501 .htmlarea-action-editor-show-about { background-position: 0 -1624px !important; }
502 .htmlarea-action-editor-toggle-mode { background-position: 0 -1682px !important; }
503 .htmlarea-action-element-edit { background-position: 0 -1740px !important; }
504 .htmlarea-action-emphasis { background-position: 0 -1798px !important; }
505 .htmlarea-action-find-replace { background-position: 0 -1856px !important; }
506 .htmlarea-action-horizontal-rule-insert { background-position: 0 -1914px !important; }
507 .htmlarea-action-image-edit { background-position: 0 -1972px !important; }
508 .htmlarea-action-indent { background-position: 0 -2030px !important; }
509 .htmlarea-action-inserted-text { background-position: 0 -2088px !important; }
510 .htmlarea-action-italic { background-position: 0 -2146px !important; }
511 .htmlarea-action-justify-center { background-position: 0 -2204px !important; }
512 .htmlarea-action-justify-full { background-position: 0 -2262px !important; }
513 .htmlarea-action-justify-left { background-position: 0 -2320px !important; }
514 .htmlarea-action-justify-right { background-position: 0 -2378px !important; }
515 .htmlarea-action-keyboard { background-position: 0 -2436px !important; }
516 .htmlarea-action-language-marks-show { background-position: 0 -2494px !important; }
517 .htmlarea-action-link-edit { background-position: 0 -2552px !important; }
518 .htmlarea-action-microdata-show { background-position: 0 -2610px !important; }
519 .htmlarea-action-mono-spaced { background-position: 0 -2668px !important; }
520 .htmlarea-action-ordered-list { background-position: 0 -2726px !important; }
521 .htmlarea-action-outdent { background-position: 0 -2784px !important; }
522 .htmlarea-action-paragraph-insert-after { background-position: 0 -2842px !important; }
523 .htmlarea-action-paragraph-insert-before { background-position: 0 -2900px !important; }
524 .htmlarea-action-paste-behaviour { background-position: 0 -2958px !important; }
525 .htmlarea-action-paste-toggle { background-position: 0 -3016px !important; }
526 .htmlarea-action-paste { background-position: 0 -3074px !important; }
527 .htmlarea-action-quotation { background-position: 0 -3132px !important; }
528 .htmlarea-action-redo { background-position: 0 -3190px !important; }
529 .htmlarea-action-remove-format { background-position: 0 -3248px !important; }
530 .htmlarea-action-row-delete { background-position: 0 -3306px !important; }
531 .htmlarea-action-row-edit-properties { background-position: 0 -3364px !important; }
532 .htmlarea-action-row-insert-above { background-position: 0 -3422px !important; }
533 .htmlarea-action-row-insert-under { background-position: 0 -3480px !important; }
534 .htmlarea-action-row-split { background-position: 0 -3538px !important; }
535 .htmlarea-action-sample { background-position: 0 -3596px !important; }
536 .htmlarea-action-small { background-position: 0 -3654px !important; }
537 .htmlarea-action-smiley-insert { background-position: 0 -3712px !important; }
538 .htmlarea-action-soft-hyphen-insert { background-position: 0 -3770px !important; }
539 .htmlarea-action-span { background-position: 0 -3828px !important; }
540 .htmlarea-action-spell-check { background-position: 0 -3886px !important; }
541 .htmlarea-action-strike-through { background-position: 0 -3944px !important; }
542 .htmlarea-action-strong { background-position: 0 -4002px !important; }
543 .htmlarea-action-subscript { background-position: 0 -4060px !important; }
544 .htmlarea-action-superscript { background-position: 0 -4118px !important; }
545 .htmlarea-action-table-edit-properties { background-position: 0 -4176px !important; }
546 .htmlarea-action-table-insert { background-position: 0 -4234px !important; }
547 .htmlarea-action-table-restyle { background-position: 0 -4292px !important; }
548 .htmlarea-action-table-show-borders { background-position: 0 -4350px !important; }
549 .htmlarea-action-tag-insert { background-position: 0 -4408px !important; }
550 .htmlarea-action-text-direction-left-to-right { background-position: 0 -4466px !important; }
551 .htmlarea-action-text-direction-right-to-left { background-position: 0 -4524px !important; }
552 .htmlarea-action-underline { background-position: 0 -4582px !important; }
553 .htmlarea-action-undo { background-position: 0 -4640px !important; }
554 .htmlarea-action-unlink { background-position: 0 -4698px !important; }
555 .htmlarea-action-unordered-list { background-position: 0 -4756px !important; }
556 .htmlarea-action-user-element-edit { background-position: 0 -4814px !important; }
557 .htmlarea-action-variable { background-position: 0 -4872px !important; }
558
559 /* ExtJs combo boxes */
560 .x-combo-list {
561 border-color:#bcbcbc;
562 background-color:#eaeaea;
563 }
564 .x-combo-list-inner {
565 background-color:#fff;
566 }
567 .x-combo-list-hd {
568 color:#55545E;
569 background-image: url(images/panel-title-light-bg.gif);
570 border-bottom-color:#bcbcbc;
571 }
572 .x-combo-list-item {
573 border-color:#fff;
574 }
575 .x-combo-list .x-combo-selected {
576 border-color:#b9b9b9 !important;
577 background-color:#e7e7e7;
578 }
579 .x-combo-list .x-toolbar {
580 border-top-color:#bcbcbc;
581 }