Dotclear

source: plugins/dcCKEditor/js/ckeditor-skins/dotclear/sass/dialog.scss @ 2868:2f77d528185b

Revision 2868:2f77d528185b, 23.1 KB checked in by Nicolas <nikrou77@…>, 9 years ago (diff)

Add external media for CKEditor
Allow link around external media

Line 
1@import "compass/utilities/sprites";
2@import "icons/*.png";
3@import "icons/hidpi/*.png";
4
5/* dialog modal */
6
7.cke_dialog {
8    /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
9       showing an unstyled dialog by hidding it. Here, we restore its visibility. */
10    visibility: visible;
11}
12
13/* The inner boundary container. */
14.cke_dialog_body
15{
16     z-index: 1;
17     background: #eaeaea;
18     border: 1px solid #b2b2b2;
19     border-bottom-color: #999;
20
21     -moz-border-radius: 3px;
22     -webkit-border-radius: 3px;
23     border-radius: 3px;
24
25     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
26     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
27     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
28}
29
30/* This one is required by Firefox 3.6. Without it,
31   dialog tabs and resizer float outside of the dialog.
32   Although this rule doesn't seem to break anything on other
33   browsers, it doesn't work with broken jQueryUI - #9851. */
34.cke_browser_gecko19 .cke_dialog_body
35{
36     position: relative;
37}
38
39/* Due to our reset we have to recover the styles of some elements. */
40.cke_dialog strong
41{
42     font-weight: bold;
43}
44
45/* The dialog title. */
46.cke_dialog_title
47{
48     font-weight: bold;
49     font-size: 13px;
50     cursor: move;
51     position: relative;
52
53     color: #474747;
54     text-shadow: 0 1px 0 rgba(255,255,255,.75);
55
56     border-bottom: 1px solid #999;
57     padding: 6px 10px;
58
59     -moz-border-radius: 2px 2px 0 0;
60     -webkit-border-radius: 2px 2px 0 0;
61     border-radius: 2px 2px 0 0;
62
63     -moz-box-shadow: 0 1px 0 #fff inset;
64     -webkit-box-shadow: 0 1px 0 #fff inset;
65     box-shadow: 0 1px 0 #fff inset;
66
67     background: #cfd1cf;
68     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#cfd1cf));
69     background-image: -moz-linear-gradient(top, #f5f5f5, #cfd1cf);
70     background-image: -webkit-linear-gradient(top, #f5f5f5, #cfd1cf);
71     background-image: -o-linear-gradient(top, #f5f5f5, #cfd1cf);
72     background-image: -ms-linear-gradient(top, #f5f5f5, #cfd1cf);
73     background-image: linear-gradient(top, #f5f5f5, #cfd1cf);
74     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
75}
76
77/* The outer part of the dialog contants, which contains the contents body
78   and the footer. */
79.cke_dialog_contents
80{
81     background-color: #fff;
82     overflow: auto;
83     padding: 15px 10px 5px 10px;
84     margin-top: 30px;
85     border-top: 1px solid #bfbfbf;
86
87     -moz-border-radius: 0 0 3px 3px;
88     -webkit-border-radius: 0 0 3px 3px;
89     border-radius: 0 0 3px 3px;
90}
91
92/* The contents body part, which will hold all elements available in the dialog. */
93.cke_dialog_contents_body
94{
95     overflow: auto;
96     padding: 17px 10px 5px 10px;
97     margin-top: 22px;
98}
99
100/* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
101   well as a resize handler. */
102.cke_dialog_footer
103{
104     text-align: right;
105     position: relative;
106
107     border: none;
108     outline: 1px solid #bfbfbf;
109
110     -moz-box-shadow: 0 1px 0 #fff inset;
111     -webkit-box-shadow: 0 1px 0 #fff inset;
112     box-shadow: 0 1px 0 #fff inset;
113
114     -moz-border-radius: 0 0 2px 2px;
115     -webkit-border-radius: 0 0 2px 2px;
116     border-radius: 0 0 2px 2px;
117
118     background: #cfd1cf;
119     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cfd1cf));
120     background-image: -moz-linear-gradient(top, #ebebeb, #cfd1cf);
121     background-image: -webkit-linear-gradient(top, #ebebeb, #cfd1cf);
122     background-image: -o-linear-gradient(top, #ebebeb, #cfd1cf);
123     background-image: -ms-linear-gradient(top, #ebebeb, #cfd1cf);
124     background-image: linear-gradient(top, #ebebeb, #cfd1cf);
125     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
126}
127
128.cke_rtl .cke_dialog_footer
129{
130     text-align: left;
131}
132
133.cke_hc .cke_dialog_footer
134{
135     outline: none;
136     border-top: 1px solid #fff;
137}
138
139.cke_dialog .cke_resizer
140{
141     margin-top: 22px;
142}
143
144.cke_dialog .cke_resizer_rtl
145{
146     margin-left: 5px;
147}
148
149.cke_dialog .cke_resizer_ltr
150{
151     margin-right: 5px;
152}
153
154/*
155Dialog tabs
156-------------
157
158Tabs are presented on some of the dialogs to make it possible to have its
159contents split on different groups, visible one after the other.
160
161The main element that holds the tabs can be made hidden, in case of no tabs
162available.
163
164The following is the visual representation of the tabs block:
165
166+-- .cke_dialog_tabs ------------------------------------+
167|  +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ...   |
168|  |                     | |                     |       |
169|  +---------------------+ +---------------------+       |
170+--------------------------------------------------------+
171
172The .cke_dialog_tab_selected class is appended to the active tab.
173*/
174
175/* The main tabs container. */
176.cke_dialog_tabs
177{
178     height: 24px;
179     display: inline-block;
180     margin: 5px 0 0;
181     position: absolute;
182     z-index: 2;
183     left: 10px;
184}
185
186.cke_rtl .cke_dialog_tabs
187{
188     right: 10px;
189}
190
191/* A single tab (an <a> element). */
192a.cke_dialog_tab
193{
194
195     height: 16px;
196     padding: 4px 8px;
197     margin-right: 3px;
198     display: inline-block;
199     cursor: pointer;
200     line-height: 16px;
201     outline: none;
202     color: #595959;
203     border: 1px solid #bfbfbf;
204
205     -moz-border-radius: 3px 3px 0 0;
206     -webkit-border-radius: 3px 3px 0 0;
207     border-radius: 3px 3px 0 0;
208
209     background: #d4d4d4;
210     background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ededed));
211     background-image: -moz-linear-gradient(top, #fafafa, #ededed);
212     background-image: -webkit-linear-gradient(top, #fafafa, #ededed);
213     background-image: -o-linear-gradient(top, #fafafa, #ededed);
214     background-image: -ms-linear-gradient(top, #fafafa, #ededed);
215     background-image: linear-gradient(top, #fafafa, #ededed);
216     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fafafa', endColorstr='#ededed');
217}
218
219.cke_rtl a.cke_dialog_tab
220{
221     margin-right: 0;
222     margin-left: 3px;
223}
224
225/* A hover state of a regular inactive tab. */
226a.cke_dialog_tab:hover
227{
228     background: #ebebeb;
229     background: -moz-linear-gradient(top, #ebebeb 0%, #dfdfdf 100%);
230     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#dfdfdf));
231     background: -webkit-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
232     background: -o-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
233     background: -ms-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
234     background: linear-gradient(to bottom, #ebebeb 0%,#dfdfdf 100%);
235     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#dfdfdf',GradientType=0 );
236}
237
238a.cke_dialog_tab_selected
239{
240     background: #fff;
241     color: #383838;
242     border-bottom-color: #fff;
243     cursor: default;
244     filter: none;
245}
246
247/* A hover state for selected tab. */
248a.cke_dialog_tab_selected:hover
249{
250     background: #ededed;
251     background: -moz-linear-gradient(top, #ededed 0%, #ffffff 100%);
252     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
253     background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 100%);
254     background: -o-linear-gradient(top, #ededed 0%,#ffffff 100%);
255     background: -ms-linear-gradient(top, #ededed 0%,#ffffff 100%);
256     background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
257     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
258}
259
260.cke_hc a.cke_dialog_tab:hover,
261.cke_hc a.cke_dialog_tab_selected
262{
263     border: 3px solid;
264     padding: 2px 6px;
265}
266
267a.cke_dialog_tab_disabled
268{
269     color: #bababa;
270     cursor: default;
271}
272
273/* The .cke_single_page class is appended to the dialog outer element in case
274   of dialogs that has no tabs. */
275.cke_single_page .cke_dialog_tabs
276{
277     display: none;
278}
279
280.cke_single_page .cke_dialog_contents
281{
282     padding-top: 5px;
283     margin-top: 0;
284     border-top: none;
285}
286
287/* The close button at the top of the dialog. */
288
289.cke_dialog_close_button
290{
291    @include icons-sprite(close);
292    position: absolute;
293    cursor: pointer;
294    text-align: center;
295    height: 20px;
296    width: 20px;
297    top: 5px;
298    z-index: 5;
299}
300
301.cke_hidpi .cke_dialog_close_button {
302    @include hidpi-sprite(close);
303}
304
305.cke_dialog_close_button span
306{
307     display: none;
308}
309
310.cke_hc .cke_dialog_close_button span
311{
312     display: inline;
313     cursor: pointer;
314     font-weight: bold;
315     position: relative;
316     top: 3px;
317}
318
319.cke_ltr .cke_dialog_close_button
320{
321     right: 5px;
322}
323
324.cke_rtl .cke_dialog_close_button
325{
326     left: 6px;
327}
328
329.cke_dialog_close_button
330{
331     top: 4px;
332}
333
334/*
335Dialog UI Elements
336--------------------
337
338The remaining styles define the UI elements that can be used inside dialog
339contents.
340
341Most of the UI elements on dialogs contain a textual label. All of them share
342the same labelling structure, having the label text inside an element with
343.cke_dialog_ui_labeled_label and the element specific part inside the
344.cke_dialog_ui_labeled_content class.
345*/
346
347/* If an element is supposed to be disabled, the .cke_disabled class is
348   appended to it. */
349div.cke_disabled .cke_dialog_ui_labeled_content div *
350{
351     background-color: #ddd;
352     cursor: default;
353}
354
355/*
356Horizontal-Box and Vertical-Box
357---------------------------------
358
359There are basic layou element used by the editor to properly align elements in
360the dialog. They're basically tables that have each cell filled by UI elements.
361
362The following is the visual representation of a H-Box:
363
364+-- .cke_dialog_ui_hbox --------------------------------------------------------------------------------+
365|  +-- .cke_dialog_ui_hbox_first --+ +-- .cke_dialog_ui_hbox_child --+ +-- .cke_dialog_ui_hbox_last --+ |
366|  +                               + +                               + +                              + |
367|  +-------------------------------+ +-------------------------------+ +------------------------------+ |
368+-------------------------------------------------------------------------------------------------------+
369
370It is possible to have nested V/H-Boxes.
371*/
372
373.cke_dialog_ui_vbox table,
374.cke_dialog_ui_hbox table
375{
376     margin: auto;
377}
378
379.cke_dialog_ui_vbox_child
380{
381     padding: 5px 0px;
382}
383
384.cke_dialog_ui_hbox
385{
386     width: 100%;
387}
388
389.cke_dialog_ui_hbox_first,
390.cke_dialog_ui_hbox_child,
391.cke_dialog_ui_hbox_last
392{
393     vertical-align: top;
394}
395
396.cke_ltr .cke_dialog_ui_hbox_first,
397.cke_ltr .cke_dialog_ui_hbox_child
398{
399     padding-right: 10px;
400}
401
402.cke_rtl .cke_dialog_ui_hbox_first,
403.cke_rtl .cke_dialog_ui_hbox_child
404{
405     padding-left: 10px;
406}
407
408.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
409.cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
410{
411     padding-right: 5px;
412}
413
414.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
415.cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
416{
417     padding-left: 5px;
418     padding-right: 0;
419}
420
421/* Applies to all labeled dialog fields */
422.cke_hc div.cke_dialog_ui_input_text,
423.cke_hc div.cke_dialog_ui_input_password,
424.cke_hc div.cke_dialog_ui_input_textarea,
425.cke_hc div.cke_dialog_ui_input_select,
426.cke_hc div.cke_dialog_ui_input_file
427{
428     border: 1px solid;
429}
430
431/*
432Text Input
433------------
434
435The basic text field to input text.
436
437+-- .cke_dialog_ui_text --------------------------+
438|  +-- .cke_dialog_ui_labeled_label ------------+ |
439|  |                                            | |
440|  +--------------------------------------------+ |
441|  +-- .cke_dialog_ui_labeled_content ----------+ |
442|  | +-- div.cke_dialog_ui_input_text --------+ | |
443|  | | +-- input.cke_dialog_ui_input_text --+ | | |
444|  | | |                                    | | | |
445|  | | +------------------------------------+ | | |
446|  | +----------------------------------------+ | |
447|  +--------------------------------------------+ |
448+-------------------------------------------------+
449*/
450
451/*
452Textarea
453----------
454
455The textarea field to input larger text.
456
457+-- .cke_dialog_ui_textarea --------------------------+
458|  +-- .cke_dialog_ui_labeled_label ----------------+ |
459|  |                                                | |
460|  +------------------------------------------------+ |
461|  +-- .cke_dialog_ui_labeled_content --------------+ |
462|  | +-- div.cke_dialog_ui_input_textarea --------+ | |
463|  | | +-- input.cke_dialog_ui_input_textarea --+ | | |
464|  | | |                                        | | | |
465|  | | +----------------------------------------+ | | |
466|  | +--------------------------------------------+ | |
467|  +------------------------------------------------+ |
468+-----------------------------------------------------+
469*/
470
471textarea.cke_dialog_ui_input_textarea
472{
473     overflow: auto;
474     resize: none;
475}
476
477input.cke_dialog_ui_input_text,
478input.cke_dialog_ui_input_password,
479textarea.cke_dialog_ui_input_textarea
480{
481     background-color: #fff;
482     border: 1px solid #c9cccf;
483     border-top-color: #aeb3b9;
484     padding: 4px 6px;
485     outline: none;
486     width: 100%;
487     *width: 95%;
488
489     -moz-box-sizing: border-box;
490     -webkit-box-sizing: border-box;
491     box-sizing: border-box;
492
493     -moz-border-radius: 3px;
494     -webkit-border-radius: 3px;
495     border-radius: 3px;
496
497     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
498     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
499     box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
500}
501
502input.cke_dialog_ui_input_text:hover,
503input.cke_dialog_ui_input_password:hover,
504textarea.cke_dialog_ui_input_textarea:hover
505{
506     border: 1px solid #aeb3b9;
507     border-top-color: #a0a6ad;
508}
509
510input.cke_dialog_ui_input_text:focus,
511input.cke_dialog_ui_input_password:focus,
512textarea.cke_dialog_ui_input_textarea:focus,
513select.cke_dialog_ui_input_select:focus
514{
515     outline: none;
516     border: 1px solid #139ff7;
517     border-top-color: #1392e9;
518}
519
520/*
521Button
522--------
523
524The buttons used in the dialog footer or inside the contents.
525
526+-- a.cke_dialog_ui_button -----------+
527|  +-- span.cke_dialog_ui_button --+  |
528|  |                               |  |
529|  +-------------------------------+  |
530+-------------------------------------+
531*/
532
533/* The outer part of the button. */
534a.cke_dialog_ui_button
535{
536     display: inline-block;
537     *display: inline;
538     *zoom: 1;
539
540     padding: 3px 0;
541     margin: 0;
542
543     text-align: center;
544     color: #333;
545     vertical-align: middle;
546     cursor: pointer;
547
548     border: 1px solid #b6b6b6;
549     border-bottom-color: #999;
550
551     -moz-border-radius: 3px;
552     -webkit-border-radius: 3px;
553     border-radius: 3px;
554
555     -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
556     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
557     box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
558
559     background: #e4e4e4;
560     background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
561     background-image: -moz-linear-gradient(top, #ffffff, #e4e4e4);
562     background-image: -webkit-linear-gradient(top, #ffffff, #e4e4e4);
563     background-image: -o-linear-gradient(top, #ffffff, #e4e4e4);
564     background-image: -ms-linear-gradient(top, #ffffff, #e4e4e4);
565     background-image: linear-gradient(top, #ffffff, #e4e4e4);
566     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
567
568}
569
570span.cke_dialog_ui_button
571{
572     padding: 0 12px;
573}
574
575a.cke_dialog_ui_button:hover
576{
577     border-color: #9e9e9e;
578
579     background: #ccc;
580     background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ccc));
581     background-image: -moz-linear-gradient(top, #f2f2f2, #ccc);
582     background-image: -webkit-linear-gradient(top, #f2f2f2, #ccc);
583     background-image: -o-linear-gradient(top, #f2f2f2, #ccc);
584     background-image: -ms-linear-gradient(top, #f2f2f2, #ccc);
585     background-image: linear-gradient(top, #f2f2f2, #ccc);
586     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
587}
588
589/*   :focus/:active styles for dialog buttons: regular and footer. */
590a.cke_dialog_ui_button:focus,
591a.cke_dialog_ui_button:active
592{
593     border-color: #969696;
594     outline: none;
595     -moz-box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
596     -webkit-box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
597     box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
598}
599
600.cke_hc a.cke_dialog_ui_button:hover,
601.cke_hc a.cke_dialog_ui_button:focus,
602.cke_hc a.cke_dialog_ui_button:active
603{
604     border: 3px solid;
605     padding-top: 1px;
606     padding-bottom: 1px;
607}
608
609.cke_hc a.cke_dialog_ui_button:hover span,
610.cke_hc a.cke_dialog_ui_button:focus span,
611.cke_hc a.cke_dialog_ui_button:active span
612{
613     padding-left: 10px;
614     padding-right: 10px;
615}
616
617/*
618a.cke_dialog_ui_button[style*="width"]
619{
620     display: block !important;
621     width: auto !important;
622}
623*/
624/* The inner part of the button (both in dialog tabs and dialog footer). */
625.cke_dialog_footer_buttons a.cke_dialog_ui_button span
626{
627     color: inherit;
628     font-size: 12px;
629     font-weight: bold;
630     line-height: 20px;
631}
632
633/* Special class appended to the Ok button. */
634a.cke_dialog_ui_button_ok
635{
636     color: #fff;
637     text-shadow: 0 -1px 0 #55830c;
638     border-color: #62a60a #62a60a #4d9200;
639
640     background: #69b10b;
641     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9ad717), to(#69b10b));
642     background-image: -webkit-linear-gradient(top, #9ad717, #69b10b);
643     background-image: -o-linear-gradient(top, #9ad717, #69b10b);
644     background-image: linear-gradient(to bottom, #9ad717, #69b10b);
645     background-image: -moz-linear-gradient(top, #9ad717, #69b10b);
646     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#9ad717', endColorstr='#69b10b');
647}
648
649a.cke_dialog_ui_button_ok:hover
650{
651     border-color: #5b9909 #5b9909 #478500;
652
653     background: #88be14;
654     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88be14), color-stop(100%,#5d9c0a));
655     background: -webkit-linear-gradient(top, #88be14 0%,#5d9c0a 100%);
656     background: -o-linear-gradient(top, #88be14 0%,#5d9c0a 100%);
657     background: linear-gradient(to bottom, #88be14 0%,#5d9c0a 100%);
658     background: -moz-linear-gradient(top, #88be14 0%, #5d9c0a 100%);
659     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88be14', endColorstr='#5d9c0a',GradientType=0 );
660}
661
662/* Default text shadow used for inner parts of all dialog buttons (both in dialog tabs and dialog footer). */
663a.cke_dialog_ui_button span
664{
665     text-shadow: 0 1px 0 #fff;
666}
667
668/* Text shadow used for inner part of OK dialog button in footer. */
669a.cke_dialog_ui_button_ok span
670{
671     text-shadow: 0 -1px 0 #55830c;
672}
673
674span.cke_dialog_ui_button
675{
676     cursor: pointer;
677}
678
679/*   :focus/:active styles for dialog footer buttons (ok & cancel) */
680a.cke_dialog_ui_button_ok:focus,
681a.cke_dialog_ui_button_ok:active,
682a.cke_dialog_ui_button_cancel:focus,
683a.cke_dialog_ui_button_cancel:active
684{
685     border-width: 2px;
686     padding: 2px 0;
687}
688
689a.cke_dialog_ui_button_ok:focus,
690a.cke_dialog_ui_button_ok:active
691{
692     border-color: #568C0A;
693}
694
695/*   :focus/:active styles for dialog footer buttons (ok & cancel) spans */
696a.cke_dialog_ui_button_ok:focus span,
697a.cke_dialog_ui_button_ok:active span,
698a.cke_dialog_ui_button_cancel:focus span,
699a.cke_dialog_ui_button_cancel:active span
700{
701     padding: 0 11px;    /* Thick button border must be compensated. */
702}
703
704/* A special container that holds the footer buttons. */
705.cke_dialog_footer_buttons
706{
707     display: inline-table;
708     margin: 5px;
709     width: auto;
710     position: relative;
711     vertical-align: middle;
712}
713
714/*
715Styles for other dialog element types.
716*/
717
718div.cke_dialog_ui_input_select
719{
720     display: table;
721}
722
723select.cke_dialog_ui_input_select
724{
725     height: 24px;
726     line-height: 24px;
727
728     background-color: #fff;
729     border: 1px solid #c9cccf;
730     border-top-color: #aeb3b9;
731     padding: 2px 6px;
732
733     outline: none;
734
735     -moz-border-radius: 3px;
736     -webkit-border-radius: 3px;
737     border-radius: 3px;
738
739     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
740     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
741     box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
742}
743
744.cke_dialog_ui_input_file
745{
746     width: 100%;
747     height: 25px;
748}
749
750.cke_hc .cke_dialog_ui_labeled_content input:focus,
751.cke_hc .cke_dialog_ui_labeled_content select:focus,
752.cke_hc .cke_dialog_ui_labeled_content textarea:focus
753{
754     outline: 1px dotted;
755}
756
757/*
758 * Some utility CSS classes for dialog authors.
759 */
760.cke_dialog .cke_dark_background
761{
762     background-color: #DEDEDE;
763}
764
765.cke_dialog .cke_light_background
766{
767     background-color: #EBEBEB;
768}
769
770.cke_dialog .cke_centered
771{
772     text-align: center;
773}
774
775.cke_dialog a.cke_btn_reset
776{
777    @include icons-sprite(refresh);
778    float: right;
779    width: 16px;
780    height: 16px;
781    border: 1px none;
782    font-size: 1px;
783}
784
785.cke_hidpi .cke_dialog a.cke_btn_reset {
786    @include hidpi-sprite(refresh);
787}
788
789.cke_rtl .cke_dialog a.cke_btn_reset {
790    float: left;
791}
792
793.cke_dialog a.cke_btn_locked,
794.cke_dialog a.cke_btn_unlocked
795{
796     float: left;
797     width: 16px;
798     height: 16px;
799     background-repeat: no-repeat;
800     border: none 1px;
801     font-size: 1px;
802}
803
804.cke_dialog a.cke_btn_locked .cke_icon
805{
806     display: none;
807}
808
809.cke_rtl .cke_dialog a.cke_btn_locked,
810.cke_rtl .cke_dialog a.cke_btn_unlocked
811{
812     float: right;
813}
814
815.cke_dialog a.cke_btn_locked {
816    @include icons-sprite(lock);
817}
818
819.cke_dialog a.cke_btn_unlocked {
820    @include icons-sprite(lock-open);
821}
822
823.cke_hidpi .cke_dialog a.cke_btn_unlocked,
824.cke_hidpi .cke_dialog a.cke_btn_locked {
825    background-size: 16px;
826}
827
828.cke_hidpi .cke_dialog a.cke_btn_locked {
829    @include hidpi-sprite(lock);
830}
831
832.cke_hidpi .cke_dialog a.cke_btn_unlocked {
833    @include hidpi-sprite(lock-open);
834}
835
836.cke_dialog .cke_btn_over {
837    border: outset 1px;
838    cursor: pointer;
839}
840
841/*
842The rest of the file contains style used on several common plugins. There is a
843tendency that these will be moved to the plugins code in the future.
844*/
845
846.cke_dialog  .ImagePreviewBox
847{
848     border: 2px ridge black;
849     overflow: scroll;
850     height: 200px;
851     width: 300px;
852     padding: 2px;
853     background-color: white;
854}
855
856.cke_dialog .ImagePreviewBox table td
857{
858     white-space: normal;
859}
860
861.cke_dialog  .ImagePreviewLoader
862{
863     position: absolute;
864     white-space: normal;
865     overflow: hidden;
866     height: 160px;
867     width: 230px;
868     margin: 2px;
869     padding: 2px;
870     opacity: 0.9;
871     filter: alpha(opacity = 90);
872
873     background-color: #e4e4e4;
874}
875
876.cke_dialog .FlashPreviewBox
877{
878     white-space: normal;
879     border: 2px ridge black;
880     overflow: auto;
881     height: 160px;
882     width: 390px;
883     padding: 2px;
884     background-color: white;
885}
886
887.cke_dialog .cke_pastetext
888{
889     width: 346px;
890     height: 170px;
891}
892
893.cke_dialog .cke_pastetext textarea
894{
895     width: 340px;
896     height: 170px;
897     resize: none;
898}
899
900.cke_dialog iframe.cke_pasteframe
901{
902     width: 346px;
903     height: 130px;
904     background-color: white;
905     border: 1px solid #aeb3b9;
906
907     -moz-border-radius: 3px;
908     -webkit-border-radius: 3px;
909     border-radius: 3px;
910}
911
912.cke_dialog .cke_hand
913{
914     cursor: pointer;
915}
916
917.cke_disabled
918{
919     color: #a0a0a0;
920}
921
922.cke_dialog_body .cke_label
923{
924     display: none;
925}
926
927.cke_dialog_body label
928{
929     display: inline;
930     margin-bottom: auto;
931     cursor: default;
932}
933
934.cke_dialog_body label.cke_required
935{
936     font-weight: bold;
937}
938
939a.cke_smile
940{
941     overflow: hidden;
942     display: block;
943     text-align: center;
944     padding: 0.3em 0;
945}
946
947a.cke_smile img
948{
949     vertical-align: middle;
950}
951
952a.cke_specialchar
953{
954     cursor: inherit;
955     display: block;
956     height: 1.25em;
957     padding: 0.2em 0.3em;
958     text-align: center;
959}
960
961a.cke_smile,
962a.cke_specialchar
963{
964     border: 1px solid transparent;
965}
966
967a.cke_smile:hover,
968a.cke_smile:focus,
969a.cke_smile:active,
970a.cke_specialchar:hover,
971a.cke_specialchar:focus,
972a.cke_specialchar:active
973{
974     background: #fff;
975     outline: 0;
976}
977
978a.cke_smile:hover,
979a.cke_specialchar:hover
980{
981     border-color: #888;
982}
983
984a.cke_smile:focus,
985a.cke_smile:active,
986a.cke_specialchar:focus,
987a.cke_specialchar:active
988{
989     border-color: #139FF7;
990}
991
992/**
993 * Styles specific to "cellProperties" dialog.
994 */
995
996.cke_dialog_contents a.colorChooser
997{
998     display: block;
999     margin-top: 6px;
1000     margin-left: 10px;
1001     width: 80px;
1002}
1003
1004.cke_rtl .cke_dialog_contents a.colorChooser
1005{
1006     margin-right: 10px;
1007}
1008
1009/* Compensate focus outline for some input elements. (#6200) */
1010.cke_dialog_ui_checkbox_input:focus,
1011.cke_dialog_ui_radio_input:focus,
1012.cke_btn_over
1013{
1014     outline: 1px dotted #696969;
1015}
1016
1017.cke_iframe_shim
1018{
1019     display: block;
1020     position: absolute;
1021     top: 0;
1022     left: 0;
1023     z-index: -1;
1024     filter: alpha(opacity = 0);
1025     width: 100%;
1026     height: 100%;
1027}
Note: See TracBrowser for help on using the repository browser.

Sites map