2 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.md or http://ckeditor.com/license
10 This file styles dialogs and all widgets available inside of it (tabs, buttons,
13 Dialogs are a complex system because they're very flexible. The CKEditor API
14 makes it easy to create and customize dialogs by code, by making use of several
15 different widgets inside its contents.
17 All dialogs share a main dialog strucuture, which can be visually represented
20 +-- .cke_dialog -------------------------------------------------+
21 | +-- .cke_dialog_body ----------------------------------------+ |
22 | | +-- .cke_dialog_title --+ +-- .cke_dialog_close_button --+ | |
24 | | +-----------------------+ +------------------------------+ | |
25 | | +-- .cke_dialog_tabs ------------------------------------+ | |
27 | | +--------------------------------------------------------+ | |
28 | | +-- .cke_dialog_contents --------------------------------+ | |
29 | | | +-- .cke_dialog_contents_body -----------------------+ | | |
31 | | | +----------------------------------------------------+ | | |
32 | | | +-- .cke_dialog_footer ------------------------------+ | | |
34 | | | +----------------------------------------------------+ | | |
35 | | +--------------------------------------------------------+ | |
36 | +------------------------------------------------------------+ |
37 +----------------------------------------------------------------+
39 Comments in this file will give more details about each of the above blocks.
42 /* The outer container of the dialog. */
45 /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
46 showing an unstyled dialog by hidding it. Here, we restore its visibility. */
50 /* The inner boundary container. */
55 border: 1px solid
#b2b2b2;
56 border-bottom-color: #999;
58 box-shadow: 0 0 3px rgba
(0, 0, 0, .15);
61 /* Due to our reset we have to recover the styles of some elements. */
67 /* The dialog title. */
76 text-shadow: 0 1px 0 rgba
(255,255,255,.75);
78 border-bottom: 1px solid
#999;
81 border-radius: 2px 2px 0 0;
82 box-shadow: 0 1px 0 #fff inset
;
85 background-image: linear-gradient
(to bottom
, #f5f5f5, #cfd1cf);
86 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#f5f5f5', endColorstr
='#cfd1cf');
99 border-top: 2px solid rgba
(102, 102, 102, 0.2);
100 border-right: 2px solid rgba
(102, 102, 102, 0.2);
101 border-bottom: 2px solid rgba
(102, 102, 102, 0.2);
102 border-left: 2px solid rgba
(102, 102, 102, 1);
104 -webkit-animation: dialog_spinner
1s infinite linear
;
105 animation: dialog_spinner
1s infinite linear
;
108 /* A GIF fallback for IE8 and IE9 which does not support CSS animations. */
109 .cke_browser_ie8
.cke_dialog_spinner
,
110 .cke_browser_ie9
.cke_dialog_spinner
112 background: url
(images/spinner.gif) center top no-repeat
;
118 @-webkit-keyframes dialog_spinner
121 -webkit-transform: rotate
(0deg);
122 transform: rotate
(0deg);
125 -webkit-transform: rotate
(360deg);
126 transform: rotate
(360deg);
130 @keyframes dialog_spinner
133 -webkit-transform: rotate
(0deg);
134 transform: rotate
(0deg);
137 -webkit-transform: rotate
(360deg);
138 transform: rotate
(360deg);
142 /* The outer part of the dialog contants, which contains the contents body
146 background-color: #fff;
148 padding: 15px 10px 5px 10px;
150 border-top: 1px solid
#bfbfbf;
151 border-radius: 0 0 3px 3px;
154 /* The contents body part, which will hold all elements available in the dialog. */
155 .cke_dialog_contents_body
158 padding: 17px 10px 5px 10px;
162 /* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
163 well as a resize handler. */
169 outline: 1px solid
#bfbfbf;
170 box-shadow: 0 1px 0 #fff inset
;
171 border-radius: 0 0 2px 2px;
173 background-image: linear-gradient
(to bottom
, #ebebeb, #cfd1cf);
174 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#ebebeb', endColorstr
='#cfd1cf');
177 .cke_rtl
.cke_dialog_footer
182 .cke_hc
.cke_dialog_footer
185 border-top: 1px solid
#fff;
188 .cke_dialog
.cke_resizer
193 .cke_dialog
.cke_resizer_rtl
198 .cke_dialog
.cke_resizer_ltr
207 Tabs are presented on some of the dialogs to make it possible to have its
208 contents split on different groups, visible one after the other.
210 The main element that holds the tabs can be made hidden, in case of no tabs
213 The following is the visual representation of the tabs block:
215 +-- .cke_dialog_tabs ------------------------------------+
216 | +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ... |
218 | +---------------------+ +---------------------+ |
219 +--------------------------------------------------------+
221 The .cke_dialog_tab_selected class is appended to the active tab.
224 /* The main tabs container. */
228 display: inline-block
;
235 .cke_rtl
.cke_dialog_tabs
240 /* A single tab (an <a> element). */
247 display: inline-block
;
252 border: 1px solid
#bfbfbf;
254 border-radius: 3px 3px 0 0;
257 background-image: linear-gradient
(to bottom
, #fafafa, #ededed);
258 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#fafafa', endColorstr
='#ededed');
261 .cke_rtl a
.cke_dialog_tab
267 /* A hover state of a regular inactive tab. */
268 a
.cke_dialog_tab:hover
,
269 a
.cke_dialog_tab:focus
272 background: linear-gradient
(to bottom
, #ebebeb 0%,#dfdfdf 100%);
273 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#ebebeb', endColorstr
='#dfdfdf',GradientType
=0 );
276 a
.cke_dialog_tab_selected
280 border-bottom-color: #fff;
285 /* A hover state for selected tab. */
286 a
.cke_dialog_tab_selected:hover
,
287 a
.cke_dialog_tab_selected:focus
,
290 background: linear-gradient
(to bottom
, #ededed 0%,#ffffff 100%);
291 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#ededed', endColorstr
='#ffffff',GradientType
=0 );
294 .cke_hc a
.cke_dialog_tab:hover
,
295 .cke_hc a
.cke_dialog_tab:focus
,
296 .cke_hc a
.cke_dialog_tab_selected
302 a
.cke_dialog_tab_disabled
308 /* The .cke_single_page class is appended to the dialog outer element in case
309 of dialogs that has no tabs. */
310 .cke_single_page
.cke_dialog_tabs
315 .cke_single_page
.cke_dialog_contents
322 /* The close button at the top of the dialog. */
324 a
.cke_dialog_close_button
326 background-image: url
(images/close.png);
327 background-repeat: no-repeat
;
328 background-position: 50%;
337 filter: alpha
(opacity
= 80);
340 .cke_dialog_close_button:hover
343 filter: alpha
(opacity
= 100);
346 .cke_hidpi
.cke_dialog_close_button
348 background-image: url
(images/hidpi/close.png);
349 background-size: 16px;
352 .cke_dialog_close_button span
357 .cke_hc
.cke_dialog_close_button span
366 .cke_ltr
.cke_dialog_close_button
371 .cke_rtl
.cke_dialog_close_button
376 .cke_dialog_close_button
385 The remaining styles define the UI elements that can be used inside dialog
388 Most of the UI elements on dialogs contain a textual label. All of them share
389 the same labelling structure, having the label text inside an element with
390 .cke_dialog_ui_labeled_label and the element specific part inside the
391 .cke_dialog_ui_labeled_content class.
394 /* If an element is supposed to be disabled, the .cke_disabled class is
396 div
.cke_disabled
.cke_dialog_ui_labeled_content div
*
398 background-color: #ddd;
403 Horizontal-Box and Vertical-Box
404 ---------------------------------
406 There are basic layou element used by the editor to properly align elements in
407 the dialog. They're basically tables that have each cell filled by UI elements.
409 The following is the visual representation of a H-Box:
411 +-- .cke_dialog_ui_hbox --------------------------------------------------------------------------------+
412 | +-- .cke_dialog_ui_hbox_first --+ +-- .cke_dialog_ui_hbox_child --+ +-- .cke_dialog_ui_hbox_last --+ |
414 | +-------------------------------+ +-------------------------------+ +------------------------------+ |
415 +-------------------------------------------------------------------------------------------------------+
417 It is possible to have nested V/H-Boxes.
420 .cke_dialog_ui_vbox table
,
421 .cke_dialog_ui_hbox table
426 .cke_dialog_ui_vbox_child
436 .cke_dialog_ui_hbox_first
,
437 .cke_dialog_ui_hbox_child
,
438 .cke_dialog_ui_hbox_last
443 .cke_ltr
.cke_dialog_ui_hbox_first
,
444 .cke_ltr
.cke_dialog_ui_hbox_child
449 .cke_rtl
.cke_dialog_ui_hbox_first
,
450 .cke_rtl
.cke_dialog_ui_hbox_child
455 .cke_ltr
.cke_dialog_footer_buttons
.cke_dialog_ui_hbox_first
,
456 .cke_ltr
.cke_dialog_footer_buttons
.cke_dialog_ui_hbox_child
461 .cke_rtl
.cke_dialog_footer_buttons
.cke_dialog_ui_hbox_first
,
462 .cke_rtl
.cke_dialog_footer_buttons
.cke_dialog_ui_hbox_child
468 /* Applies to all labeled dialog fields */
469 .cke_hc div
.cke_dialog_ui_input_text
,
470 .cke_hc div
.cke_dialog_ui_input_password
,
471 .cke_hc div
.cke_dialog_ui_input_textarea
,
472 .cke_hc div
.cke_dialog_ui_input_select
,
473 .cke_hc div
.cke_dialog_ui_input_file
482 The basic text field to input text.
484 +-- .cke_dialog_ui_text --------------------------+
485 | +-- .cke_dialog_ui_labeled_label ------------+ |
487 | +--------------------------------------------+ |
488 | +-- .cke_dialog_ui_labeled_content ----------+ |
489 | | +-- div.cke_dialog_ui_input_text --------+ | |
490 | | | +-- input.cke_dialog_ui_input_text --+ | | |
492 | | | +------------------------------------+ | | |
493 | | +----------------------------------------+ | |
494 | +--------------------------------------------+ |
495 +-------------------------------------------------+
502 The textarea field to input larger text.
504 +-- .cke_dialog_ui_textarea --------------------------+
505 | +-- .cke_dialog_ui_labeled_label ----------------+ |
507 | +------------------------------------------------+ |
508 | +-- .cke_dialog_ui_labeled_content --------------+ |
509 | | +-- div.cke_dialog_ui_input_textarea --------+ | |
510 | | | +-- input.cke_dialog_ui_input_textarea --+ | | |
512 | | | +----------------------------------------+ | | |
513 | | +--------------------------------------------+ | |
514 | +------------------------------------------------+ |
515 +-----------------------------------------------------+
518 textarea
.cke_dialog_ui_input_textarea
524 input
.cke_dialog_ui_input_text
,
525 input
.cke_dialog_ui_input_password
,
526 textarea
.cke_dialog_ui_input_textarea
528 background-color: #fff;
529 border: 1px solid
#c9cccf;
530 border-top-color: #aeb3b9;
536 box-sizing: border-box
;
540 box-shadow: 0 1px 2px rgba
(0,0,0,.15) inset
;
543 input
.cke_dialog_ui_input_text:hover
,
544 input
.cke_dialog_ui_input_password:hover
,
545 textarea
.cke_dialog_ui_input_textarea:hover
547 border: 1px solid
#aeb3b9;
548 border-top-color: #a0a6ad;
551 input
.cke_dialog_ui_input_text:focus
,
552 input
.cke_dialog_ui_input_password:focus
,
553 textarea
.cke_dialog_ui_input_textarea:focus
,
554 select
.cke_dialog_ui_input_select:focus
557 border: 1px solid
#139ff7;
558 border-top-color: #1392e9;
565 The buttons used in the dialog footer or inside the contents.
567 +-- a.cke_dialog_ui_button -----------+
568 | +-- span.cke_dialog_ui_button --+ |
570 | +-------------------------------+ |
571 +-------------------------------------+
574 /* The outer part of the button. */
575 a
.cke_dialog_ui_button
577 display: inline-block
;
586 vertical-align: middle
;
589 border: 1px solid
#b6b6b6;
590 border-bottom-color: #999;
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
;
595 background-image: linear-gradient
(to bottom
, #ffffff, #e4e4e4);
596 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#ffffff', endColorstr
='#e4e4e4');
600 span
.cke_dialog_ui_button
605 a
.cke_dialog_ui_button:hover
607 border-color: #9e9e9e;
610 background-image: linear-gradient
(to bottom
, #f2f2f2, #ccc);
611 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#f2f2f2', endColorstr
='#cccccc');
614 /* :focus/:active styles for dialog buttons: regular and footer. */
615 a
.cke_dialog_ui_button:focus
,
616 a
.cke_dialog_ui_button:active
618 border-color: #969696;
620 box-shadow: 0 0 6px rgba
(0,0,0,.4) inset
;
623 .cke_hc a
.cke_dialog_ui_button:hover
,
624 .cke_hc a
.cke_dialog_ui_button:focus
,
625 .cke_hc a
.cke_dialog_ui_button:active
632 .cke_hc a
.cke_dialog_ui_button:hover span
,
633 .cke_hc a
.cke_dialog_ui_button:focus span
,
634 .cke_hc a
.cke_dialog_ui_button:active span
641 a.cke_dialog_ui_button[style*="width"]
643 display: block !important;
644 width: auto !important;
647 /* The inner part of the button (both in dialog tabs and dialog footer). */
648 .cke_dialog_footer_buttons a
.cke_dialog_ui_button span
657 /* Special class appended to the Ok button. */
658 a
.cke_dialog_ui_button_ok
661 text-shadow: 0 -1px 0 #55830c;
662 border-color: #62a60a #62a60a #4d9200;
665 background-image: linear-gradient
(to bottom
, #9ad717, #69b10b);
666 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#9ad717', endColorstr
='#69b10b');
669 a
.cke_dialog_ui_button_ok:hover
671 border-color: #5b9909 #5b9909 #478500;
674 background: linear-gradient
(to bottom
, #88be14 0%,#5d9c0a 100%);
675 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#88be14', endColorstr
='#5d9c0a',GradientType
=0 );
678 a
.cke_dialog_ui_button_ok
.cke_disabled
{
679 border-color: #7D9F51;
682 background-image: -webkit-gradient
(linear
, 0 0, 0 100%, from
(#B3D271), to
(#8DAD62));
683 background-image: -webkit-linear-gradient
(top
, #B3D271, #8DAD62);
684 background-image: -o-linear-gradient
(top
, #B3D271, #8DAD62);
685 background-image: linear-gradient
(to bottom
, #B3D271, #8DAD62);
686 background-image: -moz-linear-gradient
(top
, #B3D271, #8DAD62);
687 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#B3D271', endColorstr
='#8DAD62');
690 a
.cke_dialog_ui_button_ok
.cke_disabled span
{
694 /* Default text shadow used for inner parts of all dialog buttons (both in dialog tabs and dialog footer). */
695 a
.cke_dialog_ui_button span
697 text-shadow: 0 1px 0 #fff;
700 /* Text shadow used for inner part of OK dialog button in footer. */
701 a
.cke_dialog_ui_button_ok span
703 text-shadow: 0 -1px 0 #55830c;
706 span
.cke_dialog_ui_button
711 /* :focus/:active styles for dialog footer buttons (ok & cancel) */
712 a
.cke_dialog_ui_button_ok:focus
,
713 a
.cke_dialog_ui_button_ok:active
,
714 a
.cke_dialog_ui_button_cancel:focus
,
715 a
.cke_dialog_ui_button_cancel:active
721 a
.cke_dialog_ui_button_ok:focus
,
722 a
.cke_dialog_ui_button_ok:active
724 border-color: #568C0A;
727 a
.cke_dialog_ui_button_ok
.cke_disabled:focus
,
728 a
.cke_dialog_ui_button_ok
.cke_disabled:active
730 border-color: #6F8C49;
733 /* :focus/:active styles for dialog footer buttons (ok & cancel) spans */
734 a
.cke_dialog_ui_button_ok:focus span
,
735 a
.cke_dialog_ui_button_ok:active span
,
736 a
.cke_dialog_ui_button_cancel:focus span
,
737 a
.cke_dialog_ui_button_cancel:active span
739 padding: 0 11px; /* Thick button border must be compensated. */
742 /* A special container that holds the footer buttons. */
743 .cke_dialog_footer_buttons
745 display: inline-table
;
749 vertical-align: middle
;
753 Styles for other dialog element types.
756 div
.cke_dialog_ui_input_select
761 select
.cke_dialog_ui_input_select
766 background-color: #fff;
767 border: 1px solid
#c9cccf;
768 border-top-color: #aeb3b9;
769 padding: 3px 3px 3px 6px;
772 box-shadow: 0 1px 2px rgba
(0,0,0,.15) inset
;
775 .cke_dialog_ui_input_file
781 .cke_hc
.cke_dialog_ui_labeled_content
input:focus
,
782 .cke_hc
.cke_dialog_ui_labeled_content
select:focus
,
783 .cke_hc
.cke_dialog_ui_labeled_content
textarea:focus
789 * Some utility CSS classes for dialog authors.
791 .cke_dialog
.cke_dark_background
793 background-color: #DEDEDE;
796 .cke_dialog
.cke_light_background
798 background-color: #EBEBEB;
801 .cke_dialog
.cke_centered
806 .cke_dialog a
.cke_btn_reset
809 background: url
(images/refresh.png) top left no-repeat
;
816 .cke_hidpi .cke_dialog a.cke_btn_reset {
817 background-size: 16px;
818 background-image: url
(images/hidpi/refresh.png);
821 .cke_rtl
.cke_dialog a
.cke_btn_reset
826 .cke_dialog a
.cke_btn_locked
,
827 .cke_dialog a
.cke_btn_unlocked
832 background-repeat: no-repeat
;
837 .cke_dialog a
.cke_btn_locked
.cke_icon
842 .cke_rtl
.cke_dialog a
.cke_btn_locked
,
843 .cke_rtl
.cke_dialog a
.cke_btn_unlocked
848 .cke_dialog a
.cke_btn_locked
850 background-image: url
(images/lock.png);
853 .cke_dialog a
.cke_btn_unlocked
855 background-image: url
(images
/lock-open
.png
);
858 .cke_hidpi
.cke_dialog a
.cke_btn_unlocked
,
859 .cke_hidpi .cke_dialog a.cke_btn_locked {
860 background-size: 16px;
863 .cke_hidpi .cke_dialog a.cke_btn_locked {
864 background-image: url
(images/hidpi/lock.png);
867 .cke_hidpi .cke_dialog a.cke_btn_unlocked {
868 background-image: url
(images
/hidpi
/lock-open
.png
);
871 .cke_dialog
.cke_btn_over
878 The rest of the file contains style used on several common plugins. There is a
879 tendency that these will be moved to the plugins code in the future.
882 .cke_dialog
.ImagePreviewBox
884 border: 2px ridge black
;
889 background-color: white
;
892 .cke_dialog
.ImagePreviewBox table td
897 .cke_dialog
.ImagePreviewLoader
907 filter: alpha
(opacity
= 90);
909 background-color: #e4e4e4;
912 .cke_dialog
.FlashPreviewBox
915 border: 2px ridge black
;
920 background-color: white
;
923 .cke_dialog
.cke_pastetext
929 .cke_dialog
.cke_pastetext textarea
936 .cke_dialog iframe
.cke_pasteframe
940 background-color: white
;
941 border: 1px solid
#aeb3b9;
945 .cke_dialog
.cke_hand
955 .cke_dialog_body
.cke_label
960 .cke_dialog_body label
967 .cke_dialog_body label
.cke_required
982 vertical-align: middle
;
990 padding: 0.2em 0.3em;
997 border: 1px solid transparent
;
1003 a
.cke_specialchar:hover
,
1004 a
.cke_specialchar:focus
,
1005 a
.cke_specialchar:active
1012 a
.cke_specialchar:hover
1019 a
.cke_specialchar:focus
,
1020 a
.cke_specialchar:active
1022 border-color: #139FF7;
1026 * Styles specific to "cellProperties" dialog.
1029 .cke_dialog_contents a
.colorChooser
1037 .cke_rtl
.cke_dialog_contents a
.colorChooser
1042 /* Compensate focus outline for some input elements. (#6200) */
1043 .cke_dialog_ui_checkbox_input:focus
,
1044 .cke_dialog_ui_radio_input:focus
,
1047 outline: 1px dotted
#696969;
1057 filter: alpha
(opacity
= 0);