Dotclear

source: plugins/dcCKEditor/js/ckeditor-skins/dotclear/sass/_dialog.scss @ 2738:d6b4c5ac9b33

Revision 2738:d6b4c5ac9b33, 23.2 KB checked in by Nicolas <nikrou77@…>, 10 years ago (diff)

Integrate dcCKEditor to distribution

Line 
1/* dialog modal */
2
3.cke_dialog
4{
5     /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
6          showing an unstyled dialog by hidding it. Here, we restore its visibility. */
7     visibility: visible;
8}
9
10/* The inner boundary container. */
11.cke_dialog_body
12{
13     z-index: 1;
14     background: #eaeaea;
15     border: 1px solid #b2b2b2;
16     border-bottom-color: #999;
17
18     -moz-border-radius: 3px;
19     -webkit-border-radius: 3px;
20     border-radius: 3px;
21
22     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
23     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
24     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
25}
26
27/* This one is required by Firefox 3.6. Without it,
28   dialog tabs and resizer float outside of the dialog.
29   Although this rule doesn't seem to break anything on other
30   browsers, it doesn't work with broken jQueryUI - #9851. */
31.cke_browser_gecko19 .cke_dialog_body
32{
33     position: relative;
34}
35
36/* Due to our reset we have to recover the styles of some elements. */
37.cke_dialog strong
38{
39     font-weight: bold;
40}
41
42/* The dialog title. */
43.cke_dialog_title
44{
45     font-weight: bold;
46     font-size: 13px;
47     cursor: move;
48     position: relative;
49
50     color: #474747;
51     text-shadow: 0 1px 0 rgba(255,255,255,.75);
52
53     border-bottom: 1px solid #999;
54     padding: 6px 10px;
55
56     -moz-border-radius: 2px 2px 0 0;
57     -webkit-border-radius: 2px 2px 0 0;
58     border-radius: 2px 2px 0 0;
59
60     -moz-box-shadow: 0 1px 0 #fff inset;
61     -webkit-box-shadow: 0 1px 0 #fff inset;
62     box-shadow: 0 1px 0 #fff inset;
63
64     background: #cfd1cf;
65     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#cfd1cf));
66     background-image: -moz-linear-gradient(top, #f5f5f5, #cfd1cf);
67     background-image: -webkit-linear-gradient(top, #f5f5f5, #cfd1cf);
68     background-image: -o-linear-gradient(top, #f5f5f5, #cfd1cf);
69     background-image: -ms-linear-gradient(top, #f5f5f5, #cfd1cf);
70     background-image: linear-gradient(top, #f5f5f5, #cfd1cf);
71     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
72}
73
74/* The outer part of the dialog contants, which contains the contents body
75   and the footer. */
76.cke_dialog_contents
77{
78     background-color: #fff;
79     overflow: auto;
80     padding: 15px 10px 5px 10px;
81     margin-top: 30px;
82     border-top: 1px solid #bfbfbf;
83
84     -moz-border-radius: 0 0 3px 3px;
85     -webkit-border-radius: 0 0 3px 3px;
86     border-radius: 0 0 3px 3px;
87}
88
89/* The contents body part, which will hold all elements available in the dialog. */
90.cke_dialog_contents_body
91{
92     overflow: auto;
93     padding: 17px 10px 5px 10px;
94     margin-top: 22px;
95}
96
97/* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
98   well as a resize handler. */
99.cke_dialog_footer
100{
101     text-align: right;
102     position: relative;
103
104     border: none;
105     outline: 1px solid #bfbfbf;
106
107     -moz-box-shadow: 0 1px 0 #fff inset;
108     -webkit-box-shadow: 0 1px 0 #fff inset;
109     box-shadow: 0 1px 0 #fff inset;
110
111     -moz-border-radius: 0 0 2px 2px;
112     -webkit-border-radius: 0 0 2px 2px;
113     border-radius: 0 0 2px 2px;
114
115     background: #cfd1cf;
116     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cfd1cf));
117     background-image: -moz-linear-gradient(top, #ebebeb, #cfd1cf);
118     background-image: -webkit-linear-gradient(top, #ebebeb, #cfd1cf);
119     background-image: -o-linear-gradient(top, #ebebeb, #cfd1cf);
120     background-image: -ms-linear-gradient(top, #ebebeb, #cfd1cf);
121     background-image: linear-gradient(top, #ebebeb, #cfd1cf);
122     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
123}
124
125.cke_rtl .cke_dialog_footer
126{
127     text-align: left;
128}
129
130.cke_hc .cke_dialog_footer
131{
132     outline: none;
133     border-top: 1px solid #fff;
134}
135
136.cke_dialog .cke_resizer
137{
138     margin-top: 22px;
139}
140
141.cke_dialog .cke_resizer_rtl
142{
143     margin-left: 5px;
144}
145
146.cke_dialog .cke_resizer_ltr
147{
148     margin-right: 5px;
149}
150
151/*
152Dialog tabs
153-------------
154
155Tabs are presented on some of the dialogs to make it possible to have its
156contents split on different groups, visible one after the other.
157
158The main element that holds the tabs can be made hidden, in case of no tabs
159available.
160
161The following is the visual representation of the tabs block:
162
163+-- .cke_dialog_tabs ------------------------------------+
164|  +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ...   |
165|  |                     | |                     |       |
166|  +---------------------+ +---------------------+       |
167+--------------------------------------------------------+
168
169The .cke_dialog_tab_selected class is appended to the active tab.
170*/
171
172/* The main tabs container. */
173.cke_dialog_tabs
174{
175     height: 24px;
176     display: inline-block;
177     margin: 5px 0 0;
178     position: absolute;
179     z-index: 2;
180     left: 10px;
181}
182
183.cke_rtl .cke_dialog_tabs
184{
185     right: 10px;
186}
187
188/* A single tab (an <a> element). */
189a.cke_dialog_tab
190{
191
192     height: 16px;
193     padding: 4px 8px;
194     margin-right: 3px;
195     display: inline-block;
196     cursor: pointer;
197     line-height: 16px;
198     outline: none;
199     color: #595959;
200     border: 1px solid #bfbfbf;
201
202     -moz-border-radius: 3px 3px 0 0;
203     -webkit-border-radius: 3px 3px 0 0;
204     border-radius: 3px 3px 0 0;
205
206     background: #d4d4d4;
207     background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ededed));
208     background-image: -moz-linear-gradient(top, #fafafa, #ededed);
209     background-image: -webkit-linear-gradient(top, #fafafa, #ededed);
210     background-image: -o-linear-gradient(top, #fafafa, #ededed);
211     background-image: -ms-linear-gradient(top, #fafafa, #ededed);
212     background-image: linear-gradient(top, #fafafa, #ededed);
213     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fafafa', endColorstr='#ededed');
214}
215
216.cke_rtl a.cke_dialog_tab
217{
218     margin-right: 0;
219     margin-left: 3px;
220}
221
222/* A hover state of a regular inactive tab. */
223a.cke_dialog_tab:hover
224{
225     background: #ebebeb;
226     background: -moz-linear-gradient(top, #ebebeb 0%, #dfdfdf 100%);
227     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#dfdfdf));
228     background: -webkit-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
229     background: -o-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
230     background: -ms-linear-gradient(top, #ebebeb 0%,#dfdfdf 100%);
231     background: linear-gradient(to bottom, #ebebeb 0%,#dfdfdf 100%);
232     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#dfdfdf',GradientType=0 );
233}
234
235a.cke_dialog_tab_selected
236{
237     background: #fff;
238     color: #383838;
239     border-bottom-color: #fff;
240     cursor: default;
241     filter: none;
242}
243
244/* A hover state for selected tab. */
245a.cke_dialog_tab_selected:hover
246{
247     background: #ededed;
248     background: -moz-linear-gradient(top, #ededed 0%, #ffffff 100%);
249     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
250     background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 100%);
251     background: -o-linear-gradient(top, #ededed 0%,#ffffff 100%);
252     background: -ms-linear-gradient(top, #ededed 0%,#ffffff 100%);
253     background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
254     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
255}
256
257.cke_hc a.cke_dialog_tab:hover,
258.cke_hc a.cke_dialog_tab_selected
259{
260     border: 3px solid;
261     padding: 2px 6px;
262}
263
264a.cke_dialog_tab_disabled
265{
266     color: #bababa;
267     cursor: default;
268}
269
270/* The .cke_single_page class is appended to the dialog outer element in case
271   of dialogs that has no tabs. */
272.cke_single_page .cke_dialog_tabs
273{
274     display: none;
275}
276
277.cke_single_page .cke_dialog_contents
278{
279     padding-top: 5px;
280     margin-top: 0;
281     border-top: none;
282}
283
284/* The close button at the top of the dialog. */
285
286.cke_dialog_close_button
287{
288     background-image: url(images/close.png);
289     background-repeat: no-repeat;
290     background-position: 0 0;
291     position: absolute;
292     cursor: pointer;
293     text-align: center;
294     height: 20px;
295     width: 20px;
296     top: 5px;
297     z-index: 5;
298}
299
300.cke_hidpi .cke_dialog_close_button {
301     background-image: url(images/hidpi/close.png);
302     background-size: 16px;
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     float: right;
778     background: url(images/refresh.png) top left no-repeat;
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     background-size: 16px;
787     background-image: url(images/hidpi/refresh.png);
788}
789
790.cke_rtl .cke_dialog a.cke_btn_reset
791{
792     float: left;
793}
794
795.cke_dialog a.cke_btn_locked,
796.cke_dialog a.cke_btn_unlocked
797{
798     float: left;
799     width: 16px;
800     height: 16px;
801     background-repeat: no-repeat;
802     border: none 1px;
803     font-size: 1px;
804}
805
806.cke_dialog a.cke_btn_locked .cke_icon
807{
808     display: none;
809}
810
811.cke_rtl .cke_dialog a.cke_btn_locked,
812.cke_rtl .cke_dialog a.cke_btn_unlocked
813{
814     float: right;
815}
816
817.cke_dialog a.cke_btn_locked
818{
819     background-image: url(images/lock.png);
820}
821
822.cke_dialog a.cke_btn_unlocked
823{
824     background-image: url(images/lock-open.png);
825}
826
827.cke_hidpi .cke_dialog a.cke_btn_unlocked,
828.cke_hidpi .cke_dialog a.cke_btn_locked {
829     background-size: 16px;
830}
831
832.cke_hidpi .cke_dialog a.cke_btn_locked {
833     background-image: url(images/hidpi/lock.png);
834}
835
836.cke_hidpi .cke_dialog a.cke_btn_unlocked {
837     background-image: url(images/hidpi/lock-open.png);
838}
839
840.cke_dialog .cke_btn_over
841{
842     border: outset 1px;
843     cursor: pointer;
844}
845
846/*
847The rest of the file contains style used on several common plugins. There is a
848tendency that these will be moved to the plugins code in the future.
849*/
850
851.cke_dialog  .ImagePreviewBox
852{
853     border: 2px ridge black;
854     overflow: scroll;
855     height: 200px;
856     width: 300px;
857     padding: 2px;
858     background-color: white;
859}
860
861.cke_dialog .ImagePreviewBox table td
862{
863     white-space: normal;
864}
865
866.cke_dialog  .ImagePreviewLoader
867{
868     position: absolute;
869     white-space: normal;
870     overflow: hidden;
871     height: 160px;
872     width: 230px;
873     margin: 2px;
874     padding: 2px;
875     opacity: 0.9;
876     filter: alpha(opacity = 90);
877
878     background-color: #e4e4e4;
879}
880
881.cke_dialog .FlashPreviewBox
882{
883     white-space: normal;
884     border: 2px ridge black;
885     overflow: auto;
886     height: 160px;
887     width: 390px;
888     padding: 2px;
889     background-color: white;
890}
891
892.cke_dialog .cke_pastetext
893{
894     width: 346px;
895     height: 170px;
896}
897
898.cke_dialog .cke_pastetext textarea
899{
900     width: 340px;
901     height: 170px;
902     resize: none;
903}
904
905.cke_dialog iframe.cke_pasteframe
906{
907     width: 346px;
908     height: 130px;
909     background-color: white;
910     border: 1px solid #aeb3b9;
911
912     -moz-border-radius: 3px;
913     -webkit-border-radius: 3px;
914     border-radius: 3px;
915}
916
917.cke_dialog .cke_hand
918{
919     cursor: pointer;
920}
921
922.cke_disabled
923{
924     color: #a0a0a0;
925}
926
927.cke_dialog_body .cke_label
928{
929     display: none;
930}
931
932.cke_dialog_body label
933{
934     display: inline;
935     margin-bottom: auto;
936     cursor: default;
937}
938
939.cke_dialog_body label.cke_required
940{
941     font-weight: bold;
942}
943
944a.cke_smile
945{
946     overflow: hidden;
947     display: block;
948     text-align: center;
949     padding: 0.3em 0;
950}
951
952a.cke_smile img
953{
954     vertical-align: middle;
955}
956
957a.cke_specialchar
958{
959     cursor: inherit;
960     display: block;
961     height: 1.25em;
962     padding: 0.2em 0.3em;
963     text-align: center;
964}
965
966a.cke_smile,
967a.cke_specialchar
968{
969     border: 1px solid transparent;
970}
971
972a.cke_smile:hover,
973a.cke_smile:focus,
974a.cke_smile:active,
975a.cke_specialchar:hover,
976a.cke_specialchar:focus,
977a.cke_specialchar:active
978{
979     background: #fff;
980     outline: 0;
981}
982
983a.cke_smile:hover,
984a.cke_specialchar:hover
985{
986     border-color: #888;
987}
988
989a.cke_smile:focus,
990a.cke_smile:active,
991a.cke_specialchar:focus,
992a.cke_specialchar:active
993{
994     border-color: #139FF7;
995}
996
997/**
998 * Styles specific to "cellProperties" dialog.
999 */
1000
1001.cke_dialog_contents a.colorChooser
1002{
1003     display: block;
1004     margin-top: 6px;
1005     margin-left: 10px;
1006     width: 80px;
1007}
1008
1009.cke_rtl .cke_dialog_contents a.colorChooser
1010{
1011     margin-right: 10px;
1012}
1013
1014/* Compensate focus outline for some input elements. (#6200) */
1015.cke_dialog_ui_checkbox_input:focus,
1016.cke_dialog_ui_radio_input:focus,
1017.cke_btn_over
1018{
1019     outline: 1px dotted #696969;
1020}
1021
1022.cke_iframe_shim
1023{
1024     display: block;
1025     position: absolute;
1026     top: 0;
1027     left: 0;
1028     z-index: -1;
1029     filter: alpha(opacity = 0);
1030     width: 100%;
1031     height: 100%;
1032}
Note: See TracBrowser for help on using the repository browser.

Sites map