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