2 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.md or http://ckeditor.com/license
7 mainui.css (part of editor.css)
8 =================================
10 This file styles the basic structure of the CKEditor user interface - the box
11 that holds everything.
13 CKEditor offers two main editing modes. The main UI blocks that compose these
16 For "Theme UI" mode, the one most generally used:
18 +-- .cke_chrome ----------------------+
19 |+-- .cke_inner ---------------------+|
20 || +-- .cke_top -------------------+ ||
22 || +-------------------------------+ ||
23 || +-- .cke_contents --------------+ ||
25 || +-------------------------------+ ||
26 || +-- .cke_bottom ----------------+ ||
28 || +-------------------------------+ ||
29 |+-----------------------------------+|
30 +-------------------------------------+
32 For "Inline Editing" mode:
34 +-- .cke_chrome .cke_float------------+
35 |+-- .cke_inner ---------------------+|
36 || +-- .cke_top -------------------+ ||
38 || +-------------------------------+ ||
39 |+-----------------------------------+|
40 +-------------------------------------+
42 Special outer level classes used in this file:
44 .cke_hc: Available when the editor is rendered on "High Contrast".
48 /* The outer boundary of the interface. */
51 /* This is <span>, so transform it into a block.*/
53 border: 1px solid
#b6b6b6;
56 box-shadow: 0 0 3px rgba
(0,0,0,.15);
59 /* The inner boundary of the interface. */
62 /* This is <span>, so transform it into a block.*/
65 -webkit-touch-callout: none
;
71 /* Added to the outer boundary of the UI when in inline editing,
72 when the UI is floating. */
75 /* Make white the space between the outer and the inner borders. */
81 /* As we don't have blocks following top (toolbar) we suppress the padding
82 as the toolbar defines its own margin. */
86 /* Make the main spaces enlarge to hold potentially floated content. */
91 /* These are <span>s, so transform them into blocks.*/
94 /* Ideally this should be "auto", but it shows scrollbars in IE7. */
100 /*border: 1px solid #b2b2b2;*/
101 border-bottom: 1px solid
#b6b6b6;
102 padding: 6px 8px 2px;
104 /* Allow breaking toolbars when in a narrow editor. (#9947) */
107 box-shadow: 0 1px 0 #fff inset
;
110 background-image: linear-gradient
(to bottom
, #f5f5f5, #cfd1cf);
111 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#f5f5f5', endColorstr
='#cfd1cf');
116 border: 1px solid
#b6b6b6;
117 border-bottom-color: #999;
122 padding: 6px 8px 2px;
125 border-top: 1px solid
#bfbfbf;
127 box-shadow: 0 1px 0 #fff inset
;
130 background-image: linear-gradient
(to bottom
, #ebebeb, #cfd1cf);
131 filter: progid:DXImageTransform
.Microsoft
.gradient
(gradientType
=0, startColorstr
='#ebebeb', endColorstr
='#cfd1cf');
134 /* On iOS we need to manually enable scrolling in the contents block. (#9945) */
135 .cke_browser_ios
.cke_contents
138 -webkit-overflow-scrolling: touch
;
141 /* The resizer is the small UI element that is rendered at the bottom right
142 part of the editor. It makes is possible to resize the editor UI. */
145 /* To avoid using images for the resizer, we create a small triangle,
146 using some CSS magic. */
153 border-width: 10px 10px 0 0;
154 border-color: transparent
#666 transparent transparent
;
155 border-style: dashed solid dashed dashed
;
158 vertical-align: bottom
;
162 /* A margin in case of no other element in the same container
163 to keep a distance to the bottom edge. */
166 box-shadow: 0 1px 0 rgba
(255,255,255,.3);
185 /* This class is added in RTL mode. This is a special case for the resizer
186 (usually the .cke_rtl class is used), because it may not necessarily be in
187 RTL mode if the main UI is RTL. It depends instead on the context where the
188 editor is inserted on. */
191 border-width: 10px 0 0 10px;
192 border-color: transparent transparent transparent
#A5A5A5;
193 border-style: dashed dashed dashed solid
;
202 /* The editing area (where users type) can be rendered as an editable <div>
203 element (e.g. divarea plugin). In that case, this is the class applied to
213 box-sizing: border-box
;