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